White screen after splashscreen, Ionic2, android device

Question

I am currently developing Ionic2 app. I face a problem that after Splash screen, there is a white screen for 6-7 seconds, before app home screen.

I tried some googling but nothing works. My last attempt to solve is

    hideSplashScreen() {     if(Splashscreen){       setTimeout(() => {         Splashscreen.hide();       },100)     }   };//  <preference name="SplashMaintainAspectRatio" value="true"/> <preference name="FadeSplashScreenDuration" value="300"/> 

Please help me in this issue;

EDIT:: My ionic info is

Cordova CLI: 6.4.0  Ionic Framework Version: 2.0.0-rc.4 Ionic CLI Version: 2.1.17 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.47 ios-deploy version: 1.8.6  OS: OS X El Capitan Node Version: v6.3.1 Xcode version: Xcode 7.2 Build version 7C68 

Answer 1

By default, the splash screen is hidden after 3 seconds (see https://github.com/apache/cordova-plugin-splashscreen#configxml). But it could be that at this moment your app is not ready.

Therefore I add always the following preference to my config.xml:

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

Instead, I hide it manually, as soon as the app is ready:

this.platform.ready().then(() => {     Splashscreen.hide(); }); 

This is working on iOS as well as on Android.

Answer 2

Updating Ionic project and change some preferences did the trick for me.

Here the changelog and infos.

1 - Update to the latest version of the Ionic CLI, Cordova and Typescript:

npm uninstall -g ionic cordova typescript npm install -g ionic cordova typescript 

2 - Update your package.json to match the following dependencies, remove existing node_modules directory, and then run npm install:

  "scripts": {     "build": "ionic-app-scripts build",     "clean": "ionic-app-scripts clean",     "ionic:build": "ionic-app-scripts build",     "ionic:serve": "ionic-app-scripts serve"   },   "dependencies": {     "@angular/common": "4.0.2",     "@angular/compiler": "4.0.2",     "@angular/compiler-cli": "4.0.2",     "@angular/core": "4.0.2",     "@angular/forms": "4.0.2",     "@angular/http": "4.0.2",     "@angular/platform-browser": "4.0.2",     "@angular/platform-browser-dynamic": "4.0.2",     "@ionic-native/core": "3.6.1",     "@ionic-native/in-app-browser": "3.6.1",     "@ionic-native/splash-screen": "3.6.1",     "@ionic-native/status-bar": "3.6.1",     "@ionic/storage": "2.0.1",     "ionic-angular": "3.1.1",     "ionicons": "3.0.0",     "rxjs": "5.1.1",     "sw-toolbox": "3.4.0",     "zone.js": "0.8.9"   },   "devDependencies": {     "@ionic/app-scripts": "1.3.6",     "typescript": "2.3.2"   } 

3 - Update your config.xlm with these preferences (live review is ok):

  <preference name="loadUrlTimeoutValue" value="700000"/>   <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="StatusBarStyle" value="default"/>   <preference name="SplashScreen" value="screen"/>   <preference name="orientation" value="default"/>   <preference name="SplashMaintainAspectRatio" value="true"/>   <preference name="FadeSplashScreenDuration" value="300"/>   <preference name="ShowSplashScreenSpinner" value="false"/>   <preference name="AutoHideSplashScreen" value="false"/>   <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>   <preference name="SplashScreenDelay" value="3000"/> 

4 - Then I have copy/pasted some code that had been modified recently from here into my project (Ionic 2 demo and up to date app - Check the Github).

Now the application starts successfully without long splashscreen.

ps:

• livereview: ionic run android -l
• production: ionic run android --prod --release
• Remember that you have to hide manually the splashscreen (like @Markus Wagner said) in your app.component.ts: this.platform.ready().then(() => { Splashscreen.hide(); });

EDIT: Update to Ionic v3.1.1 (2017-04-28)