title: Why navigation.closeDrawer is not a function?
body: <p>Dependencies version:</p>
  
  <pre><code>"dependencies": {
      "react": "16.3.1",
      "react-native": "~0.55.2",
      "react-navigation": "^2.0.1",
    }
  </code></pre>
  
  <p>I use <code>react-navigation</code> to navigate my screen, i create two screen and a drawer</p>
  
  <p>Router.js:</p>
  
  <pre><code>import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
  import MainActivity from './components/MainActivity';
  import ThisWeek from './components/ThisWeek';
  import DrawerPanel from './components/DrawerPanel';
  
  const Stack = createStackNavigator({
    MainActivity: {
      screen: MainActivity,
      navigationOptions: {
        title: 'Welcome',
        headerStyle: {
          backgroundColor: '#81A3A7', 
          elevation: null
        }
      }
    },
    ThisWeek: {
      screen: ThisWeek
    }
  },
  {
    initialRouteName: 'MainActivity'
  }
  );
  
  const Router = createDrawerNavigator({
      FirstScreen: {
        screen: Stack
      }
    },
    {
      contentComponent: DrawerPanel,
      drawerWidth: 200
    });
  
  export default Router;
  </code></pre>
  
  <p>In my <code>DrawerPanel.js</code> i can click the two button navigate to the screen, but when i try to use <code>this.props.navigation.closeDrawer();</code> that shows an error <code>_this2.props.navigation.closeDrawer is not a function</code>.</p>
  
  <p>So i try to <code>console.log(this.props);</code>,i can see <code>openDrawer</code> and  <code>closeDrawer</code> under <code>navigation</code>
  <a href="https://i.stack.imgur.com/5EVSO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5EVSO.png" alt="enter image description here"></a></p>
  
  <p>Here is my DrawerPanel.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { ScrollView, FlatList, Text } from 'react-native';
  import { View } from 'react-native-animatable';
  import { List, Button } from 'react-native-elements';
  
  class DrawerPanel extends Component {
  
    render() {
      console.log(this.props);
      return (
        &lt;ScrollView style={{ backgroundColor: '#81A3A7' }}&gt;
  
          &lt;Button
            onPress={() =&gt; {
              this.props.navigation.actions.closeDrawer();
              this.props.navigation.navigate('MainActivity');
            }}
            backgroundColor={'#81A3A7'}
            containerViewStyle={{ width: '100%', marginLeft: -61 }}
            title='Main page' 
          /&gt;
          &lt;Button
            onPress={() =&gt; this.props.navigation.navigate('ThisWeek')}
            backgroundColor={'#81A3A7'}
            containerViewStyle={{ width: '100%', marginLeft: -46 }}
            title='This weel'
          /&gt; 
        &lt;/ScrollView&gt;
      );
    }
  }
  
  export default DrawerPanel;
  </code></pre>
  
  <p>I can't figure it out why i can use <code>this.props.navigation.navigate();</code> to another screen not allow to use <code>this.props.navigation.closeDrawer();</code></p>
  
  <p>I try make a change to use <code>this.props.navigation.actions.closeDrawer();</code> the error will show <code>Cannot read property 'closeDrawer' of undefined</code>.</p>
  
  <p>What step i make it wrong ? Any help would be appreciated. Thanks in advance.</p>