Expo React Native onPress navigation.openDrawer() not working. thank you in advance for your support

Question

I am unable to open the Drawer by pressing the header button, I tried many times but I failed to solve the issue. here below is the issue I am getting- Menu.js:65 Uncaught TypeError: navigation.openDrawer is not a function at onPress

        **My App.js file**
         import React from 'react'
            import { NavigationContainer } from '@react-navigation/native';
            import Menu from './Src/Menu';
            export default function App() {
              return (
                <NavigationContainer>
                  <Menu />
                </NavigationContainer>
              );
            }
        

Menu.js File this is my menu file getting the issue on this file-

        import React from 'react'
        import { Button } from 'react-native';
        import { Ionicons } from '@expo/vector-icons';
        import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
        import About from './About';
        import Menu2 from './menu2';
        
        const Tab = createBottomTabNavigator();
        function Menu() {
          return (
            <Tab.Navigator
              screenOptions={({ route }) => ({
                headerShown: true,
                tabBarIcon: ({ focused, color, size }) => {
                  if (route.name === 'Menu2') {
                    return (
                      <Ionicons
                        name={
                          focused
                            ? 'ios-information-circle'
                            : 'ios-information-circle-outline'
                        }
                        size={size}
                        color={color}
                      />
                    );
                  }
                  else if (route.name === 'About') {
                    return (
                      <Ionicons
                        name={focused ? 'list' : 'list-outline'}
                        size={size}
                        color={color}
                      />
                    );
                  }
                },
                tabBarInactiveTintColor: 'gray',
                tabBarActiveTintColor: 'tomato',
              })}
            >
              <Tab.Screen
                name="Menu2"
                component={Menu2}
                options={{
                  headerLeft: () => (
                    <Button
                      onPress={() => navigation.openDrawer()}
                      title="Open Drawer"
                      color="#00cc00"
                    />
                  ),
                }}
              />
              <Tab.Screen name="About" component={About}
              />
            </Tab.Navigator>
          );
        }
        export default Menu;

Answer 1

You can try the following

import { DrawerActions } from '@react-navigation/native';


options={{
    headerLeft: () => (
         <Button
            onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
            title="Open Drawer"
            color="#00cc00"
          />
       ),
    }}