Nativebase: Header Component StatusBar overlap on Android

[stolinski]

I'm having the exact same issues that this user is.
https://stackoverflow.com/questions/42098186/nativebase-exponent-header

RN v. 0.44.0
NativeBase 2.1.4

[SupriyaKalghatgi]

This is not related to NativeBase
Check with Expo

[brozef]

@SupriyaKalghatgi Expo simply sets the statusbar to translucent by default - NativeBase is not correctly handling this.

[SupriyaKalghatgi]

@stolinski @JoeNimble I checked the expo link for NativeBase-KitchenSink, https://exp.host/@geekyants/nativebase-kitchenSink
And this is what I found

[brozef]

@SupriyaKalghatgi I will have to assume that app is not using translucent, or has styles set to handle padding. I just tested with just now with completely raw and latest NativeBase and setting the statusbar color in the app.json (expo.json) which makes it opaque vs no color (translucent).

[brozef]

@SupriyaKalghatgi I downloaded the kitchensink and it is not using a translucent statusbar - notice how the drawer and content is not rendering under it:

[sankhadeeproy007]

Hey @JoeNimble! All the native-base components are developed using plain react-native in a react-native environment. And it works pretty well in plain react-native. So we'd like to believe it's indeed related to Expo and not native-base.
As a workaround, you can try using "androidStatusBarColor": "rgba(0,0,0,0.5)" in your app.json.

[brozef]

@sankhadeeproy007 unfortunately setting the StatusBar color to an rgba value doesn't work.
Have you tried a translucent StatusBar in plain react-native?

I am in contact with the Expo developers and i assure you, Expo isn't effecting the statusbar or android view in any way other than setting it to be translucent which is now the standard look on android. Plain react native does not set the StatusBar to be translucent by default, but it is a feature available to use.

At this stage the only way around this with NativeBase is to set padding - either on the header or other containing component - to include the StatusBar height (StatusBar.currentHeight)

[sankhadeeproy007]

@JoeNimble I understand your point and I'm in no way blaming Expo. My point is, native-base was built keeping vanilla react-native in mind and Expo came much later.
Hence the difference. If the solution is as simple as adding a padding to the Header, then we'll add that.

[brozef]

@sankhadeeproy007 it's certainly not a big problem, I think the biggest issue with providing a proper solution is knowing whether the statusbar is translucent or not - I don't believe react native provides a function for this - therefore adding padding is most likely up to each developer.

[anilpatnik]

This should solve the problem for android

in app.json

"androidStatusBarColor": "#334393",
"androidStatusBar": {
"barStyle": "light-content",
"backgroundColor": "#334393"
}

[ramusbucket]

@anilpatnik, I still see the issue. Here is my app.json

{
  "expo": {
    "sdkVersion": "20.0.0"
  },
  "androidStatusBarColor": "#334393",
  "androidStatusBar": {
    "barStyle": "light-content",
    "backgroundColor": "#334393"
  }
}

[akhil-geekyants]

@ramusbucket you can overcome this issue by increasing the height of the Header and adding a top padding.

If you have ejected the theme, you can set paddingTop as paddingTop: platform === "ios" ? (variables.isIphoneX ? 39 : 15) : 0 + StatusBar.currentHeight in /native-base-theme/components/Header.js

and based on the theme selected you can set toolbarHeight as toolbarHeight: platform === "ios" ? (isIphoneX ? 88 : 64) : (56 + StatusBar.currentHeight) in commonColor.js/material.js/platform.js in /native-base-theme/variables

[SupriyaKalghatgi]

1046

[SupriyaKalghatgi]

Closing this due to inactivity

[Almaju]

Using https://www.npmjs.com/package/react-native-status-bar-height to get status bar height and it works like a charm!

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    paddingTop: getStatusBarHeight(),
    height: 54 + getStatusBarHeight(),
  },
});

[mathiscode]

@Almaju this works great!

[Peeeep]

I don't know if this is still an issue for anyone, but this did the trick for me:

{
  "expo": {
    "androidStatusBar": {
      "backgroundColor": "#000000"
    }
  }
}