How to change the Android status bar color with React Native?

Sometimes, we want to change the Android status bar color with React Native.

In this article, we’ll look at how to change the Android status bar color with React Native.

How to change the Android status bar color with React Native?

To change the Android status bar color with React Native, we can set the backgroundColor prop of the StatusBar.

For instance, we write:

import * as React from 'react';
import { View, StatusBar } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View>
      <StatusBar backgroundColor="green" barStyle="light-content" />
    </View>
  );
}

to set the backgroundColor prop of StatusBar to 'green'.

Now the status bar would be green.

Conclusion

To change the Android status bar color with React Native, we can set the backgroundColor prop of the StatusBar.