search

react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.46k stars 5.01k forks source link

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

Open slavko-lukic opened 1 year ago

slavko-lukic commented 1 year ago

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

Packages

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[bot] commented 1 year ago

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

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

github-actions[bot] commented 1 year ago

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 commented 4 months ago

+1

MohamedKhalidCsd commented 3 months ago

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

matous94 commented 3 months ago

@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 commented 3 months ago

@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 commented 3 months ago

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 commented 1 month ago

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 commented 1 month ago

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