7

In my react native app I have created a side menu using Drawer Navigator which is working perfectly when I open it by swiping. But I want to do is to open it on button click. Currently I am trying to do trough navigation props, the related code is as follows:

import { withNavigation } from 'react-navigation';

class HallsList extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isSideMenuOpen: false
    };
  } 

  renderTopView = () => {
      return(
        <View>
          <View style = {Styles.sideMenuButton}>
            <Button
              onPress = {()=> {
                if (this.state.isSideMenuOpen) {
                  {this.props.navigation.navigate('DrawerOpen')}
                }
                else {
                  {this.props.navigation.navigate('DrawerClose')}
                }
                this.setState({isSideMenuOpen: !this.state.isSideMenuOpen})
              }
            }
            title = {'Side Menu'}
            />
          </View> ..... 


export default withNavigation(HallsList);

But when I tap on side menu button it gets tapped but nothing happens afterwards.

kinza
  • 535
  • 11
  • 31

3 Answers3

9

Just change the below code parts

Instead of this.props.navigation.navigate('DrawerOpen')

Put this.props.navigation.openDrawer();

Instead of this.props.navigation.navigate('DrawerClose')

Put this.props.navigation.closeDrawer();

Community
  • 1
  • 1
Amal p
  • 2,882
  • 4
  • 29
  • 49
2

you can simply use :

this.props.navigation.toggleDrawer();

Instead of:

// to keep track of state of drawer
if (this.state.isSideMenuOpen) {
    {this.props.navigation.navigate('DrawerOpen')}
}
else {
    {this.props.navigation.navigate('DrawerClose')}
}
this.setState({isSideMenuOpen: !this.state.isSideMenuOpen})
Ali Mohammad
  • 794
  • 9
  • 16
0

to open drawer use this.props.navigation.openDrawer() and close drawer use this.props.navigation.closeDrawer()

from this Document

asghar
  • 437
  • 5
  • 5