I recently upgraded from SDK 51 to SDK 52. I had to upgrade several libraries, and before my code worked fine, what I find after upgrading, is that the routing, has been broken, and gives me an error, which I do not see any sense, right now I have the version
"@react-navigation/native": "^7.0.2",
"@react-navigation/native-stack": "^7.0.2",
"expo": "52.0.7"
Now, I have created my app with Expo, and my input file is in app/_layout.tsx
. In this file, I have a condition to know if there is user loaded, if so, it enters in the user panel, where I have a drawer, and if not, it enters in the Stack.Navigator
where the Stack.Screen
of the registry and log-in are.
return (
<TamaguiProvider config={tamaguiConfig}>
<Theme name="light">
<AuthContext.Provider value={{user, setUser}}>
<NavigationContainer independent={true}>
{user ? (
<DrawerLayout /> // Render Drawer if logged in
) : (
<Stack.Navigator initialRouteName="Login">
<Stack.Screen
name="Login"
options={{ headerShown: false }}
component={Login}
/>
<Stack.Screen
name="Register"
options={{ headerShown: false }}
component={RegisterHandler}
/>
</Stack.Navigator>
)}
</NavigationContainer>
</AuthContext.Provider>
</Theme>
</TamaguiProvider>
)
In my file <drawerlayout>
, I have the user panel with the routes </drawerlayout>
const DrawerLayout = () => {
const [newRecipeGenerated, setNewRecipeGenerated] = useState(false);
return (
<NewRecipeGenerationContext.Provider value={{ newRecipeGenerated, setNewRecipeGenerated }}>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomePage} />
<Drawer.Screen name="Generación Recetas" component={RecipeGeneration} />
<Drawer.Screen name="Mis Recetas" component={UserRecipes} />
</Drawer.Navigator>
</NewRecipeGenerationContext.Provider>
);
}
The thing is, I’m getting this error all the time:
Warning: Error: Looks like you have nested a ‘NavigationContainer’ inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, wrap the container in ‘NavigationIndependentTree’ explicitly. Note that this will make the child navigators disconnected from the parent and you won’t be able to navigate between them.
But I only have created one NavigationContainer
, and it is in the _layout.tsx
file!
I don’t understand why it complains that there are more. If someone can tell me why this is so, I would be very grateful.
Edit: I searched in all projects for NavigationContainer
, and it’s only used in _layout.tsx
I just saw this from a blog:
Also Keep on mind: If you create your app with npx create-expo-app@latest –with-router, in this case a default navigation container is added and it causes the issue when adding NavigationContainer.
Maybe that’s why…
2
Answers
Ensure Only One NavigationContainer: Verify that your NavigationContainer in app/_layout.tsx is the only one in your app. If any of your navigators or components like DrawerLayout or any of the Stack.Screen components include another NavigationContainer, remove it.
Remove the independent={true} Prop (if not needed): The independent={true} prop makes the navigation container operate independently from others, but in most cases, you do not need it. Ensure you are not using it unless necessary.
Check DrawerLayout Component: Verify that DrawerLayout or any child navigators don’t include a NavigationContainer. The Drawer should be inside the main NavigationContainer in app/_layout.tsx.
Check with
npm ls @react-navigation/native
oryarn list @react-navigation/native
. If there is duplication in dependency , for me it was something like
so i removed the later and it works now