Modal make iOS app freeze when visible

[iamvucms]

Description

I faced this for from react native version 0.65 till now. Open a modal then close it make app freeze on both actual iOS device and simulator. When I install to new simulator or new ios device, it's fine to oepn modal on first time, but when reopen app, It makes app freeze again.

Version

0.66.1

Output of react-native info

OS: macOS 11.2.3
CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
Memory: 49.63 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.16.0 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.11 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 12.4/12D4e - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.66.1 => 0.66.1
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Open a modal then close it make app freeze on both actual iOS device and simulator, sometime can tap to view inside modal, sometime not, app is freeze. Also when modal was closed, it still make app freeze

Snack, code example, screenshot, or link to a repository

No response

[github-actions]

⚠️	Missing Environment Information
ℹ️	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[pramodsharma403]

I am also facing the same issue.

[Hollum]

Temporarily fix for me was to change Reanimated 2.3.0@beta_1 to Reanimated 2.2.4. Further reading with similar problem (crash instead of freeze): https://githubmemory.com/repo/react-native-modal/react-native-modal/issues/615. I noticed that if i used react natives Modal component it crashed, and when i used the react-native-modal packgage it freezed the screen after close.

My dependencies:
"react-native": "0.66.0",
"react-native-modal": "^13.0.0",

[iamvucms]

@Hollum I'm now using a Portal component as a Modal. It's working fine. but Modal of react native's also important. Hope them fix it soon

[ooooseaoooo]

Same problem. Seems to only freezing IOS simulator, not the mobile Expo go app or web app in dev mode. on EXPO sdk41

[rinoarmadiaz]

same issue here as well,
i'm using 2.3.0@beta_2 and issue still persist whenever popup is visible

[castalonirenz]

same issue here

[castalonirenz]

same issue here as well currently using 2.3.0@beta_2

[castalonirenz]

Downgrading to 2.2.3 version fixed my issue.

[rinoarmadiaz]

Downgrading to 2.2.3 version fixed my issue.

is your RN version using 0.66.0 as well? because last time when i tried using 0.66.0 with 2.2.3 it's pretty unstable / unusable (on my current app)

[dcalhoun]

I have experienced this issue as well with [email protected] and [email protected]. Unfortunately, upgrading to [email protected] did not resolve the issue for me.

From my testing, my particular issue comes from usage of LayoutAnimation within my code. Related to #16182 (comment) and #16895, if a LayoutAnimation is not consumed, then it can cause RN modals to remain invisibly open even after closing one: #32329. I have been able to resolve some of the frozen modals within my app by limiting when LayoutAnimation is used in the app to avoid multiples LayoutAnimation.configureNext invocations occurring at the same time.

I am unsure why upgrading RN from 0.64 to 0.66 caused the invisible modal issue to become more prominent for my app.

[chris-cornell]

hi - i'm not using react-native-reanimated and still facing this issue. using wix/react-native-navigation for navigation.

[rinoarmadiaz]

hi - i'm not using react-native-reanimated and still facing this issue. using wix/react-native-navigation for navigation.

interesting, so the issue seems related with the Modal itself then, i thought it was combination between react-native-reanimated and react-native-navigation

[chris-cornell]

interesting, so the issue seems related with the Modal itself then, i thought it was combination between react-native-reanimated and react-native-navigation

seems like it, but I haven't come across anyone else with this issue that isn't using reanimated in their project dependencies. react-native-navigation has react-native-reanimated as a dev dependency but if that were the issue, I would think my prod app would be fine..

[johnjoshuadablo]

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

[bbernag]

1.- downgrading react-native-reanimated to 2.2.3
2.- cd ios && pod deintegrate
3.- pod install

this solved my problem

[abitling]

For now, the only work around I see here is, if platform is iOS then set modal's visibility flag after some finite delay, say 1000ms, using setTimeout else simply set modal's visibility without any delay.

In my use case, I am using react-navigation 4x, react-native-reanimated v1.x on react-native 0.64.x. I was trying to show modal as soon as my parent component is mounted based on some conditions and it was react-navigation's transition animations conflicting the Modal animations causing my app to freeze.

Refer to the following code snippet and see if it helps.

const ModalWrapper = ({children}) => {
  const [isVisible, setVisible] = useState(false);
  useEffect(() => {
    setTimeout(() => {
      setVisible(true);
    }, Platform.OS === 'ios' ? 1000 : 0);
  }, []);
  return (
    <Modal visible={isVisible}>
      {children}
      <TouchableOpacity onPress={() => setVisible(false)}>
        <Text>Press me to dismiss</Text>
      </TouchableOpacity>
    </Modal>
  );
};

PS: I know this is a dirty workaround, if anybody found/finds a solution please quote a reply with it.

[rinoarmadiaz]

hey guys, can you try to update react-native-reanimated into latest version (2.3.1)?
currently i'm upgrading RN & Reanimated into

    "react-native": "0.66.4",
    "react-native-reanimated": "^2.3.1",

so far i never got report of any modal freezes from users anymore except if there's any 2 modals trying to show in the same exact time.

[yalcinozer]

It took me several hours for me to realise that. Thanks god I'm not the only one :)

[mindira5]

Hey guys, any update on this issue. This could be definitely issue with react-native. We not using react-native-reanimated and react-native-modal in our app. With custom modal component, the app is getting freeze when closing Modal component after updating react-native to v0.66.3. Same was working fine with RN v0.64. And we are facing this issue only in some of iPad Pro modals but working fine while testing in iPad, iPad Mini devices.

[nickolasmdasilva]

@mindira5 Same issue here, using a custom modal component and react-native v0.67 the app is getting freeze.

[nickolasmdasilva]

@mindira5 I got a fix in my application, adding in my custom modal component the state to manage the visibility instead of using only a props. It's working well now.

state = {
    modalVisible: false
  };

  setModalVisible = (visible) => {
    this.setState({ modalVisible: visible });
  }

  toggleDialog = () => {
    this.setModalVisible(false);
  };

render(){
const { modalVisible } = this.state;
 return   <Modal
        visible={this.props.visible || modalVisible} ...
}

[mindira5]

@nickolasmdasilva In my app, we are already using the state to manage the visibility

[macfanatic]

Just trying to solve this ourselves and see other related issues that aren't linked here yet for the curious:

• ios: cannot dismiss Modal #32329
• Added fix for app freeze issue when modal closes #32450

[Ilaiwi]

rendering the modal with a portal fixed the issue for me
https://github.com/gorhom/react-native-portal

[iamvucms]

Well I did it but recently I realize sometime portal is freeze on android
gorhom/react-native-portal#24

[retyui]

Still an issue for me:

The case:

1. we use react navigation Native Stack
2. it happens only when you try to navigate to next screen without wait to close modal

├─ react-native-modal@12.1.0
├─ react-native-reanimated@2.8.0
└─ react-native@0.68.2

---

UPD:

1. Replace native stack with default helps:

-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createStackNavigator } from '@react-navigation/stack';

2. Forcing modal unmount also fixed it

-<Modal isVisible={isVisible} />
+{isVisible ? <Modal/> : null}

[iguversedev]

This is still an issue, happens when:

1. Trying to open one modal right after another
2. Trying to navigate to screen with presentation:modal before closing <Modal> component
3. Trying to quickly navigate between presentation:modal screens

My app is build around component , and this bug makes it's unusable. I don't understand how this is not yet fixed , few years this issue is present and there is no working solution. The setTimeout solution is extremely ugly and not stable.
I spent more than 5 days on this issue, but nothing works.

[AbdelhamidLarachi]

i faced this issue on expo SDK 47 while using Modal from 'react-native' (0.70.2), sadly nothing above has worked for me, i ended up using presentationStyle="fullScreen". Not the solution i wished to fined :(

<Modal
    ....
    presentationStyle="fullScreen"
>

[The-Lone-Druid]

Don't know the reason how this worked, I'm using like 3 modals in One screen, but only one modal was causing the problem while other two were working just fine don't know how.... but using setTimeout() method I was able to fix that one modal issue.

[appsgenie]

I have a similar issue with 3 modals. using setTimeout() I show first one, then 2s later another and 2s later the last one. Closing the first, shows the second one successfully and I can interact with it. But closing the second one will not show the last one and now the app is frozen on the main screen.. on Android it works fine, all the Modals are showing on top of each other.

[next6leo]

ios 17 apps minimize then maximize happen

[appsgenie]

ios 17 apps minimize then maximize happen

as in, when closing first modal, the second one (queued up) will still show after the first gets minimized?
do you know if the 3rd one will show too?

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.

[ronal2s]

This is still happening in version 0.71.16 when you use transparent prop to true, any workaround?

[michaelmiracle018]

I'm facing the same issue on IOS

[fedeolto]

I faced this issue today with a component getting a function among its props and containing a Modal, like this:
<Parent> <Modal visible={stateBooleanVar}> <FancyComponent callbackYes={() => doStuffAndCloseModalSettingStateBooleanVarToFalse() callbackNo={() => doLessStuffAndCloseModalSettingStateBooleanVarToFalse()}} /> </Modal> </Parent>
On an old iPhone 7 running iOS 15.7.9 the app was freezing.
On an iPhone 15 pro running iOS 18.2.1 the app was closing the modal, opening it for an instant and closing it again.
I just let here a couple of facts and solutions that worked for me.
I did some tries digging in React Native docs https://reactnative.dev/docs/modal#props like setting animationType to none and setting explicitly onDismiss to the same callback I was using to close the modal but it didn't work

What worked for me was setting this https://reactnative.dev/docs/modal#presentationstyle-ios to overFullScreen

Also, I found a post in SO saying that using onPressOut instead of onPress resolves the issue and it does!
https://stackoverflow.com/questions/69671852/dismiss-react-native-modal-cause-ui-freeze/79358670#79358670
But I don't understand why, does anyone know the reason?