title: How to open drawer navigator using button onPress event
body: <p>I added a drawer navigator using <strong>React Navigation 5.x</strong>. Its working when swipe the screen. But i want to show it when i press on the hamburger icon in the Header section. Header is a separate component and drawer navigator currently placed in the app.js file as follows. </p>
  
  <p>App.js</p>
  
  <pre><code>const Drawer = createDrawerNavigator();
  
  const Stack = createStackNavigator();
  
      function MyDrawer() {
    return (
      &lt;Drawer.Navigator&gt;
        &lt;Drawer.Screen name="Login" component={Login} /&gt;
        &lt;Drawer.Screen name="Register" component={Register} /&gt;
        &lt;Drawer.Screen name="Place an Order" component={Order} /&gt;
        &lt;Drawer.Screen name="Place an Order_temp" component={OrderPage} /&gt;
      &lt;/Drawer.Navigator&gt;
    );
  }
  
  const App = () =&gt; {
    return (
      &lt;View style={styles.container}&gt;
        &lt;Header /&gt;
        &lt;NavigationContainer&gt;
          &lt;MyDrawer /&gt;
        &lt;/NavigationContainer&gt;
      &lt;/View&gt;
    );
  };
  </code></pre>
  
  <p>Header.js</p>
  
  <pre><code>const Header = () =&gt; {
    return (
      &lt;View style={styles.child}&gt;
        &lt;Image
          source={require("../../assets/image/shared/logo-nav.png")}
          style={styles.logo}
        /&gt;
        &lt;Ripple rippleColor="rgb(255,255,255)" style={styles.buttonContainer}&gt;
          &lt;FontAwesome.Button
            name="bars"
            color="#ffcc00"
            style={styles.barButton}
          &gt;&lt;/FontAwesome.Button&gt;
        &lt;/Ripple&gt;
      &lt;/View&gt;
    );
  };
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/VgFUX.png" rel="nofollow noreferrer">currently drawer showing like this way when swipe the screen</a></p>