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;

CodePudding user response：

You are not defining navigation anywhere in your code inside Menu.js, You could try:

function Menu({navigation}) {

Edit: What if you try navigation in the options property like this?

<Tab.Screen
    name="Menu2"
    component={Menu2}
    options={({navigation}) => ({
       headerLeft: () => (
          <Button
               onPress={() => navigation.openDrawer()}
               title="Open Drawer"
               color="#00cc00"
               />
       ),
    })}
/>

CodePudding user response：

You can try the following

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


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