React Nativeでライトモードを強制する

はじめに

スマートフォンがダークモードに対応してから、今ではスマホアプリでもウェブサイトでもダークモードに対応しているのが珍しくなくなりました。
私の周りではダークモードを使っている人がほとんどで、私も常時ダークモードにしています。

ただ、開発者の視点ではダークモード対応は機能として必須ではないため、個人アプリの開発や後回しにしがちだと思います。
そんなときは、端末のダークモード設定を無視し、アプリ上では常にライトモードにすることができます。

実装

iOS

/* AppRoot/ios/AppName/AppDelegate.m */

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

  ...

  /**
   * この3行を追加
   * iOS13以降でライトモードを強制する
   */
  if (@available(iOS 13, *)) {
    self.window.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
  }

  return YES;
}

Android

/* AppRoot/android/app/src/main/java/com/AppName/MainApplication.java */

package com.AppName

// この行を追加
import androidx.appcompat.app.AppCompatDelegate;
import android.app.Application;
  ...

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
     // この行を追加
    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
  }

Expoの場合

app.json

{
  "expo": {
    "userInterfaceStyle": "light",
  }
}

expo.userInterfaceStyleは一括設定なので、
下記のように個別に設定することも可能

{
  "expo": {
    "userInterfaceStyle": "automatic",
    "ios": {
      "userInterfaceStyle": "light",
    }
  }
}