React Native Lottie Animation NPM Package Android iOS Example

Hello Friends, It’s been few days since I had posted a new react native tutorial. Tomorrow while working for my company’s react native project. I had seen a NPM package called as Lottie for React Native, iOS, and Android. This package is used to implement amazing stunning animations in react native for both Android and iOS platforms. When I learn more about this plugin what I had seen is that there are animation sites for particular this package with prebuild thousands of animation. All the animation is ready to use without in your react native application. So I thought this would be a great opportunity for all of my viewers. So friends in today’s tutorial we would learn about How to Use React Native Lottie Animation NPM Package in Android iOS Example.

Note:- In Lottie animations we have to use Animated JSON file. You can download the animation JSON File from lottiefiles.com. This website contain hundreds of animations which you can use directly in your project. I’m using World Animation downloaded from L K Jing Page on Lottie Files website. So let’s get started 🙂 .

Live Screenshot of Animation :-

React Native Lottie Animation NPM Package Android iOS Example

Contents in this project React Native Lottie Animation NPM Package Android iOS Example :-

1. Configure Lottie in Android :-

1. The first step is to download and install React Native Lottie Animation NPM package in your react native project. So first open your project Root directory in Command Prompt in Windows and in Terminal in MAC. Now execute below command.

Screenshot of CMD :

Screenshot After done installation:

2. Now Open Your_React_Native_Project -> android -> app -> src -> main -> java -> com -> project Name -> MainApplication.java file in any code editor.

  • Add import com.airbnb.android.react.lottie.LottiePackage; package name.
  • Add packages.add(new LottiePackage()); in List<ReactPackage> getPackages() code block.

Source code of my MainApplication.java file :-

3. Again open Your_React_Native_Project -> android -> app -> build.gradle file and put below code.

  • Add implementation project(':lottie-react-native') in dependencies block.

4. Again open Your_React_Native_Project -> android -> settings.gradle file and add below code.

Source Code of my settings.gradle file :-

5. Now we have to open your react native project root directory in CMD and execute below link command to link the project automatically to Lottie library.

6. Now in the final step we have to clean our Android Gradle. So excute below command to clean your gradle file.

here you go now our Lottie project is ready to use.

7. Now GoTo lottiefiles.com and download your desired animation JSON file which you want to use in your project. Now make a folder named as lottie_animations in your react native project.

8. Now put your downloaded animation JSON file in the folder. We would call this animation file in our project.

Now friends our project is successfully configured for Android.

2. Configure Lottie in iOS :-

1. Open your react native project in Terminal and execute below command to download and install Lottie package.

2. Now we have to link the project in iOS manually.

3. Now we have to install Pods in our iOS directory in react native.

4. Now follow the Android installation guide Step 7 and Step 8 in which we would create folder for our animation file.

3. Start Coding for App :-

Complete Source Code for App.js file :-

Screenshots :-

React Native Lottie Animation NPM Package Android iOS Example

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *