How to solve navigation.navigate error when set TouchableOpacity in StackScreen header options?

Question

I want to add a button(icon) on stack header(on right side). On-click it goes to that page but it's not working. It appears 'undefined is not an object (evaluating 'navigation.navigate')'.

Below is my code:

<Stack.Navigator>
  <Stack.Screen name="Page1" component={Page1} />
  <Stack.Screen
    name="Page2"
    component={Page2}
    options={{
      headerRight: () => (
        <View>
          <TouchableOpacity
            onPress={() => navigation.navigate('Page3')}>
            <Image source={require('../assets/image.png')} />
          </TouchableOpacity>
        </View>
      )
    }}
  />
  <Stack.Screen name="Page4" component={Page4} />
  <Stack.Screen name="Page5" component={Page5} />
</Stack.Navigator>

Answer 1

You can pass the navigation from the options to the headerRight:

options={({navigation}) => ({
         headerRight: () => (
          ...
         ),
      })}

or useNavigation():

const navigation = useNavigation();

EDIT 2:

fixed your snack code and its working fine: You had to add a stackScreen called 'MyorderStack' because you're trying to navigate to that.

<NavigationContainer independent={true}>
  <Stack.Navigator screenOptions={{ headerTintColor: 'blue' }}>
    <Stack.Screen name="Global Page" component={AppNavigator} options={{ headerShown: false }} />
    <Stack.Screen name="DetailOne" component={DetailOne} options={({navigation}) => ({ headerBackTitleVisible: false, title: 'Global Page',
      headerRight: () => (
        <View style={{flexDirection: 'row',justifyContent: 'flex-end',width: '50%'}}>
          <View style={{ marginRight: 10 }}>
            <TouchableOpacity onPress={() => navigation.navigate('MyorderStack')}>
              <Image source={require('./assets/shop.png')} style={styles.Image} />
            </TouchableOpacity>
          </View>
        </View>
       ), headerTitleAlign:'center', headerTintColor:colors.primary
      })}
    />
    <Stack.Screen name="DetailTwo" component={DetailTwo} options={{headerBackTitleVisible: false, headerTitleAlign: 'center', title: 'Global Page', headerTintColor: colors.primary}} />
    <Stack.Screen name="MyorderStack" component={MyorderStack} options={{headerBackTitleVisible: false, headerTitleAlign: 'center', title: 'Global Page', headerTintColor: colors.primary}} />
  </Stack.Navigator>
</NavigationContainer>