0

I have added drawer navigation and I want to hide some menu from it. My code is given below

I have tried to hide title from menu but it only hide title text but it occupy space and its clickable I hust want to display none from the menu bar.

    <Drawer.Navigator useLegacyImplementation screenOptions={{ drawerStyle: { backgroundColor: '#FFF', width: 240 } }}>
      <Drawer.Screen name="SignIn" component={SignIn} options={{ headerShown: false,drawerLabel: () => null }}/>
      <Drawer.Screen name="Dashboard" component={Dashboard} options={{ title: 'My home', headerStyle: { backgroundColor: '#28AAF9', }, headerShown: true, headerTitle:()=>null, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', } }}/>
      <Drawer.Screen name="Attendence" component={Attendence} options={{ headerShown: true,headerTitle:()=>null }}/>
      <Drawer.Screen name="LeaveApplyScreen" component={LeaveApplyScreen} options={{ headerShown: true,headerTitle:()=>null }}/>
      <Drawer.Screen name="Leaves" component={Leavelist} options={{ headerShown: true,headerTitle:()=>null }}/>
      <Drawer.Screen name="LeaveDetails" component={LeaveDetails} options={{ headerShown: true,headerTitle:()=>null }}/>
      <Drawer.Screen name="Report Submit" component={ReportSubmitScreen} options={{ headerShown: true,headerTitle:()=>null }}/>
      <Drawer.Screen name="Announcement" component={AnnouncementScreen} options={{ headerShown: true,headerTitle:()=>null }}/>
      <Drawer.Screen name="Tasks History" component={TaskHistoryScreen} options={{ headerShown: true,headerTitle:()=>null }}/>
      <Drawer.Screen name="EventsScreen" component={EventsScreen} options={{ headerShown: true,headerTitle:()=>null }}/>
      
      
      
    </Drawer.Navigator>
iphonic
  • 12,615
  • 7
  • 60
  • 107
Shubham Kaushal
  • 11
  • 1

1 Answers1

0

The component that you want to manipulate is called a DrawerItem. It is the menu that you have referred to. To completely hide the DrawerItem's presence in the drawer you can set the value of option in the following manner:

<Drawer.Screen 
  name="SignIn" 
  component={SignIn} 
  options={
  ... // Other options here

     drawerItemStyle: {
       display: "none",
     },
  }
/>

If you find this answer useful, please consider marking it as the accepted answer since this question is a duplicate of React Navigation 6 Hide Drawer Item.

Niqhil
  • 38
  • 1
  • 7