Replacing a native stack navigation screen crashes the app on iOS if a modal is open

[juho-ylikyla]

Current behavior

This issue is dependent on having react-native-modal library installed. I'm unsure where the root cause is, so I am reporting this bug in this repository.

The crashing did not occur in react-native version 0.70.x. The crash happens in version 0.71.2

If I have a react-native-modal open, calling navigation.dispatch(StackActions.replace(<route name>)); will crash the app

function HomeScreen({navigation}: {navigation: any}) {
  const [modalVisible, setModalVisible] = React.useState(false);
  return (
    <View
      style={{
        flex: 1,
        height: '100%',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>Home Screen</Text>
      <Button
        title="Open"
        onPress={() => {
          setModalVisible(true);
        }}
      />
      <Modal isVisible={modalVisible} useNativeDriver>
        <View style={{marginTop: '50%'}}>
          <Button
            title="Close"
            onPress={() => {
              // Removing this line does not affect the behavior
              setModalVisible(false);
              // This will crash the app
              navigation.dispatch(StackActions.replace('Home'));
            }}
          />
        </View>
      </Modal>
    </View>
  );
}

Error logged:

2023-02-06 13:25:35.130340+0200 AwesomeProject[53339:1560783] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'Application tried to present modally a view controller <RCTModalHostViewController: 0x108032dd0> that is already being presented by <UIViewController: 0x107f18b70>.'
*** First throw call stack:
(0x180adbc80 0x198301ee4 0x183228bec 0x1831971cc 0x182ee82c4 0x183029f1c 0x182fcae2c 0x18313134c 0x18304d738 0x104e89624 0x107da0700 0x107da1fc8 0x107db08ac 0x107db04fc 0x180a97034 0x180a54538 0x180a67194 0x1a159e988 0x18326aa88 0x183003fc8 0x10495d9ac 0x1079d04d0)
libc++abi: terminating with uncaught exception of type NSException
dyld4 config: DYLD_LIBRARY_PATH=/usr/lib/system/introspection DYLD_INSERT_LIBRARIES=/Developer/usr/lib/libBacktraceRecording.dylib:/Developer/usr/lib/libMainThreadChecker.dylib:/Developer/Library/PrivateFrameworks/DTDDISupport.framework/libViewDebuggerSupport.dylib
terminating with uncaught exception of type NSException
*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'Application tried to present modally a view controller <RCTModalHostViewController: 0x108032dd0> that is already being presented by <UIViewController: 0x107f18b70>.'

Expected behavior

Replacing the screen should not crash the app regardless if a react-native-modal is open or not

Reproduction

https://github.com/juho-ylikyla/rn-navigation-crash-repro

Platform

• [ ] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Packages

• [ ] @react-navigation/bottom-tabs
• [ ] @react-navigation/drawer
• [ ] @react-navigation/material-bottom-tabs
• [ ] @react-navigation/material-top-tabs
• [X] @react-navigation/stack
• [X] @react-navigation/native-stack
• [ ] react-native-tab-view
• [ ] flipper-plugin-react-navigation

Environment

• [x] I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.3
@react-navigation/stack	6.3.12
@react-navigation/native-stack	6.9.9
react-native-safe-area-context	4.5.0
react-native-screens	3.19.0
react-native	0.71.2

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link, a www.typescriptlang.org/play link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

A repro will help us debug the issue. The issue will be closed automatically after a while if you don't provide a repro.

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/stack (found: 6.9.9, latest: 6.3.12)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[tmbradley]

I am getting the same issue when using react-native-modal on version 6.9.9 of @react-navigation/stack

[curthipster]

I have a very similar issue. It's crashing on iOS when calling navigation.replace while a modal is open. In my case, I'm using a stack navigator with presentation: 'transparentModal', and I do not have react-native-modal installed.

package	version
@react-navigation/native	6.1.6
@react-navigation/native-stack	6.9.12
react-native	0.71.3

It does not crash with react-native 0.70.x

[hichemBAALI]

Any update here please?

[sebasg0]

I'm getting same issue any fix?

[curthipster]

@hichemBAALI and @sebasg0 do you have new architecture enabled? In my case, that's what's causing the crash: #11270. For now, I have reverted to not use the new architecture for iOS.

[tbhalke]

Facing the same issue, I'm using the react-native-material-menu package which internally uses modal and I'm replacing the screen on menu-item press.

[Marmsilso]

I had the same issue, apparently it was happening only when the modal was being rendered

Since i did not found a good fix to this, i did short-term solution, i don't like it but it is what it is, perhaps it can help you in the meantime

I use the renderModal state to control if the modal is rendered, once you click the button to close the modal it changes the renderModal state which executes the useEffect hook triggering the replace

I am not that experienced in React Native, so any corrections to the code would be appreciated

function HomeScreen({navigation}: {navigation: any}) {
  const [modalVisible, setModalVisible] = React.useState(false);
  const [renderModal, setRenderModal] = React.useState(true);

  useEffect(() => {
    if(!renderModal){
       navigation.dispatch(StackActions.replace('Home'));
    }
  }, [renderModal])

  return (
    ...
      {renderModal &&
        <Modal isVisible={modalVisible} useNativeDriver>
          <View style={{marginTop: '50%'}}>
            <Button
              title="Close"
              onPress={() => {
                setModalVisible(false);
                setRenderModal(false);
              }}
            />
          </View>
        </Modal>
      }
     ...
  );
}

[ozberkjustlife]

This issue is still active. It started after we updated our react native version 0.71.4. We are getting same crashes. If a modal is open, and we try to go back and navigate to the same screen without closing modal app crash.

package	version
@react-navigation/native	6.1.6
@react-navigation/stack	6.3.16
@react-navigation/native-stack	6.9.2
react-native-safe-area-context	4.4.1
react-native-screens	3.19.0
react-native: "0.71.4

[ChasePwn14]

This is happening on RN 0.70.12 as well

[adrianha]

just opened a PR to fix this issue. This issue can be repro on [email protected] as well. Can someone help me to confirm if the fix works?

[tarkcelk]

just opened a PR to fix this issue. This issue can be repro on [email protected] as well. Can someone help me to confirm if the fix works?

thanks @adrianha it works 👍🏻

[github-actions[bot]]

Hey! Thanks for opening the issue. Seems that this issue is related to react-native-screens library which is a dependency of React Navigation. Can you also post your issue in this repo so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it.

[curthipster]

Hey! Thanks for opening the issue. Seems that this issue is related to react-native-screens library which is a dependency of React Navigation. Can you also post your issue in this repo so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it.

I opened this issue with them awhile back. No action yet.

[adrianha]

hey @curthipster, already opened one here

[chanphiromsok]

I got the issue with with replace screen is crash on IOS temporary solution I using navigate instead of replace

[oluwajuwon]

I am using react-native-modal I got this issue when i tried to reset my navigation while i triggered the modal to close, I fixed it by handling the navigation reset with the onModalHide prop, so it calls the method to reset the navigation only when the modal has been completely dismissed.

[hacnam0306]

Put the navigation function into setTimeOut or delay (lodash ) function , it will oke onClose(); // close modal function // replace function delay(() => { replace<ChatDetailScreenParams>(RouteName.CHAT_DETAIL, { roomId: +roomId, type: type || EChatRoomType.FRIEND, }); }, 500);

[salman-ar-sar]

setTimeout is fixing the issue but has some weird different issues. Did anyone any other workarounds or fix?

[srdrbdrd]

Calling navigation.reset() function when onModalHide works for temporary solution till fixed

[pfcodes]

This is happening when I'm trying to replace a screen inside of a top-level stack navigator which is presented in a full screen modal.

As a workaround I used navigation.push() to get to what should be the replaced screen (which I defined with gesturesEnabled: false.

Also used navigation.getParent()?.goBack() to dismiss the top-level stack navigator modal.

[mathbalduino]

Still happening. I fixed it by using a setTimeout(), but it is not the ideal...

[sasweb]

Can confirm it's still happening in RN 0.72.4 with an open modal. Any maintainers reading this? It's already open 10+ months...

[AminDannak]

Can confirm it's still happening in RN 0.72.4 with an open modal. Any maintainers reading this? It's already open 10+ months...

same on RN 0.72.6

[salman-ar-sar]

I tried on RN 0.73.0 and the same issue is present. I hope some of the maintainers are looking into this.

[eidan66]

I having this issue also with the navigation.reset option. RN72.x

Any solution for this? :(

[Vrunalbenke]

@oluwajuwon can't thank you more, your solution solve my IOS Crash issue

[devaamir]

I am using react-native-modal I got this issue when i tried to reset my navigation while i triggered the modal to close, I fixed it by handling the navigation reset with the onModalHide prop, so it calls the method to reset the navigation only when the modal has been completely dismissed.

this method work for us. but its not a proper way 🚀🚀