Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Status Bar Dark Content Not Working On iOS 13 Dark Mode #26619

Open
mronline opened this issue Sep 27, 2019 · 20 comments

Comments

@mronline
Copy link

@mronline mronline commented Sep 27, 2019

React Native version: 0.60.0

Steps To Reproduce

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

This comment has been minimized.

Copy link

@mokai mokai commented Sep 27, 2019

+1

@mauricioblum

This comment has been minimized.

Copy link

@mauricioblum mauricioblum commented Sep 27, 2019

Same here

@gpawlik

This comment has been minimized.

Copy link

@gpawlik gpawlik commented Sep 27, 2019

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

This comment has been minimized.

Copy link
Author

@mronline mronline commented Sep 27, 2019

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:
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 21 11 12

@elliotstokes

This comment has been minimized.

Copy link

@elliotstokes elliotstokes commented Sep 27, 2019

This appears to be the same issue as this #26369

@mronline

This comment has been minimized.

Copy link
Author

@mronline mronline commented Sep 28, 2019

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

This comment has been minimized.

Copy link

@cristianoccazinsp cristianoccazinsp commented Sep 28, 2019

#pragma clang diagnostic pop

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

@suraneti

This comment has been minimized.

Copy link

@suraneti suraneti commented Sep 30, 2019

@mronline's solution worked perfectly on RN 0.59.9

@tamago3keran

This comment has been minimized.

Copy link

@tamago3keran tamago3keran commented Sep 30, 2019

@mronline's solution worked on RN 0.59.2 🎉

@cristianoccazinsp

This comment has been minimized.

Copy link

@cristianoccazinsp cristianoccazinsp commented Sep 30, 2019

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.

@wphestiraid

This comment has been minimized.

Copy link

@wphestiraid wphestiraid commented Oct 1, 2019

I solved the problem with this commit: 796b3a1

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

This comment has been minimized.

Copy link

@fonov fonov commented Oct 1, 2019

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

@karaoak

This comment has been minimized.

Copy link

@karaoak karaoak commented Oct 1, 2019

@wphestiraid You made my day! thank you 😃

@vladbars

This comment has been minimized.

Copy link

@vladbars vladbars commented Oct 11, 2019

+1

@karaoak

This comment has been minimized.

Copy link

@karaoak karaoak commented Oct 11, 2019

+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

This comment has been minimized.

Copy link

@divyanshunegi divyanshunegi commented Oct 15, 2019

#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

This comment has been minimized.

Copy link

@fonov fonov commented Oct 15, 2019

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

This comment has been minimized.

Copy link

@divyanshunegi divyanshunegi commented Oct 15, 2019

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

@yuzhakovvv

This comment has been minimized.

Copy link

@yuzhakovvv yuzhakovvv commented Oct 16, 2019

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

This comment has been minimized.

Copy link

@mifi mifi commented Nov 11, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.