How to Add Beautiful Lottie Splash Sceen to Ionic App

Lottie Library is one of the beautiful animation library made my engineers at Airbnb. Lottie Animations render as fast and support cross-platform.

You can create new animation using adobe after effects and render them to your app or web using Lottie, or you can use thousands of existing animations available on https://lottiefiles.com

So, one random day I found this library while working on one of the ionic app, and i thought of using it and the result was amazing. The app looks so good with the fast loading animation. Sidenote: I was using gif before :P

Later, I thought why not use it as the splash screen instead of the boring static splash screen. So, I googled and say the doc mentioned on the ionic website. But the doc is incomplete and I got into a lot of troubles and error. After spending my hard time debugging and reading the actual Github doc, I finally get it working.

You can always clone the project from github@ https://github.com/prashant9912/Lottie-Ionic-SplashSceen

Install the packages

run

ionic cordova plugin add cordova-plugin-lottie-splashscreen

npm install @ionic-native/lottie-splash-screen

After running these 2 lines in the ionic home directory you need to run

npm install @ionic-native/lottie-splash-screen

ionic cordova plugin add cordova-plugin-androidx-adapter

This will make sure that you won’t get android.support.v4.os.ResultReceiver error while building.

For iOS user, you need to run

sudo gem install cocoapods
pod setup

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

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

and providers too.

Next, we need to download our favorite animation from lottiefiles.com, inside your src/assets folder.

Now open config.xml file and edit the file

<preference name=”SplashScreen” value=”screen” /> to <preference name=”SplashScreen” value=”none” />

Now to display the lottie splash screen add

<preference name=”LottieAnimationLocation” value=”www/assets/loading.json” />

<preference name=”LottieFullScreen” value=”true” />

<preference name=”LottieLoopAnimation” value=”true” />

Now we need to hide the splash screen as soon the app loads. so, we need to add this.lottieSplashScreen.hide() to app.component.ts

I’ve added setTimeout function with 4sec delay just to enjoy the beautifully animated splash screen.

And here is the end product

You can clone the project from github @ https://github.com/prashant9912/Lottie-Ionic-SplashSceen