Why white screen stuck after splash screen in Ionic 4?

Question

I run ionic cordova run android for my Ionic Cordova project. At this time, I have my mobile connected to PC via USB. So when I run that command, it installs th

Answer 1

I’ve solved this 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() and after that run the project on android using.

ionic cordova run android

Answer 2

Found solution. Problem was in cordova-plugin-android-permissions. On android 6+ (maybe android 5 too, I don’t have it on my devices) user should accept permissions manually. In application permissions request looks like alert view. And this alert automatically stops splashscreen (even if you don’t hide splashscreen automatically and don’t call hide method yet) and broke fade out animation. Also this permissions request broke splashscreen even if permissions already added.

So solution is to request permissions after splashScreen.hide() after timeout delay equal to fade out timeout.

example:
config.xml

<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="SplashScreenDelay" value="30000" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="ShowSplashScreen" value="true" />

In app.components.ts

  initializeApp() {
    this.platform.ready().then(() => {
      setTimeout(() => {
        this.splashScreen.hide();
      }, 1000);
    }
  }

NOTED!!! the setTimeout delay should be equal to FadeSplashScreenDuration param value in config.xml

Conclusion: The code above made the smooth transition from the Splash screen, that will fade smoothly to you start up page. No white screen is shown at all. Hope this would be helpful.

Answer 3

Debug your app and check if its showing any error app stuck at white screen mainly because of errors in app

Answer 4

Put this in your config.xml file

<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<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="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="3000" />

then run this command: ionic cordova build android it will generate an apk file here: your_project_folder/platforms/android/app/build/outputs/apk/debug/app-debug.apk

This should work with no white screen stucked after splash screen

Answer 5

config.xml

 <preference name="auto-hide-splash-screen" value="false" /> 
 <preference name="AutoHideSplashScreen" value="false" />

main.js please change

this.platform.ready().then(function () {
        _this.statusBar.styleDefault();
        _this.splashScreen.hide();
    });

to

this.platform.ready().then(function () {
            _this.statusBar.styleDefault();
            setTimeout(function(){
                _this.splashScreen.hide();

            }, 3000);
        });

Answer 6

I also faced this problem, but in my case, the problem is with default routing.

When App initializes it tries to open on default route that is Empty route, which further we redirect to the actual working route, In my case Empty route was redirected to "/dashboard".

Example code

const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    canActivate: [AuthGuard],
    loadChildren: './home/home.module#HomePageModule'
  },
  { 
    path: 'login',
    loadChildren: './public/login/login.module#LoginPageModule' 
  }
]

In the above code, my Empty route is redirecting to dashboard where [AuthGuard] is active, and it stuck in circulation, So I decided it redirect to the route where [AuthGuard] is not active, That is "/login" in my case. Updated code by redirecting to login where [Authgaurd] is not active.

 const routes: Routes = [
      {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
      },
      {
        path: 'dashboard',
        canActivate: [AuthGuard],
        loadChildren: './home/home.module#HomePageModule'
      },
      { 
        path: 'login',
        loadChildren: './public/login/login.module#LoginPageModule' 
      }
 ]

After building the project for Andriod, The app runs successfully.

Justed posted the answer if anyone has this issue same like me on the same problem.