React Native navigating between Nested StackNavigator

Question

I have the three navigators below, I am navigating to the DashBoard Screen after the login is completed but I have an issue when I want to logout from the DashBoard Screen, this.props.navigation.navigate('Login') is working fine but I want to clear the stack when signout button is pressed.

const DashBoardStackNavigator = createStackNavigator({
      DashBoard: DashBoard,
      Second:Second,
      Third:Third
    })


const BottomTabNavigator = createBottomTabNavigator({
  DashBoardStackNavigator,
  Account,
  Report,
  Members
}})

const AppStackNavigator = createStackNavigator({
  Login: Login,
  BottomTabNavigator: BottomTabNavigator

})


export default createAppContainer(AppStackNavigator)

I tried the following with no luck

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Login' })],
});
this.props.navigation.dispatch(resetAction);

Error: there is no route defined for key Login, Must Be one of DashBoard

Try to add 'key: null' to your StackActions.reset. See if it works — kivul
– kivul, Commented Feb 15, 2019 at 9:58
try this, this.props.navigation.dispatch(StackActions.popToTop()) This will pop all screens except first one. — Jaydeep Galani
– Jaydeep Galani, Commented Feb 18, 2019 at 4:06
When I navigated to the Dashboard Screen I already reset the stack and DashBoard is the first screen Because I don't want the user to navigate back to login Screen after sign in. — Basil Satti
– Basil Satti, Commented Feb 18, 2019 at 4:34

Ahmed Imam · Accepted Answer · 2019-02-18 04:46:04Z

5

+50

Try this

 const navigateAction = StackActions.reset({
            index: 0,
            key: null,
            actions: [NavigationActions.navigate({ routeName: 'Login' })]
        })
        this.props.navigation.dispatch(navigateAction)

answered Feb 18, 2019 at 4:46

Ahmed Imam

1,3682 gold badges20 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gbalduzzi · Accepted Answer · 2019-02-21 16:58:27Z

1

I suggest you to use a SwitchNavigator, as suggested by the following official documentation: https://reactnavigation.org/docs/en/auth-flow.html

In your case, just replace the last StackNavigator with a SwitchNavigator:

const DashBoardStackNavigator = createStackNavigator({
      DashBoard: DashBoard,
      Second:Second,
      Third:Third
    })


const BottomTabNavigator = createBottomTabNavigator({
  DashBoardStackNavigator,
  Account,
  Report,
  Members
}})

const AppStackNavigator = createSwitchNavigator({
  Login: Login,
  BottomTabNavigator: BottomTabNavigator

})


export default createAppContainer(AppStackNavigator)

Then just navigate to the Login:

this.props.navigation.navigate('Login')

It will automatically reset the stack when you switch between the bottomTabNavigator stack and the login stack, blocking all back actions between the two.

edited Feb 21, 2019 at 16:58

answered Feb 21, 2019 at 16:49

gbalduzzi

10.3k3 gold badges36 silver badges65 bronze badges

1 Comment

Will Over a year ago

With react-navigation v5, there is a better, simpler solution than the switch navigator: reactnavigation.org/docs/upgrading-from-4.x/#switch-navigator I'm not even sure the switch navigator still exists in v5.

Collectives™ on Stack Overflow

React Native navigating between Nested StackNavigator

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related