Capacitor/Cordova Splash Screen delay?

it doesn’t work for me unfortunately… if i use launchShowDuration: 0 than if i put

this.platform.ready().then(() => {
timer(1000).subscribe(()=>
SplashScreen.hide();
)
})

in my code or i don’t put it, it’s the same thing… i just see the first splash screen than a white page for a few seconds than my main page. Going crazy!

Having the same problems (splashscreen showing first a “stretched” image before the normal splashscreen and after the normal splashscreen a white screen for x seconds.

{
  "appId": "com.name.name",
  "appName": "My App name",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "backgroundColor": "#010101",
      "launchShowDuration": 20000,
      "launchAutoHide": false
    }
  }
}

and then in the app.component.ts

this.platform.ready().then(() => {
   // splash screen
   if (Capacitor.isPluginAvailable('SplashScreen')) {
       Plugins.SplashScreen.hide();
   }
}

Searching the internet gives various options, but so far no luck.

[edit]

This seems to work for me:

  • Add / replace in android/app/src/main/res/values/styles.xml
<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">@null</item>
    </style>
  • Remove
import {SplashScreen} from '@ionic-native/splash-screen/ngx';
import {StatusBar} from '@ionic-native/status-bar/ngx';

(something easy to miss when migrating and maybe its default in a new Ionic app).

  • Capacitor config
"SplashScreen": {
      "androidScaleType": "CENTER_CROP",
      "backgroundColor": "#010101",
      "launchShowDuration": 20000,
      "launchAutoHide": false,
      "splashImmersive": false,
      "splashFullScreen": false
    }

A few months ago I had this problem, It happens because although the platform is already ready, angular still needs to lift the html views

The trick would be to keep the splash screen visible until all the content is loaded

My app.component.ts:

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
//import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Plugins } from '@capacitor/core';
const { Storage, StatusBar } = Plugins;

import { CarritoService } from './services/carrito.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(private platform: Platform, private carritoServise: CarritoService) {
    this.initializeApp()
  }

  initializeApp() {
    this.platform.ready().then(() => {
      //this.statusBar.backgroundColorByHexString('#003163');
      StatusBar.setBackgroundColor({color : '#1569b1'}) //color for the status bar XD
    })
  }
}

My capacitor.config.json in the section plugins

"plugins": {
    "SplashScreen": {
      "launchAutoHide": false,
      "backgroundColor": "#1569b1",
      "androidSplashResourceName": "splash",
      "androidScaleType": "CENTER_CROP",
      "splashFullScreen": true,
      "showSpinner": true,
      "androidSpinnerStyle": "horizontal",
      "spinnerColor": "#f3ff59"
    }

finally my home.page.ts:

import { Component, OnInit } from '@angular/core'
import { Observable } from 'rxjs'
import { Plugins } from '@capacitor/core';
const { SplashScreen } = Plugins;

import { Categorias } from 'src/app/interfaces/interfaces'
import { DataService } from 'src/app/services/data.service'

@Component({
  selector: 'app-inicio',
  templateUrl: './inicio.page.html',
  styleUrls: ['./inicio.page.scss'],
})
export class InicioPage implements OnInit {
  categorias:Observable<Categorias[]>
  fallo:boolean = false

  constructor(public dataservice: DataService) { }

  ngOnInit() {
    this.Loading()
  }

  Loading() {
    this.dataservice.getCategorias().subscribe((res: any) => {
      this.categorias = res 
      SplashScreen.hide()
      this.fallo = false
    }, ()=>{
      this.fallo = true
      SplashScreen.hide()
    })
  }
}

I must add that in my home.page.ts I make an http request to obtain the content that will be displayed

so the splash screen helped me to make that wait, and thus not overload the interface of so many loaders. In almost everything, if the request fails, the splash screen will always disappear but showing an error message (that has a “display: none” in my home.page.html)