Two Different Launch Screens Shown for on iPhone X on Initialization

Question

Just updated a Cordova app to contain an iPhone X LaunchImage and now in emulation, I'm seeing a properly sized launch image, which then a second later shows another that is too large and expands off the page.

I can't figure out why a launch image/splash screen is being displayed twice? In device initialization the navigator.splashscreen invokes hide and then never calls show so it isn't happening in the code. I placed launch images in Xcode and am using the cordova-plugin-splashscreen plugin. From the docs I assumed using Xcode or adding them to the config.xml were equivalent regarding splashscreen legacy assets, but now I'm confused. This only occurs on iPhone X and not on iPhone 5s, 6, 7, 8, or iPad.

Answer 1

Okay so the first launch image display is the one displayed by the system, and the second is the one displayed by the splashscreen plugin. The issue was solved by updating to cordova-plugin-splashscreen v5.0.2, which contains the bug fix.

Answer 2

In addition to @mtpultz solution above, I also found old splash screen files that needed to be deleted and a few new ones added.

For anyone sharing my above issue or having issues on an Ionic app related to this, after compiling I found OLD splash screen files in this folder: platforms/ios/myApp/Images/xcassets/LaunchImage.launchimage/ - also check the LaunchStoryboard.imageset folder and ensure all your images are correct. I found two files still showing the default cordova icon (Default-2436h.png and Default-Landscape-2436h.png) - I created two new image files of those Width/Height dimensions and copied over those two files. Everything is working now.

Answer 3

The problem is that you splascreen hidden early and iOS change to native splash screen, one posible solution is increase SplashScreenDelay in config.xml <preference name="SplashScreenDelay" value="100000"/> or manually hide splash screen when you app charge all components.