Is is possible to use navigation.toggleDrawer() in navigation options

Question

In my navigation file , when I want to toggle drawer , get the following error :

TypeError: navigation.openDrawer is not a function.(In 'navigation.openDrawer()', 'navigation.openDrawer' is undefined)

This is my drawer:

const DrawerNavigator = () => {
    return (
        <Drawer.Navigator
            initialRouteName="MYSHIFT"
        >
            <Drawer.Screen name="MYSHIFT" component={TopTabNavigator} />
        </Drawer.Navigator>
    )
}

And this is my container navigation :

const CareworkerNavigation = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>

                <Stack.Screen
                    name="Login"
                    component={LoginScreen}
                    options={{ headerShown: false }} />

                <Stack.Screen
                    name="Main"
                    options={({ navigation }) => {
                        return {
                            headerLeft: () => <Button title="LEFT BUTTON" onPress={() => {
                                navigation.toggleDrawer(); // <--- this line throws an error 
                            }} />
                        }
                    }}
                    component={DrawerNavigator} />

            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default CareworkerNavigation

Why I can not use navigation.toggleDrawer() in navigation options? Is is possible to remove this problem ?

Answer 1

If you check the React Navigation docs, "You will need to make the drawer navigator the parent of any navigator where the drawer should be rendered on top of its UI."

React Navigation docs reference

To answer your question : Yes , it is possible.

And here you have a working example:

import React from 'react'
import { Button, View } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { createStackNavigator } from '@react-navigation/stack'

const Feed = () => <View />
const Notifications = () => <View />
const Profile = () => <View />

const FeedStack = createStackNavigator()

const Home = ({ navigation }) => (
    <FeedStack.Navigator>
        <FeedStack.Screen
            name="Feed"
            component={Feed}
            options={props => {
                const { toggleDrawer } = props.navigation // <-- drawer's navigation (not from stack)
                return {
                    headerLeft: () => <Button title="LEFT BUTTON" onPress={toggleDrawer} />
                }
            }}
        />
    </FeedStack.Navigator>
)

const Drawer = createDrawerNavigator()

export default props => {
  return (
    <NavigationContainer>
        <Drawer.Navigator initialRouteName="Feed">
          <Drawer.Screen
            name="Feed"
            component={Home}
            options={{ drawerLabel: 'Home' }}
          />
          <Drawer.Screen
            name="Notifications"
            component={Notifications}
            options={{ drawerLabel: 'Updates' }}
          />
          <Drawer.Screen
            name="Profile"
            component={Profile}
            options={{ drawerLabel: 'Profile' }}
          />
        </Drawer.Navigator>
    </NavigationContainer>
  )
}

Answer 2

While constructing navigation at options, you refer to the navigation of the stack, what cant perform draw actions, try to construct it on header itself

---

            <Stack.Screen
                name="Main"
                options={() => {
                    return {
                        headerLeft: (navigation) => <Button title="LEFT BUTTON" onPress={() => {
                            navigation.toggleDrawer(); // <--- this line throws an error 
                        }} />
                    }
                }}
                component={DrawerNavigator} />

---

https://github.com/react-navigation/react-navigation/issues/55