Question 137016 in React native Question posted in
The official React Native documentation can be found here.

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

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0 
          <Stack.Screen
        name="index"
        options={{
          // Hide the header for all other routes.
          headerShown: false,
        }}
      />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search