Open Drawer when tapped on DrawerNavigator header button-CodePudding

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.

CodePudding user response：

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>
          ),

CodePudding user response：

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;