CODEWITHSUNDEEP
androidreactjsreact-nativenavigation
AKHIL OMAR
AKHIL OMAR

Reputation: 49

React Native Hamburger onPress Issue

I am trying to navigate the drawer by including onPress() on the hamburger of the header but it didn't work with the navigation.toggleDrawer() function.

Here is the code :

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Ionicons } from '@expo/vector-icons';

function HomeScreen({ navigation }) {

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.navigate('Home')} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator();

function draw() {
  return (

      <Drawer.Navigator initialRouteName="Home" >
        <Drawer.Screen name="Home" component={HomeScreen} 
        options={{
        drawerIcon: () => <Ionicons name='md-home' size={30} color='#130f40' />,
          }}
         />
        <Drawer.Screen name="Notifications" component={NotificationsScreen}
        options={{
        drawerIcon: () => <Ionicons name='md-notifications' size={30} color='#130f40' />,
          }}
         />
      </Drawer.Navigator>

  );
}



const Stack = createStackNavigator();

function Def(){
  return (
    <NavigationContainer>
    <Stack.Navigator>
    <Stack.Screen
        name="Home"
        component={draw}
        options={{
          title: 'My home',
          headerStyle: {
            backgroundColor: '#5f27cd',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },

          headerLeft: () =>  (<Ionicons name='md-menu' style={{paddingLeft: "20px"}} size={30} color='white' onPress={() => navigation.toggleDrawer()} />),


        }}

      />
    </Stack.Navigator>
    </NavigationContainer>    
  )
}

export default Def;

I had added the navigation.toggleDrawer() function in Ionicons with onPress() function but it didn't work. Error says navigation is not define.

Upvotes: 2

Views: 190

Answers (1)

Gaurav Roy
Gaurav Roy

Reputation: 12225

Try this 

 headerLeft: ({navigation}) =>  (<Ionicons name='md-menu' style={{paddingLeft: "20px"}} size={30} color='white' onPress={() => navigation.toggleDrawer()} />)

Hope it helps

Upvotes: 1

Related Questions