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

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

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

Solution

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.