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

user_10846581 0
Viewed 18835

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 {
    View,
    Button,
    Text,
} 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()
{
    return(
        <NavigationContainer>
            <Drawer.Navigator initialRouteName="Home">
                <Drawer.Screen name="Home" component={Screen1} />
                <Drawer.Screen name="Settings" component={Screen2} />
                <Drawer.Screen name="Contacts" component={Screen3} />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

export default Navigations;

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

react-native reactjs javascript
4 Answers

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

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

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

pass independent={true} to both of the Navigation container .

<NavigationContainer independent={true}>
</NavigationContainer>

But you will not be able to navigate between the screens of two separate navigation container

If you want to navigate between them then you have to maintain single navigation container.

user_145494680

If you have only one NavigationContainer in your app, please check if you're importing screens correctly.

In my case, I've mistakenly imported the entry route file which contains NavigationContainer itself.

This can happen if you're using same file names for entry route files (e.g. Root.tsx or Main.tsx) and let IDE import files automatically.

user_117925770

In my case I have used BOTTOM NAVIGATION so it has that <NavigationContainer> just removing <NavigationContainer> in BOTTOM NAVIGATION and only keeping it between <Stack.Navigator> resolved my problem

I think this will helpful for someone ✌

user_126352490
Related