突然ですがiOS端末がダークモードになっていたとしても、アプリはライトモードのままにして欲しいって場合ありませんか?
僕はありました。
ライトにしたい理由は、DateTimePickerライブラリ
こいつがダークモードで確認すると白色
になって見えない問題が発生してしまったため。
![IMG_3406.PNG](https://i1.wp.com/qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F668705%2Fb9234af9-658c-1414-8f09-b9b73a46434a.png?w=1320&ssl=1)
それなら端末がダークモードでもアプリ内では強制的にライトモードにすれば解決でしょ(小並感)
って感じで色々調べたらinfo.plistの中に以下の記述を書けばいいってあったので書きました。
info.plist
<key>UIUserInterfaceStyle</key>
<string>Light</string>
pod install して yarn react-native run iosで動作確認!
![IMG_4704.png](https://i2.wp.com/qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F668705%2F1aaf219e-1806-c245-3be4-966419d72b41.png?w=1320&ssl=1)
DateTimePickerライブラリ
も無事に見えるようになったし解決した!
ハイハイメデタシメデタシ….
![IMG_3405_censored.jpg](https://i2.wp.com/qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F668705%2F534643d3-6358-6cd3-3c13-4969228b6ab3.jpeg?w=1320&ssl=1)
え????
位置情報アラートの色がライトモードになってない問題が発生…..
あ”あ”あ”あ”あ”あ”あ”あ”あ”も”お”お”お”お”お”お”お”!!!!!!!!!
…ってことでさらに調査していくとこんな感じに記述するといいよってあったので書きました。AppDelegate.m
if (@available(iOS 13.0, *)) {
rootView.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
}
どや?
![IMG_3405_censored.jpg](https://i2.wp.com/qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F668705%2F534643d3-6358-6cd3-3c13-4969228b6ab3.jpeg?w=1320&ssl=1)
変わらない。。。。
Nativeの部分のダイアログの色は変更することができないみたいです。
自分で作成したアラートダイアログは問題なく強制ライトモードが反映されていました!
まとめ
- 強制ライトモードはNativeな部分以外に反映することが可能みたいです。
- 2通りの強制ライトモードの紹介しましたが、どっちかを設定するだけで良いみたいです。
- Androidの方はまだやったことがないので出来次第qiitaに投稿します。
参考記事
強制的にライトモードにする方法
https://stackoverflow.com/questions/58395926/how-to-force-disable-ios-dark-mode-in-react-native