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

Answer

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