react-nativereact-navigationside-menureact-navigation-drawer

opening/closing navigation drawer not working in react native


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.


Solution

  • 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();