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>
  );
}

Lohrman

Answer 1

From the expo-router docs:

You can use a layout's Screen component to configure the header bar dynamically from within the route. This is good for interactions that change the UI.

So in your home.js (or in any route for which you may want a custom header) you can add:

    <Stack.Screen options={{ header: () => null }} />

Even though you cannot disable the header per-se, you can replace it with a custom element which is null. This will visually remove the header for any route you add it to. Of course, the header on details.js will stay the same.

Epileptic

Update: there seems to be another option you can pass, named headerShown. You can set this to false and have the same effect – Epileptic

Answer 2

      <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

Stegosaur

Code-only answers aren't ideal. Could you add some explanation of what this code does and why it solves OP's problem? – Baccate

Answer 3

The better option is to use headerShown: false on the options prop.

<Stack.Screen options={{ headerShown: false }} />

Strappado