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",
     },
   }}
/>

I m adding the same solution in a min but you found it, great — Nisharg Shah, Aug 16 '21 at 20:26
https://aboutreact.com/how-to-hide-navigation-drawer-sidebar-option/#Appjs — snehal agrawal, Jan 01 '23 at 06:51

score 0 · Answer 1 · answered May 05 '23 at 10:47

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>

React Navigation 6 Hide Drawer Item

Update - Solution Found

1 Answers1

Linked