Skip to content

Error: Looks like you have nested a ‘NavigationContainer’ inside another. Normally you need only one container at the root of the app

I followed the docs of React 5 for Drawer Navigation in react native but getting this error. Here is my Code

import React from 'react'
import {
} from 'react-native'

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

import Screen1 from './DrawerScreens/Screen1';
import Screen2 from './DrawerScreens/Screen2';
import Screen3 from './DrawerScreens/Screen3';

const Drawer = createDrawerNavigator();

function Navigations()
            <Drawer.Navigator initialRouteName="Home">
                <Drawer.Screen name="Home" component={Screen1} />
                <Drawer.Screen name="Settings" component={Screen2} />
                <Drawer.Screen name="Contacts" component={Screen3} />

export default Navigations;

I am new to react native, so don’t know what to do


You only need to declare one < NavigationContainer > in the top component, example:

function SecondComponent() {
  return (
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />

function FirstComponent() {
  return (
    <NavigationContainer> {/* this is the only NavigationContainer */}
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />