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

Question

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

Isaac · Accepted Answer · 2021-08-24 12:45:43Z

2

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

answered Aug 24, 2021 at 12:45

Isaac

13k18 gold badges66 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ryan Fonseka Over a year ago

can you please let me know how to set up react-navigation

Isaac Over a year ago

That is whole lot of works to do, if you tried my solution and it doesn't work, chances are your react-navigation is not being setup properly, and that definitely worth another question solely on it's own

Isaac Over a year ago

@RyanFonseka: after updated your code what is the error you're facing?

Ryan Fonseka Over a year ago

console.log is working but not the this.props.navigation.navigate('HomeBottomBar');

Isaac Over a year ago

yup, which means like what I've said, you did not setup your react-navigation properly and that is a separate question on it's own. In that new question, what you can do is to share all the code you've setup related to react-navigation and hopefully someone will help you for that

|

jmj0502 · Accepted Answer · 2021-08-24 13:29:11Z

0

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.

edited Aug 24, 2021 at 13:29

answered Aug 24, 2021 at 13:00

jmj0502

4075 silver badges10 bronze badges

2 Comments

Isaac Over a year ago

OP is working on a React Native project, so there is no browserHistory in the picture and event in the picture as it's not a web project

Isaac Over a year ago

onPress={e=> this.cancelButtonPress(e)}> is wrong, there is no such e in TouchableOpacity

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related