CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-v5
Luís Alves
Luís Alves

Reputation: 188

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

Upvotes: 1

Views: 490

Answers (1)

Christian
Christian

Reputation: 4641

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.

Upvotes: 1

Related Questions