React Navigation v5 BottomTabNavigator doesn't show when nesting - react-native

Question

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.

Answer 1

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>
);
}