Two splash screen showing first from android and then ionic capacitor

Capacitor
1

I am using capacitor With IONIC 4 ,
On android devices The splash screen loading two times.First from android and then Ionic Capacitor.
How can i fix this problem.

2

could share your code app component.ts

3

Hi yes,

import { Component } from ‘@angular/core’;
import { Platform } from ‘@ionic/angular’;
import { StatusBar } from ‘@ionic-native/status-bar/ngx’;
import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;

@Component({
selector: ‘app-root’,
templateUrl: ‘app.component.html’
})
export class AppComponent {
constructor(
private platform: Platform,
private statusBar: StatusBar,
private splashScreen: SplashScreen
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
setTimeout(() => {
this.splashScreen.hide();
}, 500);
});
}
}

First android show splash screen this ionic show so loading two times.
Note i am using capacitor not cordova

4

check your config.xml file, may be platform android -> two splash screen tags

splash density=“port-hdpi” src=“resources/android/splash/drawable-port-hdpi-screen.png” />
splash density=“port-ldpi” src=“resources/android/splash/drawable-port-ldpi-screen.png” />

5

where is config file… i think its come when we use cordova not when we use capacitor

6

Hi, I am after some guidance here too, I am also using capacitor :

Yeah config files are not created by default in Ionic 4 / Capacitor apps.

In app.module.ts I have removed the @ionic-native/splash-screen/ngx import.
In app.module.ts I have removed the splash screen provider.
In app.component.ts, I have removed code related to splashscreen.

After building the app in android studio, both splash screen still show up…

I my Android build folder, in the android manifest, I have tried removing
android:theme="@style/AppTheme.NoActionBarLaunch"
This only makes the first splashscreen blank and the second splashscreen still shows up.

I managed to hide the second splashscreen as soon as the app starts by doing this in app.component.ts :

import { Plugins } from ‘@capacitor/core’;
const { SplashScreen } = Plugins;

//…//

ngOnInit() {
SplashScreen.hide({
fadeOutDuration: 0
});
}

In all scenarios, the second splash-screen shows up with a short fade from white which makes the screen flicker, and is not not very elegant.

It is not possible to set a default fadeInDuration in capacitor.config.json,
I have tried using

ngOnInit() {
SplashScreen.show({
showDuration: 0,
fadeInDuration: 0,
autoHide: false
});
SplashScreen.hide({
fadeOutDuration: 0
});
}

After building in android studio, the second splasg screens hides quickly after the short fade-in.

Any thoughts anyone ? :thinking:

7

You find any solution ??

8

Hi

i am using the ionic4 app its navigated the main page in baground but its still splash is displaying ho can i use this i am using with capacitor

any solution?

9

Hi

i am using the ionic4 app its navigated the main page in baground but its still splash is displaying ho can i use this i am using with capacitor

any solution?

10

i the above one is working

11

have you found any solution for this ? please help me I facing this issue in android capacitor app