title: React navigation drawer V5
body: <p>I'm using react-navigation version 5.
  I have tab navigation and drawer navigation together.</p>
  
  <p>I'm trying to add an icon in my header to open/close drawer:</p>
  
  <p>here is my custom right header for toggling the drawer:</p>
  
  <pre><code>const HeaderRight = ({ navigation }) =&gt; {   
      return (
        &lt;View style={{flexDirection: 'row'}}&gt;
          &lt;TouchableOpacity
          onPress={ () =&gt;{ navigation.toggleDrawer()}}&gt;  //here is the problem
            &lt;Image source={require('./assets/images/icons/drawer.png')}/&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );}
  </code></pre>
  
  <p>this is my tab navigator:</p>
  
  <pre><code>const Tab = createBottomTabNavigator();
  function AppTab() {
    return (
       &lt;Tab.Navigator&gt;         
          &lt;Tab.Screen name="Category" component={Category} /&gt;    
          &lt;Tab.Screen name="Home" component={Home}/&gt;
        &lt;/Tab.Navigator&gt;
     );}
  </code></pre>
  
  <p>drawer navigator:</p>
  
  <pre><code>    const Drawer = createDrawerNavigator();  
      function App() {
        return (    
            &lt;Drawer.Navigator&gt;
              &lt;Drawer.Screen name="AppTab" component={AppTab} /&gt;
              &lt;Drawer.Screen name="Notifications" component={NotificationsScreen} /&gt;
            &lt;/Drawer.Navigator&gt;  
        );}
  </code></pre>
  
  <p>and my stack navigator to theme mix all:</p>
  
  <pre><code>const Stack = createStackNavigator();
    export default function MyStack() {
    return (
      &lt;NavigationContainer&gt;
      &lt;Stack.Navigator
      headerMode="screen"
       screenOptions={{
            headerRight: ({ navigation }) =&gt; (&lt;HeaderRight navigation={navigation} /&gt;
          ),}} &gt;
        &lt;Stack.Screen name="Settings" component={Settings} /&gt;
      &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  </code></pre>
  
  <p>when I press the right header icon <a href="https://i.stack.imgur.com/pHZIK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pHZIK.png" alt="enter image description here"></a></p>
  
  <p>what I'm missing here?
  the documents weren't really helpful</p>
  
  <p>note:I have also try using dispatch but it didn't work:</p>
  
  <blockquote>
    <p>navigation.dispatch(DrawerActions.toggleDrawer())</p>
  </blockquote>
  
  <p><strong>package.json:</strong></p>
  
  <pre><code>{
    "name": "test",
    "version": "0.0.1",
    "private": true,
    "scripts": {
      "android": "react-native run-android",
      "ios": "react-native run-ios",
      "start": "react-native start",
      "test": "jest",
      "lint": "eslint ."
    },
    "dependencies": {
      "@react-native-community/async-storage": "^1.8.0",
      "@react-native-community/masked-view": "^0.1.6",
      "@react-navigation/bottom-tabs": "^5.0.5",
      "@react-navigation/drawer": "^5.0.5",
      "@react-navigation/native": "^5.0.5",
      "@react-navigation/stack": "^5.0.5",
      "moment": "^2.24.0",
      "randomcolor": "^0.5.4",
      "react": "16.9.0",
      "react-native": "0.61.5",
      "react-native-base64": "0.0.2",
      "react-native-gesture-handler": "^1.6.0",
      "react-native-image-slider": "^2.0.3",
      "react-native-reanimated": "^1.7.0",
      "react-native-safe-area-context": "^0.7.3",
      "react-native-screens": "^2.0.0-beta.4",
      "react-native-woocommerce-api": "^1.0.12"
    },
    "devDependencies": {
      "@babel/core": "^7.6.2",
      "@babel/runtime": "^7.6.2",
      "@react-native-community/eslint-config": "^0.0.5",
      "babel-jest": "^24.9.0",
      "eslint": "^6.5.1",
      "jest": "^24.9.0",
      "metro-react-native-babel-preset": "^0.56.0",
      "react-test-renderer": "16.9.0"
    },
    "jest": {
      "preset": "react-native"
    }
  }
  </code></pre>