White screen after splash and before my home screen capacitor ionic

Hey, I upgraded my old cordova app to capacitor app, everything is working fine but I am seeing a white screen between splashscreen and my home page.

I am getting no error on my console, just wonder why this white screen is coming.

here is my 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" />

and my capacitor.config.xml

  "appId": "com.ionics.SFDS",
  "appName": "CSCA",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "cordova": {
    "preferences": {
      "ScrollEnabled": "false",
      "android-minSdkVersion": "19",
      "BackupWebStorage": "none",
      "SplashMaintainAspectRatio": "true",
      "FadeSplashScreenDuration": "300",
      "SplashShowOnlyFirstTime": "false",
      "SplashScreen": "screen",
      "KeyboardResize": "true"

let me know what is the great option to hide this screen or extend the duration for splash screen.

This should help you resolve it. Hopefully.


Thanks! This solved my problem as well. :grin:

1 Like

Does NOT work anymore.

This works for me in Capacitor 3+ / Ionic 5+ / Angular 12+

npm i --save @capacitor/splash-screen


 "plugins": {
    "SplashScreen": {
      "launchAutoHide": false,
      "showSpinner": false


import {SplashScreen} from '@capacitor/splash-screen';
setTimeout(() => {
  }, 2000);

You can change the color in capacitor.config with backgroundColor.

    "appId": "io.ionic.starter",
    "appName": "app",
    "webDir": "build",
    "bundledWebRuntime": false,
    "backgroundColor": "#ff0000" // <-- here lol
1 Like