The navigation header

The navigation bars that you’ve created so far in this chapter have been sort of plain. That’s because you haven’t configured them to do anything, so react-navigation will just render a plain bar with a back button. Each screen component that you create can configure specific navigation header content.

Let’s build on the example discussed in the Route parameters section, which used buttons to navigate to a details page.

The App component has major updates, so let’s take a look at it:

const Stack = createNativeStackNavigator<RoutesParams>();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen
          name="Details"
          component={Details}
          options={({ route }) => ({
            headerRight: () => {
              return (
        ...