CODEWITHSUNDEEP
javascriptandroidreact-native
Akshey Jawa
Akshey Jawa

Reputation: 447

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

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 coming.

Upvotes: 0

Views: 31467

Answers (3)

Bored
Bored

Reputation: 499

Try without 'search term' or in this way:

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

Upvotes: 1

vicky keshri
vicky keshri

Reputation: 447

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' })

Upvotes: 2

hyb175
hyb175

Reputation: 1291

You are exporting the component 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;

Upvotes: 7

Related Questions