React Native Expo Router - Hiding the Stack header on home screen

Question

I'm using expo-router in my React Native Expo app containing 2 screens, app/home.js and app/details.js. There is a Link on home.js that navigates to details.js screen.

Right now both screens have the header on the top of the screen. Is there a way to disable the header only for the home.js screen? After navigation from the home screen to the details screen, the header on the details screen should still show the back arrow for the user to navigate back up to the home screen.

app/_layout.js

import { Stack } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function Layout() {

  return (
    <SafeAreaProvider>
      <Stack
        initialRouteName="home"
      />
    </SafeAreaProvider>
  );
}

Answer 1

      <Stack.Screen
        name="index"
        options={{
          // Hide the header for this route
          headerShown: false,
        }}
      />

Someone commented that the answer isn't clear, I will add some explanation here for those who don't google.

expo-router can specify screen setup, below configures the screen under stack navigator. And by having this Stack.Screen configured for index file, you can hide the header per screen without extra workaround. This is all part of expo-router doc btw.

          <Stack
            screenOptions={{
              // Hide the header for all other routes.
              headerShown: false,
            }}
          >
            <Stack.Screen
              name="index"
              options={{
                // Hide the header for this route
                headerShown: false,
              }}
            />
          </Stack>

You can find the doc at: https://reactnavigation.org/docs/stack-navigator/#header-related-options