title: Found screens with the same name nested inside one another. This can cause confusing behavior during navigation. React navigation 5.x
body: <p>TabScreenStack.js</p>
  <pre><code>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 }) =&gt; (
  
      &lt;HomeStack.Navigator &gt;
          &lt;HomeStack.Screen name=&quot;Home&quot; component={HomeScreen} options={{
              headerLeft: () =&gt; {
                  return (
               &lt;View style={styles.drawer}&gt;
                  &lt;DehazeRoundedIcon onClick = {() =&gt; navigation.openDrawer()} /&gt;
               &lt;/View&gt;
              )
              },
          
          }} /&gt;   
      &lt;/HomeStack.Navigator&gt;
    );
  
  
  const LoginStackScreen = ({navigation}) =&gt; (
   
          &lt;LoginStack.Navigator&gt;
              &lt;LoginStack.Screen name=&quot;Login&quot; component = {LoginScreen} /&gt;
          &lt;/LoginStack.Navigator&gt;
      );
  
  const AboutStackScreen = ({navigation}) =&gt; (
   
        &lt;AboutStack.Navigator&gt;
            &lt;AboutStack.Screen name=&quot;About&quot; component = {AboutScreen} /&gt;
        &lt;/AboutStack.Navigator&gt;
    );
  
  
  const TabStackScreen = ({ navigation }) =&gt; (
  
    &lt;Tab.Navigator initialRouteName=&quot;Home&quot; activeColor=&quot;#e91e63&quot; barStyle={{ backgroundColor: 'white' }}&gt;
        &lt;Tab.Screen
          name=&quot;Overview&quot;
          component={HomeScreen}
        /&gt;
        &lt;Tab.Screen
          name=&quot;Register&quot;
          component={LoginScreen}
          
        /&gt;
        &lt;Tab.Screen
          name=&quot;knowledge&quot;
          component={AboutScreen}
        /&gt;
    &lt;/Tab.Navigator&gt;
    );
  
    const styles = StyleSheet.create({
      drawer: {
          paddingLeft: 10,
      },
  })
    export default TabStackScreen;
  </code></pre>
  <p>App.js</p>
  <pre><code>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 = () =&gt; {  
      return (
          &lt;NavigationContainer&gt;
              &lt;Drawer.Navigator&gt;
                  &lt;Drawer.Screen name=&quot;Overview&quot; style={styles.homenav} component={TabStackScreen} /&gt;
                  {/*&lt;Drawer.Screen name=&quot;Login&quot; component={LoginStackScreen} /&gt; */}
              &lt;/Drawer.Navigator&gt;
          &lt;/NavigationContainer&gt;
      );
  }
  
  export default App;
  
  const styles = StyleSheet.create({
       drawer: {
           paddingLeft: 10,
       },
       homenav: {
           display:&quot;flex&quot;,
           justifyContent: &quot;center&quot;
       }
  
  })
  </code></pre>
  <p>I am Having the error of</p>
  <p>**&gt; found screens with the same name nested inside one another. Check:</p>
  <blockquote>
  <p>Overview, Overview &gt; Overview This can cause confusing behavior during
  navigation. Consider using unique names for each screen instead.**</p>
  </blockquote>
  <p>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.</p>