Why navigation.closeDrawer is not a function? - react-native

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());

Answer 2

You are using both StackNavigator and DrawrNavigator so that the way to use them is different a little bit.
Keep in mind we have two version for react-navigation (v1 and v2) for now so that you should read the documentation carefully.
Please try using this:
Close drawer
this.props.navigation.navigate('DrawerClose'); // for version 1
this.props.navigation.openDrawer(); // for version 2
Open drawer:
this.props.navigation.navigate('DrawerOpen'); // for version 1
this.props.navigation.closeDrawer(); // for version 2
Be careful for reference any bugs fix for this libraries on the internet which you have to know which version is using in.
Note that the order of nesting - if the stack navigator is not inside of the drawer, it will not have the openDrawer function.
I guess it will work for you in this case.
Cheer!

Answer 3

In your DrawerPanel file. You did not use the constructor. Hence, your component's props did not know about the navigation props that the DrawerNavigator passed in. Try putting this before your render function in the component.
constructor(props){
super(props);
}
This way you will no longer need to use dispatch(), but instead use openDrawer() and closeDrawer().