Categories
React Native Answers

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

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.