title: How to toggle the side menu bar in react native?
body: <p>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 <a href="https://i.stack.imgur.com/zjspS.jpg" rel="nofollow noreferrer">image</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 = () =&gt; {
    this.props.navigation.navigate('Home');
  }
  
  gotoWebMenu = () =&gt; {
    this.props.navigation.navigate('WebMenu');
  }
  
  gotoSettings = () =&gt; {
    this.props.navigation.navigate('Settings');
  }
  
    render() {
        return(
         &lt;View style = {styles.container}&gt;        
          &lt;Text onPress={this.gotoHome} style = {styles.item} &gt;&lt;Ionicons name="md-home" size={20} /&gt;  Home&lt;/Text&gt;
          &lt;Text onPress={this.gotoWebMenu} style = {styles.item} &gt;&lt;Ionicons name="logo-rss" size={20} /&gt;  Web Menu&lt;/Text&gt;
          &lt;Text onPress={this.gotoSettings} style = {styles.item} &gt;&lt;Ionicons name="md-settings" size={20} /&gt;  Settings&lt;/Text&gt;
        &lt;/View&gt;
        )
    }
   
  }
  
  //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);</code></pre>
  </div>
  </div>
  </p>