Open Drawer when tapped on DrawerNavigator header button - react-native

Question

I am trying to call openDrawer option from header of DrawerNavigation but the navigation prop does not contain openDrawer function.
import React from 'react';
import {View, TouchableOpacity} from 'react-native';
import {createDrawerNavigator} from '#react-navigation/drawer';
import Icon from 'react-native-vector-icons/Ionicons';
import {dimensions} from '../../constants/utils';
import CustomDrawerContent from './components/CustomDrawerContent';
const Drawer = createDrawerNavigator();
const DrawerNavigator = () => {
screenOptionsProps = {
screenOptions: {
headerLeft: props => (
<View>
<TouchableOpacity onPress={() => navigation.openDrawer()}>
<Icon
name="reorder-three-sharp"
size={dimensions.width * 0.08}
{...props}
/>
</TouchableOpacity>
</View>
),
},
};
return (
<Drawer.Navigator
{...screenOptionsProps}
drawerContent={props => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Dashboard" component={Dashboard} />
</Drawer.Navigator>
);
};
export default DrawerNavigator;
Whenever the Icon is being tapped drawer should be opened but navigation prop is not receiving anything and while consoling the navigation prop getting undefined as value. The props passed in drawerContent has openDrawer() method with in it but how to use it for screenOptions.

Answer 1

You can try "props.navigation.openDrawer()" or "props.navigation.toggleDrawer()"
headerLeft: props => (
<View>
<TouchableOpacity onPress={() =>
props.navigation.openDrawer()}>
<Icon
name="reorder-three-sharp"
size={dimensions.width * 0.08}
{...props}
/>
</TouchableOpacity>
</View>
),

Answer 2

Working on single time but when I return after to home screen it does not receive openDrawer() and closeDrawer() in props.navigation

Answer 3

For opening drawer navigation, finally i found the solution in the navigation props reference https://reactnavigation.org/docs/navigation-prop/. For anybody who got stuck with similar problem, it might be helpful.
So for the above problem i used useNavigation hook from #react-navigation/native which provides navigation object which can be further used for calling the openDrawer() method.
import React from 'react';
import {View, TouchableOpacity} from 'react-native';
import {createDrawerNavigator} from '#react-navigation/drawer';
import Icon from 'react-native-vector-icons/Ionicons';
import {dimensions} from '../../constants/utils';
import { DrawerActions, useNavigation } from "#react-navigation/native";
import CustomDrawerContent from './components/CustomDrawerContent';
const Drawer = createDrawerNavigator();
const DrawerNavigator = () => {
const navigation = useNavigation();
screenOptionsProps = {
screenOptions: {
headerLeft: props => (
<View>
<TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
<Icon
name="reorder-three-sharp"
size={dimensions.width * 0.08}
{...props}
/>
</TouchableOpacity>
</View>
),
},
};
return (
<Drawer.Navigator
{...screenOptionsProps}
drawerContent={props => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Dashboard" component={Dashboard} />
</Drawer.Navigator>
);
};
export default DrawerNavigator;