expoexpo-router

How to avoid duplicate header in expo-router?


I am having issues with duplicate headers and no idea how to fix.

Duplicate Headers Directory Tree

In layout 1 (root layout), I simply turn off headers for the (tabs) route:

<Stack>
    <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    ...
</Stack>

In layout 2 (tabs layout), I keep headers on for all screens and assign them a title (which is displayed in the first "layer" of headers):

<Tabs>
    <Tabs.Screen
        name="websites"
            options={{
                title: "Websites",
            }}
        />
    </Tabs>

In layout 3 (sub-route layout, e.g. for "websites"),

<Stack>
    <Stack.Screen
        name="index"
        options={{
            headerShown: false
        }}
    />
    <Stack.Screen
        name="[website]"
        options={{ headerTitle: "Website" }}
    />
</Stack>

I am aware that the syntax varies and I have Tabs.Screen in one layout and Stack.Screen in another, but I'd assume they both manipulate the same object.

What happens is that

For example on iOS, instead the "Website" header pushing "Websites" to the left for displaying a specific "Website", it simply displays the second header underneath.

What would be the correct way to configure this?


Solution

  • I believe this is the expected behavior for layouts. Layouts are nested inside one another and they show their own headers.

    If you have Tabs -> Stacks layouts, there will be two headers shown by default.

    Modifying {headerShown: boolean} will only turn on/off header for current layout, it won't affect the outer layouts.

    So when u set {headerShown: false} inside <Stack.Screen name="index" />, it only hide the Stack's header, not the one from tabs.