How to reset react navigation when "unmounting" from a tab?

user_10795348 0
Viewed 50

so I have a stack named AuthStack like so

const AuthStack = ({ resetPassword, updateEmail }: any) => (
    <Stack.Navigator
        screenOptions={{
            cardStyle: { backgroundColor: '#F2F1F7' },
            headerShown: true,
            headerTitle: '',
        }}
    >
        {resetPassword ? (
            <Stack.Screen name="Reset Password">{(props: any) => <ResetPassword />}</Stack.Screen>
        ) : updateEmail ? (
            <Stack.Screen name="Update Email">{(props: any) => <UpdateEmail />}</Stack.Screen>
        ) : (
            <Stack.Screen name="Home">{(props: any) => <Home />}</Stack.Screen>
        )}
    </Stack.Navigator>
)

would be good to know if this is the right way to do it. but essentially from my account page I have links to reset password and update email. I put both these in the AuthStack as I wasn't sure if this was the best place. anyway this sort of works, however if I click on "update email" and get navigated to there, if I then decide actually I want to go to another page and navigate away, if I then navigate back by clicking on "Home", it takes me to the update email page still. even though I really want to show the home screen at this point. also if I click on home whilst it's active it doesn't take me there. thus meaning I can never see my home page again.

so I was wondering if there is some sort of listener that when I navigate away from this page it will alway show me Home by default?

any ideas? and I don't want to show reset password /update email as there own tabs hence hiding them under home. is there a better approach for this?

react-navigation react-native reactjs javascript
1 Answers

I really don't know why you are conditionally render the screens, I think you are using name in bad way. You should navigate like navigation.navigate('ForgotPassowrd') (name of the screen). It keep showing you update email because Home not exist.

export const AuthNavigator = () => {
    return (
        <Stack.Navigator headerMode='none'>
            <Stack.Screen name='Home' component={SignupContainer}></Stack.Screen>
            <Stack.Screen name='ForgotPassword' component={ForgotPasswordContainer}></Stack.Screen>
            <Stack.Screen name='Update Email' component={UpdateEmailContainer}></Stack.Screen>
        </Stack.Navigator>
    );
};
user_54492380
Related