Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 628
kinza Avatar asked Nov 01 '18 06:11

kinza


People also ask

How do I open the navigation drawer in react native?

Create two separate classes "DashboardScreen" and "WelcomeScreen" in the react native app to display on screen. Add these screens to createStackNavigator and add "md-menu" icon of 'react-native-vector-icons/Ionicons' package. On pressing the menu icon, call navigation. openDrawer() method to open drawer.

How do you customize the navigation drawer in react native?

React Navigation is a powerful library that helps us create Stack navigation, Drawer navigation and Tab navigation in our React Native apps. To create a simple side menu all we need to do is create a DrawerNavigator and pass in the route configuration and drawer configuration.


1 Answers

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

like image 129
Amal p Avatar answered Oct 09 '22 08:10

Amal p