[Modal] bug when LayoutAnimation is not "consumed": NSInternalInconsistencyException: Could not locate shadow view with tag #x
See original GitHub issueIs this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
Environment: OS: macOS Sierra 10.12.6 Node: 7.8.0 Yarn: 1.0.1 npm: 4.2.0 Watchman: 4.7.0 Xcode: Xcode 9.0 Build version 9A235 Android Studio: Not Found
Packages: (wanted => installed) react: 16.0.0-alpha.12 => 16.0.0-alpha.12 react-native: 0.48.4 => 0.48.4
Target Platform: iOS (11)
Steps to Reproduce
- Show a
Modal
- Call an animation API (I can’t work out if this happens with
LayoutAnimation
only, or also withAnimated
) - Hide the
Modal
Expected Behavior
The Modal
should be correctly dismissed.
Actual Behavior
The Modal
is dismissed as expected, but then immediately shows again, and the app crashes with the above error in the simulator. In the Snack demo below and on a physical device, the app does not crash, but the interface is unresponsive. However, text inputs are still able to be focused (correctly bringing up the keyboard), and ScrollView
s are still scrollable.
Reproducible Demo
Issue Analytics
- State:
- Created 6 years ago
- Reactions:14
- Comments:15
Top Results From Across the Web
Bootstrap modal not displaying - Stack Overflow
fade - when I take them out, the modal shows up fine. When I include them, it won't show up at all. Could...
Read more >react-modal documentation
Use <ReactModal> tag inside your React CDN app. General Usage. The only required prop for the modal object is isOpen , which indicates...
Read more >Bootstrap Modal Dialog showing under Modal Background
I get the modal that pops up and gets moved, and I can access it. When I leave the view the extraneous, moved...
Read more >Modal | Components - BootstrapVue
Modals can be rendered in-place in the document (i.e. where the <b-modal> component is placed in the document) by setting the static prop...
Read more >How To Use Opacity and Transparency to Create a Modal in ...
When styling HTML with CSS, opacity can help soften a shadow, de-emphasize non-essential content during a specific task, or fade content in ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Ok a little more investigation: this appears to be confined to
LayoutAnimation
, and the bug goes away if the animation queued up byLayoutAnimation.<method>()
is actually used.Here is another repro which has two buttons,
Trigger animation (used)
andTrigger animation (unused)
: https://snack.expo.io/SkkjMxW2-If you tap the
used
one and dismiss the modal, the bug doesn’t happen.If you tap the
unused
one, it does.In conclusion: if you call a
LayoutAnimation
method but don’t then “consume” that animation, and then you dismiss aModal
, the queued animation gets applied to theModal
somehow and this results in theModal
getting shown again but being unresponsive because it is theoretically still “not shown”.This is new behaviour, and was not happening in
react-native v0.47
.Hi, This bug is still. preset in v0.53.0 or newer.