I'm using React Navigation in my React Native project with a combination of Stack Navigator and Drawer Navigator, but when I try to use navigation.openDrawer() in my component, I'm getting the following error:

• ERROR TypeError: navigation.openDrawer is not a function (it is undefined), js engine: hermes

Code Overview:

Home.js

import { useNavigation } from '@react-navigation/native';<br>
const navigation = useNavigation();

const LeftIcon = () => {
    return (
      <TouchableOpacity
        style={styles.pr15}
        onPress={() => navigation.openDrawer()}>
          <Ionicons
          name="menu"
          color={colors.textColor}
          size={moderateScale(30)}
        />
      </TouchableOpacity>
    );
  };

<LeftIcon />

NavigationKeys.js

export const TabNav = {
  Home: 'Home',
  Profile: 'Profile',
  Library: 'Library',
  Explore: 'Explore',
  DrawerNavigation: 'DrawerNavigation',
};
export const DrawerNav = {
  Home: 'Home',
  Profile: 'Profile',
  Library: 'Library',
  Explore: 'Explore',
};

NavigationRoutes.js

import DrawerNavigation from './Type/DrawerNavigation';

export const TabRoute = {
  Home,
  Profile,
  Library,
  Explore,
  DrawerNavigation,
};
export const DrawerRoute = {
  Home,
  Profile,
  Library,
  Explore,
};

StackNavigation.js

<Stack.Screen
        name={TabNav.DrawerNavigation}
        component={TabRoute.DrawerNavigation}
      />

I’ve tried using navigation.dispatch(DrawerActions.openDrawer()) from @react-navigation/drawer instead of navigation.openDrawer(), but I still get the same error.

I'm using React Navigation in my React Native project with a combination of Stack Navigator and Drawer Navigator, but when I try to use navigation.openDrawer() in my component, I'm getting the following error:

• ERROR TypeError: navigation.openDrawer is not a function (it is undefined), js engine: hermes

Code Overview:

Home.js

import { useNavigation } from '@react-navigation/native';<br>
const navigation = useNavigation();

const LeftIcon = () => {
    return (
      <TouchableOpacity
        style={styles.pr15}
        onPress={() => navigation.openDrawer()}>
          <Ionicons
          name="menu"
          color={colors.textColor}
          size={moderateScale(30)}
        />
      </TouchableOpacity>
    );
  };

<LeftIcon />

NavigationKeys.js

export const TabNav = {
  Home: 'Home',
  Profile: 'Profile',
  Library: 'Library',
  Explore: 'Explore',
  DrawerNavigation: 'DrawerNavigation',
};
export const DrawerNav = {
  Home: 'Home',
  Profile: 'Profile',
  Library: 'Library',
  Explore: 'Explore',
};

NavigationRoutes.js

import DrawerNavigation from './Type/DrawerNavigation';

export const TabRoute = {
  Home,
  Profile,
  Library,
  Explore,
  DrawerNavigation,
};
export const DrawerRoute = {
  Home,
  Profile,
  Library,
  Explore,
};

StackNavigation.js

<Stack.Screen
        name={TabNav.DrawerNavigation}
        component={TabRoute.DrawerNavigation}
      />

I’ve tried using navigation.dispatch(DrawerActions.openDrawer()) from @react-navigation/drawer instead of navigation.openDrawer(), but I still get the same error.

• android
• react-native
• command-line-interface
• navigation-drawer
• react-navigation-drawer

1 Answer 1

• If you're trying to open the drawer from a component that doesn't have direct access to the drawer navigation, you can use DrawerActions to trigger an action to open the drawer

  import { DrawerActions } from '@react-navigation/native';
  
  // Update in your component
  const LeftIcon = () => {
  const navigation = useNavigation(); // Confirm this is inside the component
  
   return (
     <TouchableOpacity style={styles.pr15}
       onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
       <Ionicons name="menu" color={colors.textColor} size={moderateScale(30)} />
     </TouchableOpacity>
   );
  };
  
  export default LeftIcon;
  

• Updated navigation code

  import { NavigationContainer } from '@react-navigation/native';
  import { createDrawerNavigator } from '@react-navigation/drawer';
  import { createStackNavigator } from '@react-navigation/stack';
  import HomeScreen from './Home';
  import ProfileScreen from './Profile';
  
  const Stack = createStackNavigator();
  const Drawer = createDrawerNavigator();
  
  function MyStack() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    );
  }
  
  function MyDrawer() {
    return (
      <Drawer.Navigator>
        <Drawer.Screen name="Main" component={MyStack} />
        {/* Other drawer screens */}
      </Drawer.Navigator>
    );
  }
  
  export default function App() {
    return (
     <NavigationContainer>
       <MyDrawer />
     </NavigationContainer>
   );
  }