react-navigation: Navigate to a different screen from a button in header

Question

I have a Icon on the right side of my header and on press of that button i want to navigate to a different screen.

I have searched very much for this but all of the solutions are for class components and there are no official documentation available for it.

I am using react native version 0.61.4.

On press of the icon in the header on the right i want to move the 'ProfileScreen'. All the other navigation is working fine. I have a button in 'HomeScreen' to move to 'ResultsScreen' but cannot go to 'ProfileScreen' from the header.

Here is snippet of my code

const Stack = createStackNavigator();

const App = () => {
    return (
        <SafeAreaView style={{ flex: 1 }}>
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen 
                        name="Home" 
                        component={HomeScreen}
                        options={
                            {
                                title: 'Home',
                                headerStyle: {
                                    backgroundColor: '#273469',
                                },
                                headerTintColor: '#EBF2FA',
                                headerRight: () => (
                                    <Icon
                                      onPress={() => navigate('ProfileScreen')}
                                      name="edit"
                                      type="material"
                                    />
                                ),
                            }
                        }
                    />
                    <Stack.Screen 
                        name="ResultsScreen" 
                        component={ResultsScreen}
                    />
                    <Stack.Screen 
                        name="ProfileScreen"
                        component={ProfileScreen}
                    />
                </Stack.Navigator>
            </NavigationContainer>
        </SafeAreaView>
    )
}

Answer 1

options can take a function as an argument and this function takes props as a parameter.

Here is the documentation

Here is the TypeScript definition for information:

     * Navigator options for this screen.
     */
    options?: ScreenOptions | ((props: {
        route: RouteProp<ParamList, RouteName>;
        navigation: any;
    }) => ScreenOptions);

as you can see props, contain the navigation object that you can use to call navigate like this :

 options={({ navigation }) => ({
              title: 'Home',
              headerStyle: {
                backgroundColor: '#273469',
              },
              headerTintColor: '#EBF2FA',
              headerRight: () => (
                <Icon
                  onPress={() => navigation.navigate('ProfileScreen')}
                  name="edit"
                  type="material"
                />
              ),
            })}

Answer 2

Adding to Kevin's answer, you can also add a simple button in the header:

 options={({ navigation }) => ({
              title: 'Home',
              headerStyle: {
                backgroundColor: '#273469',
              },
              headerTintColor: '#EBF2FA',
              headerRight: () => (
                <Button                // a button in the header!     
                  onPress={() => 
                  navigation.navigate('Account')}
                  title="Account"
                />
              ),
            })}