Getting undefined is not an object (evaluating 'navigation.push') when calling a component-CodePudding

Here is my component:

function MyHeader({navigation}){

    let cartPress = () => navigation.push("Cart");

    return(
        <View>
            <TouchableOpacity onPress={cartPress}>
                <Text>Cart</Text>
            </TouchableOpacity>
        </View>
    );

}

export default MyHeader;

When I call it in the following component:

import React from 'react';
import MyHeader from "../MyHeader";

function MyScreen({navigation}){
    return(
        <View>
            <MyHeader />
        </View>
    );

}

export default MyScreen;

I am getting the following error in the MyScreen component:

TypeError: undefined is not an object (evaluating 'navigation.push').

However when I call what's in the MyHeader component without calling the AppHeader component, I do not get that error:

import React from 'react';
import MyHeader from "../MyHeader";

function MyScreen({navigation}){
    let cartPress = () => navigation.push("Cart");

    return(
        <View>
            <TouchableOpacity onPress={cartPress}>
                <Text>Cart</Text>
            </TouchableOpacity>
        </View>
    );

}

export default MyScreen;

What is the problem ?

CodePudding user response：

You didn't pass the navigation property to the <MyHeader /> component, try: <MyHeader navigation={navigation} />