Status bar overlaps with app/nav bar

[joshg111]

I don't get this problem when I am not using exponent.

[joshg111]

1. RNRF for navigation. If I move to react-navigation will that possibly fix the issue?
2. It seems there is no clash/overlap with bottom buttons, but I can't be sure.
3. This is happening on a nexus 6 real device and genymotion emulator.
4. It seems this happens even with example app.

[joshg111]

I found a statusBarHeight constant defined in exponent, so I just added this to the style object for the root component view:
marginTop: Exponent.Constants.statusBarHeight

Everything works fine now, but I would still like to know if this is the right approach. I still feel like I'm missing something here..

[halallahh]

same here. I also have this problem with CRNA

[terribleben]

Hey there, sorry about the confusion. This is the correct solution for now. There is currently an issue in some navigation libraries where they do not detect whether the status bar is translucent or not. So the best practice at the moment is just to use Exponent.Constants.statusBarHeight yourself. Hopefully at some point the navigation libs get smarter about it.

[kunokdev]

Thanks for sharing I also want to mention that Expo.Constants.statusBarHeight is var name if imported like import Expo from 'expo'

[satya164]

https://docs.expo.io/versions/v19.0.0/guides/configuring-statusbar.html

[artemik]

@kunokdev Thanks. Expo documentation doesn't say where I should import those constants from. Guys, improve the docs.

[anilpatnik]

This should solve the problem

in app.json

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

[SupriyaKalghatgi]

@anilpatnik I have this in my app.json
Still, no help

[anilpatnik]

can I have your js code?

[recrsn]

@SupriyaKalghatgi and for others coming here with the same problem.

You should define this under the "expo" key like:

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

I use react-navigation with native-base, and it works fine

[rncrtr]

Here is a more evergreen link explaining what you can/should do to fix this issue that should still work when the above link doesn't -- aka now and in the future:

https://docs.expo.io/versions/latest/guides/configuring-statusbar.html