React Navigation 5.x nested navigation drawer not opening from menu button - react-native

Question

When I swipe right my drawer opens, but I want it to open using a button in the header. I have place the DrawerNavigator 'createDrawer ' in side the StackNavigator'createHomeStack'.
I am getting this error:
Reference Error: Can't find variable : Navigation
I also tried this: options={({ navigation }) => ({ but then I get error:
TypeError: navigation.toggleDrawer is not a function. (In 'navigation.toggleDrawer()', 'navigation.toggleDrawer' is undefined)
Code:
import React from 'react';
import { TouchableOpacity } from 'react-native';
import {
NavigationContainer,
DrawerActions,
DefaultTheme,
DarkTheme,
useNavigation,
} from '#react-navigation/native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { createStackNavigator } from '#react-navigation/stack';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {
Appearance,
useColorScheme,
AppearanceProvider,
} from 'react-native-appearance';
import Feed from './src/feed';
import Detail from './src/detail';
import Screen1 from './src/screens/drawer/screen1';
import Screen2 from './src/screens/drawer/screen2';
import Screen3 from './src/screens/drawer/screen3';
import Tab1 from './src/screens/tabs/tab1';
import Tab2 from './src/screens/tabs/tab2';
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
App = () => {
const colorScheme = useColorScheme();
const MyTheme = {
dark: false,
colors: {
primary: 'white',
background: 'white',
card: '#65509f',
text: 'white',
border: 'green',
},
};
createHomeStack = () => (
<Stack.Navigator>
<Stack.Screen
name='Home'
children={this.createDrawer}
options={{
title: 'Home Screen',
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon
name='menu'
style={[{ color: 'white', marginLeft: 16 }]}
size={25}
></Icon>
</TouchableOpacity>
),
}}
/>
<Stack.Screen
name='Detail'
component={Detail}
options={{
title: 'Detail Screen',
}}
/>
<Stack.Screen name='Bottom Tabs' component={Tab1} />
<Stack.Screen name='Top Tabs' component={Tab2} />
</Stack.Navigator>
);
createDrawer = () => (
<Drawer.Navigator>
<Drawer.Screen name='Feed' component={Feed} />
<Drawer.Screen name='Contacts' component={Screen1} />
<Drawer.Screen name='Favorites' component={Screen2} />
<Drawer.Screen name='Settings' component={Screen3} />
</Drawer.Navigator>
);
return (
<AppearanceProvider>
<NavigationContainer theme={colorScheme == 'dark' ? DarkTheme : MyTheme}>
{this.createHomeStack()}
</NavigationContainer>
</AppearanceProvider>
);
};
export default App;

Answer 1

There are 2 approaches to handle this:
Nest the stack inside the drawer instead of drawer inside stack
Use dispatch instead of toggleDrawer:
import { DrawerActions } from '#react-navigation/native';
// ...
<TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
Read more about how nesting works here https://reactnavigation.org/docs/nesting-navigators#navigator-specific-methods-are-available-in-the-navigators-nested-inside

Answer 2

import { DrawerActions } from '#react-navigation/native';
// ...
options={({ navigation }) => ({
title: 'Home Screen',
headerLeft: () => (
<TouchableOpacity style={{ paddingLeft: 20 }}>
<Icon
name='menu'
size={25}
style={[{ color: 'black' }]}
onPress={() =>
navigation.dispatch(DrawerActions.toggleDrawer())
}
/>
</TouchableOpacity>
),
})}

Answer 3

You need to get navigation prop from option the dispatch drawer Action when Button is pressed. Try the below code:
options={({navigation}) => ({
title: 'Home Screen',
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
<Icon
name='menu'
style={[{ color: 'white', marginLeft: 16 }]}
size={25}
></Icon>
</TouchableOpacity>
),
})}