Categories
React Native Answers

How to set status bar color with React Native?

Spread the love

To set status bar color with React Native, we call the StatusBar.setBarStyle and StatusBar.setBackgroundColor methods.

For instance, we write

import {StatusBar} from 'react-native';

class Comp extends Component {
  //...
  componentDidMount() {
    StatusBar.setBarStyle("light-content", true);
    StatusBar.setBackgroundColor("#0996AE");
  }
  //...
}

to call StatusBar.setBarStyle to set the light-content option to true to make the content color light.

And we call StatusBar.setBackgroundColor to set the background color.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *