Search code examples
ioscordovasplash-screenphonegap-clilaunchimage

How to set splash screen for iOS in PhoneGap

I am using PhoneGap for creating iOS application for iOS9+. As per guide line I have added following code in Config.xml to set the splash screen.

// set the cordova plugin 
 <plugin name="cordova-plugin-splashscreen" source="npm" spec="&gt;1.0.0" />

 // set splash screen for iPad only
 <platform name="ios">
    <gap:splash gap:platform="ios" height="2048" src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" />
    <gap:splash gap:platform="ios" height="2048" src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" />
    <gap:splash gap:platform="ios" height="768" src="res/screen/ios/Default-Landscape~ipad.png" width="1024" />
    <gap:splash gap:platform="ios" height="1536" src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" />
</platform>

Then I used following command in 'Terminal' to generate iOS platform

phonegap build ios --device

It copies all the splash images in iOS platform.

But it show default Phonegap splash screens image when I launch the app. I checked in iOS project 'Images.xcassets'-> 'LaunchImage, it is showing default PhoneGap images. It is not showing splash Image which I mentioned in Config.xml file. How do I set the splash images using config.xml for iOS?

Solution

  • First add the Splash screen plugin

    cordova plugin add cordova-plugin-splashscreen

    Then in config.xml add these lines.

    <!-- iOS splash screen -->
<!-- iPad -->
<splash src="www/res/screen/ios/Default-Portrait.png" platform="ios" width="768" height="1024" />
<splash src="www/res/screen/ios/Default-Landscape.png" platform="ios" width="1024" height="768" />
<!-- Retina iPad -->
<splash src="www/res/screen/ios/[email protected]" platform="ios" width="1536" height="2048" />
<splash src="www/res/screen/ios/[email protected]" platform="ios" width="2048" height="1536" />

<!-- Default splash screen -->
<splash src="splash.png" />

    Make sure of the image width and height should be same as it is defined in config.xml.

    or try default splashscreen.

    Just keep full size splash screen image where your config.xml is located it will copy the splash.png file for all platform it is not recommended this will increase the app size but you can check if that works.

    Cheers.