React-native-router-flux: Provide API to disable Status bar height in Navigationbar

[rhishikeshj]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.31 (v3 is not supported)
• react-native v0.55.3

Expected behaviour

We should be able to optionally remove the status bar height from navigation header.

Actual behaviour

Navigation bar height always includes status bar height.
This is an issue in portrait mode if we wrap the Router with a react-native SafeAreaView.
Since the SafeAreaView comes with its own insets for the Status bar in portrait mode, this height getting added to the Navigation bar is extra and looks incorrect.
Adding the Safe area view inside the Router does not work correctly as the SafeAreaView does not then provide the correct insets

SafeAreaView
Router
/SafeAreaView

Steps to reproduce

For non-obvious bugs, please fork this component, modify Example project to reproduce your issue and include link here.

1. Wrap your Router inside a SafeAreaView from react-native

[daviscabral]

I believe this is an expected behavior with the new react-navigation - to get rid of it we need to use headerForceInset in the navigationOptions. I'll check how we handle it internally later this week and can get back to you about it.

[lafiosca]

Why was this issue closed? I have been digging through the documentation and code for quite a while now and trying various things, but I haven't found a way to pass the forceInset param through the Scene, other than perhaps constructing my own navBar.

[lafiosca]

I finally realized you can just pass headerForceInset directly as a property of the Scene:

<Scene
    key="foo"
    component={Foo}
    hideNavBar={false}
    title="Foo"
    headerForceInset={{ top: 'never' }}
    navigationBarStyle={{ backgroundColor: '#ffffff' }}
/>