0

I'm using react-native-navigation v2 and this is how my app looks like with translucent status bar. In the RNN v1, there is an API that allows adding custom padding to the top bar - navBarTopPadding, but I couldn't find similar API for the RNN v2.

Is there an easy way to fix the issue?

Are there any plans to add this API to the second version?

Vladimir K.
  • 653
  • 1
  • 5
  • 14

1 Answers1

0

If you want to have the translucent you have can use StatusBar, that is a React Native component, and in your case you can use it like that.

<StatusBar barStyle="light-content" backgroundColor="transparent" translucent={true}/>

That will do the trick without tweaking the padding of the status bar.

Or you can tweak the padding like that :

render(){
    return (
        <View style={styles.statusBar}/>
        ...your code for the view
    )
}

statusBar: {
    height: (Platform.OS === 'ios') ? 20 : 0
    backgroundColor: "white",
}
zagoa
  • 798
  • 4
  • 23