Phonegap Build Ios App Has Blank White Screen After Splash Screen

October 17, 2023 Post a Comment

I'm using PhoneGap Build 3.0, attempting to get rid of the blank white screen that appears after the splash screen. I've done research and all I can find is references to PhoneGap

Solution 1:

Totally feel your pain on this. The docs for PhoneGap Build need a lot of work. I've been fighting with this the last couple of days myself. After much trial and error, this is what has worked for me.

Within config.xml:

<!-- Do not auto hide splash on iOS --><preferencename="AutoHideSplashScreen"value="false" /><!-- Do not auto hide splash on Android --><preferencename="SplashScreenDelay"value="10000"/><gap:pluginname="org.apache.cordova.splashscreen" />

Android does not seem to have an AutoHide param, so we just give it a long delay. We will hide it manually with JS before this 10 seconds is reached.

Adding the plugin reference in the config.xml is needed for the javascript code navigator.splashscreen.hide(); to work.

Also, I found for my project (using Kendo UI Mobile) that no setTimeout delay was needed within onDeviceReady. I am guessing, that once you get the correct params within your config.xml, you will see the same in your app.

My onDeviceReady looks like this:

document.addEventListener('deviceready', function() {
  navigator.splashscreen.hide();
});

Tested on iOS 6, and Android 4.1 using PhoneGap Build 3.1.

Solution 2:

I want to add that I had a similar issue and in my case it was not the splash screen.

In my case using PhoneGap build and Git, I added a javascript file to my app but failed to include and push the new file to my git repository. This caused my the app to work locally but when the build server pulled the latest code, it showed the white screen on the PhoneGap build.

PhoneGap initialized, but Kendo UI did not like the missing referenced js class and failed. It was a PhoneGap noob mistake but i want to share just incase it helps someone who has a similar issue and the splash screen fix does not work. It could be a javascript error occurring before your mobile ui framework loads.

Solution 3:

If you were using whitelist plugin for your app, you may need a change in config.xml as follows to work with phonegap build.

<gap:plugin name="cordova-plugin-whitelist"source="npm" version="~1" />

This was the cli spec in my config.xml.

Baca Juga

<preferencename="phonegap-version"value="cli-5.2.0" />

Solution 4:

Try set the background color, on the configs and html. Example blue:

<preferencename="SplashMaintainAspectRatio"value="false" /><preferencename="SplashScreenDelay"value="1" /><preferencename="backgroundColor"value="0xff0000ff" />

and on the html tag

<html style="background-color:#0000ff;>

Solution 5:

This are the steps

1) Add Splash screen preference in config.xml

<preferencename="SplashScreen"value="screen" /><preferencename="AutoHideSplashScreen"value="true" /><preferencename="SplashScreenDelay"value="5000" /><featurename="SplashScreen" ><paramname="android-package"value="org.apache.cordova.splashscreen.SplashScreen" /><paramname="onload"value="true" /></feature>

2) Declare your splash screens in config.xml

<!-- you can use any density that exists in the Android project --><splashdensity="land-hdpi"src="res/drawable-land-hdpi/splash.png" /><splashdensity="land-ldpi"src="res/drawable-land-ldpi/splash.png" /><splashdensity="land-mdpi"src="res/drawable-land-mdpi/splash.png" /><splashdensity="land-xhdpi"src="res/drawable-land-xhdpi/splash.png" /><splashdensity="port-hdpi"src="res/drawable-hdpi/splash.png" /><splashdensity="port-ldpi"src="res/drawable-ldpi/splash.png" /><splashdensity="port-mdpi"src="res/drawable-mdpi/splash.png" /><splashdensity="port-xhdpi"src="res/drawable-xhdpi/splash.png" /></platform>

3) Finally Add this class into your android project structure under org.apache.cordova.splashscreen package

install it as Cordova plugin.

JavaScript Sample