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

Closed
mronline opened this issue Sep 27, 2019 · 25 comments
Closed

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

mronline opened this issue Sep 27, 2019 · 25 comments
Labels
Bug Platform: iOS iOS applications. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@mronline
Copy link

mronline commented Sep 27, 2019

React Native version: 0.60.0

Steps To Reproduce

  1. StatusBar.setBarStyle('dark-content'); // Not Working
@mronline mronline added the Bug label Sep 27, 2019
@react-native-bot react-native-bot added the Platform: iOS iOS applications. label Sep 27, 2019
@mokai
Copy link

mokai commented Sep 27, 2019

+1

@mauricioblum
Copy link

Same here

@gpawlik
Copy link

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
Copy link
Author

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
Copy link

This appears to be the same issue as this #26369

@mronline
Copy link
Author

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
Copy link
Contributor

#pragma clang diagnostic pop

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

@suraneti
Copy link

@mronline's solution worked perfectly on RN 0.59.9

@tamago3keran
Copy link

@mronline's solution worked on RN 0.59.2 🎉

@cristianoccazinsp
Copy link
Contributor

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
Copy link

flynnpark 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
Copy link

fonov commented Oct 1, 2019

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

@karaoak
Copy link

karaoak commented Oct 1, 2019

@wphestiraid You made my day! thank you 😃

@vladbars
Copy link

+1

@karaoak
Copy link

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
Copy link

#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
Copy link

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
Copy link

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

@yuzhakovvv
Copy link

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
Copy link

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.

@xhirazi
Copy link

xhirazi commented Feb 27, 2020

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
Copy link

YesSkyscrapers commented Mar 17, 2020

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
Copy link

stale bot commented Jul 20, 2020

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 stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jul 20, 2020
@stale
Copy link

stale bot commented Jul 27, 2020

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.

@MannySauce
Copy link

MannySauce commented Jun 8, 2021

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

ethul added a commit to ethul/react-native that referenced this issue Jul 30, 2021
@facebook facebook locked as resolved and limited conversation to collaborators Oct 3, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Platform: iOS iOS applications. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests