Search code examples
iosxmlcordovaphonegap

Cordova/Phonegap Splashscreen - iOS - Not showing custom images


Recently apple released a new specification to move to a new style of storyboard splashscreens that allows for different device sizes on a smaller number of splashscreens. To configure our application for use with the iPhone X, this new system needs to be adopted to allow full screen viewing. Our app file structure is as follows:

  • ROOT
    • config.xml
    • res
      • screen
        • ios
          • Default@2x~iphone~anyany.png
          • Default@2x~iphone~comany.png
          • Default@2x~iphone~comcom.png
          • Default@3x~iphone~anyany.png
          • Default@3x~iphone~anycom.png
          • Default@3x~iphone~comany.png
          • Default@2x~ipad~anyany.png
          • Default@2x~ipad~comany.png
    • www
      • app files

When prepping for upload to phonegap build, the config.xml, res folder and inner contents of the www folder are moved to one folder. However when downloading the app to my device, the default splashscreen shows.

Current config.xml layout (running cordova v7)

<platform name="ios">
    <preference name="deployment-target" value="7.0" />
    <icon height="512" src="res/icon/iTunesArtwork.png" width="512" />
    <icon height="1024" src="res/icon/ios/iTunesArtwork@2x.png" width="1024" />
    <icon height="180" src="res/icon/ios/Icon-60@3x.png" width="180" />
    <icon height="120" src="res/icon/ios/Icon-60@2x.png" width="120" />
    <icon height="60" src="res/icon/ios/Icon-60.png" width="60" />
    <icon height="76" src="res/icon/ios/Icon-76.png" width="76" />
    <icon height="152" src="res/icon/ios/Icon-76@2x.png" width="152" />
    <icon height="40" src="res/icon/ios/Icon-Small-40.png" width="40" />
    <icon height="80" src="res/icon/ios/Icon-Small-40@2x.png" width="80" />
    <icon height="120" src="res/icon/ios/Icon-Small-40@3x.png" width="120" />
    <icon height="29" src="res/icon/ios/Icon-Small.png" width="29" />
    <icon height="58" src="res/icon/ios/Icon-Small@2x.png" width="58" />
    <icon height="87" src="res/icon/ios/Icon-Small@3x.png" width="87" />

    <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~comany.png" />
</platform>

<plugin name="cordova-plugin-splashscreen" spec="~4.0.0" />
<preference name="ShowSplashScreenSpinner" value="false" />

The expected outcome is for the custom images to show, and for the app to take the full screen on my iPhone X. Instead it is showing as follows:

https://i.sstatic.net/xwtdh.jpg

Any help to resolve this issue would be much appriciated, as i can't seem to find a recent forum thread for anyone with this issue.


Solution

  • Self-sorted answer. Currently PhoneGap Build (the service I am using is not using the iOS 4.5.1 release which is necessary for the latest iPhone X full screens. Hopefully, 4.5.1 will be in the cloud service soon.