javascriptreactjsreact-nativeexponavigator

Expo React Native Error With Navigator, Looks like you have nested a 'NavigationContainer' inside another


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...

New changes, I have removed the Navigation that wraps the _layout. and now I get another different error.....

Este es mi codigo del _layout principal

return (
    <TamaguiProvider config={tamaguiConfig}>
      <Theme name="light">
        <AuthContext.Provider value={{user, setUser}}>
              <DrawerLayout /> // Render Drawer if logged in
            ) : (
              <Stack>
                <Stack.Screen
                  name="(drawer)"
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="auth"
                  options={{ headerShown: false }}
                />
              </Stack>
            )}
        </AuthContext.Provider>
      </Theme>
    </TamaguiProvider>
  )

But I get an error ..

Cannot read property 'name' of undefined

This error is located at: in HomePage (created by SceneView)


Solution

  • The problem was in the package.json

    It turns out that when updating to expo version 52.0.7, I did not finish updating all the libraries related to routing to the new version to be compatible.

    The command that updated it automatically (in theory) did not work, so I have updated it manually, and I had to put the versions correctly, especially the expo router and react-navigation/drawer.