CODEWITHSUNDEEP
react-nativeexpoexpo-router
Mishen Thakshana
Mishen Thakshana

Reputation: 1554

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

Upvotes: 4

Views: 8131

Answers (6)

Mishen Thakshana
Mishen Thakshana

Reputation: 1554

With the release of expo-router v3.5, some functions were introduced,

router.dismiss()
router.dismissAll()
router.canDismiss()

Upvotes: 0

Shahar Hajdu
Shahar Hajdu

Reputation: 473

This is a classic case for dismissTo:

router.dismissTo("/login");

This will clear all screens back to /login

Upvotes: 1

adi
adi

Reputation: 1140

Im using "expo": "~51.0.39", and "expo-router": "~3.5.24", and the below works for me in clearing all the screens behind the current screen.

while (router.canGoBack()) { 
 router.back();
}

This code will remove all the screens in the stack behind the current screen.

Just to give an example:

From screen 1 , you go to screen 2 and you use

router.push('/screen2').

So from screen 1 if you want to again come back to screen 1, you can better use

router.back();

But say, you went from Screen 1 to Screen 2 to Screen 3 and if once reached Screen 3 if you need to have only Screen 3 and no other screens in the app behind Screen 3.

Then while in Screen 2 use the below.

while (router.canGoBack()) { 
 router.back();
}
router.replace('/screen3');

Hope this helps someone..

Upvotes: 0

noOne
noOne

Reputation: 91

This worked for me.

router.dismissAll();
router.replace("login")

Upvotes: 9

Vinit P. Jain
Vinit P. Jain

Reputation: 11

Use router.replace() this will remove the previous stack from the navigation and you will not be able to go back.

Upvotes: 1

ko100v.d
ko100v.d

Reputation: 1156

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

Upvotes: 5

Related Questions