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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *