Header is always top padded in Android, even for non-translucent StatusBar

Related to #1574

In Android, using the Header element, the top padding is always set to the statusbar’s height but that should only happen when the statusbar is translucent.

When the statusbar is translucent, the header is drawn under the statusbar and we need the top padding. When the statusbar is not translucent, the header is drawn right below the statusbar and thus, needs no top padding.

The issue is in the style config at: https://github.com/react-native-training/react-native-elements/blob/next/src/header/Header.js#L135

I think the calls to getStatusBarHeight() should be getStatusBarHeight(!StatusBar.translucent) so that we always get 0 for Android when the StatusBar is not translucent.

However, for some reason StatusBar.translucent is always undefined for me and that’s why I didn’t create a PR.

software	version
react-native-elements	next branch
react-native	0.57.4
npm or yarn	yarn

[tiagoalves]

If the fix would simply be to set paddingTop: 0, then I’d say that the issue should be closed, but as one can see in my fix, above, fixing it for a non-translucent statusbar actually requires having a deeper notion of the statusbar size differences in iOS and Android.

Would it make sense to force using the the existing statusBarProps prop to indicate whether the statusbar is translucent and thus use that prop to perform the right calculation? For instance:

<Header
  statusBarProps={{ translucent: true }}
  ...
/>

---

Regarding the theming feature, I’m just using it for some small visual tweaks to the Header element so I don’t have much feedback but it was easy to set up and I like the way one can centrally change the general theme. 👌

[lklima]

@tiagoalves você salvou meu dia mano.