react-native: Status Bar Dark Content Not Working On iOS 13 Dark Mode
React Native version: 0.60.0
Steps To Reproduce
- StatusBar.setBarStyle(‘dark-content’); // Not Working
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 35
- Comments: 25 (2 by maintainers)
Commits related to this issue
- Support dark mode status bar style facebook/react-native#26619 — committed to ethul/react-native by ethul 3 years ago
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
To Change:
As a workaround you could probably update the following keys in the
Info.plist
file, overriding the system dark mode:I solved the problem with this commit: https://github.com/facebook/react-native/commit/796b3a1f8823c87c9a066ea9c51244710dc0b9b5
node_modules/react-native/React/Modules/RCTStatusBarManager.m
.pod install
in./ios
.react-native run-ios
I’ve already added this: Dark mode disabled, but: status bar does not affect.
And the problem is solved when I add it, but
This time I get an error like this:
This has been fixed in RN 0.61.2 or can be patched as described above. I think this issue can be closed.
Also please make sure you have this enabled in your
info.plist
fileand edit the code to this, so it supports the newest
13.1.2
as well.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');
(inindex.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
It wrong no add this to info.plist otherwise you receive red box error.
Actually
StatusBar.setBarStyle('dark-content');
worked for Expo SDKv33.0.0
which is based on RN0.59.8
. We had to use it as we can’t dopod install
in ExpoSource: expo/expo#3874
@wphestiraid You made my day! thank you 😃