title: How do I make a navigation drawer in react native?
body: <p>How do I make a drawer in react native? Dependencies in my package.json is like this</p>
  
  <pre><code>"dependencies": {
  "@expo/samples": "~36.0.0",
  "@expo/vector-icons": "~10.0.0",
  "@react-navigation/drawer": "^5.0.5",
  "@react-navigation/web": "~1.0.0-alpha.9",
  "expo": "~36.0.0",
  "expo-asset": "~8.0.0",
  "expo-constants": "~8.0.0",
  "expo-font": "~8.0.0",
  "expo-web-browser": "~8.0.0",
  "galio-framework": "^0.6.3",
  "react": "~16.9.0",
  "react-dom": "~16.9.0",
  "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
  "react-native-gesture-handler": "~1.5.0",
  "react-native-reanimated": "~1.4.0",
  "react-native-screens": "2.0.0-alpha.12",
  "react-native-web": "~0.11.7",
  "react-navigation": "~4.0.10",
  "react-navigation-stack": "~1.10.3",
  "react-navigation-tabs": "~2.6.2"
  },
  </code></pre>
  
  <p>I have made a Drawer.js file like this </p>
  
  <pre><code>import React, { Component } from 'react';
  
  import { createDrawerNavigator } from '@react-navigation/drawer';
  import HomeScreen from '../screens/Accountant/HomeScreen';
  
  const Drawer = createDrawerNavigator();
  
  function MyDrawer() {
    return (
    &lt;Drawer.Navigator&gt;
      &lt;Drawer.Screen name="Home" component={HomeScreen} /&gt;
  
    &lt;/Drawer.Navigator&gt;
    );
  }
  
  export default MyDrawer;
  </code></pre>
  
  <p>My Header.js file:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Text, Block, Input, Button } from 'galio-framework';
  import { Ionicons } from '@expo/vector-icons';
  
  export default function Header(props) {
    return (
      &lt;Block style={ styles.header }&gt;
          &lt;Ionicons name="md-menu" size={32} color="grey" onPress={() =&gt; this.props.navigator.openDrawer()}/&gt;
          &lt;Text style={ styles.title }&gt;{ props.title }&lt;/Text&gt;
      &lt;/Block&gt;
    )
  }
  </code></pre>
  
  <p>My AccountantScreen.js : </p>
  
  <pre><code>import React, { Component } from 'react';
  import { Text, Block, Input, Button } from 'galio-framework';
  import { StyleSheet } from 'react-native';
  import Header from '../../common/Header';
  import Drawer from '../../common/Drawer';
  
  class Accountant extends Component {
    render() {
    return (
      &lt;Block style={ styles.blockStyle }&gt;
          &lt;Header title="Accounts" /&gt;
          &lt;Drawer /&gt;
          &lt;Text&gt;Accountant Screen&lt;/Text&gt;
      &lt;/Block&gt;
    );
    }
  }
  
  export default Accountant;
  </code></pre>
  
  <p>I have made a HomeScreen.js like this :</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Text, Block, Input, Button } from 'galio-framework';
  import { StyleSheet } from 'react-native';
  
  class Home extends Component {
    render() {
    return (
      &lt;Block style={ styles.blockStyle }&gt;
  
          &lt;Text&gt;Home Screen&lt;/Text&gt;
      &lt;/Block&gt;
    );
    }
  }
  
  export default Home;
  </code></pre>
  
  <p>I know there are some mistakes in my code. I am new to react native. 
  I have a header in AccountantScreen.js. When I click the menu icon in the header, the drawer should open. But it's not opening.</p>
  
  <p>This is my whole code in github: 
      <a href="https://github.com/boidurja/smartcope.git" rel="nofollow noreferrer">https://github.com/boidurja/smartcope.git</a></p>
  
  <p>Can anyone help me? Thanks.</p>