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

Navigating to a screen in a nested navigator, and going back


Suppose I have 2 StackNavigator's nested side by side in a BottomTabNavigator, like such:

  const StackA = () => (
    <StackANavigator.Navigator>
      <StackANavigator.Screen
        component={ScreenA1}
        name={'screenA1'}
      />

      <StackANavigator.Screen
        component={ScreenA2}
        name={'screenA2'}
      />
    </StackANavigator.Navigator>
  );

  const StackB = () => (
    <StackBNavigator.Navigator>
      <StackBNavigator.Screen
        component={ScreenB1}
        name={'screenB1'}
      />

      <StackBNavigator.Screen
        component={ScreenB2}
        name={'screenB2'}
      />
    </StackBNavigator.Navigator>
  );

  const App = () => (
    <BottomTabNavigator.Navigator>
      <BottomTabNavigator.Screen
        component={StackA}
        name={'stackA'}
      />

      <BottomTabNavigator.Screen
        component={StackB}
        name={'stackB'}
      />
    </BottomTabNavigator.Navigator>
  );

And suppose the app starts on 'screenA1'. I can navigate between the stacks by doing navigate('stackB') and navigate('stackA'), and I can navigate, for example, from 'screenA1' to 'screenB2' with navigate('stackB', { screen: 'screenB2' }). However, doing so messes up the B stack. If I call goBack from there to go to 'screenA1', and then navigate('stackB'), I get taken to 'screenB2' instead of that stack's initial route, which is 'screenB1'.

Is it possible to avoid this behaviour without duplicating 'screenB2' in the A stack?

Edit: for illustration A1 -> A2 -> B2 -> A2 -> A1. Now if I try to go to B1, I go to B2


Solution

  • The supposed logic behind a tab navigator is that each tab lives independent, so it is very uncommon to call a screen in a different tab.

    Because of this you should have a reference to each needed screen in each tab. To prevent mistakes in the navigation routes, you can name them dependent on the tab.

    If you want to have a separate navigation on top of the current navigation inside a single tab you could add a modal in addition.