ios: cannot dismiss Modal #32329

pritamsoni-hsr · 2021-10-04T11:59:40Z

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.

use this code with react native 0.66 on iOS

RCTModalHostViewController is what's blocking the screen

.

The text was updated successfully, but these errors were encountered:

Hannes-Endare · 2021-10-05T09:38:54Z

Having the same problem.

Miraj98 · 2021-10-05T12:04:13Z

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

pritamsoni-hsr · 2021-10-05T12:39:01Z

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 · 2021-10-05T16:41:32Z

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 · 2021-10-05T16:51:12Z

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 · 2021-10-06T07:17:40Z

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

sharifhh · 2021-10-06T10:24:33Z

+1 screen freezes after modal dismissing

losh11 · 2021-10-06T12:34:28Z

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 · 2021-10-06T13:25:35Z

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

dotansimha · 2021-10-06T14:50:32Z

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 · 2021-10-06T15:44:21Z

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 · 2021-10-06T16:16:17Z

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 · 2021-10-07T03:35:42Z

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 · 2021-10-07T05:11:47Z

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 · 2021-10-07T07:06:02Z

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 · 2021-10-07T07:29:52Z

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 · 2021-10-07T07:54:16Z

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 · 2021-10-07T08:56:34Z

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 · 2021-10-07T09:07:35Z

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 · 2021-10-07T09:57:11Z

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 · 2021-10-07T10:47:26Z

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 · 2021-10-07T15:15:37Z

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 · 2021-10-07T15:21:47Z

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 · 2021-10-08T05:47:11Z

confirming this on RN 0.65.1

dotansimha · 2021-10-14T14:04:55Z

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

pritamsoni-hsr · 2021-10-14T16:02:15Z

react-native-reanimated@2.2.3 is working fine!

rodgomesc · 2021-10-19T13:35:03Z

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 · 2021-10-19T13:37:45Z

@rodgomesc You can try this patch that contributor of react-native-reanimated recommended: software-mansion/react-native-reanimated#2244 (comment) 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)

rodgomesc · 2021-10-19T13:44:30Z

@effektsvk thanks for the quick feedback, 2.3.0-beta.3 not worked, very weird, i'll try the workaround in this comment thanks

effektsvk · 2021-10-19T13:46:36Z

No problem, make sure you pod install after updating and rebuild 😉 Or build straight from Xcode if you try the workaround.

rodgomesc · 2021-10-19T13:56:44Z

No problem, make sure you pod install after updating and rebuild 😉 Or build straight from Xcode if you try the workaround.

yeah, i'm sure that is no cache, i cleared pod caches and installed again, and checked the updated code inside Xcode before start the build process

the issue was opened because a user reported

"when modal is dismissed the whole screen turns black"

but other users commented

screen freezes after modal dismissing

what is exactly my problem, you know if this two things are directly related?

effektsvk · 2021-10-19T14:06:04Z

Well, I had two issues:

When I navigated to some screen and then I navigated back, the native view of the screen I just navigated from stayed on top, just the React component unmounted. This could result in a black screen, in case your view had black background. I was using react-navigation@4 which needed react-native-reanimated due to BottomTabBar. (This might be your case?)
The app didn't really freeze, it just seemed that way because after changing visible prop in Modal component (after its first render) to false, it unmounted, but native view (RCTModalHostViewController) for Modals stayed on top. That's why you weren't able to interact with the app and it looked like it froze.

You can check for both of those things using Xcode's Debug View Hierarchy feature.

rodgomesc · 2021-10-19T15:04:55Z

@effektsvk yeah, i checked with the debug view hierarchy and it's exactly RCTModalHostViewController on top of everything, i already have 2.3.0-beta3 that include the workaround but seems not had not effect.

effektsvk · 2021-10-19T15:21:02Z

Interesting, well, unfortunately I don't know how to help you 😕 you can try to ask if there's something else you can do in the issue with the workaround (software-mansion/react-native-reanimated#2244)

rodgomesc · 2021-10-19T15:37:57Z

well, passing coverScreen={false} prop for react-native-modal seems to be a workaround for this as well, thanks for the help

hurali97 · 2021-10-21T09:49:04Z

You guys can try by going to the file Pods/Development Pods/React-Core/Default/Views/RCTModalHostView and inside the method dismissModalViewController,

add the following lines:
dispatch_async(dispatch_get_main_queue(), ^{
[_delegate dismissModalHostView:self withViewController:_modalViewController animated:[self hasAnimationType]];
_isPresented = NO;
});

mjmasn · 2021-10-21T11:12:17Z

react-native-reanimated@2.2.3 worked for me with React Native 0.66 🎉 Previously only the 2.3.x beta supported RN 0.66 but 2.3.0-beta.2 / 2.3.0-beta.3 do not work on iOS currently.

erikkjernlie · 2021-11-19T22:16:31Z

Thank you so much 🔥 I had this problem with react-native-modal and react-native-parallax-scroll-view, but after upgrading from "2.3.0-beta" to "2.2.3", everything works perfectly 🙌

mouessam · 2021-11-21T16:06:18Z

issue still exists with react-native: 0.66.3 and react-native-reanimated: 2.2.3
it works after dropping some animation code I was using

if (!IS_IOS && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
 }

LayoutAnimation.configureNext(
                  LayoutAnimation.create(
                    300,
                     LayoutAnimation.Types.easeInEaseOut,
                     LayoutAnimation.Properties.opacity,
                   ),
     );

any ideas why this is happening.

System:
    OS: macOS 12.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 27.55 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.22.7 - ~/.nvm/versions/node/v12.22.7/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v12.22.7/bin/yarn
    npm: 7.22.0 - ~/.nvm/versions/node/v12.22.7/bin/npm
    Watchman: 2021.11.08.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0
    Android SDK:
      API Levels: 23, 28, 29, 30, 31
      Build Tools: 29.0.2, 30.0.2, 31.0.0
      System Images: android-30 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: Arctic Fox 2020.3.1 Patch 3 Arctic Fox 2020.3.1 Patch 3
    Xcode: 13.1/13A1030d - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^17.0.2 => 17.0.2 
    react-native: 0.66.3 => 0.66.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

edited

14bscsskazmi · 2021-11-29T15:42:56Z

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.

Ohhh man!!! you saved the day. Thanks alot.

denisk20 · 2021-11-29T19:19:28Z

Upgrading react-native-reanimated from 2.3.0-beta.2 to 2.3.0-beta.4 resolved the issue for me.

chris-cornell · 2021-12-02T20:29:03Z

i'm not using react-native-reanimated in my project and still facing this issue.

johnjoshuadablo · 2021-12-03T00:13:45Z

Still an issue on "react-native-reanimated": "2.2.4" and "react-native": "0.66.3"

johnjoshuadablo · 2021-12-03T00:17:27Z

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.

This worked for me initially but It has some issues when trying to open another modal again after closing this one. :(

I also tried this with "react-native-reanimated": "2.2.4" and "react-native": "0.66.3" . Issue still persists on my end.

denisk20 · 2021-12-03T10:06:43Z

i'm not using react-native-reanimated in my project and still facing this issue.

@chris-cornell Check your .lock file -- it might have been pulled as a transitive dependency. I don't use it too, but react-native-modal does.

effektsvk · 2021-12-03T10:44:51Z

@chris-cornell Even easier way to check it is yarn why react-native-reanimated, it will show you which dependency is using it.

pritamsoni-hsr added the Needs: Triage 🔍 label Oct 4, 2021

pritamsoni-hsr changed the title ~~cannot dismiss Modal~~ ios: cannot dismiss Modal Oct 4, 2021

react-native-bot added Component: Modal Platform: iOS iOS applications. labels Oct 4, 2021

effektsvk mentioned this issue Oct 5, 2021

Inconsistent freezing on iOS software-mansion/react-native-reanimated#2244

Closed

3 tasks

Humad mentioned this issue Oct 8, 2021

iOS Unresponsive after opening picker lawnstarter/react-native-picker-select#459

Open

pritamsoni-hsr closed this as completed Oct 14, 2021

hurali97 mentioned this issue Oct 21, 2021

Added fix for app freeze issue when modal closes #32450

Closed

kidroca mentioned this issue Oct 25, 2021

When coverScreen={true}, app does not respond to touches react-native-modal/react-native-modal#511

Closed

dcalhoun mentioned this issue Nov 19, 2021

Modal make iOS app freeze when visible #32504

Closed

parasharrajat mentioned this issue Feb 18, 2022

[HOLD for payment 2022-04-12] [$500] iOS - App freezes when try to delete PayPal payment Expensify/App#7768

Closed

dimatretyak mentioned this issue May 27, 2022

feat(FX-4021): ability for specify sort option for alerts artsy/eigen#6829

Merged

6 tasks

facebook locked as resolved and limited conversation to collaborators Oct 14, 2022

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 14, 2022

ios: cannot dismiss Modal #32329

ios: cannot dismiss Modal #32329

Comments

pritamsoni-hsr commented Oct 4, 2021 • edited Loading

Description

React Native version:

Steps To Reproduce

Hannes-Endare commented Oct 5, 2021

Miraj98 commented Oct 5, 2021

pritamsoni-hsr commented Oct 5, 2021

superguineapig commented Oct 5, 2021 • edited Loading

effektsvk commented Oct 5, 2021

xand3r40r93 commented Oct 6, 2021

sharifhh commented Oct 6, 2021

losh11 commented Oct 6, 2021 • edited Loading

ghost commented Oct 6, 2021

dotansimha commented Oct 6, 2021 • edited Loading

guiccbr commented Oct 6, 2021

shedeed1 commented Oct 6, 2021

choychris commented Oct 7, 2021

Humad commented Oct 7, 2021

Humad commented Oct 7, 2021

Humad commented Oct 7, 2021

ghost commented Oct 7, 2021 • edited by ghost Loading

phinguyen commented Oct 7, 2021

effektsvk commented Oct 7, 2021

dotansimha commented Oct 7, 2021

effektsvk commented Oct 7, 2021

dotansimha commented Oct 7, 2021

effektsvk commented Oct 7, 2021 • edited Loading

chris-cornell commented Oct 8, 2021

dotansimha commented Oct 14, 2021

pritamsoni-hsr commented Oct 14, 2021

rodgomesc commented Oct 19, 2021 • edited Loading

effektsvk commented Oct 19, 2021 • edited Loading

rodgomesc commented Oct 19, 2021 • edited Loading

effektsvk commented Oct 19, 2021

rodgomesc commented Oct 19, 2021

effektsvk commented Oct 19, 2021 • edited Loading

rodgomesc commented Oct 19, 2021

effektsvk commented Oct 19, 2021

rodgomesc commented Oct 19, 2021

hurali97 commented Oct 21, 2021

mjmasn commented Oct 21, 2021

erikkjernlie commented Nov 19, 2021

mouessam commented Nov 21, 2021 • edited Loading

14bscsskazmi commented Nov 29, 2021

denisk20 commented Nov 29, 2021

chris-cornell commented Dec 2, 2021

johnjoshuadablo commented Dec 3, 2021

johnjoshuadablo commented Dec 3, 2021

denisk20 commented Dec 3, 2021 • edited Loading

effektsvk commented Dec 3, 2021

pritamsoni-hsr commented Oct 4, 2021 •

edited

Loading

superguineapig commented Oct 5, 2021 •

edited

Loading

losh11 commented Oct 6, 2021 •

edited

Loading

dotansimha commented Oct 6, 2021 •

edited

Loading

ghost commented Oct 7, 2021 •

edited by ghost

Loading

effektsvk commented Oct 7, 2021 •

edited

Loading

rodgomesc commented Oct 19, 2021 •

edited

Loading

effektsvk commented Oct 19, 2021 •

edited

Loading

rodgomesc commented Oct 19, 2021 •

edited

Loading

effektsvk commented Oct 19, 2021 •

edited

Loading

mouessam commented Nov 21, 2021 •

edited

Loading

denisk20 commented Dec 3, 2021 •

edited

Loading