How to populate the right side of the navigation header with React Native?

To populate the right side of the navigation header with React Native, we set the screnOptions prop o

<Stack.Navigator>
  <Stack.Group
    screenOptions={({ route, navigation }) => ({
      headerRight: () => <Button onPress={() => navigation.navigate("Home")} />,
    })}
  >
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
  </Stack.Group>
  <Stack.Group screenOptions={{ presentation: "modal" }}>
    <Stack.Screen name="Settings" component={Settings} />
    <Stack.Screen name="Share" component={Share} />
  </Stack.Group>
</Stack.Navigator>;

to add the Stack.Group‘s screenOptions prop.

We set it to a function that has a button on the right by setting headerRight to a function that renders a Button.