In my Cordova app, I have a problem after upgrading to cordova-ios 6.1.1. The app runs correctly, but the splash screen isn't showed. There is only a white screen, like if my splash screen files are ignored.
I have this config.xml file:
<widget id="xxx" version="x" versionCode="x" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>xxx</name>
<description>Template</description>
<author email="[email protected]" href="http://www.xx.com/">xxx</author>
<preference name="permissions" value="none" />
<preference name="prerendered-icon" value="true" />
<preference name="phonegap-version" value="cli-10.0.0" />
<preference name="android-windowSoftInputMode" value="adjustPan" />
<preference name="SplashScreenDelay" value="3000" />
<!--<preference name="AutoHideSplashScreen" value="true" />-->
<preference name="SplashShowOnlyFirstTime" value="false" />
<!--<preference name="FadeSplashScreen" value="false" />-->
<!--<preference name="ShowSplashScreenSpinner" value="false" />-->
<preference name="SplashScreen" value="screen"/>
<preference name="DisallowOverscroll" value="true" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarStyle" value="default" />
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="android-minSdkVersion" value="22" />
<preference name="android-targetSdkVersion" value="28" />
<plugin name="cordova-plugin-inappbrowser" />
<!--<plugin name="cordova-plugin-splashscreen" onload="true" />-->
<plugin name="cordova-plugin-whitelist" />
<plugin name="cordova-plugin-ios-longpress-fix" />
<plugin name="cordova-android-support-gradle-release">
</plugin>
<!--<plugin name="cordova-plugin-wkwebview-file-xhr" />
<platform name="ios">
<preference name="AllowUntrustedCerts" value="on" />
<preference name="InterceptRemoteRequests" value="all" />
</platform>-->
<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />
<!-- <plugin name="cordova-plugin-ios-xhr" />
<platform name="ios">
<preference name="NativeXHRLogging" value="none" />
<preference name="AllowUntrustedCerts" value="true" />
<preference name="InterceptRemoteRequests" value="all" />
<preference name="allowFileAccessFromFileURLs" value="true" />
<preference name="allowUniversalAccessFromFileURLs" value="true" />
</platform>-->
<plugin name="cordova-plugin-device" />
<plugin name="cordova-custom-config" version="*" />
<plugin name="phonegap-plugin-barcodescanner">
<param name="CAMERA_USAGE_DESCRIPTION" value="xxx." />
</plugin>
<plugin name="cordova-plugin-camera" source="npm">
<variable name="CAMERA_USAGE_DESCRIPTION" value="xxx." />
<variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="xxx." />
</plugin>
<plugin name="cordova-plugin-app-version" />
<plugin name="cordova-plugin-exit" />
<access origin="*" />
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
<string>xxx.</string>
</edit-config>
<edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="merge">
<string>xxx.</string>
</edit-config>
<edit-config target="CFBundleShortVersionString" file="*-Info.plist" mode="merge">
<string>xxx</string>
</edit-config>
<icon src="res/screen/ios/PackageIcons.iOS.iTunesArtwork.png"/>
<platform name="android">
<icon src="res/screen/android/PackageIcons.Android.ic_launcher_36_36.png" density="ldpi" />
<icon src="res/screen/android/PackageIcons.Android.ic_launcher_48_48.png" density="mdpi" />
<icon src="res/screen/android/PackageIcons.Android.ic_launcher_72_72.png" density="hdpi" />
<icon src="res/screen/android/PackageIcons.Android.ic_launcher_96_96.png" density="xhdpi" />
<splash src="res/screen/android/PackageIcons.Android.splash_200_320.png" density="port-ldpi" />
<splash src="res/screen/android/PackageIcons.Android.splash_320_480.png" density="port-mdpi" />
<splash src="res/screen/android/PackageIcons.Android.splash_480_800.png" density="port-hdpi" />
<splash src="res/screen/android/PackageIcons.Android.splash_720_1280.png" density="port-xhdpi" />
<splash src="res/screen/android/PackageIcons.Android.splash_320_200.png" density="land-ldpi" />
<splash src="res/screen/android/PackageIcons.Android.splash_480_320.png" density="land-mdpi" />
<splash src="res/screen/android/PackageIcons.Android.splash_800_480.png" density="land-hdpi" />
<splash src="res/screen/android/PackageIcons.Android.splash_1280_720.png" density="land-xhdpi" />
</platform>
<platform name="ios">
<icon src="res/screen/ios/PackageIcons.iOS.icon.png" width="57" height="57" />
<icon src="res/screen/ios/PackageIcons.iOS.icon-60.png" width="60" height="60" />
<icon src="res/screen/ios/PackageIcons.iOS.icon-72.png" width="72" height="72" />
<icon src="res/screen/ios/PackageIcons.iOS.icon-76.png" width="76" height="76" />
<icon src="res/screen/ios/[email protected]" width="114" height="114" />
<icon src="res/screen/ios/[email protected]" width="120" height="120" />
<icon src="res/screen/ios/[email protected]" width="144" height="144" />
<icon src="res/screen/ios/[email protected]" width="152" height="152" />
<icon src="res/screen/ios/[email protected]" width="180" height="180" />
<icon src="res/screen/ios/PackageIcons.iOS.AppIcon40x40~ipad.png" width="40" height="40" />
<icon src="res/screen/ios/[email protected]" width="80" height="80" />
<icon src="res/screen/ios/[email protected]" width="120" height="120" />
<icon src="res/screen/ios/PackageIcons.iOS.AppIcon50x50~ipad.png" width="50" height="50" />
<icon src="res/screen/ios/PackageIcons.iOS.AppIcon50x50@2x~ipad.png" width="100" height="100" />
<icon src="res/screen/ios/PackageIcons.iOS.AppIcon29x29.png" width="29" height="29" />
<icon src="res/screen/ios/[email protected]" width="58" height="58" />
<icon src="res/screen/ios/[email protected]" width="87" height="78" />
<splash src="res/screen/ios/PackageIcons.iOS.Default~iphone.png" width="320" height="480" />
<splash src="res/screen/ios/PackageIcons.iOS.Default@2x~iphone.png" width="640" height="960" />
<splash src="res/screen/ios/PackageIcons.iOS.Default-568h@2x~iphone.png" width="640" height="1136" />
<splash src="res/screen/ios/PackageIcons.iOS.Default-667h.png" width="750" height="1334" />
<splash src="res/screen/ios/PackageIcons.iOS.Default-Portrait~ipad.png" width="768" height="1024" />
<splash src="res/screen/ios/PackageIcons.iOS.Default-736h.png" width="1242" height="2208" />
<splash src="res/screen/ios/PackageIcons.iOS.Default-Portrait@2x~ipad.png" width="1536" height="2048" />
<splash src="res/screen/ios/PackageIcons.iOS.Default-Landscape~ipad.png" width="1024" height="768" />
<splash src="res/screen/ios/PackageIcons.iOS.Default-Landscape@2x~ipad.png" width="2048" height="1536" />
<splash src="res/screen/ios/PackageIcons.iOS.Default-Landscape-736h.png" width="2208" height="1242" />
<icon src="res/screen/ios/PackageIcons.iOS.iTunesArtwork.png" width="1024" height="1024" />
</platform>
</widget>
Do you see any errors or problems here? I read a lot of solutions and tried them all, but my problem is still here.
I did it!!!!!
First of all, keep in mind you have to use only one image for the iOS splash screen, although the Cordova docs says you can also use multiple images like in the past.
So, in the root folder you need this:
res
|-- screen
|--ios
|--android
In the iOS folder, create an image called Default@2x~universal~anyany.png with your splash screen with 2732x2732 pixels resolution.
Then add this in your config.xml
<splash src="res/screen/ios/Default@2x~universal~anyany.png" />
and delete the old references to other iOS splash files (not for icons files, that part didn't changed).
I also removed the reference to the plugin cordova-plugin-splashscreen since in cordova iOS 6.1.1 is already included. --> EDIT: this work in iOS, but you have to keep the following line to make it work in Android:
<plugin name="cordova-plugin-splashscreen" />
Note that Default@2x~universal~anyany.png has to be an image with your logo or something else in its center, since the border area will be cropped when showed. You have to do some tries in different devices to find out what is better for your splash screen image.