How to use Multiple Navigators in React Native version 6.x

Question

Im new to react native. Im trying to use multiple navigations in my app - bottom tab navigaton and drawer navigation. I have successfully added bottom tab navigation but when Im trying to add a drawer navigation I have an error:

"Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container. "

I want to use both navigators in my app.

Here is my code:

bottomTabs.js:

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import React from "react";

import about from "../screens/about";
import home from "../screens/home";
import reviewDetails from "../screens/reviewDetails";

const Tab = createBottomTabNavigator();

const AppNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen
      name="about"
      component={about}
      options={{
        title: "About",
      }}
    ></Tab.Screen>
    <Tab.Screen
      name="home"
      component={home}
      options={{
        title: "Home",
      }}
    ></Tab.Screen>
    <Tab.Screen name="reviewDetails" component={reviewDetails}></Tab.Screen>
  </Tab.Navigator>
);

export default AppNavigator;

drawerNavigation.js

import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import "react-native-gesture-handler";

import home from "../screens/about";
import about from "../screens/home";

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={home} />
      <Drawer.Screen name="About" component={about} />
    </Drawer.Navigator>
  );
}

app.js

import React from "react";
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import BottomTabs from "./navigation/bottomTabs";
import DrawerNavigator from "./navigation/drawerNavigarion";

export default function App() {
  return (
    <>
      <NavigationContainer>
        <BottomTabs></BottomTabs>
        <DrawerNavigator></DrawerNavigator>
      </NavigationContainer>
    </>
  );
}

And here is what I want to have:

What should I change in my code if I want to use both like on the picture example?

Answer 1

In order to use multiple navigations, you need to use nesting.

Ref: https://reactnavigation.org/docs/nesting-navigators/

Ex: GitHub

Modifications:

App.js

    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>

DrawerNavigation.js

    import BottomTabs from "./navigation/bottomTabs";
    //...

    <Drawer.Navigator initialRouteName="Tab">
      <Drawer.Screen name="Tab" component={BottomTabs} />
    </Drawer.Navigator>

BottomTabs.js

    <Tab.Navigator initialRouteName="Home">
      <Tab.Screen name="About" component={About} />
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="ReviewDetails" component={ReviewDetails} />
    </Tab.Navigator>