In this tutorial we will learn how to use Lottie In React Native NPM with the help of some examples.

What is Lottie in React Native?

Lottie is a mobile library for android and IOS apps in React native. It parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively on mobile.

Installing

First install the lottie library by running the following command in your project’s terminal.

yarn add lottie-react-native
yarn add [email protected]

or

npm i --save lottie-react-native
npm i --save [email protected]

or

Go to ios folder and run:

pod install

Lottie Example In React Native Project

Following is the example of lottie in React Native project. You can follow the above steps to use the lottie animation in your RN project.

Download Lottie Files

Before use the lottie animation, you have to download lottie JSON file from the lottie website and put the downloaded file into your project’s any folder. Here I am putting my file into assets folder. And I changed the name due to easy access as shown in the below image. You can download and put more json lottie file here.

Using a lottie circular indicator as shown in the below screenshot. To use any lottie animation JSON file, just download it and paste into a folder in your project then provide the source path of the file as in below code.

<LottieView source={require('../assets/lottie.json')} autoPlay loop />

Full code is below:

In the below example we created an example to use a circular indicator from lottie library.

import React, { Component, } from 'react';
import { View} from "react-native";
import LottieView from 'lottie-react-native';


export default class TestClass extends Component {
    render() {

        return (
            <LottieView source={require('../assets/lottie.json')} autoPlay loop />
        );
    }
}

Result

Jumping Gift Boxes Example

import React, { Component, } from 'react';
import { View, StyleSheet, Image, Text, Pressable, Modal, } from "react-native";
import LottieView from 'lottie-react-native';


export default class TestClass extends Component {
    render() {
        return (
            <LottieView source={require('../assets/89021-jumping-gift-boxes.json')}/>
        );
    }
}

You can use more lottie animations from its website. To use any animation, first download it from its website then use in any React Native project as we used in the above example.

Thank you for visiting the tutorial on FlutterTPoint. For any issue you can comment in the comment section below. And please visit more useful React Native tutorials from here.