React Native change status bar text color in iOS

7
votes

I'm developing an app using React Native, I've been asked to set the text color of the status bar in white.

I used the StatusBar component with the property barStyle="light-content" and it works pretty well on Android but not on iOS, the text color is still black.

I did some research about it but I couldn't find anything helpful. I even tried to select the Light Status bar style on XCode like the following picture shows but it still doesn't work

3
iosreact-nativestatusbartextcolor
Try this it may helps you : github.com/RNRF/react-native-router-flux/issues/2882 – Kuldeep
@Kuldeep I've already checked that link before writting this post, it didn't really help me, I'm trying a lot of stuff at the moment but I'm still stuck – Fabrizio
@Fabrizio you should write your solution as an answer and accept it so that others coming to this questions can easily see the solution (feels weird to answer your own question but it's common practice on Stack Overflow). – Matei Radu
@MateiRadu noted ! – Fabrizio

3 Answers

16
votes

I solved the problem! I use this code in Index page and set the text color to white:

<StatusBar  barStyle="light-content" translucent={true} />
2
votes

Try putting this code in didFinishLaunchingWithOptions in your AppDelegate file.

UIApplication.shared.statusBarStyle = .lightContent

Objective c

 [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

and in your info.plist file set UIViewControllerBasedStatusBarAppearance to NO

1
votes

I solved my problem !

The issue came from a React Native library called React Native Navbar, it was taking control of the status bar as well, I had to setup the 'light-content' property in that component.