React Navigation v5 BottomTabNavigator doesn't show when nesting

user_13606314 0
Viewed 438

BottomTabNavigator doesn't show when code like this:

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function Bottom() {
    return (
        <Tab.Navigator>
            <Tab.Screen name="Home" component={HomeScreen}  />
            <Tab.Screen name="Setting" component={SettingsScreen}  />
        </Tab.Navigator>
    );
}

function AppRoot() {
    return (
        <NavigationContainer>
            <Stack.Navigator
            initialRouteName="HomePage"
            screenOptions={{ gestureEnabled: false }}>
            //this is bottom tab navigator, it doesn't show.
            <Stack.Screen name="Bottom" component={Bottom} />
            <Stack.Screen
                name="HomePage"
                component={HomePage}
            />
            <Stack.Screen
                name="Page1"
                component={Page1}
            />
        </Stack.Navigator>
        </NavigationContainer>
    );
}


AppRegistry.registerComponent(appName, () => AppRoot);

But when I don't use nesting Stack,BottomTabNavigator works fine.

Like this:

function AppRoot() {
    return (
        <NavigationContainer>
            <Bottom />
        </NavigationContainer>
    );
}

How to use both in one page, normal navigator and bottom tab navigator.

react-navigation react-native
1 Answers

As per your code 'HomePage' is the initial screen and the bottom tab is added on screen named 'Bottom'. Use DrawerNavigator to add sidemenu and you can add bottom tab on one of the screen as show below: 

    const Drawer = createDrawerNavigator();
    const Tab = createBottomTabNavigator();

   function HomeScreen({navigation}) {
    return (
    <View style={{flex: 1}}>
     <View style={{alignSelf:'flex-start'}}> 
       <Button
         onPress={() => navigation.toggleDrawer() }
          title="Menu"
       />
     </View> 
   <View style={{alignSelf:'center',justifyContent:'space-around'}}> 
    <Button
      onPress={() => navigation.navigate('Notifications')}
       title="Go to notifications"
     />
    </View>
   </View>
   );
  }

  function Tab1() {
   return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Tab1!</Text>
     </View>
    );
  }

  function Tab2() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
     <Text>Tab2!</Text>
    </View>
   );
  }

   function NotificationsScreen({navigation}) {
   return (

   <Tab.Navigator>
    <Tab.Screen name="Tab1" component={Tab1} />
    <Tab.Screen name="Tab2" component={Tab2} />
   </Tab.Navigator>

   );
   }

  function SettingsScreen({navigation}) {
  return (
   <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
     <Button
      onPress={() => navigation.navigate('Home')}
        title="Go back home"
      />
   </View>
  );
 }

 export default function App() {
 return (
   <NavigationContainer>
    <Drawer.Navigator initialRouteName="Home" drawerPosition="left" 
       drawerType="slide">
   <Drawer.Screen
     name="Home"
      component={HomeScreen}/>
    <Drawer.Screen name="Notifications" component={NotificationsScreen} />
    <Drawer.Screen name="Settings" component={SettingsScreen} />
   </Drawer.Navigator>
   </NavigationContainer>
  );
}
user_125260130
Related