Recursive warning warnings when using Touchables Inspector #20200
Description
- Review the documentation: https://facebook.github.io/react-native
- Search for existing issues: https://github.com/facebook/react-native/issues
- Use the latest React Native release: https://github.com/facebook/react-native/releases
Environment
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-3615QM CPU @ 2.30GHz
Memory: 27.59 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.3 - /usr/local/bin/node
npm: 5.6.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 26.0.1, 26.0.3, 28.0.1
API Levels: 23, 26, 27, 28
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
Description
The issue is that yellow box warnings can be triggered recursively by other yellow box warnings not having a unique key prop. I discovered this issue in a app that has had significant development, and I decided to test the issue in a brand new React Native app. I started up a brand new React Native 0.56 project using react-native init
. When the app gets built onto an iOS (11.4) or Android (API 27) simulator, I can trigger the issue by toggling the inspector, tapping on any element, and then toggling on the "Touchables" feature of the inspector. The result I encounter is several yellow box warnings behind the inspector. Tapping on one of the warnings gives the following information:
From what I can tell, the warnings recursively generate themselves. The simulator gradually uses more and more memory, and I haven't been able to dismiss all of the warnings by tapping dismiss on each one individually. If I tap "Dismiss All", all of the warnings are dismissed, and memory usage goes back down. If I disable the "Touchables" feature of the inspector and attempt to replicate the issue in the same instance of the application, it simply doesn't occur. However, if I reload the app on the simulator, I'm able to repeatably reproduce the bug once each time I reload it. I've attached a gif reproducing the issue below.
Reproducible Demo
I ran react-native init
to create this project, and I made zero changes to it before demonstrating the bug. You can find the repo I used to produce this issue here: https://github.com/TheWildUnicorn/RNYellowBoxDemo
Thank you for your time and help!