React-Native:How to display drawercomponent on hamburger menu click

Question

I want to display the drawer component on hamburger menu click instead of dragging from left to right and vice versa.Here is the code

Home Screen ...

<CustomHeader title="Home" drawerOpen={() => this.props.navigation.navigate('DrawerOpen')} />

... Custom Header

  <Header style={styles.themeBGColor}>
        <Left><Icon name="ios-menu" onPress={() => this.props.drawerOpen()} /></Left>
        <Body>
           <Title>{this.props.title}</Title>
        </Body>
      <Right />
  </Header>

App.js

    const MyApp = DrawerNavigator({
  // For each screen that you can navigate to, create a new entry like this:
  Home: {
    screen: HomeScreen,
  },
  Categories: {
    screen: CategoryScreen,
  },
},
  {
    initialRouteName: 'Home',
    drawerPosition: 'left',
    contentComponent: CustomDrawerContentComponent,
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
  });

yes, onclick it should slide to right – code_Knight Jun 12 '18 at 09:13 — code_Knight, Jun 12 '18 at 09:13

Akash D · Answer 1 · 2018-06-12T10:48:04.097

0

Add this line

<Icon name="ios-menu" onPress={() => this.props.navigation.navigate('DrawerToggle');}>

and

     const MyApp = DrawerNavigator(
      {

      Home: {
        screen: HomeScreen,
        navigationOptions: ({navigation}) => ({
        drawerLockMode: 'locked-closed',
        drawerPosition: 'right',
    })
      },
      Categories: {
        screen: CategoryScreen,
      },
    },
      {
        initialRouteName: 'Home',
        contentComponent: CustomDrawerContentComponent,
        drawerOpenRoute: 'DrawerOpen',
        drawerCloseRoute: 'DrawerClose',
        drawerToggleRoute: 'DrawerToggle', 

      });

ref

edited Jun 12 '18 at 10:48

answered Jun 12 '18 at 09:23

Akash D

780
2
11
27

ok,how would i slide it to right when the hamburger menu is clicked? – code_Knight Jun 12 '18 at 09:44
yes even after changing left to right ,when i click on hamburger menu drawer is not appearing – code_Knight Jun 12 '18 at 09:57
Please understand my question,how to toggle drawer when i click on hamburger menu – code_Knight Jun 12 '18 at 10:16

score 0 · Answer 2 · answered Jun 28 '18 at 09:35

0

If you are using drawer navigator from react-navigation, use openDrawer function to open the navigation drawer.

onPress={() => this.props.navigation.openDrawer()}

to close the navigation drawer use

onPress={() => this.props.navigation.closeDrawer()}

answered Jun 28 '18 at 09:35

akhil xavier

1,847
15
15

That's redundant isn't it? What about . . . onPress={this.props.navigation.openDrawer} onPress={this.props.navigation.closeDrawer} – Adrian Bartholomew Mar 01 '19 at 20:08

React-Native:How to display drawercomponent on hamburger menu click

2 Answers2