White screen after splash and before my home screen capacitor ionic

Ionic Framework ionic-v3
1

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"
    },
    "plugins":{
      "SplashScreen":{
        "launchShowDuration":3000
      }
    }
  }
  
}

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

2

This should help you resolve it. Hopefully.

2 Likes
3

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

1 Like
4

Does NOT work anymore.

5

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

npm i --save @capacitor/splash-screen

capacitor.config.json

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

app.component.ts

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

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

{
    "appId": "io.ionic.starter",
    "appName": "app",
    "webDir": "build",
    "bundledWebRuntime": false,
    "backgroundColor": "#ff0000" // <-- here lol
}
2 Likes