React Navigation v5 won't reset and remove previous routes

Question

I have a login screen which I have placed in stack. After user logs in successfully he is redirected to home screen which is a drawer screen. One of the options of drawer screen is logout, so on click of it user should be logged out. Following is my code for logout screen. I am just showing a progress bar of logout screen in ui but in useEffect hook, I am calling the following method

navigation.navigate({index: 0, routes: [{name: LOGIN_SCREEN}]});

but I get an error saying You need to specify name or key when calling navigate with an object as the argument and I am redirected to home screen. when I restart my app completely then only it moves to login screen. I am passing the right value for name key.

My Navigation stack looks something as follows

 <Stack.Navigator>

      <Stack.Screen
        name={LOGIN_SCREEN}
        component={LoginScreen}
        options={{headerShown: false}}
      />
     <Stack.Screen
        name={HOME_STACK_SCREEN}
        component={DrawerStack}
        options={{headerShown: false}}
      />...

My drawer component as follows

<Drawer.Navigator
      drawerStyle={{backgroundColor: BLUE_COLOR_1}}
      drawerContentOptions={{labelStyle: {color: '#FFF'}}}>
      <Drawer.Screen
        name={HOME_SCREEN}
        component={Home}
        options={{
         ...
        }}
      />
     <Drawer.Screen
        name={LOGOUT_SCREEN}
        component={Logout}
        options={{
         ...
        }}
      />

how are you navigating from Login Stack to Drawer, with reset? — praveen seela, Apr 29 '20 at 17:40

score 16 · Accepted Answer · answered Feb 29 '20 at 21:18

16

If you want to reset then you need to use reset, not navigate:

navigation.reset({
  routes: [{ name: LOGIN_SCREEN }]
});

answered Feb 29 '20 at 21:18

satya164

9,464
2
31
42

Thanks for the answer but I get a dialog saying Invariant violation. Maximum depth exceeded after replacing navigate with reset – BraveEvidence Mar 01 '20 at 04:20
this might be related to this https://github.com/react-navigation/hooks/issues/35 – BraveEvidence Mar 01 '20 at 16:22
`LOGIN_SCREEN` should be in quotes – cmcodes Jul 07 '21 at 15:28
depends on if it's a variable or a string, it's a variable in OP – satya164 Jul 07 '21 at 15:58

score 16 · Answer 2 · answered Apr 24 '20 at 15:53

16

In react-navigation v5. You can reset navigation like this

import { CommonActions } from "@react-navigation/native";

this.props.navigation.dispatch(
     CommonActions.reset({
        index: 0,
        routes: [{ name: "LOGIN_SCREEN" }],
    })
);

answered Apr 24 '20 at 15:53

Shahnawaz Hussain

187
9

React Navigation v5 won't reset and remove previous routes

2 Answers2