ReactNative how to disable click on drawer menu item

Question

the drawer menu setup is like below. how can i disable click on first Drawer.Screen ? it must show a single image!!

also how can i hide one element programmatically?

    <Drawer.Navigator
      initialRouteName="Feed"
      drawerPosition="right"
           drawerStyle={{
            backgroundColor: '#c7c4b8',
            width: 240,
          }}
       overlayColor="transparent">

      <Drawer.Screen
        name="Profile2"
        component={Profile2}
        options={{ drawerLabel: '', drawerIcon: ({ focused, size }) => (
            <Image source={require('./images/3.jpg')}   resizeMode={'cover'}  style={{ width: '100%', height: 200 }} />) 
        }}
      />

      <Drawer.Screen
        name="Home"
        component={Notifications}
        options={{ drawerLabel: 'Feed' }}
      />
      <Drawer.Screen
        name="Routes"
        component={Profile}
options={{ drawerLabel: 'Routes' }}
      />
    </Drawer.Navigator>

Answer 1

For add header or whatever you want you should use drawerContent prop and there you can make your custom drawer or manipulate the existing one like in the example below.

For show/hide screen in a drawer programatically you can just use it with useState or pass a redux store and conditionally render it or not, remember that navigator its just a react component.

I let you a snack to check it online as well. https://snack.expo.io/@anthowm/drawer-navigation-%7C-react-navigation

import * as React from 'react';
import {useState} from 'react';
import { View, Text, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
} from '@react-navigation/drawer';

function Feed() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed Screen</Text>
    </View>
  );
}

function Article() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Article Screen</Text>
    </View>
  );
}

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
       <Image source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}   resizeMode={'cover'}  style={{ width: '100%', height: 200 }} />
      <DrawerItemList {...props} />
      <DrawerItem
        label="Hide Screen"
        onPress={() => props.setShow(false)}
      />
    </DrawerContentScrollView>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  const [show, setShow] = useState(true);

  return (
    <Drawer.Navigator drawerContent={props => <CustomDrawerContent setShow={setShow} {...props} />}>
      <Drawer.Screen name="Feed" component={Feed} />
      {show && <Drawer.Screen name="Article" component={Article} />}
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}