title: React Native - Trying to create a drawer with tabs navigators in react navigation without the Drawer Item of the Tabs being rendered
body: <p>I am trying to create an app where I have a drawer and tabs navigators on each page.
  I followed various tutorials and the react navigation docs but could not find a solution.</p>
  <p>I have created a drawer navigator and within the &lt;drawer.screen/&gt; component I put my main tab navigator (My Tab navigator has multiple stacks - HomeStack, JoinStack, etc). So far so good however when I navigate to that main tab label in the menu, I return to the same screen I came from last and not to the top of my HomeStack although the &quot;initialRouteName&quot; is set to &quot;Home&quot;.</p>
  <p>I decided to leave it but remove the label, however it does not remove it completely. It removes the  text but still there is a component being rendered there (see Image1 below)</p>
  <p>Image1:
  <a href="https://i.stack.imgur.com/0duLV.png" rel="nofollow noreferrer">DrawerItem still being rendered</a></p>
  <p>DrawerNavigator.js</p>
  <pre><code>//imports and stuff
  
  const Drawer = createDrawerNavigator();
    
    function MyDrawer({logout}) {
  
      const nav = useNavigation()
  
      return (
        &lt;Drawer.Navigator
        initialRouteName={stackNavigationsConsts.HOME_STACK}
        drawerPosition=&quot;right&quot;
        drawerContent={(props) =&gt; {
          return (
             &lt;CustomDrawer nav={nav} drawerProps={props}/&gt;
          )
        }}
        &gt;
          &lt;Drawer.Screen name={&quot;בדיקה&quot;} component={MainTabNavigator} options={{drawerLabel: () =&gt; null}}/&gt;
          &lt;Drawer.Screen name=&quot;מאמר&quot; component={Article} /&gt;    
        &lt;/Drawer.Navigator&gt;
      );
    }
  </code></pre>
  <p>MainTabNavigator.js</p>
  <pre><code>//imports and stuff
  
  const Tab = createBottomTabNavigator();
  
  export default function MainTabNavigator() {
    return (
        &lt;Tab.Navigator 
        initialRouteName={stackNavigationsConsts.HOME_STACK}
        
        tabBarOptions={{
          activeTintColor: mainColor.secondaryColor,
          inactiveTintColor: mainColor.text,
          activeBackgroundColor: mainColor.MainBackgroundColor,
          // activeBackgroundColor: mainColor.buttonPress,
          inactiveBackgroundColor: mainColor.MainBackgroundColor,
          keyboardHidesTabBar: true,
   
          
        }}
        
        &gt;
          &lt;Tab.Screen name={stackNavigationsConsts.HOME_STACK} component={HomeStackScreens} 
          options={{ 
            tabBarLabel: navigationConsts.HOME,
            tabBarIcon: ({ color, size }) =&gt; (
              homeIcon(color)
            ),
            }}
            /&gt;
            &lt;Tab.Screen name={stackNavigationsConsts.PROFILE_STACK} component={AnotherStack2Screen} options={{ 
            tabBarLabel: navigationConsts.PROFILE ,
            tabBarIcon: ({ color, size }) =&gt; (
              profileIcon(color)
            ),
            }}/&gt;
          &lt;Tab.Screen name={stackNavigationsConsts.JOIN_STACK} component={JoinStackScreens} 
          options={{ 
            tabBarLabel: navigationConsts.JOIN ,
            tabBarIcon: ({ color, size }) =&gt; (
              JoinIcon(color)
            ),
            }}/&gt;
          &lt;Tab.Screen name={stackNavigationsConsts.NOTIFICATIONS_STACK} component={AnotherStackScreen} options={{ 
            tabBarLabel: navigationConsts.NOTIFICATIONS ,
            tabBarIcon: ({ color, size }) =&gt; (
              messagesIcon(color)
            ),
            tabBarBadge: 12
            }}/&gt;
          &lt;Tab.Screen name={stackNavigationsConsts.ADD_RIDE_STACK} component={AnotherStack1Screen} options={{ 
            tabBarLabel: navigationConsts.ADD_RIDE ,
            tabBarIcon: ({ color, size }) =&gt; (
              addRideIcon(color)
            ),
            }}/&gt;
          
        &lt;/Tab.Navigator&gt;
    );
  }
  </code></pre>