Why navigation.closeDrawer is not a function?

Question

Dependencies version:

"dependencies": {
    "react": "16.3.1",
    "react-native": "~0.55.2",
    "react-navigation": "^2.0.1",
  }

I use react-navigation to navigate my screen, i create two screen and a drawer

Router.js:

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;

In my DrawerPanel.js i can click the two button navigate to the screen, but when i try to use this.props.navigation.closeDrawer(); that shows an error _this2.props.navigation.closeDrawer is not a function.

So i try to console.log(this.props);,i can see openDrawer and closeDrawer under navigation

Here is my DrawerPanel.js:

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 (
      <ScrollView style={{ backgroundColor: '#81A3A7' }}>

        <Button
          onPress={() => {
            this.props.navigation.actions.closeDrawer();
            this.props.navigation.navigate('MainActivity');
          }}
          backgroundColor={'#81A3A7'}
          containerViewStyle={{ width: '100%', marginLeft: -61 }}
          title='Main page' 
        />
        <Button
          onPress={() => this.props.navigation.navigate('ThisWeek')}
          backgroundColor={'#81A3A7'}
          containerViewStyle={{ width: '100%', marginLeft: -46 }}
          title='This weel'
        /> 
      </ScrollView>
    );
  }
}

export default DrawerPanel;

I can't figure it out why i can use this.props.navigation.navigate(); to another screen not allow to use this.props.navigation.closeDrawer();

I try make a change to use this.props.navigation.actions.closeDrawer(); the error will show Cannot read property 'closeDrawer' of undefined.

What step i make it wrong ? Any help would be appreciated. Thanks in advance.

Answer 1

Try this

import { DrawerActions } from 'react-navigation';

this.props.navigation.dispatch(DrawerActions.closeDrawer());
this.props.navigation.dispatch(DrawerActions.openDrawer());