0

My desired result is to have a navigation system such that I can click between two tabs in my navigation and those will add to the same stack, so I can press the back button after clicking either tab and the back button will work as if it is one giant app, rather than multiple stacks with one stack per tab.

I currently have a Stack Navigator inside Tab Navigator like this:

const AppStack = createStackNavigator({ 
  Home: Home,
  Browse: Browse,
});

Then I have a Tab Navigator:

const AppNavigator = createBottomTabNavigator({
  'Home': {
    screen: AppStack
  },
  'Browse': {
    screen: AppStack
  },
  'Profile': {
    screen: App,
  },
}
});

What this is doing is presumably creating two AppStacks or something, but when I go to each of the screens they re-mount as if they were not part of the same stack. I'd like them to be the same component and if I route to the screen with something like this.props.navigation.navigate, it would detect that and change the tab color (lower priority).

These all come alive with the Switch Nav:

const AppContainer = createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: Authentication,
      App: AppNavigator,
      Auth: AuthStack,
    },
    {
      initialRouteName: 'AuthLoading',
    }
  )
);

Thank you in advance!

Thingamajig
  • 4,107
  • 7
  • 33
  • 61
  • I don't think it's possible to achieve without doing some hacks around react-navigation – Auticcat Sep 14 '19 at 16:12
  • It feels more intuitive than what's currently happening, I can't imagine that's the UX of react-navigation. Is it not common to have two tabs on a common stack? – Thingamajig Sep 14 '19 at 16:20

0 Answers0