Cordova/Phonegap Splashscreen - iOS - Not showing custom images

0
votes

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/[email protected]" width="1024" />
    <icon height="180" src="res/icon/ios/[email protected]" width="180" />
    <icon height="120" src="res/icon/ios/[email protected]" 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/[email protected]" width="152" />
    <icon height="40" src="res/icon/ios/Icon-Small-40.png" width="40" />
    <icon height="80" src="res/icon/ios/[email protected]" width="80" />
    <icon height="120" src="res/icon/ios/[email protected]" width="120" />
    <icon height="29" src="res/icon/ios/Icon-Small.png" width="29" />
    <icon height="58" src="res/icon/ios/[email protected]" width="58" />
    <icon height="87" src="res/icon/ios/[email protected]" 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://imgur.com/a/ehtCy

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.

1
iosxmlcordovaphonegap
have you tried defining the height and width for the splash as you did for the icons? – Dawson Loudon
Hi David, thanks for your comment. Due to the nature of these splash screens, there is no definable width/height to my knowledge. This is due to one splash screen working over multiple widths and heights. – Matthew M

1 Answers

0
votes

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.