double ionic splash screen in iPhone X

Question

I have a problem with the apache cordova (with ionic 3), this issue only happens on iphone X.

When the app starts, it displays the default ionic splash screen (like this, but scaled):

And after some milliseconds this "default splash screen" gets replaced by the correct one (the splash that I designed for the app).

These are my splash images:

    <splash src="resources/ios/splash/Default@2x~iphone.png" />
    <splash src="resources/ios/splash/Default@2x~universal~anyany.png" />
    <splash src="resources/ios/splash/Default-568h@2x~iphone.png" />
    <splash src="resources/ios/splash/Default-667h.png" />
    <splash src="resources/ios/splash/Default-736h.png" />
    <splash src="resources/ios/splash/Default-Landscape@2x~ipad.png" />
    <splash src="resources/ios/splash/Default-Landscape@~ipadpro.png" />
    <splash src="resources/ios/splash/Default-Landscape-736h.png" />
    <splash src="resources/ios/splash/Default-Landscape~ipad.png" />
    <splash src="resources/ios/splash/Default-Portrait@2x~ipad.png" />
    <splash src="resources/ios/splash/Default-Portrait@~ipadpro.png" />
    <splash src="resources/ios/splash/Default-Portrait~ipad.png" />
    <splash src="resources/ios/splash/Default~iphone.png" />

I also tried changing the Launch Screen File (Also checking the default CDVLaunchScreen) and I don't find any reference to this default ionic splash screen, how can I find where is this "image" or whatever, or find a solution?

Thanks

Worthen

Possible duplicate of iOS Keeping old launch screen and app icon after update – Bombproof

Answer 1

There have been several reported issues relating to the Cordova splashscreen and iPhone X, however none of them exhibit the symptom you're describing.

The first thing to check is that you've definitely replaced all the default splashscreen images in resources/ios/splash/ with your own custom ones.

Secondly check you are using the most recent versions of the cordova-ios platform and cordova-plugin-splashscreen since recent releases have incorporated fixes for some of these iPhone X-specific issues.

Finally, another option is to switch to using LaunchStoryboard images for your splashscreens. This is the newer way to do iOS splashscreens and easier to maintain than the legacy Launch Images, since you need less images - it's even possible to have a single launch screen image.

Vitascope

Thanks! Updating the cordova-plugin-splashscreen plugin fixed the issue on my end. – Weisshorn

Answer 2

I have not the exact solution but i tried with this solution and its working fine.

First open Xcode and set splash screen of iphoneX 1125 × 2436 px image into (project name)->Resources->images.xassests folder then select LaunchImages see below image.

Indiaindiaman

Answer 3

I resolved the issue by upgrading Cordova Splashscreen plugin.

• cordova plugin rm cordova-plugin-splashscreen --save
• cordova plugin add cordova-plugin-splashscreen@latest
• cordova prepare

Lycanthrope

Answer 4

Thanks to @Jaydeep Kataria, I digged a bit deeper and found a solution (!!!)

In my case, app was missing a splash screen for iPhoneX portrait, so:

1. Open XCode and go to Resources/Images.xcassets
2. Select missing image and take a look at the right side bar
3. From the right side bar get the image File Name (e.g. Default-2436h.png) and an image size (e.g. 2436 x 1125)
4. Make an image of a proper size, make its file name exactly as it displayed in the right side bar of XCode and put to folder src-cordova/res/screen/ios
5. Add the link to the image into your config.xml file:

<splash height="2436" src="res/screen/ios/Default-2436h.png" width="1125" />

6. Build the project and open it in XCode

That's it !!!

Dollfuss