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

[adrianha]

Description

Crossposting react-navigation/react-navigation#11201, can be repro using [email protected], repo as well.

PR on react-native: facebook/react-native#38491

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
• iOS
• Web
• Windows
• MacOS

Packages

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

Environment

• 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

Steps to reproduce

1. https://github.com/adrianha/react-native-ios-modal-repro
2. Open modal
3. Dismiss modal –> Crashed
4. Check out fixed branch and run yarn to install the patch
5. Open modal
6. Dismiss modal –> Works

Snack or a link to a repository

https://github.com/adrianha/react-native-ios-modal-repro

Screens version

3.22.1

React Native version

0.72.3

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[kkafar]

Is this issue still valid? I went through discussion at facebook/react-native#38491 & it seems that the issue arose due to invalid usage rather than library problem. Let me know

[adrianha]

hi @kkafar ,

I'm still using the diff (patch) as workaround for this issue. Would like to hear your opinion regarding this. You may close this if its not valid issue.

[kkafar]

Is this the patch? https://patch-diff.githubusercontent.com/raw/facebook/react-native/pull/38491.patch

[adrianha]

Is this the patch? https://patch-diff.githubusercontent.com/raw/facebook/react-native/pull/38491.patch

correct @kkafar

[tboba]

Hi @adrianha, thanks for opening this issue!
After further consideration, I believe this is not an issue related to react-native-screens. I've checked how that modal works under the hood and I see that we're not calling any methods related to the native stack while modal is being presented / dismissed. Also, I see that this issue is reproducible in React Native itself.
If you thing this is still a bug in Screens, don't hesitate to re-open this issue and discuss that bug with us further.
Cheers!