Fix issue where you see a blank screen after your splash screen disappears.
1) Install the plugin and the Ionic-Native wrapper:
$ ionic plugin add cordova-plugin-splashscreen
$ npm install --save @ionic-native/splash-screen
2) Amend 'config.xml':
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="30000"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="FadeSplashScreen" value="false"/>
3) Import SplashScreen in your 'app.module.ts' providers section:
import { SplashScreen } from '@ionic-native/splash-screen';
@NgModule({
declarations: [...]
imports: [IonicModule.forRoot(MyApp)],
bootstrap: [IonicApp],
entryComponents: [...],
providers: [SplashScreen, ...]
})
export class AppModule {}
4) In your 'app.component.ts':
import { SplashScreen } from '@ionic-native/splash-screen';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
constructor(
public _app: App,
public _platform: Platform,
public _SplashScreen: SplashScreen) {
this.initializeApp();
}
5) Then in 'initializeApp()':
initializeApp() {
this._platform.ready().then(() => {
// do whatever you need to do here.
setTimeout(() => {
this._SplashScreen.hide();
}, 100);
});
}
Conclusion:
This will make the splash screen hiding entirely dependent on the platform being ready firing, then the timeout is a little extra safeguard against the flashing. Leave the 'config.xml' setting to a ridiculously high number, don't touch it.
Hope this helps, Cheers.
Source: https://ionicframework.com/docs/v2/native/splash-screen/
Comments: