React Native Navigation Status Bar under Navigation Bar - react-native

Question

I'm using react-native-navigation library on my project and i'm having some issues with my status bar. First one is that i'm unable to change my status bar background color on iOS, so i created a component for that as follow:
const S_StatusBar = ({ backgroundColor, ...props }) => (
<View style={[styles.statusBar, { backgroundColor }]}>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</View>
);
const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 :
StatusBar.currentHeight;
const styles = StyleSheet.create({
statusBar: {
height: STATUSBAR_HEIGHT,
}
});
I import this component on all my screen as followed:
<View>
<S_StatusBar backgroundColor="#090b4b" barStyle="light-content" />
</View>
Here is how i push my screen using the react-native-navigation library:
pushProductDetailScreen = () => {
this.props.navigator.push({
screen: 'cfl.ProductDetail'
});
};
The screen is pushed correctly but now my problem is that my status bar is under my navigation bar such as followed:
I don't understand the issue and why it's happening!

Answer 1

You are creating a View encapsulating something
<View style={[styles.statusBar, { backgroundColor }]}>
...
</View>
statusBar: {
height: STATUSBAR_HEIGHT,
}
So it does create a View with the specified height and backgroundColor
StatusBar is a component a bit different. It doesn't render anything but change the settings of your StatusBar.
You should be able to configure it from your View itself
<StatusBar
backgroundColor="blue"
barStyle="light-content"
/>

Answer 2

This styling works for me
const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
class App extends Component {
render() {
return (
<View style={[styles.container]}>
<View style={[styles.statusbar]}>
<StatusBar barStyle="dark-content"/>
</View>
<WebView
style={[styles.webview]}
source={{ uri: "https://..." }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
},
statusbar: {
height: STATUSBAR_HEIGHT,
},
webview: {
flex: 1,
}
});