Search code examples
react-navigationreact-native-navigationreact-navigation-v5

How to reset a Stack in a different Tab using React Navigation 5.x


My app has a TabNavigator with a StackNavigator in each Tab. I'm not resetting the stacks when navigating between them by clicking on different tabs, so when you change tab, the stack contains the previous state. However, occasionally from within a Screen in one Tab, I want to navigate to a specific Screen in a different tab, and on that occasion, I want to reset the stack in the target Tab.

TabNavigator
    Tab1 
      StackNavigator
         - ScreenA
         - ScreenB
    Tab2
      StackNavigator
         - Screen1
         - Screen2

I want to be able to put a button on Screen2 that resets the Stack on Tab1.

I was wondering if the "target" parameter mentioned in the docs here might help, but there's no examples of how to use it. https://reactnavigation.org/docs/navigation-actions/

(I have searched on here but answers suggested for 4.x don't seem to apply anymore). Thanks!


Solution

  • In the end I was able to use the reset action to do this. I dispatched nested state for the tab I wanted to reset:

    navigation.dispatch(
      CommonActions.reset({
        routes: [
          {
            name: 'tab-route-name',
            state: {
              routes: [
                { name: 'stack-route-1' },
                { name: 'stack-route-2' },
                { name: 'stack-route-3' }
              ]
            }
          }
        ]
      })
    )
    

    It seems to be clever enough that as long as the tab navigator is a parent of the current route, it will find it and reset it.