How to override react native - expo router header?

Question

In my react native app I am using expo router to navigate between screens. And I am struggling to override the header. Can somebody refer me to the doc if possible, as expo.dev doesn't have enough details.

Let's create a short example using expo: npx create-expo-app expo-router-stack-test and two files:

/app/details-page/index.tsx

import { View, Text } from "react-native";

export default function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Yay details page</Text>
    </View>
  );
}

and /app/details-page/_layout.tsx

import { Stack } from "expo-router";

export default function DetailsLayout() {
  return (
    <Stack
      screenOptions={{
        // Hide the header for all other routes.
        //headerShown: false,
      }}
    >
      <Stack.Screen
        name="index"
        options={{
          title: "change the title",
          // header: () => null, // hides '<- index' header
        }}
      />
    </Stack>
  );
}

In our /app/(tabs)/index.tsx let's add a button to navigate to our screen:

      <ThemedView style={styles.titleContainer}>
        <Link href="/details-page" asChild>
          <Pressable>
            <Text>Go To details page</Text>
          </Pressable>
        </Link>
        <ThemedText type="title">Welcome!</ThemedText>
        <HelloWave />
      </ThemedView>

in the code above I can modify the second header, while I am looking for a way to override top title as well.

Answer 1

Found a duplicate question here

If someone comes across, for complete answer, you need to update RootLayout- /app/_layout.tsx with:

      <Stack
        screenOptions={{
          headerShown: false,
        }}
      >