title: How to toggle drawer navigator in react native?
body: <p>I am using drawer navigation. When I click on the hamburger menu icon the drawer of the drawer navigation is not working, I am not able to toggle the drawer. Code 1 is not working but code 2 is working, can anyone help me figure out why ?</p>
  
  <p>Code:</p>
  
  <pre><code>    Burger menu icon code 1:
  
      // Inside Header
      navigationOptions: ({ navigation }) =&gt; ({
                  // headerTitle: 'Rchampz',
                  headerLeft:
                  &lt;TouchableOpacity  onPress={() =&gt; {navigation.dispatch(DrawerActions.toggleDrawer())} }&gt;
                      &lt;MenuImage navigation={navigation}/&gt;
                  &lt;/TouchableOpacity&gt;,
  
  //Created component and added inside navigationOptions
  
      const MenuImage = ({navigation}) =&gt; {
          if(!navigation.state.isDrawerOpen){
              return &lt;TouchableOpacity&gt;&lt;Image source={require('../assets/images/menu.png')} style={{width: 24, height: 24, resizeMode: 'contain' ,marginLeft: 15}}/&gt;&lt;/TouchableOpacity&gt;
          }else{
              return &lt;MenuIcon style={{paddingLeft: 10, paddingRight: 10}} name="md-arrow-back" size={30} color="black"/&gt;
          }
      }
  
      Burger menu icon code 2:
  
      //Inside header
  
      navigationOptions: ({ navigation }) =&gt; ({
                  // headerTitle: 'Rchampz',
                  headerLeft:
                  &lt;TouchableOpacity  onPress={() =&gt; {navigation.dispatch(DrawerActions.toggleDrawer())} }&gt;
                      &lt;MenuImage navigation={navigation}/&gt;
                  &lt;/TouchableOpacity&gt;,
  
  
  //Created component and added inside navigationOptions
  
      const MenuImage = ({navigation}) =&gt; {
          if(!navigation.state.isDrawerOpen){
              return &lt;MenuIcon style={{paddingLeft: 10, paddingRight: 10}} name="md-menu" size={30} color="black"/&gt;
          }else{
              return &lt;MenuIcon style={{paddingLeft: 10, paddingRight: 10}} name="md-arrow-back" size={30} color="black"/&gt;
          }
      }
  </code></pre>