{"action":"created","issue":{"url":"https://api.github.com/repos/react-navigation/react-navigation/issues/5218","repository_url":"https://api.github.com/repos/react-navigation/react-navigation","labels_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/5218/labels{/name}","comments_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/5218/comments","events_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/5218/events","html_url":"https://github.com/react-navigation/react-navigation/issues/5218","id":379036439,"node_id":"MDU6SXNzdWUzNzkwMzY0Mzk=","number":5218,"title":"undefined is not an object (evaluating '_this2.props.navigation.navigate')","user":{"login":"oneil512","id":10320873,"node_id":"MDQ6VXNlcjEwMzIwODcz","avatar_url":"https://avatars1.githubusercontent.com/u/10320873?v=4","gravatar_id":"","url":"https://api.github.com/users/oneil512","html_url":"https://github.com/oneil512","followers_url":"https://api.github.com/users/oneil512/followers","following_url":"https://api.github.com/users/oneil512/following{/other_user}","gists_url":"https://api.github.com/users/oneil512/gists{/gist_id}","starred_url":"https://api.github.com/users/oneil512/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oneil512/subscriptions","organizations_url":"https://api.github.com/users/oneil512/orgs","repos_url":"https://api.github.com/users/oneil512/repos","events_url":"https://api.github.com/users/oneil512/events{/privacy}","received_events_url":"https://api.github.com/users/oneil512/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-11-09T06:13:21Z","updated_at":"2018-11-09T16:59:23Z","closed_at":"2018-11-09T16:59:23Z","author_association":"NONE","body":"Hi, 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, even after I register the screens.  Can someone please help or see if this is an actual bug?\r\n\r\nThanks in advance\r\n\r\n### How to reproduce\r\n\r\n**App.js**\r\n\r\n```\r\nimport * as React from 'react';\r\nimport { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';\r\nimport { Constants } from 'expo';\r\nimport Map from './screen'\r\nimport Home1 from './home';\r\n// You can import from local files\r\nimport AssetExample from './components/AssetExample';\r\nimport Nav from './nav';\r\n\r\n// or any pure javascript modules available in npm\r\nimport { Card } from 'react-native-paper';\r\nimport { Ionicons as Icon } from '@expo/vector-icons';\r\nimport { createDrawerNavigator, DrawerItems, Navigation } from 'react-navigation';\r\n\r\nexport default class App extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {};\r\n  }\r\n\r\n  render() {\r\n    console.log(this.props);\r\n    return (\r\n      <View style={styles.container}>\r\n        <Home1 {...this.props} />\r\n      </View>\r\n    );\r\n  }\r\n}\r\n\r\n\r\nconst styles = StyleSheet.create({\r\n\tcontainer: {\r\n\t\tflex: 1,\r\n\t\tpaddingTop: StatusBar.currentHeight,\r\n\t\tbackgroundColor: '#FFF',\r\n\t},\r\n\tinnerContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },\r\n\theader: { padding: 15, paddingTop: 22 },\r\n});\r\n```\r\n\r\n**home.js**\r\n\r\n```\r\nimport * as React from 'react';\r\nimport { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';\r\nimport { Constants } from 'expo';\r\nimport Map from './screen'\r\n// You can import from local files\r\nimport AssetExample from './components/AssetExample';\r\n\r\n// or any pure javascript modules available in npm\r\nimport { Card } from 'react-native-paper';\r\nimport { Ionicons as Icon } from '@expo/vector-icons';\r\nimport { DrawerNavigator, DrawerItems, Navigation } from 'react-navigation';\r\n\r\nexport default class Home1 extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {};\r\n  }\r\n\r\n  static navigationOptions = {\r\n    drawerLabel: 'Home'\r\n  };\r\n  render() {\r\n    return (\r\n      <View style={styles.container}>\r\n      <StatusBar barStyle=\"dark-content\" />\r\n      <View style={styles.header}>\r\n      <TouchableOpacity\r\n\tonPress={() => {\r\n              console.log(this.props); \r\n              console.log(this.props.navigation); \r\n\tthis.props.navigation.navigate('DrawerToggle');}}>\r\n\t\t<Icon name=\"md-menu\" size={30} />\r\n\t</TouchableOpacity>\r\n\t\t\t\t</View>\r\n        <Text> 'hi' </Text>\r\n      </View>\r\n    );\r\n  }\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n\tcontainer: {\r\n\t\tflex: 1,\r\n\t\tpaddingTop: StatusBar.currentHeight,\r\n\t\tbackgroundColor: '#FFF',\r\n\t},\r\n\tinnerContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },\r\n\theader: { padding: 15, paddingTop: 22 },\r\n});\r\n```\r\n\r\n**screen.js**\r\n\r\n```\r\nimport * as React from 'react';\r\nimport { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';\r\nimport { Constants } from 'expo';\r\n// You can import from local files\r\nimport AssetExample from './components/AssetExample';\r\n\r\n// or any pure javascript modules available in npm\r\nimport { Card } from 'react-native-paper';\r\nimport { Ionicons as Icon } from '@expo/vector-icons';\r\nimport { DrawerNavigator, DrawerItems, Navigation } from 'react-navigation';\r\n \r\nexport default class Map extends React.Component {\r\n  \r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {};\r\n  }\r\n  static navigationOptions = {\r\n    drawerLabel: 'Map'\r\n  };\r\n  \r\n  render() {\r\n    return (\r\n      <View>\r\n      <StatusBar barStyle=\"dark-content\" />\r\n      <View style={styles.header}>\r\n       <TouchableOpacity\r\n\tonPress={() => {\r\n              console.log(this.props); \r\n              console.log(this.props.navigation); \r\n\tthis.props.navigation.navigate('DrawerToggle');}}>\r\n\r\n\t<Icon name=\"md-menu\" size={30} />\r\n\t</TouchableOpacity>\r\n         <Text> 'hello' </Text>\r\n      </View>\r\n      </View>\r\n    );\r\n  }\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n\tcontainer: {\r\n\t\tflex: 1,\r\n\t\tpaddingTop: StatusBar.currentHeight,\r\n\t\tbackgroundColor: '#FFF',\r\n\t},\r\n\tinnerContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },\r\n\theader: { padding: 15, paddingTop: 22 },\r\n});\r\n```\r\n\r\n**nav.js**\r\n\r\n```\r\nimport * as React from 'react';\r\nimport { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';\r\nimport { Constants } from 'expo';\r\nimport Map from './screen'\r\nimport Home1 from './home';\r\n// You can import from local files\r\nimport AssetExample from './components/AssetExample';\r\n\r\n// or any pure javascript modules available in npm\r\nimport { Card } from 'react-native-paper';\r\nimport { Ionicons as Icon } from '@expo/vector-icons';\r\nimport { createDrawerNavigator, DrawerItems, Navigation } from 'react-navigation';\r\n\r\nconst Nav = createDrawerNavigator({\r\n  Home: {\r\n    screen: Home1\r\n  },\r\n  Map: {\r\n    screen: Map\r\n  },\r\n });\r\n\r\n export default Nav;\r\n```\r\n\r\n### Your Environment\r\n\r\n \"react-native-paper\": \"2.1.3\",\r\n \"react-navigation\": \"2.18.2\"\r\n\r\nRunning code online here https://snack.expo.io/"},"comment":{"url":"https://api.github.com/repos/react-navigation/react-navigation/issues/comments/437424177","html_url":"https://github.com/react-navigation/react-navigation/issues/5218#issuecomment-437424177","issue_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/5218","id":437424177,"node_id":"MDEyOklzc3VlQ29tbWVudDQzNzQyNDE3Nw==","user":{"login":"brentvatne","id":90494,"node_id":"MDQ6VXNlcjkwNDk0","avatar_url":"https://avatars2.githubusercontent.com/u/90494?v=4","gravatar_id":"","url":"https://api.github.com/users/brentvatne","html_url":"https://github.com/brentvatne","followers_url":"https://api.github.com/users/brentvatne/followers","following_url":"https://api.github.com/users/brentvatne/following{/other_user}","gists_url":"https://api.github.com/users/brentvatne/gists{/gist_id}","starred_url":"https://api.github.com/users/brentvatne/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brentvatne/subscriptions","organizations_url":"https://api.github.com/users/brentvatne/orgs","repos_url":"https://api.github.com/users/brentvatne/repos","events_url":"https://api.github.com/users/brentvatne/events{/privacy}","received_events_url":"https://api.github.com/users/brentvatne/received_events","type":"User","site_admin":false},"created_at":"2018-11-09T16:59:23Z","updated_at":"2018-11-09T16:59:23Z","author_association":"MEMBER","body":"Home1 isn't part of the navigation tree - it's rendered inside App, and only later do you actually render the navigator. A child can't pass props into its parent so there's no way for the navigator to pass the navigation prop into the App component or the Home1 component.\r\n\r\nalso there is no DrawerToggle route anymore, you have to call openDrawer, closeDrawer, or toggleDrawer. see https://snack.expo.io/@notbrent/ashamed-peach\r\n\r\nin the future please look for help on stackoverflow. also i'd suggest reading over the documentation again, the fundamentals section covers what you need to know to understand this"}}
{"actor":{"display_login":"brentvatne"}}