White splashscreen

Hi

I built the app with cordova ios 6.1 and it works, almost perfectly. The only annoying point is I don’t see my splash screen when the app is loading. It seems like that the splash screen is a simple white image.

To make it work on 6.1.1 I added:

  <plugin name="cordova-plugin-wkwebview-file-xhr" />
  <platform name="ios">
    <preference name="AllowUntrustedCerts" value="on" />
     <preference name="InterceptRemoteRequests" value="all" />
  </platform>

How can I show correctly my splash screen?

My config.xml is

<widget id="xxx" version="1.0.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="info@xxx.com" href="http://www.xxx.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="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>
 
  <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>1.0.xx</string>
  </edit-config>
  <icon src="resources/android/PackageIcons.Android.ic_launcher_36_36.png" platform="android" density="ldpi" />
  <icon src="resources/android/PackageIcons.Android.ic_launcher_48_48.png" platform="android" density="mdpi" />
  <icon src="resources/android/PackageIcons.Android.ic_launcher_72_72.png" platform="android" density="hdpi" />
  <icon src="resources/android/PackageIcons.Android.ic_launcher_96_96.png" platform="android" density="xhdpi" />
  <splash src="resources/android/PackageIcons.Android.splash_200_320.png" platform="android" density="port-ldpi" />
  <splash src="resources/android/PackageIcons.Android.splash_320_480.png" platform="android" density="port-mdpi" />
  <splash src="resources/android/PackageIcons.Android.splash_480_800.png" platform="android" density="port-hdpi" />
  <splash src="resources/android/PackageIcons.Android.splash_720_1280.png" platform="android" density="port-xhdpi" />
  <splash src="resources/android/PackageIcons.Android.splash_320_200.png" platform="android" density="land-ldpi" />
  <splash src="resources/android/PackageIcons.Android.splash_480_320.png" platform="android" density="land-mdpi" />
  <splash src="resources/android/PackageIcons.Android.splash_800_480.png" platform="android" density="land-hdpi" />
  <splash src="resources/android/PackageIcons.Android.splash_1280_720.png" platform="android" density="land-xhdpi" />
  <icon src="resources/ios/PackageIcons.iOS.icon.png" platform="ios" width="57" height="57" />
  <icon src="resources/ios/PackageIcons.iOS.icon-60.png" platform="ios" width="60" height="60" />
  <icon src="resources/ios/PackageIcons.iOS.icon-72.png" platform="ios" width="72" height="72" />
  <icon src="resources/ios/PackageIcons.iOS.icon-76.png" platform="ios" width="76" height="76" />
  <icon src="resources/ios/PackageIcons.iOS.icon@2x.png" platform="ios" width="114" height="114" />
  <icon src="resources/ios/PackageIcons.iOS.icon-60@2x.png" platform="ios" width="120" height="120" />
  <icon src="resources/ios/PackageIcons.iOS.icon-72@2x.png" platform="ios" width="144" height="144" />
  <icon src="resources/ios/PackageIcons.iOS.icon-76@2x.png" platform="ios" width="152" height="152" />
  <icon src="resources/ios/PackageIcons.iOS.icon-60@3x.png" platform="ios" width="180" height="180" />
  <icon src="resources/ios/PackageIcons.iOS.AppIcon40x40~ipad.png" platform="ios" width="40" height="40" />
  <icon src="resources/ios/PackageIcons.iOS.AppIcon40x40@2x.png" platform="ios" width="80" height="80" />
  <icon src="resources/ios/PackageIcons.iOS.AppIcon40x40@3x.png" platform="ios" width="120" height="120" />
  <icon src="resources/ios/PackageIcons.iOS.AppIcon50x50~ipad.png" platform="ios" width="50" height="50" />
  <icon src="resources/ios/PackageIcons.iOS.AppIcon50x50@2x~ipad.png" platform="ios" width="100" height="100" />
  <icon src="resources/ios/PackageIcons.iOS.AppIcon29x29.png" platform="ios" width="29" height="29" />
  <icon src="resources/ios/PackageIcons.iOS.AppIcon29x29@2x.png" platform="ios" width="58" height="58" />
  <icon src="resources/ios/PackageIcons.iOS.AppIcon29x29@3x.png" platform="ios" width="87" height="78" />
  <splash src="resources/ios/PackageIcons.iOS.Default~iphone.png" platform="ios" width="320" height="480" />
  <splash src="resources/ios/PackageIcons.iOS.Default@2x~iphone.png" platform="ios" width="640" height="960" />
  <splash src="resources/ios/PackageIcons.iOS.Default-568h@2x~iphone.png" platform="ios" width="640" height="1136" />
  <splash src="resources/ios/PackageIcons.iOS.Default-667h.png" platform="ios" width="750" height="1334" />
  <splash src="resources/ios/PackageIcons.iOS.Default-Portrait~ipad.png" platform="ios" width="768" height="1024" />
  <splash src="resources/ios/PackageIcons.iOS.Default-736h.png" platform="ios" width="1242" height="2208" />
  <splash src="resources/ios/PackageIcons.iOS.Default-Portrait@2x~ipad.png" platform="ios" width="1536" height="2048" />
  <splash src="resources/ios/PackageIcons.iOS.Default-Landscape~ipad.png" platform="ios" width="1024" height="768" />
  <splash src="resources/ios/PackageIcons.iOS.Default-Landscape@2x~ipad.png" platform="ios" width="2048" height="1536" />
  <splash src="resources/ios/PackageIcons.iOS.Default-Landscape-736h.png" platform="ios" width="2208" height="1242" />
  <icon src="resources/ios/PackageIcons.iOS.iTunesArtwork.png" platform="ios" width="1024" height="1024" />
  <icon src="resources/ios/PackageIcons.WP.44-240.png" platform="winphone" width="106" height="106" />
  <icon src="resources/ios/PackageIcons.WP.50-240.png" platform="winphone" width="120" height="120" />
  <icon src="resources/ios/PackageIcons.WP.71-240.png" platform="winphone" width="170" height="170" />
  <icon src="resources/ios/PackageIcons.WP.150-240.png" platform="winphone" width="360" height="360" />
  <icon src="resources/ios/PackageIcons.WP.310-240.png" platform="winphone" width="744" height="744" />
  <icon src="resources/ios/PackageIcons.WP.310x150-240.png" platform="winphone" width="744" height="360" />
  <splash src="resources/ios/PackageIcons.WP.Splash-240.png" platform="winphone" width="1488" height="720" />
</widget>

I almost made it to run my app correctly, it remains only the white screen as splash screen issue. I also moved my splash screen images at root level, inside resources -> ios, but still nothing. What am I missing?

Splash screens are handled by Cordova. Here are their docs:

I put the files in a folder called “res” at root level, but VoltBuilder expect one called “resources”. Is this a problem?

It’s not a problem, but it’s a good point. We will update our docs to match the Cordova docs.

Hey…then what should be the correct name : it should be “res” or resources" ?

Please confirm?

It does not matter, so long as it is consistent with config.xml.

The documentation has been updated to use res.

piero.alberto

Did you ever get this issue resolved?

I am having the exact same problem.

Thanks

Your app is probably getting an error. You’ll need to look at the remote console on the device:

One common reason is additional permissions now required by Android and iOS. There is some info here, under Permissions.

Remote Debugging

Once you have the app installed on a device, you can open a remote debugging session to debug your app.

For Android, use Chrome Remote Debugging.

For iOS, use Safari Remote Debugging.

Another ($) option is BrowserStack

Here the solution I wrote Cordova iOS 6.1.1 white splash screen - Stack Overflow

Note that the docs for this plugin state:

If your launch image is simple, you may be able to avoid creating a lot of different launch images and supply only one. The launch image needs to meet the following requirements:

  • the image should be square
  • the image should be large enough to fit on an iPad Pro 12.9": 2732x2732
  • anything important should fit within the center

Keep in mind that the image will be cropped, possibly quite severely, depending upon the viewport.