React Native: how to change status bar icon colors

Question

I can't seem to find a way to change the colors of the status bar icons to white - at the top of the screen, e.g time & battery.

I've tried adding the following in info.plist

• Status bar style: UIStatusBarStyleLightContent
• View controller-based status bar appearance: NO

But only seems to work in previous versions of IOS. Any help much appreciated.

Answer 1

You need to use StatusBarIOS inside your React Native component:

StatusBarIOS.setStyle('light-content')

Docs here: http://facebook.github.io/react-native/docs/statusbarios.html#content

Edit: As of RN 0.22, StatusBarIOS has been deprecated and the cross-platform StatusBar should be used. It has still be used imperatively as is mentioned above:

StatusBar.setBarStyle('light-content', true);

However, the recommended way to use this component is declaratively. For example:

 <View>
   <StatusBar
     backgroundColor="blue"
     barStyle="light-content"
   />
   <Navigator
     initialRoute={{statusBarHidden: true}}
     renderScene={(route, navigator) =>
       <View>
         <StatusBar hidden={route.statusBarHidden} />
         ...
       </View>
     }
   />
 </View>

See the new docs here: http://facebook.github.io/react-native/docs/statusbar.html

Answer 2

I faced the same problem. Following docs (https://reactnative.dev/docs/statusbar#barstyle) didn't help.

So, I just did a Opt+Click on StatusBar component to found what props you can change, and what methods it provides.

Snippet of props I found:

export declare type StatusBarStyle = 'auto' | 'inverted' | 'light' | 'dark';
export declare type StatusBarAnimation = 'none' | 'fade' | 'slide';
export declare type StatusBarProps = {
    /**
     * Sets the color of the status bar text. Default value is "auto" which
     * picks the appropriate value according to the active color scheme, eg:
     * if your app is dark mode, the style will be "light".
     */
    style?: StatusBarStyle;

I used this information and updated the StatusBar component like so:

<StatusBar style="light" />

And voilla, I changed the icons and text color to white!