How to force disable iOS dark mode in React Native

Viewed 21480

The new iOS 13 update introduces an optional system-wide. This causes e.g. the StatusBar to have light text, which might become unreadable on a white background. It also breaks the iOS Datetime Picker (see DatePickerIOS or react-native-modal-datetime-picker)

5 Answers

The solution is to either

  1. add this to your Info.plist file:
    <key>UIUserInterfaceStyle</key>
    <string>Light</string>

OR

  1. Add this to your AppDelegate.m:
    if (@available(iOS 13.0, *)) {
        rootView.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
    }

In your app.json file add:

{
  "expo": {
     ...
     "ios": {
      "infoPlist": {
        "UIUserInterfaceStyle": "Light"
      }
    },
}

This solution seems to work best. Add this in your AppDelagate.m

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  //add this here vv

  if (@available(iOS 13, *)) {
     self.window.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
  }

  //add this here ^^




 return YES;

Add this in your Info.plist

<key>UIUserInterfaceStyle</key>
    <string>Light</string>

And this to your AppDelegate.m

  rootView.backgroundColor = [UIColor whiteColor];

This work for me

  1. Add this to Info.plist
<key>UIUserInterfaceStyle</key>
<string>Light</string>
  1. And this to your AppDelegate.m
  if (@available(iOS 13.0, *)) {
      rootView.backgroundColor = [UIColor systemBackgroundColor];
    self.window.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
  } else {
      rootView.backgroundColor = [UIColor whiteColor];
  }
Related