Getting undefined is not an object error while navigating

Question

I wrote a simple login app in react native. When I try navigating to other components by using StackNaviagator, I get below error:

I'm using code from this link: Sample Link. I'm using const Appnavigator to define new components to which I need to navigate to. I'm also using this.props.navigation to pass the prop in to every screen component in stack navigator. How can I fix that error?

My code is:

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

import Forgot from '../src/Forgot';
import Home from '../src/Home';
import Register from '../src/Register';

const AppNavigator = StackNavigator({
  Forgot: { screen: Forgot },
  Home: { screen: Home },
  Register: { screen: Register }
});

export default class LoginView extends Component {

  constructor(props) {
    super(props);
    state = {
      email   : '',
      password: '',
    }
  }

  onLoginButton = () => {
    // Alert.alert("Alert", "Login pressed");
    this.props.navigation.navigate('Home');
  }

  onForgotText = () => {
    // Alert.alert("Alert", "Forgot pressed"); 
    this.props.navigation.navigate('Forgot');
  }

  onRegister = () => {
    // Alert.alert("Alert", "Register clicked")
    this.props.navigation.navigate('Register');
  }

  // onClickListener = (viewId) => {
  //   Alert.alert("Alert", "Button pressed "+viewId);
  // }

  render() {
    return (
      <View style={styles.container}>
      <AppNavigator />
        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/message/ultraviolet/50/3498db'}}/>
          <TextInput style={styles.inputs}
              placeholder="Email"
              keyboardType="email-address"
              underlineColorAndroid='transparent'
              onChangeText={(email) => this.setState({email})}/>
        </View>

        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db'}}/>
          <TextInput style={styles.inputs}
              placeholder="Password"
              secureTextEntry={true}
              underlineColorAndroid='transparent'
              onChangeText={(password) => this.setState({password})}/>
        </View>

        <TouchableHighlight style = { [styles.buttonContainer, styles.loginButton] } onPress = { () => this.onLoginButton() }>
          <Text style = { styles.loginText }>Login</Text>
        </TouchableHighlight>

        <TouchableHighlight style = { styles.buttonContainer } onPress = { () => this.onForgotText() }>
            <Text>Forgot your password?</Text>
        </TouchableHighlight>

        <TouchableHighlight style = { styles.buttonContainer } onPress = {() => this.onRegister()}>
            <Text>Register</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#DCDCDC',
  },
  inputContainer: {
      borderBottomColor: '#F5FCFF',
      backgroundColor: '#FFFFFF',
      borderRadius:30,
      borderBottomWidth: 1,
      width:250,
      height:45,
      marginBottom:20,
      flexDirection: 'row',
      alignItems:'center'
  },
  inputs:{
      height:45,
      marginLeft:16,
      borderBottomColor: '#FFFFFF',
      flex:1,
  },
  inputIcon:{
    width:30,
    height:30,
    marginLeft:15,
    justifyContent: 'center'
  },
  buttonContainer: {
    height:45,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom:20,
    width:250,
    borderRadius:30,
  },
  loginButton: {
    backgroundColor: "#00b5ec",
  },
  loginText: {
    color: 'white',
  }
});

Answer 1

react navigation uses props's method to navigate.

So, You can't use navigate props in child component!!! Pass navigate props from container to component!

You can debug the code by "console.log(this.props)"

"this.props.navigation" must have navigate method.

You must check "this.props.navigation" must be exist!

// If there is no this.props.navigate
// parent component
<LoginView customeNavigate={this.props.navigation.navigate}/>

// LoginView
  onForgotText = () => {
    () => this.props.customNavigate.navigate('Forgot');
  }

Answer 2

LoginView is not defined in your AppNavigator.