React Native Drawer Navigator props undefined - reactjs

Question

I am trying to create a drawer navigator, I believe I am doing everything correct but I am getting this error when I try to open the drawer undefined is not an object (evaluating '_this2.props.navigation.navigate'). I did some console logs and found that this.props is empty for every class, including the class in App.js, even after I register the screens. Can someone please help or see if this is an actual bug?
Thanks in advance
How to reproduce
App.js
import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
import Map from './screen'
import Home1 from './home';
// You can import from local files
import AssetExample from './components/AssetExample';
import Nav from './nav';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '#expo/vector-icons';
import { createDrawerNavigator, DrawerItems, Navigation } from 'react-navigation';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
console.log(this.props);
return (
<View style={styles.container}>
<Home1 {...this.props} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
backgroundColor: '#FFF',
},
innerContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
header: { padding: 15, paddingTop: 22 },
});
home.js
import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
import Map from './screen'
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '#expo/vector-icons';
import { DrawerNavigator, DrawerItems, Navigation } from 'react-navigation';
export default class Home1 extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
static navigationOptions = {
drawerLabel: 'Home'
};
render() {
return (
<View style={styles.container}>
<StatusBar barStyle="dark-content" />
<View style={styles.header}>
<TouchableOpacity
onPress={() => {
console.log(this.props);
console.log(this.props.navigation);
this.props.navigation.navigate('DrawerToggle');}}>
<Icon name="md-menu" size={30} />
</TouchableOpacity>
</View>
<Text> 'hi' </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
backgroundColor: '#FFF',
},
innerContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
header: { padding: 15, paddingTop: 22 },
});
screen.js
import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '#expo/vector-icons';
import { DrawerNavigator, DrawerItems, Navigation } from 'react-navigation';
export default class Map extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
static navigationOptions = {
drawerLabel: 'Map'
};
render() {
return (
<View>
<StatusBar barStyle="dark-content" />
<View style={styles.header}>
<TouchableOpacity
onPress={() => {
console.log(this.props);
console.log(this.props.navigation);
this.props.navigation.navigate('DrawerToggle');}}>
<Icon name="md-menu" size={30} />
</TouchableOpacity>
<Text> 'hello' </Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
backgroundColor: '#FFF',
},
innerContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
header: { padding: 15, paddingTop: 22 },
});
nav.js
import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
import Map from './screen'
import Home1 from './home';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '#expo/vector-icons';
import { createDrawerNavigator, DrawerItems, Navigation } from 'react-navigation';
const Nav = createDrawerNavigator({
Home: {
screen: Home1
},
Map: {
screen: Map
},
});
export default Nav;
Your Environment
"react-native-paper": "2.1.3",
"react-navigation": "2.18.2"
Running code online here https://snack.expo.io/

Answer 1

navigation.navigate('DrawerToggle') was removed in v2.
You can use
this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();
to open and close the drawer respectively.
Please refer to https://reactnavigation.org/docs/en/drawer-based-navigation.html