'React Native StatusBar: dark-content not working on android

I'm trying to change the color of the title and the icons of the status-bar to be black. so, according to the react-native status-bar documentation, I set the barStyle to dark-content but nothing change.

<StatusBar barStyle="dark-content" backgroundColor={'white'} />

Solution 1:^[1]

You could try to do the following:

import {StatusBar} from "react-native"

...

StatusBar.setBackgroundColor('white');
StatusBar.setBarStyle('dark-content');

with useEffect or componentDidMount methods.

Solution 2:^[2]

If you are using Expo you should work with their own Statusbar. You can install it by running:

expo install expo-status-bar

and modify it like this:

import { StatusBar } from 'expo-status-bar';
...
   <StatusBar style="dark" />
...

Otherwise you may want to try upgrading Your version of react native by running:

npx react-native upgrade

Solution 3:^[3]

As said on this issue, you can try upgrade to a newer version of react-native (If yours isn't the newest) and see if it works.

Solution 4:^[4]

I was having the same issue. Make sure your 'StatusBar' component is being imported from 'react-native' and not from 'expo-status-bar'. It works for me now that I'm using the 'StatusBar' component from 'react-native'

Solution 5:^[5]

I was tearing my hair out until I just ran npm run android to rebuild and it just magically started working. So tip, if you do any StatusBar sourcery, rebuild fresh on Android.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	gce
Solution 2	cpt.Arman
Solution 3	William Brochensque junior
Solution 4	gustavozapata
Solution 5	JCraine

'React Native StatusBar: dark-content not working on android

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]