After splash screen, display white screen long time

Donbelar · March 13, 2017, 1:31pm

When you build your app, try this.

$ionic build android --prod

or

$ionic run android --prod

fdom · March 20, 2017, 12:12pm

celsosantos:

I’ve solved that issue by setting the correct parameters on config.xml

 <preference name="AutoHideSplashScreen" value="false" />
 <preference name="SplashScreenDelay" value="10000" />
 <preference name="FadeSplashScreenDuration" value="1000" />
 <preference name="SplashScreen" value="screen" />
 <preference name="ShowSplashScreen" value="true" />
 <preference name="ShowSplashScreenSpinner" value="false" />
 <preference name="SplashShowOnlyFirstTime" value="false" />
 <preference name="FadeSplashScreen" value="true" />

Then, on my platform.ready() instruction all I do is Splashscreen.hide();

Thank you soooooo much! This finally helped me to solve splashscreen problem with production build

celsosantos · March 21, 2017, 5:39pm

Glad I could help, that’s what we’re here for

gentlemanjohn · April 24, 2017, 4:35am

Bingo. This solved my issue.

javiccs · May 4, 2017, 2:41pm

Hi guys. this solved my issues to make a release to Google Play:

-Config.xml

    <preference name="SplashScreenDelay" value="5000" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="loadUrlTimeoutValue" value="700000" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="ShowSplashScreenSpinner" value="true" />

Then ionic build android --release --prod

Cankaya · July 9, 2017, 2:07pm

Hi

emulator screen

pedrogyn · August 16, 2017, 5:46pm

Nice !!! I used the solution and it worked (y)

yasirpanjsheri · August 22, 2017, 11:57am

hi , I am using Ionic 3 the latest version… I tried your solutions but it didn’t work… I also followed http://www.codingandclimbing.co.uk/blog/ionic-2-fix-splash-screen-white-screen-issue
but still didn’t work… any advice, thanx

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.myApp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>JobsAf</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="xxxxx@gmail.com" href="http://ionicframework.com/">myApp</author>
    <content src="index.html" />
    <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:*" />
    <allow-navigation href="http://*/*" />
    <allow-navigation href="tel:*" />
    <allow-navigation href="mailto:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
    </platform>
    <platform name="wp8">
        <icon height="99" src="resources/wp8/icon/ApplicationIcon.png" width="99" />
        <icon height="159" src="resources/wp8/icon/Background.png" width="159" />
        <splash height="1280" src="resources/wp8/splash/SplashScreenImage.png" width="768" />
    </platform>
    <preference name="SplashScreenDelay" value="5000" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="loadUrlTimeoutValue" value="700000" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="ShowSplashScreenSpinner" value="true" />
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>
    <plugin name="cordova-plugin-wkwebview-engine" spec="https://github.com/driftyco/cordova-plugin-wkwebview-engine.git" />
    <plugin name="cordova-plugin-crosswalk-webview" spec="~2.2.0">
        <variable name="XWALK_VERSION" value="22+" />
        <variable name="XWALK_LITEVERSION" value="xwalk_core_library_canary:17+" />
        <variable name="XWALK_COMMANDLINE" value="--disable-pull-to-refresh-effect" />
        <variable name="XWALK_MODE" value="embedded" />
        <variable name="XWALK_MULTIPLEAPK" value="true" />
    </plugin>
    <plugin name="cordova-sqlite-storage" spec="~2.0.2" />
    <plugin name="cordova-plugin-contacts" spec="~2.3.0" />
    <plugin name="cordova-plugin-network-information" spec="~1.3.2" />
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.2" />
    <plugin name="cordova-plugin-whitelist" spec="~1.3.2" />
    <plugin name="cordova-plugin-console" spec="~1.0.6" />
    <plugin name="cordova-plugin-statusbar" spec="~2.2.2" />
    <plugin name="cordova-plugin-device" spec="~1.1.5" />
    <plugin name="cordova-plugin-file-transfer" spec="~1.6.2" />
    <plugin name="cordova-plugin-camera" spec="~2.4.0" />
    <plugin name="cordova-plugin-file" spec="~4.3.2" />
    <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
    <plugin name="com.synconset.imagepicker" spec="https://github.com/Telerik-Verified-Plugins/ImagePicker.git">
        <variable name="PHOTO_LIBRARY_USAGE_DESCRIPTION" value="PickImage" />
    </plugin>
    <plugin name="cordova-plugin-crop" spec="~0.3.1" />
    <plugin name="cordova-plugin-file-opener2" spec="~2.0.19" />
    <engine name="ios" spec="4.3.1" />
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" />
    <engine name="android" spec="~6.1.2" />
</widget>

saninaimayer · August 29, 2017, 5:51pm

Thanks for solution.

danielnetzer · September 2, 2017, 9:37am

put a high value here, equal to 30000 which is 30 seconds of delay and then the platform ready function will turn it off.

i wouldent consider this as a solution since it suggests that that the application take over 5 seconds to load the initial view.

n0jayass092196 · September 28, 2017, 4:04am

This fixed the problem for me

UPDATE ionic v3

My app.component.ts:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
 
import { LoginPage } from '../pages/login-page/login-page';
 
@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage = LoginPage;
 
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

and then add the ff. import to the app.module.ts

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

Finally add: StatusBar, SplashScreen to providers array in app.module.ts

i also had the ff. configurations in my config.ts:

<platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />

Sudhan_ionic · September 30, 2017, 11:23am

I fixed the problem by using above link. I hope it’s very helpful to you

guptaniraj · October 7, 2017, 11:04am

Thanks , it worked !

mcihak · October 18, 2017, 7:31am

Hi,
I have still this problem :-/. This my configuration:

    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="SplashReloadOnOrientationChange" value="true" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="FadeSplashScreen" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />

And in app.component.ts:

   if (this.splashScreen) {
                setTimeout(() => {
                    this.splashScreen.hide();
                }, 100);
            }

Can you please help me with it? Thanks

jfsoftwarellc · November 13, 2017, 7:28pm

I had this same issue and just solved it. A lot of what is posted above is correct but the specific solution is explicity never called out. it is:

Set the SplashScreenDelay value to something high. The issue is that the splash screen is closing before the app is loaded but since you’re already manually calling the hide in app init, there’s no reason to not have it stay for as long as necessary. I just added a zero to make it 30000 and it worked like a charm.

jeremyy7 · November 16, 2017, 5:58pm

such a good call! It’s very difficult to debug the app on a device otherwise

conceps · December 6, 2017, 2:02pm

Thank u so much This finally helped me to solve splashscreen problem with production build

noutcharty · December 18, 2017, 1:39pm

it worked for me too

akshayseth94 · December 29, 2017, 7:10am

This worked but this is a patch…You gotta build a production APK(–prod in your command) for a legit solution.

rgraghav · January 4, 2018, 5:30am

when i run app on prod mode then some input fields are disabled …what should I do? please help