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
.