React Navigation - navigating to another tab and reset stack

Question

I'm trying to route from one StackNavigator to another, both of which are inside a TabNavigator. I'm currently able to get there by simply doing:

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

But I also want to reset that tab when I go to it. Here is how my app navigators are generally set up:

- Main (StackNavigator)   - LoginScreen   - MainTabs (TabNavigator)     - Tab1 (StackNavigator)       - Screen1       - Screen2     - Tab2 (StackNavigator)       - Screen3       - Screen4 

How could I navigate to Screen3 but also reset the StackNavigator Tab2?

I've also tried doing this, to no avail:

let resetAction = NavigationActions.reset({   index: 0,   key: 'Tab2',   actions: [     NavigationActions.navigate({ routeName: 'Screen3' })   ], });  this.props.navigation.dispatch(resetAction); 

Answer 1

You'll have to dispatch two navigation actions, one to reset the stack of the current tab and another to navigate to the next screen:

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

Here is a snack