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:

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/index.html

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

i might have the same problem right now too. Our App is built using Visual Studio with DevExtreme. Afte i got a successful built here i install the ipa then when i launch the app it’s just white screen. Hopefully someone can share their solution.

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 https://stackoverflow.com/questions/64141434/cordova-ios-6-1-1-white-splash-screen/64174737?noredirect=1#comment118431261_64174737

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.