Demo - Hide Drawer Item (Drawer Navigator | React -navigation)

MobileDrawer.js

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
} from 'react-native';
import {
  CommonActions,
  DrawerActions,
  useLinkBuilder,
} from '@react-navigation/native';

import {
  DrawerContentScrollView,
  DrawerItem,
} from '@react-navigation/drawer';

export default (props) => {
  const buildLink = useLinkBuilder();

  const state = props.state;
  const navigation = props.navigation;
  const descriptors = props.descriptors;
  const activeTintColor = props.activeTintColor;
  const inactiveTintColor = props.inactiveTintColor;
  const activeBackgroundColor = props.activeBackgroundColor;
  const inactiveBackgroundColor = props.inactiveBackgroundColor;
  const itemStyle = props.itemStyle;
  const labelStyle = props.labelStyle;

  // Ref: https://github.com/react-navigation/react-navigation/blob/7dc2f5832e371473f3263c01ab39824eb9e2057d/packages/drawer/src/views/DrawerItemList.tsx
  return (
    <SafeAreaView style={{flex: 1}}>
      <Text style={styles.title}> Yash </Text>
      <Text style={styles.subtitle}> Sharma </Text>
      <Text style={styles.border}></Text>
      <DrawerContentScrollView {...props}>
        {state.routes.map((route, i) => {
          if(route.name === 'App') return;
          const focused = i === state.index;
          const { title, drawerLabel, drawerIcon } = descriptors[route.key].options;

          return (
            <DrawerItem
              key={route.key}
              label={
                drawerLabel !== undefined
                  ? drawerLabel
                  : title !== undefined
                  ? title
                  : route.name
              }
              icon={drawerIcon}
              focused={focused}
              activeTintColor={activeTintColor}
              inactiveTintColor={inactiveTintColor}
              activeBackgroundColor={activeBackgroundColor}
              inactiveBackgroundColor={inactiveBackgroundColor}
              labelStyle={labelStyle}
              style={itemStyle}
              to={buildLink(route.name, route.params)}
              onPress={() => {
                navigation.dispatch({
                  ...(focused
                    ? DrawerActions.closeDrawer()
                    : CommonActions.navigate(route.name)),
                  target: state.key,
                });
              }}
            />
          );
        })}
      </DrawerContentScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  title: {
    fontSize: 30,
    color: 'white',
    marginTop: '33%',
    marginLeft: 14,
  },
  subtitle: {
    color: 'white',
    marginLeft: 14,
  },
  border: {
    marginTop: 10,
    marginBottom: 10,
    borderBottomWidth: 0.5,
    borderBottomColor: '#33383b',
    height: 0,
  },
});

nice