React-Native : this.props.navigation.navigate undefined

Question

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

 export default class LoginActivity extends React.Component {

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

    constructor(props) {

        super(props)

        this.state = {

          UserPhone: ''

        }

      }

    UserLoginFunction = () =>{

     const { UserPhone }  = this.state ;


    fetch('https://appname.herokuapp.com/users/userlogin/'+UserPhone).then((response) => response.json())
          .then((responseJson) => {

            // If server response message same as Data Matched
           if(responseJson == 'match')
            {

                //Then open Main page for booking ride
               this.props.navigation.navigate('Third', { Phone: UserPhone });


            }
            else{

                 this.props.navigation.navigate('Second', { Phone: UserPhone });
            }

          }).catch((error) => {
            console.error(error);
          });


      }

      render() {
        return (

    <View style={styles.MainContainer}>

            <Text style= {styles.TextComponentStyle}>User Login</Text>

            <TextInput

              // Adding hint in Text Input using Place holder.
              placeholder="Enter User Phone"

              onChangeText={UserPhone => this.setState({UserPhone})}

              // Making the Under line Transparent.
              underlineColorAndroid='transparent'

              style={styles.TextInputStyleClass}
            />
            <Button title="Login" onPress={this.UserLoginFunction} color="#2196F3" />



    </View>

        );
      }
    }
AppRegistry.registerComponent('appname', () => appname);

I am new to react-native. The above code snippet is just accepting some data from a login field and then doing a API call and based on data received from server, I am calling either the second activity or third activity.

The same code was working properly till yesterday, today I had to erase the repository and start all over again for some tech glitches but then suddenly the app is showing the below error :

undefined is not an object (evaluating '_this.props.navigation.navigate')
<unknown>
    C:\Users\username\Desktop\cabchain-react\cabchain\App.js:51:33
tryCallOne
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\promise\setimmediate\core.js:37:14
<unknown>
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\promise\setimmediate\core.js:123:25
<unknown>
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:297:23
_callTimer
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:154:6
_callImmediatesPass
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:202:17
callImmediates
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:466:11
__callImmediates
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:329:4
<unknown>
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:147:6
__guardSafe
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:316:6
flushedQueue
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:146:17
invokeCallbackAndReturnFlushedQueue
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:11

Answer 1

this is from parent context; it cannot be accessed by inner function, e.g. fetch().then. Consider either:

• Make a reference to this before fetching

  UserLoginFunction = () =>{
     const { UserPhone }  = this.state ;
     const that = this; // use that for refenrence
   fetch('https://appname.herokuapp.com/users/userlogin/'+UserPhone).then((response) => response.json())
        .then((responseJson) => {
          // If server response message same as Data Matched
         if(responseJson == 'match')
          {
              //Then open Main page for booking ride
             that.props.navigation.navigate('Third', { Phone: UserPhone });
          }
          else{
               that.props.navigation.navigate('Second', { Phone: UserPhone });
          }
        }).catch((error) => {
          console.error(error);
        });
    }
  

• or change the function to be asynchronous

  async UserLoginFunction = () =>{
     const { UserPhone }  = this.state ;
     const response = await fetch('https://appname.herokuapp.com/users/userlogin/'+UserPhone);
     if (response && response.json()) {
         const responseJson = response.json();
         // If server response message same as Data Matched
         if(responseJson == 'match')
          {
              //Then open Main page for booking ride
             this.props.navigation.navigate('Third', { Phone: UserPhone });
          }
          else{
               this.props.navigation.navigate('Second', { Phone: UserPhone });
          }
     }
    }