I am trying to make my first React Native Android app and I am getting this error:

undefined is not an object (evaluating 'this.props.navigation.navigate')

This is the code:

import React from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class HomeScreen extends React.Component {

  static navigationOptions = {
    title: 'Home',
  };

  render() {
    const { navigate } = this.props.navigation;    

    return (
      <View>
        <Button 
          title="Show Centers near me"
          onPress={() =>
            navigate('Results', "Search Term")
          }
          />
        <Text>or</Text>
      </View>
    );
  }
}


class ResultsScreen extends React.Component {

  static navigationOptions = {
    title: 'Results',
  };


  render() {
  const { navigate } = this.props.navigation;

    return (
      <View>
        <Text>Hi</Text>
      </View>
    );
  }
}

const App = StackNavigator({
  Home: { screen: HomeScreen },
  Results: { screen: ResultsScreen }
});

I can not figure out why the error is ing.

I am trying to make my first React Native Android app and I am getting this error:

undefined is not an object (evaluating 'this.props.navigation.navigate')

This is the code:

import React from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class HomeScreen extends React.Component {

  static navigationOptions = {
    title: 'Home',
  };

  render() {
    const { navigate } = this.props.navigation;    

    return (
      <View>
        <Button 
          title="Show Centers near me"
          onPress={() =>
            navigate('Results', "Search Term")
          }
          />
        <Text>or</Text>
      </View>
    );
  }
}


class ResultsScreen extends React.Component {

  static navigationOptions = {
    title: 'Results',
  };


  render() {
  const { navigate } = this.props.navigation;

    return (
      <View>
        <Text>Hi</Text>
      </View>
    );
  }
}

const App = StackNavigator({
  Home: { screen: HomeScreen },
  Results: { screen: ResultsScreen }
});

I can not figure out why the error is ing.

• javascript
• android
• react-native

• Try adding a constructor in your class like so: constructor(props) { super(props) } – Helder De Baere Commented Jul 31, 2017 at 13:52
• @HelderJulesDeBaere Doesn't help! – Akshey Jawa Commented Jul 31, 2017 at 14:22
• 1 Show more code around how you setup the StackNavigator. this.props.navigation is passed down by the navigator and if the setup is off then this error may happen. Also try searching on SO for this, this has been answered a lot. – hyb175 Commented Jul 31, 2017 at 14:37
• @hyb175 I have added the StackNavigator setup. I have thoroughly searched SO and Google before posting this. None of the suggested solutions worked for me. – Akshey Jawa Commented Jul 31, 2017 at 17:12
• This is still not enough information to help you. Try putting more plete setup so people can recreate this issue you have. Something to check first, is HomeScreen ponent used anywhere else besides in the StackNavigator call? – hyb175 Commented Jul 31, 2017 at 17:15

3 Answers 3

You are exporting the ponent wrong. You should get rid of the export default on your class HomeScreen definition and at the bottom of the file do export default App;

If you are handling it in AppContainer and not able to access while opening drawer menu. You can try below snippets.

const HomeStackNavigator = createStackNavigator({   Home:    { 
    screen: Home,
    navigationOptions : ({navigation}) => ({
      title: 'Home',
      headerStyle: {
          backgroundColor: "#512DA8"
      },
      headerTitleStyle: {
          color: "#fff"            
      },
      headerTintColor: "#fff",
      headerLeft: <TouchableOpacity onPress={ () => navigation.openDrawer()}> 
      <Image 
      source={require('./images/menu_burger.png')}
      style={{width: 24, height: 24, padding: 5, marginLeft: 5}}/>
      </TouchableOpacity>
    })   } }, {   initialRouteName: 'DumontHome' })

Try without 'search term' or in this way:

navigate('route', {item:'search term'})