React Navigation: Reset entire navigation state to initial values

Question

I'm working on a RN app, and when a user signs out of the app I reset all the Redux state to it's initial values and navigate to the Login screen. However, on signing back in, the navigation state has been carried over, which is causing problems. How can I reset the navigation state, so each sign in acts like a completely new app session?

My navigation looks like this:

const MainNavigator = createBottomTabNavigator(
  {
    login: { screen: Login },
    main: {
      screen: createBottomTabNavigator(
        {
          home: {
            screen: createStackNavigator({
              ...
            }),
          },
          map: {
            screen: createStackNavigator({
              ...
            }),
          },
        },
      ),
    },
  },
  {
    initialRouteName: 'login',
  },
);

Many thanks!

consider to use switchNavigator it does not handle back actions and it resets routes to their default state when you switch away. — buncis

Haseeb A Haseeb A · Accepted Answer · 2019-03-18T17:44:28

from the api https://reactnavigation.org/docs/en/navigation-prop.html#dismiss

Call dismiss if you're in a nested (child) stack and want to dismiss the entire stack, returning to the parent stack.

So, use that

 this.props.navigation.dismiss()

React Navigation: Reset entire navigation state to initial values

1 Answers