search

ivopr / tamagui-expo

An Expo template with Tamagui
270 stars 22 forks source link

status bar and bottom tab are all inside safe area which result in huge space at top and bottom of screen #49

Closed karpedm closed 11 months ago

karpedm commented 1 year ago

like this

image

maxwellwachira commented 1 year ago

I have the same issue. Did you manage to solve?

ivopr commented 11 months ago

@karpedm @maxwellwachira hey there, my bad for taking so long, basically what happened here was:

  1. SafeAreaView was wrapping all screens of the app, meaning things wouldn't render behind status and navigation bars.
  2. React Native Navigation's (which Expo Router uses behind the scenes) default header component is thinking that we're not in a SafeAreaView, so its height is the status bar height + the needed height for the component.

I didn't really spent the time figuring out if the same applied for the tab bar (but I suppose so) as SafeAreaView is now used only on index screen.

But how does it explain the header in user page having the expected behavior? It was a custom component, not a stock one,as you can see here.