recolog

@t0m0120

ReactNativeでiOS13のDarkModeを無効化する。

November 04, 2019

TL;DR

  • Bitriseなどを使っている場合はStackのXcodeを10台に落とす。
  • Xcode11に対応してDarkModeを無効化する場合には
    ・info.plistでUIUserInterfaceStyleLightにする。
    ・node_modulesのreact-nativeのStatusBarの中身を数行変更してpatch-packageする。
    ・上記2点した上でStatusbarをdark-contentsへ

のどちらかで対応対応

詳細

react-native: 0.59.10 で
最近ビルドしてTestFlightで確認しようとしたら iPhoneをDarkModeにしているとDarkModeがアプリに適用されて StatsubarやDatePickerが見えなくなる状態になっていたので修正のメモ。

Alert DatePicker
image image

急にダークモードになってしまった原因としては、
BItrise側のStack(ビルドに使うOS)をVisual Studio for Mac, Stable Channelにしていたので image

最近ビルドしようとした際にXcode の VerがWeeklyUpdateで
Xcode 10.2.1 から Xcode 11.1
に上がっていたのが原因っぽい

bitrise/system_reports/osx-vs4mac-stable.log#L270

Xcode10台では何もしなくてもLightModeの状態でしかアプリビルドされない。っぽいので

のでXcode10.2のStackに戻してBuildする。↓ image

でも良かったが将来的に上げる羽目にはなるのでXcode11でもLightMode強制で動くように修正してみる。

issueにそれっぽいのがありUIUserInterfaceStyleをLightで解決する方法があったが

前回のUIUserInterfaceStyleをLightにするとAppStoreにアップロードできない でAppStoreへのアップロードした時に怒られて失敗していたがXcode11では行けるのでは無いかと思ったら予想通りビルドに成功した。

react-native/iOS 13 beta DatePickerIOS is invisible having dark mode enabled #26299

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

試しにXcode10.2でinfo.plistでUIUserInterfaceStyleLightにするとAppStoreに上げる際にエラーになる模様。 この辺結構悩んでいたがXcodeのVersionの問題だったっぽい

package Summary:
 
1 package(s) were not uploaded because they had problems:
	Error Messages:
		ERROR ITMS-90190: "Invalid Info.plist Key. The key 'UIUserInterfaceStyle' in the Payload/hogehoge.appInfo.plist file is not valid."
2019-11-03 08:40:34.769 altool[12974:41156] *** Error: Errors uploading '/hogehoge.ipa': (
    "Error Domain=ITunesTransporterErrorDomain Code=-18000 \"ERROR ITMS-90190: \"Invalid Info.plist Key. The key 'UIUserInterfaceStyle' in the Payload/hogehogeplist file is not valid.\"\" UserInfo={NSLocalizedRecoverySuggestion=ERROR ITMS-90190: \"Invalid Info.plist Key. The key 'UIUserInterfaceStyle' in the Payload/hogehoge.plist file is not valid.\", NSLocalizedDescription=ERROR ITMS-90190: \"Invalid Info.plist Key. The key 'UIUserInterfaceStyle' in the Payload/hogehoge.plist file is not valid.\", NSLocalizedFailureReason=ERROR ITMS-90190: \"Invalid Info.plist Key. The key 'UIUserInterfaceStyle' in the Payload/hogehoge.plist file is not valid.\"}"
)
Uploading IPA failed: exit status 1

が今度はDatePickerやAlertなどは正常にLightModeで表示されるがStatusbarだけdark-content指定しているのに

<StatusBar barStyle="dark-content" />

白文字のままになってしまった。
(画像は全体に影入れているからStatusBar見えるが白い画面で見えなくなる)

ので下記issueを参考にreact-native/Status Bar Dark Content Not Working On iOS 13 Dark Mode #26619

node_modules/react-native/React/RCTStatusBarManager.m
RN0.59.10だと?
node_modules/react-native/React/Modules/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

へ変更する。

react-nativeの中身を触る際には
ds300/patch-packageを使用して

$ yarn pacth-package
node_modules/react-nativeを編集する
$ yarn patch-package react-native

でpatch化して使うと楽

これは他のライブラリなどもforkせずに内部で完結するので楽でおすすめ。

node_modules/react-native/React/Modules/RCTStatusBarManager.m を編集してからBuildするとXcode11でもStatusBarも黒い状態で表示される様になった。


記事を見てKyashから眠気覚ましのコーヒー代投げ銭してもらえると喜びます!