how to open a side menu on a click of an icon in react native

Question

I am trying to create a functionality where the user can open a side menu on the click of an icon.

I just started using react native and i am kind of confused since i been using react for about a year now using hooks

here is my current codes

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import FeatherIcon from "react-native-vector-icons/Feather";

import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
} from '@react-navigation/drawer';


function HomeScreen() {
  return (
    <View style={{ ... }}>
      <View style={{ ... }}>
        <View style={{ ... }}>
          <FeatherIcon size={30} name="menu"/>        # ICON THAT USER MUSER CLICK TO OPEN A SIDE MENU
        </View>
      </View>
    </View>
  );
}

function ExploreScreen() {
  return (
    <View style={{ ... }}>
      <Text>Explore!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{tabBarIcon: () => <FeatherIcon size={25} name="home"/>}}
        />
        <Tab.Screen
          name="Explore"
          component={ExploreScreen}
          options={{tabBarIcon: () => <FeatherIcon size={25} name="search"/>}}
        />

I tried to approach it this way

 function HomeScreen({navigation}) {
 
 <View style={{ ... }}>
      <Button title="test button" onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
        <FeatherIcon size={30} name="menu"/>
      </Button>
 </View>

and first i cannot see the icon anymore and second when i click on test button i receive the error

undefined is not an object (evaluating 'navigation.navigate') - openDrawer

It would really help me if someone could show me how to make it properly.

Thank you

Answer 1

I see you are importing multiple things from @react-navigation/drawer , but where are you using them? It doesn't look like you are using createDrawerNavigator to create your DrawerNavigator . Here is a link to react-navigation's docs giving an example of a drawer navigator. Try refactoring your TabNavigator above into a functional component, and then make that refactored 'TabNavigationStack' be the default screen for your drawer navigator.

const TabNavigationStack = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{ tabBarIcon: () => <FeatherIcon size={25} name="home" /> }}
      />
      <Tab.Screen
        name="Explore"
        component={ExploreScreen}
        options={{ tabBarIcon: () => <FeatherIcon size={25} name="search" /> }}
      />
    </Tab.Navigator>
  );
};

Then, make the Drawer.Navigator the child component for the NavigationContainer . I believe you're receiving the error undefined is not an object (evaluating 'navigation.navigate') - openDrawer because the drawer navigator was never created.