react-native: Status Bar Dark Content Not Working On iOS 13 Dark Mode

I solved the problem.

Apple has added a new constant to the status bar with the latest update, so dark-content doesn’t work. (in dark-mode)

https://developer.apple.com/documentation/uikit/uistatusbarstyle?language=objc

New Constant: UIStatusBarStyleDarkContent - A dark status bar, intended for use on light backgrounds.

• Open XCode

• Search: RCTStatusBarManager.m

• Pods/Development Pods/React-Core/Modules/RCTStatusBarManager.m (xCode)

• Other Editor node_modules/react-native/React/RCTStatusBarManager.m

RCT_ENUM_CONVERTER(UIStatusBarStyle, (@{
  @"default": @(UIStatusBarStyleDefault),
  @"light-content": @(UIStatusBarStyleLightContent),
  @"dark-content": @(UIStatusBarStyleDefault),
}), UIStatusBarStyleDefault, integerValue);

To Change:

#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wunguarded-availability"

RCT_ENUM_CONVERTER(UIStatusBarStyle, (@{
  @"default": @(UIStatusBarStyleDefault),
  @"light-content": @(UIStatusBarStyleLightContent),
  @"dark-content": (@available(iOS 13.0, *)) ? @(UIStatusBarStyleDarkContent) : @(UIStatusBarStyleDefault),
}), UIStatusBarStyleDefault, integerValue);

#pragma clang diagnostic pop

As a workaround you could probably update the following keys in the Info.plist file, overriding the system dark mode:

<key>UIUserInterfaceStyle</key>
<string>Light</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>

I solved the problem with this commit: https://github.com/facebook/react-native/commit/796b3a1f8823c87c9a066ea9c51244710dc0b9b5

1. Update node_modules/react-native/React/Modules/RCTStatusBarManager.m.
2. pod install in ./ios.
3. react-native run-ios

I’ve already added this: Dark mode disabled, but: status bar does not affect.

<key>UIUserInterfaceStyle</key>
<string>Light</string>

And the problem is solved when I add it, but

<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>

This time I get an error like this:

+1

This has been fixed in RN 0.61.2 or can be patched as described above. I think this issue can be closed.

#pragma clang diagnostic push #pragma clang diagnostic ignored “-Wunguarded-availability”

RCT_ENUM_CONVERTER(UIStatusBarStyle, (@{ @“default”: @(UIStatusBarStyleDefault), @“light-content”: @(UIStatusBarStyleLightContent), @“dark-content”: (@available(iOS 13.0, *)) ? @(UIStatusBarStyleDarkContent) : @(UIStatusBarStyleDefault), }), UIStatusBarStyleDefault, integerValue);

#pragma clang diagnostic pop

Also please make sure you have this enabled in your info.plist file

	<key>UIViewControllerBasedStatusBarAppearance</key>
	<true/>

and edit the code to this, so it supports the newest 13.1.2 as well.

RCT_ENUM_CONVERTER(UIStatusBarStyle, (@{
  @"default": @(UIStatusBarStyleDefault),
  @"light-content": @(UIStatusBarStyleLightContent),
  @"dark-content": (@available(iOS 13, *)) ? @(UIStatusBarStyleDarkContent) : @(UIStatusBarStyleDefault),
}), UIStatusBarStyleDefault, integerValue);

#pragma clang diagnostic pop

for hot fixed react-native file can be used this package https://github.com/ds300/patch-package

Note that now it seems that we need to explicitly set StatusBar.setBarStyle('dark-content'); (in index.js?) to restore pre-0.61.2 behaviour. Before 0.61.2 it defaulted to dark-content when nothing was set.

@mronline’s solution worked perfectly on RN 0.59.9

the changes @mronline suggest is very different from the lines of code in my RCTStatusBarManager.m file. My react native version is: 0.63.4, the string fixes mentioned by @gpawlik in info.plist result in the same red error OP has shown. Although it does work and the app does not crash it is still unpleasant to be told its wrong. Im working with iOS 14.6 and Xcode version 12.5

Successfully fixed this issue by making changes in info.plist describe here and changes in RCTStatusBarManager.m describe here.

credits goes to @gpawlik & @mronline

Also please make sure you have this enabled in your info.plist file

It wrong no add this to info.plist otherwise you receive red box error.

Actually StatusBar.setBarStyle('dark-content'); worked for Expo SDK v33.0.0 which is based on RN 0.59.8. We had to use it as we can’t do pod install in Expo

Source: expo/expo#3874

@wphestiraid You made my day! thank you 😃