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 :-
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.
|
1
|
npm i —save lottie–react–native
|
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 :-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
package com.project1;
import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
import com.airbnb.android.react.lottie.LottiePackage;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings(“UnnecessaryLocalVariable”)
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
packages.add(new LottiePackage());
return packages;
}
@Override
protected String getJSMainModuleName() {
return “index”;
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
}
/**
* Loads Flipper in React Native templates. Call this in the onCreate method with something like
* initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
*
* @param context
* @param reactInstanceManager
*/
private static void initializeFlipper(
Context context, ReactInstanceManager reactInstanceManager) {
if (BuildConfig.DEBUG) {
try {
/*
We use reflection here to pick up the class that initializes Flipper,
since Flipper library is not available in release mode
*/
Class<?> aClass = Class.forName(“com.project1.ReactNativeFlipper”);
aClass
.getMethod(“initializeFlipper”, Context.class, ReactInstanceManager.class)
.invoke(null, context, reactInstanceManager);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
}
}
|
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.
|
1
2
|
include ‘:lottie-react-native’
project(‘:lottie-react-native’).projectDir = new File(rootProject.projectDir, ‘../node_modules/lottie-react-native/src/android’)
|
Source Code of my settings.gradle file :-
|
1
2
3
4
5
6
|
rootProject.name = ‘project1’
apply from: file(“../node_modules/@react-native-community/cli-platform-android/native_modules.gradle”); applyNativeModulesSettingsGradle(settings)
include ‘:app’
include ‘:lottie-react-native’
project(‘:lottie-react-native’).projectDir = new File(rootProject.projectDir, ‘../node_modules/lottie-react-native/src/android’)
|
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.
|
1
|
react–native link lottie–react–native
|
6. Now in the final step we have to clean our Android Gradle. So excute below command to clean your gradle file.
|
1
|
cd android && gradlew clean && cd..
|
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.
|
1
|
npm i —save lottie–ios@3.1.8
|
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.
|
1
|
cd ios pod install
|
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 :-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
import React, { useRef, useEffect } from ‘react’;
import { SafeAreaView, StyleSheet, View, Text } from ‘react-native’;
import LottieView from ‘lottie-react-native’;
export default function App() {
let animationRef = useRef();
useEffect(() => {
animationRef.play();
}, []);
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.MainContainer}>
<Text style={styles.text}> Lottie Component in React Native Android iOS Example </Text>
<LottieView
ref={(animation) => {
animationRef = animation;
}}
source={require(‘./lottie_animations/world-loading.json’)}
autoPlay
loop
style={{
width: 300,
height: 300,
}}
resizeMode=‘cover’
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
padding: 10,
//justifyContent: ‘center’,
alignItems: ‘center’
},
text: {
fontSize: 24,
textAlign: ‘center’,
},
});
|
Screenshots :-
Also Read :
Example of Insert Data Into SQLite Database in React Native
React Native Check Value Is Number Or Not Using isNaN() Validation
React Native Show Progress bar While Loading WebView Android iOS
React Native Vertical ScrollView Android iOS Example Tutorial
React Native Create Beautiful Social Icons Button using React Native Elements Example Tutorial
