How to reset to a different stack with react-navigation

Question

We are using react-navigation as the default navigation system in our react native app, which currently has multiple stacks. We would like to navigate from a screen in one stack to a screen in another stack. This is a basic example of the different stacks:

const StackNavigator = createStackNavigator({
  SplashScreen: connectToStore(SplashScreen),
},{
  initialRouteName: 'SplashScreen',
  mode: 'card'
})

const ModalNavigator = createStackNavigator({
  LoginScreen: connectToStore(LoginScreen),
})

const AppNavigator = createStackNavigator({
  StackNavigator: StackNavigator,
  ModalNavigator: ModalNavigator,
}, {
  initialRouteName: 'StackNavigator',
  headerMode: 'none',
  mode: 'modal'
})

The problem is if we try to reset to a new screen like so:

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

We get an error that says something like so:

ExceptionsManager.js:74 Error: There is no route defined for key DashboardScreen. Must be one of: 'StackNavigator','ModalNavigator'

Asleepace · Accepted Answer · 2019-08-14 01:58:28Z

2

Since this question doesn't seem well documented or answered other places here it is

const resetAction = StackActions.reset({
  index: 0,
  key: null,
  actions: [
    NavigationActions.navigate({
      routeName: 'ModalNavigator',
      action: NavigationActions.navigate({
        routeName:'LoginScreen', 
        params:{}
      })
    })
  ]
});
this.props.navigation.dispatch(resetAction);

First we need to specify the correct stack we want to resetTo in this case the ModalNavigator and then we add a sub-action where we can specify the screen of that navigator ie LoginScreen.

And just for future reference, to pop or go back we can use

this.props.navigation.dispatch(StackActions.pop({ n:1 }));

where n is the number of screens to pop, or just to go all the way:

this.props.navigation.dispatch(StackActions.popToTop());

answered Aug 14, 2019 at 1:58

Asleepace

3,7452 gold badges27 silver badges40 bronze badges

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

2 Comments

Hugo Over a year ago

I'm still unable to specify an action from another stack, it give me an error and says must be one of the key from my current stack.

nothingimp Over a year ago

Where to add Sub Actions ?

Collectives™ on Stack Overflow

How to reset to a different stack with react-navigation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related