How to render Tab navigation with Drawer navigation simultaneously in react-navigation v5

Question

I'm looking to render both the drawer navigation and tab navigation components simultaneously in my app.

I created a file named root.js and wrote both of components in this file:

import React, {Fragment} from 'react';

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { Login, SecondPage, ThirdPage } from './components/index';

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

And this is the component:

const MainDrawer = () => {

  return (

    <Fragment>
    <NavigationContainer >

      <Drawer.Navigator>
        <Drawer.Screen name="Login" component={Login} />
        <Drawer.Screen name="Second Page" component={SecondPage} />
        <Drawer.Screen name="Third Page" component={ThirdPage} />
      </Drawer.Navigator>
    </NavigationContainer>

<NavigationContainer>
      <Tab.Navigator>
      <Tab.Screen name="Login" component={Login} />
        <Tab.Screen name="Settings" component={SecondPage} />
        <Tab.Screen name="Third Page" component={ThirdPage} />
      </Tab.Navigator>
    </NavigationContainer>


    </Fragment>

  )

export default MainDrawer;

But components got duplicated as you can see in following screenshot, How can i merge these two components and render them as one component?

Answer 1

Use a single NavigationContainer. Put your Tab.Navigator as your first screen.

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;

Note that your Drawer will contain 3 entries, and if you select "Second Page", you will be redirected to SecondPage and you won't see the Tabs. If you want a more complex behaviour, you need to create a custom component to replace the default one for the Drawer.