Nesting StackNavigator inside BottomTabNavigator react-navigation v5

user_4718994 0
Viewed 753

Going through my first React Native project, using react-navigation v5, and struggling to work out the logic behind multiple navigators in one.

I've tried to copy the 'auth-flow' setup from here, but I have some extra requirements, where once signed in, it should render a bottomTab navigator with three items (create, lists, account) where the second screen lists, renders a list of items where clicking one opens a new screen for the details (where I'd imagine these two screens would be a stack?)

pseudo routes:
- home
- lists 
    - details  <- nested in the tab navigator screen
- account

current setup:

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
          {isSignedIn ? (
              <Tab.Navigator>
                <Tab.Screen name='List' component={TrackListScreen} />
                <Tab.Screen name='Create' component={TrackCreateScreen} />
                <Tab.Screen name='Account' component={AccountScreen} /> 
              </Tab.Navigator>
          ) : (
            <Stack.Navigator>
              <Stack.Screen name='Signup' component={SignupScreen} />
              <Stack.Screen name='Signin' component={SigninScreen} />
            </Stack.Navigator>
          )}
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

react-native reactjs javascript
2 Answers

What you'll want to do is make the List tab it's own stack navigator. So you'll have this 

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        {isSignedIn ? (
          <Tab.Navigator initialRouteName='TrackListNavigator'>
            <Tab.Screen name='TrackListNavigator' component={TrackListNavigator} />
            <Tab.Screen name='Create' component={TrackCreateScreen} />
            <Tab.Screen name='Account' component={AccountScreen} /> 
          </Tab.Navigator>
         ) : (
          <Stack.Navigator>
            <Stack.Screen name='Signup' component={SignupScreen} />
            <Stack.Screen name='Signin' component={SigninScreen} />
          </Stack.Navigator>
        )}
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

So then instead of the tab navigating to TrackListScreen, it instead navigates to a new stack navigator that contains that screen like this

export default function TrackListNavigator() {
  return (
    <Stack.Navigator initialRouteName='TrackListScreen'>
      <Stack.Screen name='TrackListScreen' component={TrackListScreen} />
    </Stack.Navigator>
  )
}

This way, when you are not signed in you will only have access to the Signup and Signin screens. Then once signed in you will land on the TrackListScreen with access to any other Stack.Screen you add to the TrackListNavigator.

user_99855210

You would in this scenario create an extra holding component, such as TrackListHome. TrackListHome would be a component that is specifically a StackNavigator, with the initialRouteName being your TrackListScreen, and Details would be another Screen in your StackNavigator. Then you would be able to call 

props.navigation.navigate("TrackListDetail")

Your StackNavigator might look like this (TrackListHome)

return (
  <Stack.Navigator initialRouteName={'TrackListScreen'}>
    <Stack.Screen name='TrackListScreen' component={TrackListScreen} />
    <Stack.Screen name='TrackListDetail' component={TrackListDetail} />
  </Stack.Navigator>)

Then inside of your TabNavigation you would use this TrackListHome component.

user_37755550
Related