CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
Ryan Fonseka
Ryan Fonseka

Reputation: 255

TypeError: undefined is not an object (evaluating 'navigation.navigate') React Native

I need to navigate to m home screen when I press a button. But I get an Error => TypeError: undefined is not an object (evaluating 'navigation.navigate')

My Code

import React, { Component, useEffect  } from 'react'    
import { Card } from 'react-native-elements'         
import AsyncStorage from '@react-native-async-storage/async-storage';
import screenStyles from './ScreenStyles';
import HomeHeader from '../components/HomeHeader';
import TicketCardList from '../components/TicketCardList';
import DisableModal from '../components/disableModal';
import { Camera } from 'expo-camera';
import * as Permissions from 'expo-permissions';
import {API_URL, API_TOKEN, API_URL2} from "@env"
import ClearLocalStorage from '../config/clearLocalStorage';

export default class CreateTroubleT extends Component {

    constructor(){
        super();
    }

    
    cancelButtonPress =() => {
        this.props.navigation.navigate('HomeBottomBar');
        console.log("OK")
    }


    render() {

        return (                            
                            
                        <TouchableOpacity style={styles.cancelJBDesing} onPress={()=> this.cancelButtonPress()}>
                        </TouchableOpacity>  
        )
    }
}

When I press the Cancel button I get the Error. I'm new to Native so appreciate any suggestions

Upvotes: 0

Views: 1056

Answers (2)

jmj0502
jmj0502

Reputation: 397

It appears that you're not providing any argument to the function (hence the value of navigation is indeed undefined). Why don't provide an event e to the cancelButtonPress function an try to console.log the value of navigation?

You'll end up with something like:

<TouchableOpacity style={styles.cancelJBDesing} onPress={e=> this.cancelButtonPress(e)}> (When it comes to your JSX).

cancelButtonPress (navigation) {
    console.log(navigation);
    navigation.navigate('HomeBottomBar');
    console.log("OK");
}

(When it comes to the function).

Such a thing will allow you to have a navigation object which value is different than undefined.

If the you don't want to over complicate yourself, you should just refactor your cancelButtonPress, in order for it to properly implement navigation.navigate.

You'll end up with something like this:

cancelButtonPress () {
   console.log("OK");
   this.props.navigation.navigate("/pathToHome");
}

In this case, you don't need to capture the e events as you don't really need to provide any arguments to your function to get the expected behaviour.

Upvotes: 0

Isaac
Isaac

Reputation: 12874

The problem is because when you pressed the button, you said you want to invoke cancelButtonPress with no parameter as shown below

onPress={()=> this.cancelButtonPress()}

But when you defined cancelButtonPress, it is a function that expect a parameter as shown below

cancelButtonPress (navigation) {
    navigation.navigate('HomeBottomBar')
    console.log("OK")
}

Since when you invoked cancelButtonPress without passing parameter, navigation is undefined, and which is why navigation.navigate throwing you that error.

solution:

Actually you should not be passing parameter when you pressed cancelButtonPress, because navigation is not something that you should pass via function call. Instead, you should update your cancelButtonPress function as below

cancelButtonPress = () => {
  this.props.navigation.navigate('HomeBottomBar');
  console.log("ok");
}

Assuming that you've set up react-navigation correctly, it should be accessible via this.props.navigation instead

Upvotes: 2

Related Questions