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

Question

I am having trouble navigating through screens with a simple button. This is my App.js

export default class App extends Component<Props> {
  render() {
    return (
      <AppStackNavigator/>
    );
  }
}
const AppStackNavigator = StackNavigator({
    Login: { screen: LoginScreen },
    Home: { screen: HomeScreen },

      },{
        navigationOptions: {
          gesturesEnabled:false
        }
      })

Login.js

export default class Login extends Component {
    render() {
        return(
            <SafeAreaView style={styles.container}>
                <StatusBar barStyle='light-content'/>
                <KeyboardAvoidingView behavior='padding' style={styles.container}>
                    <TouchableWithoutFeedback style={styles.container} onPress={Keyboard.dismiss}>
                    <View style={styles.logoContainer}>
                        <View style={styles.logoContainer}>
                        <Image style={styles.logo}
                            source={require('../images/logo/logo.png')}>
                        </Image>
                        <Text style={styles.title}>
                            Sports Chat App
                        </Text>
                        </View>
                        <View style={styles.infoContainer}>
                            <TextInput style={styles.input}
                                placeholder="Enter name"
                                placeholderTextColor='#ffffff'
                                keyboardType='default'
                                returnKeyType='next'
                                autoCorrect={false}
                                onSubmitEditing={()=> this.refs.phoneNumber.focus()}
                                />
                            <TextInput style={styles.input}
                                placeholder="Enter phone number"
                                placeholderTextColor='#ffffff'
                                keyboardType='phone-pad'
                                ref={'phoneNumber'}
                                />
                                <TouchableOpacity style={styles.buttonContainer}>
                                <Button title='LogIn' onPress={()=>this.props.navigation.navigate('Home')}/>
                                </TouchableOpacity>
                        </View>
                    </View>
                    </TouchableWithoutFeedback>
                </KeyboardAvoidingView>
            </SafeAreaView>
        )
    }
};

LoginScreen.js

class LoginScreen extends Component {
    render(){
        return (

            <View>
            <Login>
            </Login>
            </View>
        );
    }
}

I keep getting the error undefined is not an object (evaluating'_this2.props.navigation.navigate') whenever i try use the Login button in Login.js, I want this to navigate to the home screen but cant figure out why this keeps happening. If i try do it without the components it works fine.

Click to View error message

Answer 1

You need to access the navigation prop in the component. Check the official guide.

reactnavigation Official guide

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class MyBackButton extends React.Component {
  render() {
   return <Button title="Back" onPress={() => { this.props.navigation.goBack() }} />;
 }
}

// withNavigation returns a component that wraps MyBackButton and passes in the
// navigation prop
export default withNavigation(MyBackButton);

Answer 2

Add a navigation props to Login in LoginScreen.js, Because LoginScreen has props navigation but Login don't.

   render(){
        return (
            <View>
                <Login navigation ={this.props.navigation}>
                </Login>
            </View>
        );
    }

Answer 3

App.js

import React, { Component } from "react";
import { Text, View } from "react-native";
import AppStackNavigator from "./AppStackNavigator";

export default class App extends Component<Props> {
  render() {
    return <AppStackNavigator />;
  }
}

AppStackNavigator

    import React, { Component } from "react";
import { StackNavigator } from "react-navigation";
import { View, Text, TouchableOpacity } from "react-native";

const LoginScreen = props => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Login navigation={props.navigation} />
  </View>
);

const HomeScreen = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>Home</Text>
  </View>
);

const Login = props => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <TouchableOpacity
      onPress={() => {
        props.navigation.navigate("Home");
      }}
    >
      <Text>GO to home from login</Text>
    </TouchableOpacity>
  </View>
);

export default (AppStackNavigator = StackNavigator(
  {
    Login: { screen: LoginScreen },
    Home: { screen: HomeScreen }
  },
  {
    headerMode: "none",
    navigationOptions: {
      gesturesEnabled: false
    }
  }
));