react-nativeexpoexpo-router

How to reset navigation in expo router


I have 3 screens for forgot password. Forgot password screen starts from login page. So after successfully resetting the password I need user to go to login page. But still the user can go back to the last screen of forgot password from login page when use router.push() How to reset the stack navigation with expo router


Solution

  • import { useNavigation } from 'expo-router';
    const ForgotPasswordScreeen = () => {
        const navigation = useNavigation()
    
        const onResetPassword = () => {
            resetPassword() // your logic to reset the password.
            //This will reset your stack back to login screen
            navigation.reset({
                index: 0,
                routes: [{ name: 'login' }], // your stack screen name
            });
        }
    
        return (
            <JSX />
        )
    }
    

    Check the links. Expo-router is a wrapper of react-navigation. I assume you can do everything you can do with react-navigation with expo-router.

    https://docs.expo.dev/router/reference/hooks/#usenavigation

    https://reactnavigation.org/docs/navigation-prop#reset