Table of contents

React Native StatusBar dark-content not working on iOS 13 dark appearance

Objective C Mar 21, 2020 Viewed 207 Comments 0

Question

React Native 0.60.5

. Light mode in iOS 13 or earlier versions is normal. However, there is no effect in iOS 13 Dark Mode. It looks the same as setting it to light-content.

Solution

There are 2 ways to solve.

  1. Upgrade React Native to the latest version, the latest version has fixed this problem.
  2. Modify the RCTStatusBarManager.m file.

In Xcode, open Pods/Development Pods/React-Core/Modules/RCTStatusBarManager.m , or other editor in path node_modules/react-native/React/Modules/RCTStatusBarManager.m . Apple has added a new constant to the status bar with the latest update, so dark-content doesn't work. we can use UIStatusBarStyleDarkContent instead.

Find the following code. 

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

Change to


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