How to display statusbar icons & text in black color in React Native?

In the previous article we saw how we can set statusbar icons in white color. In this article we will see how to set them to black color.

This can be achieved by setting barStyle prop of StatusBar component to dark-content value.

Note: This works for Android API > 23

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={'dark-content'}
        backgroundColor={'#fff000'}
      />
      <Text style={styles.textStyle}>
        Status bar icons are black
      </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 color of icons and text in statusbar is dark.

We are setting the barStyle prop to dark-content in line 10 of our code.

Live Demo

Conclusion

In this article we saw how we can display the statusbar icons and text in dark color. We used barStyle prop of StatusBar component and set it to dark-content.