CODEWITHSUNDEEP
javascriptangularionic-frameworkionic4
Dexter
Dexter

Reputation: 528

Unable to set the Animated splash screen using Ionic 4+

What i need : Animated splash screen to be displayed when app is opening.

What i did : i took the below video as ref https://www.youtube.com/watch?v=-c0htV-kfm8 and added in below code and instead of animated splash screen i am getting normal default splash screen only .

code:

   <ion-app>
  <div #customOverlay><img src="http://cdn.osxdaily.com/wp-content/uploads/2013/07/dancing-banana.gif" [hidden]="!splash">
  </div> 
  <ion-router-outlet [hidden]="splash"></ion-router-outlet>
</ion-app>

.ts code

          splash = true;
  @ViewChild('customOverlay',{static:false})customOverlay:ElementRef;
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      setTimeout(function(){
       this.splash = false;
       this.customOverlay.nativeElement.style.display = 'none';     
      }, 3000);

    });
  }

**Config.xml**



   <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="0" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="none" />
    <preference name="SplashScreenDelay" value="0" />

any suggestions ?

Upvotes: 4

Views: 1609

Answers (2)

Alyson Xavier Leite
Alyson Xavier Leite

Reputation: 86

Install the packages

ionic cordova plugin add cordova-plugin-lottie-splashscreen
npm install @ionic-native/lottie-splash-screen --save
ionic cordova plugin add cordova-plugin-androidx-adapter

Now add to /src/app/app.module.ts

import { LottieSplashScreen } from '@ionic-native/lottie-splash-screen/ngx';

and providers too.

providers

Now you need to download a json from lottiefiles.com, inside your src/assets folder.

loading.json

Ex: https://lottiefiles.com/43846-butterfly-loader

Add in config.xml:

<preference name="LottieAnimationLocation" value="www/assets/loading.json" />
<preference name="LottieFullScreen" value="true" />
<preference name="LottieLoopAnimation" value="true" />

enter image description here

Now you need to hide the splash screen. Add this.lottieSplashScreen.hide() to app.component.ts

app.component.ts

Run the app on your device

ionic cordova run android --device

ionic serve does not work for this case

Upvotes: 2

Ruben Miquelino
Ruben Miquelino

Reputation: 1117

Check Josh Morony tutorial about this. I used it in the past and it worked.

Here is the link for reference: https://www.joshmorony.com/creating-an-animated-splash-screen-in-ionic/

Upvotes: -1

Related Questions