opening/closing navigation drawer not working in react native

Question

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.

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 1, 2018 at 6:57

Amal p

3,0325 gold badges32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ali Mohammad · Accepted Answer · 2020-01-23 11:07:15Z

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})

edited Jan 23, 2020 at 11:07

answered Oct 25, 2019 at 13:23

Ali Mohammad

8709 silver badges22 bronze badges

Comments

Jeremy Caney · Accepted Answer · 2024-01-25 01:31:02Z

1

This is working for opening and closing a toggle drawer:

navigation.dispatch(DrawerActions.openDrawer());
navigation.dispatch(DrawerActions.closeDrawer());
navigation.dispatch(DrawerActions.toggleDrawer());

edited Jan 25, 2024 at 1:31

Jeremy Caney

7,818115 gold badges58 silver badges86 bronze badges

answered Jan 24, 2024 at 11:24

Asad Ullah

111 bronze badge

Comments

asghar · Accepted Answer · 2020-05-07 06:50:58Z

0

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

from this Document

answered May 7, 2020 at 6:50

asghar

4475 silver badges6 bronze badges

Collectives™ on Stack Overflow

opening/closing navigation drawer not working in react native

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related