How to display white text & icons in Statusbar in React Native?

To display white text and icons in statusbar in React Native, we need to provide value light-content to barStyle prop of StatusBar component.

By setting this value, the background of statusbar will get dark and icons & text will become white. Although we can change the background color by ourselves.

Code Example

import React, { useState } from 'react';
import { Button, Platform, SafeAreaView, StatusBar, StyleSheet, Text, View } from 'react-native';


const App = () => {
  
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar
        barStyle={'light-content'}
        backgroundColor={'#aa0000'}
      />
      <Text style={styles.textStyle}>
        Status bar icons are white
      </Text>
      
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ECF0F1'
  },
  textStyle: {
    textAlign: 'center',
    marginBottom: 8
  }
});

export default App;

Output –

From the image you can see that the status bar icons and text are in white color. Also we set the background color to dark red.

In the code we are setting barStyle prop in line 10. Since we are setting it to light-content so the icons turned white.

Live Demo

Conclusion

Displaying status bar icons and text to white color is possible through barStyle prop of <StatusBar> component. You need to set it to light-content.