Extra headers in Expo tabs

Issue

I'm new to React Native and Expo, and I'm following this tutorial to learn navigation with tabs:

https://levelup.gitconnected.com/routing-with-expo-router-981809eb4699?gi=095a347d1188

It's instructive, but I'm stuck on why I have this double header on my tab view:

Notice: there's the Animals bar, whose title is set dynamically by the following in (tabs)/_layout.tsx:

<Stack.Screen options={{title:"Animals"}} />

And then there's two headers reading "Cats"; one of these changes to the breed of cat when selecting the [id].tsx view (which is great) and one of them just... is there, taking up space, looking accidental (which it is).

How can I get rid of this header? Or more importantly, how can I look into this view more to understand where the extra element is coming from?

Solution

As usual, all I had to do was ask and minutes later the solution jumped out at me.

First, on the "teach me to fish" front: I found the Show Element Inspector button in Expo Go and followed the hierarchy into my top-level Tabs view. This answers my question of "How can I see where an element lives?"

Second, I hid the header on the Tabs element with screenOptions={{headerShown:false}}.

This concludes my one-man show for today. Thank you for attending 🙏

Answered By - BobRz