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:
<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
<item name="android:background">@null</item>
</style>
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).
"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)
Hi everyone,
Has anybody solved this issue?
I am experiencing the exact same problem @Nsimoncini.
SplashScreen -> white flash -> SplashScreen with Spinner.
Using Ionic 5 with React and Capacitor. This is my capacitor.config
"SplashScreen": {
"launchAutoHide": false,
"launchShowDuration": 20000,
"androidSpinnerStyle": "large",
"spinnerColor": "#02ff00",
"showSpinner": true
}
Below how it looks like
Your solution fixed my problem. Thanks 
Using a timer is not a great solution as it depends on how long it takes to load.
Database / device / connection speed.
You are better off calling SplashScreen.hide(); after you data has loaded.
Even if it’s too late I use it like that:
SplashScreen.hide({
fadeOutDuration: 500,
});