If you want to render Tab navigation with Drawer navigation simultaneously in react-navigation v5. Use a single NavigationContainer. Put your Tab.Navigator as your first screen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | const LoginWithTabs = () => { const Tab = createBottomTabNavigator() return ( <Tab.Navigator> <Tab.Screen name="Login" component={Login} /> <Tab.Screen name="Settings" component={SecondPage} /> <Tab.Screen name="Third Page" component={ThirdPage} /> </Tab.Navigator> ) } const MainDrawer = () => { return ( <NavigationContainer > <Drawer.Navigator> <Drawer.Screen name="LoginWithTabs" component={LoginWithTabs} /> <Drawer.Screen name="Second Page" component={SecondPage} /> <Drawer.Screen name="Third Page" component={ThirdPage} /> </Drawer.Navigator> </NavigationContainer> ) export default MainDrawer; |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
