Issue
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.
Answered By - Saranoja
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.