can not read property navigation is undefined

Question

I want to redirect to another page after login.

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import Login from './app/components/Login';
import Home from './app/components/Home';

global.MyVar = 'https://aboutreact.com';

const NavStack = createStackNavigator({
  Login:{
    screen:Login,
    navigationOptions: {
      header: null,
    }
  },
  Home:{
    screen:Home,
    navigationOptions: {
      header: null,
    }
  }
});

const Application = createAppContainer(NavStack);

export default class App extends React.Component {
  render() {
    return (
      <Application/>
    );
  }
}

Login.js

import React, {Component} from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import { Button, ThemeProvider, Input } from 'react-native-elements';
import axios from 'axios';

export default class Login extends React.Component {

  constructor(props){
      super(props);
      this.buttonPress = this.buttonPress.bind(this);
      this.state = {
          user: '',
          password:'',    
      };
  }


  buttonPress() {
    axios.get('https://reqres.in/api/products/3')
      .then(function (response) {
        // return console.log(response.data.data.id);
        // return console.log(global.MyVar);

        this.props.navigation.navigate('Home');
      })
      .catch(function (error) {
        return console.log(error);
      });
  }

  // loginSubmit = ()=>{
  //   axios.get('https://reqres.in/api/products/3')
  //     .then(function (response) {
  //       // return console.log(response.data.data.id);
  //       // return console.log(global.MyVar);

  //       const { navigate } = this.props.navigation;
  //       navigate('Home', { user: 'John' })
  //     })
  //     .catch(function (error) {
  //       return console.log(error);
  //     });
  // }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.loginform}>
          <Image style={styles.logo} source={require('../images/emllogo.png')} />
          <View style={styles.formarea}>
            <Input
             onChangeText={(user)=>this.setState({user})}
              style={styles.inputtext}
              placeholder='User Name f'
              leftIcon={
                <Icon
                  name='user'
                  size={20}
                />
              }
            />
          </View>
          <View style={styles.formarea}>
            <Input
                secureTextEntry={true}
                onChangeText={(password)=>this.setState({password})}
                style={styles.inputtext}
                placeholder='Password'
                leftIcon={
                  <Icon
                    name='lock'
                    size={20}
                  />
                }
              />
          </View>

          <View style={styles.formarea}>
          <Button
            buttonStyle={{
              backgroundColor:'red'
            }}
            title="Login"
            onPress={this.buttonPress}
          />
          </View>
        </View>                   
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'#f00',
    justifyContent:'center',
    alignItems: 'center'
  },
  loginform:{
    width:'80%',
    minHeight:'50%',
    borderWidth:0.5,
    backgroundColor:'#fff',
    color:'#000',
    borderRadius:10,
    alignItems: 'center'
  },
  logo:{
    marginTop:'8%'
  },
  bordertopgray:{
    borderTopColor:'#ccc',
    borderTopWidth:0.5,
    width:'100%'
  },
  formarea:{
    width:'80%',
    height:'8%',
    marginTop:20
  }
});

Error:

TypeError: Cannot read property 'navigation' of undefined at I:\XAMPP\htdocs\react\EMLV5\app\components\Login.js:17 at tryCallOne (I:\XAMPP\htdocs\react\EMLV5\node_modules\promise\setimmediate\core.js:37) at I:\XAMPP\htdocs\react\EMLV5\node_modules\promise\setimmediate\core.js:123 at I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:298 at _callTimer (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:152) at _callImmediatesPass (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:200) at Object.callImmediates (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:473) at MessageQueue.__callImmediates (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:337) at I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135 at MessageQueue.__guard (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314)

"this.props" seems undefined. Check, why. Also its not an PHP issue, so its best to remove that tag. — paskl

cuongtd cuongtd · Accepted Answer · 2019-07-26T17:10:16

try this

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

     axios.get('https://reqres.in/api/products/3')
       .then(function (response) {
          return console.log(response.data.data.id);
          return console.log(global.MyVar);

         navigate('Home', { user: 'John' })
       })
       .catch(function (error) {
         return console.log(error);
       });
   }

check how to correct access this inside a callback

can not read property navigation is undefined

2 Answers