cordova[phonegap] Setting splash screen is not working fine in ios

Question

I have added splash screen for my phonegap app.

I am building phonegap app online at http://build.phonegap.com.

Splash Screen is working fine for android.But on ios splash screen hides before the defined time.

Config.xml For Splash Screen

    <?xml version="1.0" encoding="UTF-8" ?>
    <widget xmlns   = "http://www.w3.org/ns/widgets"
        xmlns:gap   = "http://phonegap.com/ns/1.0"
        xmlns:android   = "http://schemas.android.com/apk/res/android"
        id          = "com.clerisy.arcade"
        versionCode = "10" 
        version     = "1.0.0" >

    <!-- versionCode is optional and Android only -->

    <name>xxxxxxxxxxxxx</name>

    <description>
        xxxxxxxxxxxxxxxxx
    </description>

    <author href="https://build.phonegap.com" email="support@phonegap.com">
        xxxxxxxxxxxxxxxx
    </author>

    <preference name="permissions" value="none"/>
    <preference name="phonegap-version" value="3.6.3" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" /> 
    <preference name="fullscreen" value="false" /> 
    <preference name="webviewbounce" value="true" />
    <preference name="prerendered-icon" value="true" />
    <preference name="stay-in-webview" value="false" /> 
    <preference name="ios-statusbarstyle" value="black-opaque" /> 
    <preference name="detect-data-types" value="true" /> 
    <preference name="exit-on-suspend" value="false" /> 
    <preference name="show-splash-screen-spinner" value="true" /> 
    <preference name="auto-hide-splash-screen" value="true" />
    <preference name="disable-cursor" value="false" /> 
    <preference name="android-minSdkVersion" value="7" /> 
    <preference name="android-installLocation" value="auto" /> 
    <preference name="backgroundColor" value="0xff38c0f4"/>
    <preference name="AutoHideSplashScreen" value="false" />   
    <preference name="ShowSplashScreenSpinner" value="false" /> 

    <!-- Plugins -->
    <!-- Core plugins -->

    <gap:plugin name="org.apache.cordova.inappbrowser" version="0.5.2" />
    <gap:plugin name="org.apache.cordova.network-information" version="0.2.12" />
    <gap:plugin name="nl.x-services.plugins.socialsharing" version="4.3.8" />
    <gap:plugin name="org.apache.cordova.device" version="0.2.12" />
    <gap:plugin name="com.phonegap.plugin.statusbar" version="1.1.0" />
    <gap:plugin name="org.apache.cordova.splashscreen" />

    <!-- Set Icon and splash screen -->

    <icon src="icon.png" platform="android" width="57" height="57" density="mdpi" />
    <gap:splash src="screen.png"/>  
    <gap:config-file platform="ios" parent="CFBundleShortVersionString">
    <string>100</string>
    </gap:config-file>
    <content src="index.html" />
    <access origin="*" />
</widget>

to hide splashscreen i am using

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
   // Hide splash Screen
   setTimeout(function() {
            navigator.splashscreen.hide();
        }, 2000);

The Problem is :-

it is working fine on android but on iphone it changes the resolution of splashscreen after few seconds.

Answer 1

Install the splash screen plugin

cordova plugin add org.apache.cordova.splashscreen

For iOS you have to hide splash screen inside timeout function in document ready, you can define the duration after which the splashscreen should hide.

setTimeout(function() {
                navigator.splashscreen.hide();
            }, 8000);

set autohide splash to false in config.xml

<preference name="AutoHideSplashScreen" value="false" />

Refer the plugin documentation for more detail https://github.com/apache/cordova-plugin-splashscreen/blob/master/doc/index.md

Answer 2

If you have apple device build uisng Xcode and add sleep in main thread of app (in app delegate) and you are done with it