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 ?