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 conditional 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 I have the user panel with the routes,
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.