React Native - Trying to create a drawer with tabs navigators in react navigation without the Drawer Item of the Tabs being rendered

Question

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.

I have created a drawer navigator and within the <drawer.screen/> 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 "initialRouteName" is set to "Home".

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)

Image1: DrawerItem still being rendered

DrawerNavigator.js

//imports and stuff

const Drawer = createDrawerNavigator();
  
  function MyDrawer({logout}) {

    const nav = useNavigation()

    return (
      <Drawer.Navigator
      initialRouteName={stackNavigationsConsts.HOME_STACK}
      drawerPosition="right"
      drawerContent={(props) => {
        return (
           <CustomDrawer nav={nav} drawerProps={props}/>
        )
      }}
      >
        <Drawer.Screen name={"בדיקה"} component={MainTabNavigator} options={{drawerLabel: () => null}}/>
        <Drawer.Screen name="מאמר" component={Article} />    
      </Drawer.Navigator>
    );
  }

MainTabNavigator.js

//imports and stuff

const Tab = createBottomTabNavigator();

export default function MainTabNavigator() {
  return (
      <Tab.Navigator 
      initialRouteName={stackNavigationsConsts.HOME_STACK}
      
      tabBarOptions={{
        activeTintColor: mainColor.secondaryColor,
        inactiveTintColor: mainColor.text,
        activeBackgroundColor: mainColor.MainBackgroundColor,
        // activeBackgroundColor: mainColor.buttonPress,
        inactiveBackgroundColor: mainColor.MainBackgroundColor,
        keyboardHidesTabBar: true,
 
        
      }}
      
      >
        <Tab.Screen name={stackNavigationsConsts.HOME_STACK} component={HomeStackScreens} 
        options={{ 
          tabBarLabel: navigationConsts.HOME,
          tabBarIcon: ({ color, size }) => (
            homeIcon(color)
          ),
          }}
          />
          <Tab.Screen name={stackNavigationsConsts.PROFILE_STACK} component={AnotherStack2Screen} options={{ 
          tabBarLabel: navigationConsts.PROFILE ,
          tabBarIcon: ({ color, size }) => (
            profileIcon(color)
          ),
          }}/>
        <Tab.Screen name={stackNavigationsConsts.JOIN_STACK} component={JoinStackScreens} 
        options={{ 
          tabBarLabel: navigationConsts.JOIN ,
          tabBarIcon: ({ color, size }) => (
            JoinIcon(color)
          ),
          }}/>
        <Tab.Screen name={stackNavigationsConsts.NOTIFICATIONS_STACK} component={AnotherStackScreen} options={{ 
          tabBarLabel: navigationConsts.NOTIFICATIONS ,
          tabBarIcon: ({ color, size }) => (
            messagesIcon(color)
          ),
          tabBarBadge: 12
          }}/>
        <Tab.Screen name={stackNavigationsConsts.ADD_RIDE_STACK} component={AnotherStack1Screen} options={{ 
          tabBarLabel: navigationConsts.ADD_RIDE ,
          tabBarIcon: ({ color, size }) => (
            addRideIcon(color)
          ),
          }}/>
        
      </Tab.Navigator>
  );
}

Gilad Dahan Gilad Dahan · Accepted Answer · 2020-12-18T12:42:32

I found the solution here - How to hide Drawer Item from Drawer #2021 There is a workaround from v5 onward, need to extract the list of routes from the drawer navigation state and filter out the label you don't want to as I understood and it worked perfectly!

Please see below my render function for the custom drawer:

render() {
    const {state, ...rest} = this.props.drawerProps
    const newState = {...state}
    newState.routes = newState.routes.filter((item) => item.name !== "זמני")
    return (
        <DrawerContentScrollView {...this.props} 
        >
            <View style={styles.avatar}>                         
                <View style={styles.imageContainer}>
                    <Image style={styles.image} source={require('../../../assets/images/man_smile.png')}/>
                    <Text style={{...styles.text, fontSize:22, marginTop:5}}>גלעד דהן</Text>
                </View>
            
            </View>
            <View style={styles.items}>
              <DrawerItemList 
              state={newState}
              {...rest}
              />
              <DrawerItem label={navigationConsts.MAIN} onPress={() => this.props.nav.navigate(stackNavigationsConsts.HOME_STACK)} labelStyle={styles.text}/>
              <DrawerItem label="התנתק" onPress={() => this.props.logout()} labelStyle={styles.text}/>
              
            </View>
      </DrawerContentScrollView>

React Native - Trying to create a drawer with tabs navigators in react navigation without the Drawer Item of the Tabs being rendered

1 Answers