React Native Drawer Navigator props undefined

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/

728x90

1 Answers React Native Drawer Navigator props undefined

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

4 months ago