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';
import TabStackScreen from './screens/TabStackScreen';

const Drawer = createDrawerNavigator();

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

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/