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

[mronline]

React Native version: 0.60.0

Steps To Reproduce

1. StatusBar.setBarStyle('dark-content'); // Not Working

[mokai]

+1

[mauricioblum]

Same here

[gpawlik]

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/>

[mronline]

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:

[elliotstokes]

This appears to be the same issue as this https://github.com/facebook/react-native/issues/26369

[mronline]

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

[cristianoccazinsp]

pragma clang diagnostic pop

Seems to work. Can we expect this to be pushed into RN anytime soon?

[suraneti]

@mronline's solution worked perfectly on RN 0.59.9

[tamago3keran]

@mronline's solution worked on RN 0.59.2 :tada:

[cristianoccazinsp]

So not just an issue with RN 0.60? Hopefully it can be fixed for 59, 60 and 61 then... Monkey patching the xcode file is awful.

[flynnpark]

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

[fonov]

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

[karaoak]

@wphestiraid You made my day! thank you 😃

[vladbars]

+1

[karaoak]

+1

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

[divyanshunegi]

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

[fonov]

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.

[divyanshunegi]

@fonov I just did that and it works perfectly fine in my iOS 13 device and iOS 13.1.2 as well

[yuzhakovvv]

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

[mifi]

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.

[xhirazi]

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

credits goes to @gpawlik & @mronline

[YesSkyscrapers]

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

credits goes to @gpawlik & @mronline

It helped me a lot.
But after update React-Native 0.60.5 -> 0.61.5 its fixed without any modifying

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.