環境
ReactNative 0.63.4
react-native-splash-screen 3.2.0
iOS14~
問題
スプラッシュスクリーンが今まで問題なく表示されていたが、iOSのみアプリ立ち上げ時に黒い画面しか表示されないようになってしまった。
各種フレームワークで同様の問題が発生しているのでiOS14の問題のようです。
App running on ios14 shows white screen instead of splash screen #504
Ios14 splash screen doesn’t show up #513
[Bug] iOS 14 Launch Screen is not working #9764
Storyboard not working with Xcode 12 #8868
bug: iOS 14 Black screen always on initial app launch prior to actually showing the splash screen [SplashScreen] #3589
シミュレータでiOS14.0~14.4で確認しましたがすべて黒い画面が表示されました。
iOS13.7では問題なくスプラッシュスクリーンが表示されます。
解決方法
画像をImages.xcassetsから取り出す。
取り出した画像はプロジェクト内のどこに置いてもよいです。
LaunchScreen.storyboardで設定している画像のパスも変更します。
画像の解像度もしくはファイルサイズを小さくする。
Images.xcassetsで使用していたLaunchScreen.png, LaunchScreen@2x.png, LaunchScreen@3x.pngのうち、LaunchScreen@3x.png（解像度約1920x3600）をLaunchScreen.storyboardに設定して使用すると黒い画面が表示されてしまいました。一方、LaunchScreen@2x.png(解像度1280x2400)をLaunchScreen.storyboardに設定して使用すると無事スプラッシュスクリーンが表示されるようになったので、画像の解像度も原因の一つのようです。
こちらのissueのコメントでは画像のファイルサイズを削減して表示されるようになった方もいるので、ファイルサイズも疑って見る必要があるかもしれません。
変更後はキャッシュに注意
変更後は実機の場合はアプリ削除 + 再起動、シミュレータの場合はアプリ削除 + Erase All Content And Settingsをしないと、キャッシュの問題で変更がうまく反映されないことがあるので注意。