How to toggle the side menu bar in react native? - react-native

Question

I am trying to create a new app. I have created the side menu. But side menu drawer not working if i am in the same screen.For example in the screenshot i am already in the home screen. Now if i click the home in the side menu there is no action. One more question now the side menu covers the whole screen height. I want to be display between the header and bottom tab navigator. Please help me image
const DashboardTabNavigator = createBottomTabNavigator( {
Home: HomeScreen,
WebMenu: WebMenuScreen,
Settings: SettingsScreen,
},
{
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
labelStyle: {
fontSize: 15
},
tabStyle: {
justifyContent: 'center'
},
showIcon: false
},
});
//MenuDrawer
export class MenuDrawer extends React.Component {
gotoHome = () => {
this.props.navigation.navigate('Home');
}
gotoWebMenu = () => {
this.props.navigation.navigate('WebMenu');
}
gotoSettings = () => {
this.props.navigation.navigate('Settings');
}
render() {
return(
<View style = {styles.container}>
<Text onPress={this.gotoHome} style = {styles.item} ><Ionicons name="md-home" size={20} /> Home</Text>
<Text onPress={this.gotoWebMenu} style = {styles.item} ><Ionicons name="logo-rss" size={20} /> Web Menu</Text>
<Text onPress={this.gotoSettings} style = {styles.item} ><Ionicons name="md-settings" size={20} /> Settings</Text>
</View>
)
}
}
//side menu
const MyApp = createDrawerNavigator({
Menu: {
screen: DashboardTabNavigator,
},
},
{
contentComponent: MenuDrawer,
drawerPosition: 'right',
drawerWidth:width - width/2
},
{
initialRouteName: 'Login'
});
//screen route
const LoginStack = createStackNavigator({
Login: {
screen: Login
},
Home:{ screen: MyApp},
}, {
initialRouteName: 'Login',
headerMode: 'null'
});
const MyApp1 = createAppContainer(LoginStack);

Answer 1

Try this.
class NavigationDrawerStructure extends Component {
toggleDrawer = () => {
//Props to open/close the drawer
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
<Image
source={require('../Img/hamburger.png')}
style={{ width: 25, height: 25, marginLeft: 20, tintColor: '#ffffff' }}
/>
</TouchableOpacity>
</View>
);
}
}
And then use it in this way
const HomeActivity_StackNavigator = createStackNavigator({
Home: {
screen: Main,
navigationOptions: ({ navigation }) => ({
title: 'Dashboard',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800'
},
headerTintColor: '#fff'
}),
},
}, {headerLayoutPreset: 'center'});