How to hide the white screen after splash screen ionic 4 and capacitor

Capacitor
#1

I’m using ionic 4 and Capacitor in my project, my problem is I get a white screen after the splash screen, I tried to edit capacitor.config.json but I still got the same problem :

"plugins": {
  "SplashScreen": {
  "launchAutoHide": false,
  "showSpinner": true,
  "androidSplashResourceName": "splash",
  "androidScaleType": "CENTER_CROP",
  "androidSpinnerStyle": "small",
  "iosSpinnerStyle": "small",
  "spinnerColor": "#ffffff",
  "backgroundColor": "#34ace0"
 }

is there anyone show me how to solve this problem please?

2 Likes
#2

White screen issues indicate a bug in your app code. See docs here on remote debugging.

Good video to review here on white screen issues.

#3

Thanks for your answer but Non, my App works fine, I got my splash screen then I got the white page 4 seconds later(the white screen lasts 4 seconds or less or more then my app appears) I got my app work, I think it is a problem of webView non ?

2 Likes
#4

Me too getting same issue. Please assist something if anyone found solution.

#5

in app.component.ts inside platform.ready
setTimeout(() => {
this.splashScreen.hide()
}, 500)

2 Likes
#6

Try this it worked for me (any way small blink I can still see)

“SplashScreen”: {
“launchShowDuration”: 3000
}

1 Like
#7

facing the same issue. Please help #ionicdevelopers

#8

How I resolved it. its been a while but you can try this out.

First, tweak this or add to your capacitor.config.json

“SplashScreen”: {

  "launchShowDuration": 3000,

  "launchAutoHide": false,

  "androidScaleType": "CENTER_INSIDE",

  "splashFullScreen": false,

  "splashImmersive": false,

  "backgroundColor": "#1C3461",

  "androidSplashResourceName": "splash"

}

then use a setTimeout to hide the splash screen in your app.component.ts

 this.platform.ready().then(async () => {
     setTimeout(()=>{
        SplashScreen.hide({
          fadeOutDuration: 1000
        });
      }, 2000)
})

You may also need to change the launcher background and relevant styles to colour in android studio
android\app\src\main\res\values\ic_launcher_background.xml
android\app\src\main\res\values\styles.xml

Good luck.

5 Likes
White screen after splash and before my home screen capacitor ionic
#9

Thank you! This worked for me.

For those using react, use document.addEventListener("deviceready", () => { instead of this.platform.ready()

#10

THANK YOU! That Worked