App crashes on iOS if a screen which has modal that is visible on screen has been removed from the stack.

[slavko-lukic]

Current behavior

I am following the suggestions from React Navigation docs on how to implement auth flow.
This is how my code looks like.

const RootStack = () => {
  const isAuthenticated = useAuth();

  return (
    <Stack.Navigator>
      { !isAuthenticated ? (
        <Stack.Screen name={'auth'} component={AuthScreen} />
      ) : (
        <Stack.Group navigationKey={isAuthenticated ? "user" : "guest"}>
            // other app screens
        </Stack.Group>
      )}
    </Stack.Navigator>
  );
};

In one of my app screens, I have modal shown where user can logout, when user logs out, isAuthenticated will be set to false and app screens will be removed from stack. However, app crashes if modal is still left open when I call logout function. If I do it when modal is closed, it works.
I am using standard modal from react-native.

Expected behavior

Modal should be removed when screen is removed from stack.

Reproduction

https://www.typescriptlang.org/play?ssl=15&ssc=3&pln=1&pc=1#code/MYewdgzgLgBASiEUDKUCGwDWMC8MAUAlLgHwwDeAUDDKJLAJYQCCArlABYCmYUDwaKFwAmuGKwhc2nIgG5K1GACcuUVkrAFFNADyoMmAHQA5NADcGAc0EglJbTQowAhE2nde-QSJgB+LY6BMHroWIbIwCo8MGBoALZcOOQA5GjsHMkAvrQgcQAO4DxQSe4RUWDZAPT2QTDEAFwBtcH6YQDiSiCseTHmVoIM4ADSXACeSW7pRV5Cov4ARBJcSvMwjfOWrFzQ85k1zYGVlTBI3EowaHk9EJFcPBAOgTqVrUYdXXn7gYSZDs+vJj61igtn2hHkmVkQA

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

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

Environment

I am not using new architecture.

"@react-navigation/bottom-tabs": "^6.5.7",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"react-native": "0.71.7",

[github-actions]

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

• @react-navigation/bottom-tabs (found: 6.5.7, latest: 6.5.8)
• @react-navigation/native (found: 6.1.6, latest: 6.1.7)

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

[github-actions]

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.

[matous94]

+1

[MohamedKhalidCsd]

@slavko-lukic @matous94 Hey! I faced the same issue! Did you found any solution please?

[matous94]

@MohamedKhalidCsd I moved the navigation inside the modal onDismiss callback, to make sure it's unmounted before I navigate away. Something like this:

<Modal
   visible={isModalOpened}
   onRequestClose={() => {
       setIsModalOpened(false)
   }}
  onDismiss={() => {
      navigation.navigate("destination");
   }}
 >
   {content}
 </Modal>

[MohamedKhalidCsd]

@MohamedKhalidCsd I moved the navigation inside the modal onDismiss callback, to make sure it's unmounted before I navigate away. Something like this:

<Modal
   visible={isModalOpened}
   onRequestClose={() => {
       setIsModalOpened(false)
   }}
  onDismiss={() => {
      navigation.navigate("destination");
   }}
 >
   {content}
 </Modal>

Thanks for your reply. The crash happened if modal is still left open when navigation stack isAuthenticated Boolean became false. exactly the same issue that @slavko-lukic mentioned.

[slavko-lukic]

Yeah, basically you gotta change the logic a bit just to make sure that you close modal before navigating away, didn't find proper solution yet.

[evgenyshenets91]

instead of using Modal from react native or react-native-modal which crash the app both, you can use just navigation screen with options like this or similar:
headerShown: false, animation: 'fade', presentation: 'containedTransparentModal', , add any styles in this screen and instead of modal hide use goBack(). Works for me perfect.

[slavko-lukic]

That sounds like it should work properly, I'll make sure to try that should I run into same problem again.