React Native - StatusBar color iOS and Android

2
votes

I can't set the color of the status bar on iOS and Android on React Native with Expo. I just managed to hide it.

Code : 

import * as React from 'react';
import { WebView } from 'react-native-webview';
import { StatusBar } from 'react-native'

export default class App extends React.Component {
   render() {
      return <>
         <StatusBar hidden={true} />
         <WebView source={{ uri: 'https://foo.co' }} style={{ marginTop: 33 }} />
      </>
   }
}

I already tried : 

<StatusBar hidden={false} barStyle="light-content" />

and : 

<StatusBar barStyle = "dark-content" hidden = {true} backgroundColor = "#00BCD4" translucent = {true}/>

I am really confused about how this StatusBar works.

Thank you in advance!

1
androidiosreact-nativeexpo

1 Answers

0
votes

the backgroundColor prop change your StatusBar color, the problem with your last example is that you used hidden={true}

import { StatusBar } from 'react-native';

<StatusBar backgroundColor="#00BCD4" />

For expo, you shoud configure app.json https://docs.expo.io/versions/latest/guides/configuring-statusbar/