Phonegap Build iOS App Has Blank White Screen After Splash Screen

PhoneGap Build iOS app has blank white screen after splash screen

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 -->
<preference name="AutoHideSplashScreen" value="false" />
<!-- Do not auto hide splash on Android -->
<preference name="SplashScreenDelay" value="10000"/>

<gap:plugin name="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.

cordova ios version 6.2 white screen on launch (woking on ios 5.1.1)

It's because when switching to iOS 6+, UIWebView is deprecated. Which also means that WKWebView is the new default and the splash screens plugin is not required anymore is you target iOS only :

Note: iOS implementation has been moved to the core framework. If
using cordova-ios@5 or earlier, use cordova-plugin-splashscreen@5 If
using cordova-ios@6 or later, use cordova-plugin-splashscreen@6. If
developing exclusively for the iOS platform, this plugin can be
uninstalled.

Source

Also the format has changed in the XML for splashscreens. You should read

UIWebView Deprecated

Cordova iOS 6+

Cordova - white screen after splash, no exceptions in console

Well that was ugly. It turned out that there was an exception being thrown, it was just being thrown too early for the browser dev tools to pick it up (Safari, Chrome for iOS and Android, respectively). The exception did show up when I ran things through the browser target (cordova platform add browser, etc.) So that browser platform is useful for something I guess. :-)

In my case, the cordova-sqlite-storage plugin had made a breaking API change that broke the code when I updated everything. The solution was to pin the plugin to an earlier version in the config.xml file.

So, lessons learned:

• If you suspect there's an exception being thrown during startup, you can use the browser platform to track it down.
• Pin your plugins to a specific version using the spec parameter in the config.xml. This will save you some heartache in the future.
• [another option from @jcesarmobile, below] hitting refresh in the browser dev tools will also kick out the exception. Nice!

I'll be going back in to the config.xml and pinning the other items -- and doing some cleanup as suggested above. Thanks again, everyone.

Cordova IOS app shows white screen in IOS 14

I found the answer.

I uninstalled splashscreen plugin. By default splashscreen available in Cordova IOS platform 6.1.0.

In project root folder, check for res folder. If res folder is not available we have to create a res folder path like this "res/screen/ios/" and upload the splash screen images in ios folder.

Then add this in your config.xml

<splash src="res/screen/ios/screen-ipad-landscape-2x.png" />
<splash src="res/screen/ios/screen-ipad-landscape.png" />
<splash src="res/screen/ios/screen-ipad-portrait-2x.png" />
<splash src="res/screen/ios/screen-ipad-portrait.png" />
<splash src="res/screen/ios/screen-iphone-landscape-2x.png" />
<splash src="res/screen/ios/screen-iphone-landscape.png" />
<splash src="res/screen/ios/screen-iphone-portrait-2x.png" />
<splash src="res/screen/ios/screen-iphone-portrait-568h-2x.png" />
<splash src="res/screen/ios/screen-iphone-portrait.png" />

Below are the edited config.xml code which worked for me.

<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
    <allow-intent href="market:*" />
</platform>
<platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
    
    <splash src="res/screen/ios/screen-ipad-landscape-2x.png" />
    <splash src="res/screen/ios/screen-ipad-landscape.png" />
    <splash src="res/screen/ios/screen-ipad-portrait-2x.png" />
    <splash src="res/screen/ios/screen-ipad-portrait.png" />
    <splash src="res/screen/ios/screen-iphone-landscape-2x.png" />
    <splash src="res/screen/ios/screen-iphone-landscape.png" />
    <splash src="res/screen/ios/screen-iphone-portrait-2x.png" />
    <splash src="res/screen/ios/screen-iphone-portrait-568h-2x.png" />
    <splash src="res/screen/ios/screen-iphone-portrait.png" />
</platform>

<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />
<plugin name="cordova-plugin-network-information" spec="^2.0.2" />
<plugin name="cordova-plugin-statusbar" spec="^2.4.3" />
<plugin name="cordova-plugin-inappbrowser" spec="^4.0.0" />

Cheers.

---

Related Topics