CODEWITHSUNDEEP
ioscordovaionic-frameworkionic3iphone-x
fj123x
fj123x

Reputation: 7492

double ionic splash screen in iPhone X

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):

enter image description here

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

Upvotes: 6

Views: 3642

Answers (4)

Anton Eregin
Anton Eregin

Reputation: 9069

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" />

  1. Build the project and open it in XCode

That's it !!!

enter image description here

Upvotes: 0

Vittal Pai
Vittal Pai

Reputation: 3553

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

Upvotes: 0

Jaydeep Kataria
Jaydeep Kataria

Reputation: 867

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.

xcode screenshot

Upvotes: 1

DaveAlden
DaveAlden

Reputation: 30356

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.

Upvotes: 2

Related Questions