Capacitor, white screen appear after splash screen

I just used capacitor native splash screen api for android app.
The white screen will appear about 2 or 3 seconds after splash screen, is there any configuration should be set to fix the problem?
The problem will not present if the SplashScreen.hide() timeout set longer than 3000 ms, but I just want to show only 500 or 1000 ms.

my capacitor.config.json

 "plugins": {
        "SplashScreen": {
             "launchShowDuration": 1000,
             "launchAutoHide": false,
             "backgroundColor": "#ffffffff",
             "androidSplashResourceName": "splash",
             "androidScaleType": "CENTER_CROP",
             "showSpinner": true,
             "androidSpinnerStyle": "large",
             "iosSpinnerStyle": "small",
             "spinnerColor": "#999999",
             "splashFullScreen": false,
             "splashImmersive": false,
             "layoutName": "launch_screen",
             "useDialog": true
        }
}

and app.component.ts

import { SplashScreen } from '@capacitor/splash-screen';

  ngOnInit(): void {
     this.splashScreen();
   }
 
  private splashScreen(): void {
     setTimeout(() => {
       SplashScreen.hide();
     }, 500);
}

Here is my Ionic environment info

Ionic:

Ionic CLI : 6.17.0
Ionic Framework : @ionic/angular 5.8.4
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 12.1.4
@angular/cli : 12.1.4
@ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 3.2.2
@capacitor/android : 3.3.2
@capacitor/core : 3.2.2
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.3
native-run : 1.4.1

System:

NodeJS : v14.17.4 (C:\Program Files\nodejs\node.exe)
npm : 6.14.14
OS : Windows 10

1 Like

Is there any error appearing in the web console or is your application just loading slowly? Based on what you wrote, I’d guess your web app just loads slowly and in order to reduce that white flash you’d need to optimize the web portion of your app

Thanks for your reply! I just created a clean project with only add splash screen code, there is no white screen after splash screen. I’m checking if there is other plugins or codes made the fault…

Do you have any Auth guards or API service calls that are occurring when your app loads too?

Does the issue still occur when your app is built with -prod?

This problem only happen on low end cell phone device.

After update the config below to capacitor.config.json can avoid the issue, I think it may relate to device performance.


"plugins": {
    "SplashScreen": {
        "launchShowDuration": 1000,
        "launchAutoHide": false,
        "backgroundColor": "#ffffffff",
        "androidSplashResourceName": "splash",
        "androidScaleType": "CENTER_CROP",
        "showSpinner": true,
        "androidSpinnerStyle": "horizontal",  <------
        "iosSpinnerStyle": "small",
        "spinnerColor": "#999999",
        "splashFullScreen": true, <------
        "splashImmersive": false,
        "layoutName": "launch_screen",
        "useDialog": false  <------
    }
}
1 Like

Unfortunately this plugin (splashscreen) does not work with Capacitor v3.

Reading the github repo’s issues and comments, it doesn’t look very promising for getting support anytime soon…

Issues like that tend to scare me away from Capacitor in comparison to Cordova

The plugin does indeed work with Capacitor 3. Otherwise, we wouldn’t have updated it :smile:. What issues are you running into?

1 Like

Hmmm it looks like I may have somehow landed on a different plugin’s repo. Maybe a fork?

I now see that there is a different repo at

which I suppose is the current official one.

I apologize for the confusion.

In the end I switched back to Cordova for my current project but I’ll make sure to give capacitor another shot with the next one.