react native navigation move between screens - react-native

Question

I'm working with the latest react native navigation and trying to get to the next screen from my icon. Having no luck. I've tried to pass a function into my code and i'm getting no where. I know this is simple, i may just be mising one simple snippet to get this done. Please see below. Does anyone know how to properly write the navigation.
My issue is with the Stack Screen "ProductOverViewScreen".
import * as React from 'react';
import { createStackNavigator, createAppContainer } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import 'react-native-gesture-handler';
import { Platform, Button } from 'react-native';
import { Ionicons } from '#expo/vector-icons';
import ProductsOverViewScreen from '../screens/shop/ProductOverViewScreen';
import ProductDetailScreen from '../screens/shop/ProductDetailScreen';
import CartScreen from '../screens/shop/CartScreen';
import Color from '../constants/Color';
import HeaderButton from '../components/UI/HeaderButton';
const Stack = createStackNavigator();
const newScreen = ({navigation}) => {
navigation.navigate('CartScreen');
}
function ShopNavigator(){
return(
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: Platform.OS === 'android' ? Color.primary : ''
},
headerTitleStyle: {
fontFamily: 'open-sans-bold'
},
headerBackTitleStyle: {
fontFamily: 'open-sans'
},
headerTintColor: Platform.OS === 'android' ? 'white' : Color.primary,
}}
>
<Stack.Screen
name="ProductsOverViewScreen"
component={ProductsOverViewScreen}
options={{
headerRight: ({ navigation}) => (
<Button
onPress={() => navigation.navigate('CartScreen')}
title="Cart"
color='black'
/>
),
}}
/>
<Stack.Screen
name="ProductDetailScreen"
component={ProductDetailScreen}
options={({route}) => ({title: route.params.productTitle})}
/>
<Stack.Screen
name="CartScreen"
component={CartScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default ShopNavigator;

Answer 1

I figured it out. hope this helps someone else out. Add the navigation within options like below.
options={({navigation, route}) => ({
headerRight: () => {
return (
<TouchableHighlight onPress={() => {navigation.navigate('CartScreen')}}>
<Text>Test</Text>
</TouchableHighlight>
);
}
})}
/>