Found screens with the same name nested inside one another. This can cause confusing behavior during navigation. React navigation 5.x

Question

TabScreenStack.js

import { StyleSheet, Text, View, Button } from 'react-native';
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './home';
import DehazeRoundedIcon from '@material-ui/icons/DehazeRounded';
import LoginScreen from './login';
import AboutScreen from './about';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
const Tab = createMaterialBottomTabNavigator();
const LoginStack = createStackNavigator();
const HomeStack = createStackNavigator();
const AboutStack = createStackNavigator();


const HomeStackScreen = ({ navigation }) => (

    <HomeStack.Navigator >
        <HomeStack.Screen name="Home" component={HomeScreen} options={{
            headerLeft: () => {
                return (
             <View style={styles.drawer}>
                <DehazeRoundedIcon onClick = {() => navigation.openDrawer()} />
             </View>
            )
            },
        
        }} />   
    </HomeStack.Navigator>
  );


const LoginStackScreen = ({navigation}) => (
 
        <LoginStack.Navigator>
            <LoginStack.Screen name="Login" component = {LoginScreen} />
        </LoginStack.Navigator>
    );

const AboutStackScreen = ({navigation}) => (
 
      <AboutStack.Navigator>
          <AboutStack.Screen name="About" component = {AboutScreen} />
      </AboutStack.Navigator>
  );


const TabStackScreen = ({ navigation }) => (

  <Tab.Navigator initialRouteName="Home" activeColor="#e91e63" barStyle={{ backgroundColor: 'white' }}>
      <Tab.Screen
        name="Overview"
        component={HomeScreen}
      />
      <Tab.Screen
        name="Register"
        component={LoginScreen}
        
      />
      <Tab.Screen
        name="knowledge"
        component={AboutScreen}
      />
  </Tab.Navigator>
  );

  const styles = StyleSheet.create({
    drawer: {
        paddingLeft: 10,
    },
})
  export default TabStackScreen;

App.js

import { StyleSheet, Text, View, Button } from 'react-native';
import React from 'react';

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

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


const Drawer = createDrawerNavigator();

import TabStackScreen from './screens/TabStackScreen';





const App = () => {  
    return (
        <NavigationContainer>
            <Drawer.Navigator>
                <Drawer.Screen name="Overview" style={styles.homenav} component={TabStackScreen} />
                {/*<Drawer.Screen name="Login" component={LoginStackScreen} /> */}
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

export default App;

const styles = StyleSheet.create({
     drawer: {
         paddingLeft: 10,
     },
     homenav: {
         display:"flex",
         justifyContent: "center"
     }

})

I am Having the error of

**> found screens with the same name nested inside one another. Check:

Overview, Overview > Overview This can cause confusing behavior during navigation. Consider using unique names for each screen instead.**

There is no error in imports and versions all modules are in 5.x version and also I tried different names but still error continuous. Can somebody help me in this. Thank You.

Answer 1

change the name for one of these routes, every screen must have a unique name.

<Tab.Screen
   name="Overview"
   component={HomeScreen}
/>

<Drawer.Screen name="Overview" style={styles.homenav} component={TabStackScreen} />

Answer 2

I had the same issue, Like Ahmed Gaber mentioned in the previous answer what solved it for me was changing the name of each screen(whether it was the drawer screen or stack screen or TabStack screen) to a unique name. If you had changed the 'Overview' name in one of the screens and still the issue remains my guess is one of the screens is still named the same elsewhere in your code.

You might also need to change the initialRoute name given inside Tab.Navigator to one of the screen names given in Tab.Screen. Currently the name "Home" given is not one among the 3 names (i.e Overview, Register, knowledge) given.

I'm not sure if this is exactly what will help you but this is what worked me. Kindly share what worked for you.

PS: The example given here in the react-navigation website https://reactnavigation.org/docs/tab-based-navigation#a-native-stack-navigator-for-each-tab does use the same screen name for multiple screens, not sure why. Doing this gave me the console error same as yours.

You can also refer these to see if it solves your issue

https://reactnavigation.org/docs/screen-options-resolution/

https://reactnavigation.org/docs/nesting-navigators/

Answer 3

Delete tabScreenStack page, if you are adding tab-bar. After Delete you have to make changes to your App.js. Here is the change what I did in my code

App.js

import { StyleSheet, Text, View, Button } from "react-native";
import React from "react";

import { createDrawerNavigator } from "@react-navigation/drawer";

import { NavigationContainer } from "@react-navigation/native";

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import HomeScreen from "./screens/home";
import LoginScreen from "./screens/login";
import AboutScreen from "./screens/about";
import ContactScreen from "./screens/contact";
const Drawer = createDrawerNavigator();

const Tab = createBottomTabNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator initialRouteName="Login">
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerShown: false }}
      />
      <Tab.Screen
        name="AboutUs"
        component={AboutScreen}
        options={{ headerShown: false }}
      />
      <Tab.Screen
        name="Login"
        component={LoginScreen}
        options={{ headerShown: false }}
      />
      <Tab.Screen
        name="Contact"
        component={ContactScreen}
        options={{ headerShown: false }}
      />
    </Tab.Navigator>
  );
}

const RootStack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen
          name="Overview"
          style={styles.homenav}
          component={HomeTabs}
        />
        {/*<Drawer.Screen name="Login" component={LoginStackScreen} /> */}
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;

const styles = StyleSheet.create({
  drawer: {
    paddingLeft: 10,
  },
  homenav: {
    display: "flex",
    justifyContent: "center",
  },
});

and it worked for me. Actually why it was messing because I was trying to put both createStackNavigator and TabStackNavigator(which is in the method of version 5.x). But Actually the trick is, if I want to put both on my android, you have to use only tabStacknavigator and version 6.x will take care of it. So update your version to 6.x and follow the code or you can go through their documentation https://reactnavigation.org/blog/2021/03/12/react-navigation-6.0-next/

Answer 4

In your App, All the navigators should have unique screen name! So this not seems to be a error!

Answer 5

Give your navigator a different name With the initial route name in your stack navigator. Because the first screen will be rendered from your stack navigator by default.