ios: cannot dismiss Modal

[pritamsoni-hsr]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

When modal is dismissed the whole screen turns black. see video

React Native version:

System:
    OS: macOS 11.6
    CPU: (8) x64 Apple M1
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    npm: 7.6.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /opt/homebrew/bin/watchman
  IDEs:
    Android Studio: Not Found
    Xcode: 13.0/13A233 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_302 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: ~0.66.0 => 0.66.0
    react-native-macos: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. use this code with react native 0.66 on iOS

RCTModalHostViewController is what's blocking the screen

.

[Hannes-Endare]

Having the same problem.

[Miraj98]

Yep, facing the same issue. I am on react-native version 0.65.1

[pritamsoni-hsr]

replaced all the RCTModal* files with 0.63(which was working), this RCTModalManager files seems to be new, which has _shouldEmit state and stopObserving method, tried to remove the boolean check from this statement stil not working

[superguineapig]

I just encountered this on an upgrade from 0.64.1 -> 0.66.0 (iOS 11 - 15 simulator). Traced it down to a 3rd party component that is using a transparent Modal under the hood.

In this case it's even more insidious since the modal is set as transparent; Once displayed the modal's view never dismisses, and it swallows all touch events on the entire screen rendering the app effectively frozen.

An experimental attempt to pass through a pointerEvents: 'box-none' prop had no effect as a workaround.

However, When in the simulator AND debugging (w/chrome; flipper is not enabled in my project) is active, the Modal dismisses properly.

[effektsvk]

I had similar issue, but I'm using react-native-modal. After dismissing, the Modal also changed to transparent and only found it thanks to Xcode's "Debug View Hierarchy"... Also I was upgrading from 0.64.0 to 0.66.0.

I'm having this issue in both debug and release, though. Happens on iOS 15 Simulator (debug), iPhone 12 mini (release) and iPhone 6S (release).

I didn't try debugging with Chrome because it causes my app to instantly crash and I have to reinstall it to even disable debugger 😅 But it's possible it's some kind of race condition, as Chrome decreases performance (I think).

[xand3r40r93]

I had a similar issue. Also, I was upgrading from 0.64.2 to 0.66.0.

[sharifhh]

+1 screen freezes after modal dismissing

[losh11]

I have a similar issue. My screen didn't turn black, but the entire app becomes unresponsive. Upgraded from RN 0.64.2 to 0.66, literally no other packages changed. Unable to reproduce on Android. iOS only.

I tried out the Modal component as part of the React Native standard library, also react-native-modal and react-native-paper's modal - they all had this same behaviour. I believe they are all wrapped versions of Modal from RN?

[ghost]

+1 app freezes on modal close and in some other libraries.

[dotansimha]

I have a similar issue. My screen didn't turn black, but the entire app becomes unresponsive. Upgraded from RN 0.64.2 to 0.66, literally no other packages changed. Unable to reproduce on Android. iOS only.

I tried out the Modal component as part of the React Native standard library, also react-native-modal and react-native-paper's modal - they all had this same behaviour. I believe they are all wrapped versions of Modal from RN?

Same here. Upgraded to RN66 and since than we had freezing with react-native-modal, react-native-screens and react-navigation@6. If I turn on Debug in Chrome DevTools on the app - everything seems to work perfectly fine 🤔 I guess it might be related to Flipper?

With react-native-modal -> happens with all modals With react-navigation / react-native-screens -> happens with Stack navigator that has FlatList (that loads additional data using pagination, after loading more items and going back -> screen freezes, seems like there are two RNSScreen in view, one is a zombie view that contains a ScrollView)

[guiccbr]

A workaround that I dislike but that seems to fix the issue for me is to mount/unmount the modal instead of using the visible prop 😢

<>
  {modalVisible && <Modal visible><Content /></Modal>}
</>

[shedeed1]

Same issue happened with me after upgrading to RN 0.66, react-native-picker-select library (which uses Modal under the hood) freezes the whole app.

[choychris]

Have the same issue using @react-navigation/stack. When we navigate to next stack screen and then go back, a transparent "view" blocks any interaction.

[Humad]

Having the same issue with Modals. After a modal is closed, the rest of the app becomes unresponsive and needs to be closed and reopened.

[Humad]

I tried a number of things, including one of the solutions mentioned above about re-rendering the modal when visibility changes, but that doesn't do anything for me.

I have confirmed, using the Xcode debugger, that the view becomes unresponsive after closing the modal because RCTModalHostViewController is being overlayed on top of the view. This view should have been dismissed when the modal was closed, but it is not.

I also went through my commit history to see if maybe I had messed something up, but I see no indication of that. Oddly enough, it seems like this issue has existed for me for a while but I did not notice it until now.

I have confirmed that this exists only on iOS. Android seems to be doing fine. I have also confirmed that this does not happen if you use Expo to test your app locally. It only happens when I build my app through Xcode.

[Humad]

Another update -- Here's what I ended up doing:

<View style={{flex: 1}}>
    <Modal visible={isVisible}></Modal>
</View>

This seemed to work, though I'm not sure why wrapping it with a View with flex: 1 is needed 🤔

I also then noticed that if I have multiple modals on the same page, this issue is only fixed for the first one (likely because of the flex: 1). So I updated the code to be

{isFirstModalVisible && (
    <View style={{flex: 1}}>
        <Modal visible={isFirstModalVisible}></Modal>
    </View>
)}

{isSecondModalVisible && (
    <View style={{flex: 1}}>
        <Modal visible={isSecondModalVisible}></Modal>
    </View>
)}

That way the modals are only rendered when visible, and there's only 1 modal on a page at a time.

This has solved my issue for now, but I wish I didn't have to do all this. Really hoping this issue is looked into.

[ghost]

Adding View parent with flex: 1, fixed my issue. Thanks man. 👍

Also Avoid using Spinner Libraries, use ActivityIndicator instead, clean your code like unused codes and search for alternative libraries. I hope this bug will be fixed in next versions.

[phinguyen]

That way the modals are only rendered when visible, and there's only 1 modal on a page at a time.

This has solved my issue for now, but I wish I didn't have to do all this. Really hoping this issue is looked into.

You save my day, thank you man

[effektsvk]

With react-native-modal -> happens with all modals With react-navigation / react-native-screens -> happens with Stack navigator that has FlatList (that loads additional data using pagination, after loading more items and going back -> screen freezes, seems like there are two RNSScreen in view, one is a zombie view that contains a ScrollView)

Yes, I'm having this as well, I wasn't sure if it was related, because the RNSScreen comes from react-native-screens but the behavior is very similar.

I was trying to debug it in Xcode and it seems that there is logic which destroys that RNSScreen view when screen is inactive, but according to my debugging, it looks like the screen is in TransitioningOrBelowTop state right after I click the back button. I also confirmed that the "zombie view" is the one I was backing from. I could also create multiple zombie views by dispatching navigation actions (I'm using react-navigation@4 with Redux state) and every time I navigated back it created a new dead screen.

(cc: @dotansimha)

[dotansimha]

With react-native-modal -> happens with all modals With react-navigation / react-native-screens -> happens with Stack navigator that has FlatList (that loads additional data using pagination, after loading more items and going back -> screen freezes, seems like there are two RNSScreen in view, one is a zombie view that contains a ScrollView)

Yes, I'm having this as well, I wasn't sure if it was related, because the RNSScreen comes from react-native-screens but the behavior is very similar.

I was trying to debug it in Xcode and it seems that there is logic which destroys that RNSScreen view when screen is inactive, but according to my debugging, it looks like the screen is in TransitioningOrBelowTop state right after I click the back button. I also confirmed that the "zombie view" is the one I was backing from. I could also create multiple zombie views by dispatching navigation actions (I'm using react-navigation@4 with Redux state) and every time I navigated back it created a new dead screen.

(cc: @dotansimha)

I can confirm this is exactly the issue we're having. And if Flipper is not the active debugger it works fine,

[effektsvk]

I just tested it without Flipper (just removed it from the Podfile, run pod install and rebuilt) but unfortunately for me the issue is still there. 😢

[dotansimha]

I just tested it without Flipper (just removed it from the Podfile, run pod install and rebuilt) but unfortunately for me the issue is still there. 😢

I see, it seems inconsistent actually, at least for me. One thing is sure: When you open DevTool and debug in Chrome, it works well, right?

[effektsvk]

Chrome debugging doesn't work for me, so I'm unable to check, unfortunately. I'm unable to get into the app when the debugger is enabled, I need to reinstall the app to use it again.

[chris-cornell]

confirming this on RN 0.65.1

[NoerNova]

Screen freezing on a couple of situations for me,

• Modal (react-native) -> no issue on react-native-paper's Modal
• FlatList and Animated.Flatlist on re-render, reload -> {flex: 1} on parent not help.

BTW. all stuff works fine with opening debugging mode (Debug with Chrome) 🧐

[SimpleCreations]

I think this issue occurs when upgrading react-native-reanimated to 2.3.0-beta.2 which is (as of now) the only version that works on RN 0.66. When I downgraded from RN 0.66.0 to 0.65.1, the modal issue was still there. It disappeared only after downgrading react-native-reanimated.

I will be attempting to reproduce this in a clean project and reporting it to the Reanimated repo. Edit: it has been reported already, my bad.

[effektsvk]

Just bumped into this while reading react-navigation documentation 😅 Although this is for drawer navigator, I'm assuming it applies to others as well. So it makes sense why it works with Chrome debugger...

(cc: @dotansimha @NoerNova)

[cjhines]

Also getting this in RN 0.66

"react-native": "^0.66.0",
"@react-navigation/material-top-tabs": "^6.0.2",
"@react-navigation/native": "^6.0.2",

My @react-navigation/material-top-tabs tab view has a view on top that is impossible to dismiss.

[supervons]

Same issue , i removed react-native-reanimated, everything works.

[dotansimha]

Just bumped into this while reading react-navigation documentation 😅 Although this is for drawer navigator, I'm assuming it applies to others as well. So it makes sense why it works with Chrome debugger...

(cc: @dotansimha @NoerNova)

Yeah, makes sense. But as far as I know, the Stack navigator doesn't have useLegacyImplementation or a similar flag :/

[cjhines]

RCTView which appeared when upgrading to 0.66 is the red one. Blocks all user input of the touchables within.

Edit: Even after doing some styling hackery to get this view behind its contents, it persists once this component is dismounted. It's completely broken.

[hb-webdev]

Another update -- Here's what I ended up doing: [...]

{isFirstModalVisible && (
    <View style={{flex: 1}}>
        <Modal visible={isFirstModalVisible}></Modal>
    </View>
)}

Thanks! I had to change them from flex: 1 to flex: 0 since I already had a flex: 1 child component (with a flex: 1 parent component) that was intended to fill the whole screen and not share the space with any modals

EDIT: Modals that appear in succession seem to be broken with 2.3.0-beta.2 + RN 0.66.0, even when using this solution (as well as when not using it): any modal that appears immediately after another does not appear.

EDIT2: I ended up just completely deleting this library from my 0.66.0 app as @supervons said, and everything seems to work as intended (in iOS, at least). I don't think this library has any noticeably useful purpose for my app whatsoever: just adds more possibilities for bugs.

[Dmitry-GH]

Hey! For me, it looks like the problem is in "react-native-reanimated" lib. I downgraded it for now to fix it. Details: https://github.com/software-mansion/react-native-reanimated/issues/2244#issuecomment-940386618

[tomLadder]

Same issue :(

[cjhines]

Hey! For me, it looks like the problem is in "react-native-reanimated" lib. I downgraded it for now to fix it. Details: software-mansion/react-native-reanimated#2244 (comment)

This sadly won't work for RN 0.66

[Dmitry-GH]

Hey! For me, it looks like the problem is in "react-native-reanimated" lib. I downgraded it for now to fix it. Details: software-mansion/react-native-reanimated#2244 (comment)

This sadly won't work for RN 0.66

Yes, because reanimated 2.2.2 won’t work with RN 0.66. That's why in my solution I'v downgraded them both.

[superguineapig]

A temporary workaround (that worked for me) without having to downgrade anything, i.e. it works with the following:

...
"react-native": "0.66.0",
"react-native-reanimated": "^2.3.0-beta.2",
...

is to disable the autoinstall of Reanimated (during compilation) in your Podfile per their own documentation here

post_install do |installer|
   installer.pods_project.targets.each do |target|
       target.build_configurations.each do |config|
           config.build_settings['OTHER_CPLUSPLUSFLAGS'] = '-DDONT_AUTOINSTALL_REANIMATED'
       end
   end
end

Remember to pod install after changing the Podfile

This allowed my setup to compile and run normally without experiencing the zombie UITransitionView after dismissing a modal.

side note

$0.02: I'm not convinced that the problem lies strictly within react-native-reanimated itself, but is manifest when some magic combination of react-native, react-native-screens, @react-navigation/*, and react-native-reanimated alter the native view hierarchy (UIKit) or inject event blocks that cause some async problems/race condition.

Additionally, a cursory search (google/SO) for UITransitionView has hits for "stuck" views going back 5+ years.

The latest versions of RN and Reanimated may have just "tickled" an old UIKit bug... 🤷

[Dmitry-GH]

A temporary workaround (that worked for me) without having to downgrade anything, i.e. it works with the following:

...
"react-native": "0.66.0",
"react-native-reanimated": "^2.3.0-beta.2",
...

is to disable the autoinstall of Reanimated (during compilation) in your Podfile per their own documentation here

post_install do |installer|
   installer.pods_project.targets.each do |target|
       target.build_configurations.each do |config|
           config.build_settings['OTHER_CPLUSPLUSFLAGS'] = '-DDONT_AUTOINSTALL_REANIMATED'
       end
   end
end

Remember to pod install after changing the Podfile

This allowed my setup to compile and run normally without experiencing the zombie UITransitionView after dismissing a modal.

side note

$0.02: I'm not convinced that the problem lies strictly within react-native-reanimated itself, but is manifest when some magic combination of react-native, react-native-screens, @react-navigation/*, and react-native-reanimated alter the native view hierarchy (UIKit) or inject event blocks that cause some async problems/race condition.

Additionally, a cursory search (google/SO) for UITransitionView has hits for "stuck" views going back 5+ years.

The latest versions of RN and Reanimated may have just "tickled" an old UIKit bug... 🤷

Hey, thanks for posting your solution! And your side note sounds logical and interesting to me!

Just out of curiosity: what is the downside of disabling the autoinstall of some package (reanimated in our case)? How it affects their work (dev/prod)? Sorry, for me it sounds like fully disabling the module in some way, so I want to learn more about it. Thanks in advance!

[superguineapig]

@Dmitry-GH I'm not super familiar with the internals of Reanimated, but I believe it provides (at least) 2 main features for developers:

• A more expressive, pure JavaScript (syntax vs. JSX) API for scripting animations/animated behaviors
• The ability to ensure animations are calculated and executed on a native thread; so interpolations would be calculated on the native side as opposed to on the JS VM side and then having to sync over the bridge back into native (potentially several times per second). Pushing the animation stuff into native frees things up to handle events (touch) and trigger UI changes in a timely fashion.

With that, library and component authors can leverage the Reanimated lib to make things visually smooth and performant when there are complex UI transformations/layering/gesture effects, etc...

The potential downside to disabling the compiled code might be visual/performance issues in certain situations. They emphasize animations in response to gestures.

(Speculation) I would imagine that most of the mainstream dependent libraries conditionally depend on reanimated so disabling it will probably fall-back to regular RN behavior.

Not sure what happens if you've coded against Reanimated's API directly...no op perhaps...

Anyway, I'm not all that familiar with the implementation.

They have a good description of what purpose Reanimated serves over here

[effektsvk]

I tried the workaround but unfortunately, when you don't install Reanimated and you use Animated component it doesn't work. I use BottomTabBar from react-navigation (I have v4) and there is CrossFadeIcon component which creates Animated.View.

When I applied the workaround, my app crashes on the start due to some InnerNativeModule variable inside reanimated library being undefined.

[cjhines]

I'm in a similar predicament where I use reanimated-bottom-sheet and therefore can't skip that library.

I'm upgrading to RN 0.66 for a bug that was fixed in that version, so I guess I'm stuck until this bug is fixed.

[lzach83]

@cjhines Im in the same situation, amazing how fragile these things are.

[CDAracena]

I tried the workaround but unfortunately, when you don't install Reanimated and you use Animated component it doesn't work. I use BottomTabBar from react-navigation (I have v4) and there is CrossFadeIcon component which creates Animated.View.

When I applied the workaround, my app crashes on the start due to some InnerNativeModule variable inside reanimated library being undefined.

Same thing happened to me after attempting @Dmitry-GH 's work-around 😢

[littleski]

Hello, Version 2.2.3 of react-reanimated seems to fix the issue on our side. Regards

[effektsvk]

Oh god, I'm so happy. I can confirm that my issues are gone as well, both modal dismiss and "zombie" screens... Thanks for letting us know @littleski! ❤️

[losh11]

I can confirm that updating to react-native-reanimated@2.2.3 fixes this issue.

[dotansimha]

Same here! react-native-reanimated@2.2.3 fixes the issues!

[pritamsoni-hsr]

react-native-reanimated@2.2.3 is working fine!

[rodgomesc]

any solution for v2.3.0-betaX ? , this is not working in beta versions that's necessary for run @mrousavy vision-camera, so because a modal issue i lost a camera lib ˆ.ˆ

[effektsvk]

@rodgomesc You can try this patch that contributor of react-native-reanimated recommended: https://github.com/software-mansion/react-native-reanimated/issues/2244#issuecomment-945059630 Also, there's a new beta released yesterday, maybe they included it there. (edit: I just checked, it should be included in 2.3.0-beta.3)