How to remove black overlay on status bar on android with React Native

Question

I'm learning React Native (without React knowledge), but my problem is the status bar always get a translucent black background and I can remove it. I tried every stackoverflow answer, and even React Native and Expo documentation. But nothing...

Here is my problem:

The status bar has a white background supposedly, and get this grey overlay, that is what I want to remove.

Here is my code:

render() {
    return (
         <View>
             <StatusBar background="white" />
             <Button title="Sign in!" onPress={this._signInAsync} />
         </View>
    );
}

I even tried this, on app.js

"androidStatusBar": {
    "backgroundColor": "#C2185B"
},

I'm starting to think, this is related to Expo.

Answer 1

If you want to have white status bar then use below code:

render() {
return (
  <View style={styles.container}>
    <StatusBar backgroundColor='white' barStyle="dark-content" />
    <Text style={styles.welcome}>Welcome to Pradnya's</Text>
    <Text style={styles.instructions}>To get started, edit App.js</Text>
    <Text style={styles.instructions}>{instructions}</Text>
  </View>
);

}

in the above code "backgroundColor" will change status bar color to white and barStyle="dark-content" will set text color to black as below output:

and if you want to set background color to suppose "red" then change barstyle="light-content" that will show below output:

This should solve your issue..

Answer 2

You can hide it with the hidden function of StatusBar.

<View>
  <StatusBar backgroundColor="blue" barStyle="light-content" />
  <View>
    <StatusBar hidden={route.statusBarHidden} />
    ...
  </View>
</View>

See here for more information.

Please leave a comment for further comment.