React Navigation 6 Hide Drawer Item

Question

How can I hide screens from appearing as items in the drawer of @react-navigation/drawer version 6.

In React Navigation 5 it was achieved by creating custom drawer content like this

const CustomDrawerContent = (props: DrawerContentComponentProps) => {
  const { state, ...rest } = props;
  const includeNames = ["ScreenOne", "ScreenTwo"];
  const newState = { ...state }; //copy from state before applying any filter. do not change original state
  newState.routes = newState.routes.filter(
    (item) => includeNames.indexOf(item.name) !== -1
  );
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList state={newState} {...rest} />
    </DrawerContentScrollView>
  );
};

As was described in this other answer. I have just upgraded to react-navigation 6 and with this technique I get an error TypeError: Cannot read property 'key' of undefined when I try to navigate one of these hidden screen. Can anyone help me out?

Update - Solution Found

I found a solution by myself so will put it here for anyone else looking. Set the drawer item style display hidden like this:

<DrawerStack.Screen
   name="ScreenName"
   component={ScreenComponent}
   options={{
     drawerItemStyle: {
       display: "none",
     },
   }}
/>

Baillargeon

I m adding the same solution in a min but you found it, great – Bibby

aboutreact.com/how-to-hide-navigation-drawer-sidebar-option/… – Bors

Answer 1

You must pass headerLeft: false to Drawer.Screen

    <Drawer.Navigator>
      <Drawer.Screen
        name="Home"
        options={{title: '', headerTransparent: true, headerLeft: false}}>
        {props => <Home {...props} />}
      </Drawer.Screen>
    </Drawer.Navigator>

Midweek

Answer 2

Drawer navigation have drawerItemStyle property on Darwer.screen , set display to none to hide specfic item on drawer navigation

 <Drawer.Screen
    name="notification"
    component={Notification}
    options={{
      drawerItemStyle: {
        display: 'none',
      },
    }}
  />

Conni