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.
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.
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.
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();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With