How to configure and use LottieFiles in React Native

Introduction

So the first question comes in mind that what is LottieFiles. LottieFiles is an animation library developed by Airbnb and have a vast community of open source animators. They provide highly efficient Adobe AfterEffect animations converted into JSON form so that anyone can use these beautiful animations for free on iOS and Android.

So in this tutorial, we will walk through how to configure and use LottieFiles in React native app.

So let’s have look on some of beautifully designed LottiFiles animations

Looti Files Animations
Lotti Files Animations

Up and Running Lottie Files in React Native

LottieFiles wrapper for React Native wrote Airbnb and now it is managed by React Native community, the repo, and official docs can be found at:

https://github.com/react-native-community/lottie-react-native

Read More Read Native Tutorials

This Tutorial used libraries and their versions

├─ @react-native-community/cli@1.4.6
├─ lottie-react-native@2.6.0
├─ metro-react-native-babel-preset@0.53.1
├─ metro-react-native-babel-transformer@0.51.0
├─ react-native-safe-module@1.2.0
└─ react-native@0.59.1

Create a New React Native APP

react-native init LottieFilesTut

cd LottieFilesTut

Install LottiFiles in Project

yarn add lottie-react-native

or

npm install lottie-react-native 

Link LottiFiles

react-native link lottie-react-native

or

you can do menual linking if require

Setting Up LottiFiles Animation in React Native

For this example, I am going to use Thumbs up animation from LottiFiles you can use any JSON animation file to download JSON animation from LottiFiles.com you need to follow these simple steps

  • Sign in or Sign up in LottiFiles.com
  • Select any animation
  • set animation speed if require
  • Click on the download JSON file

After Download create “assets” folder in your root directory of your react native project and place your downloaded JSON file there

Now in your App.js file copy and paste the following code

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

import Animation from 'lottie-react-native'

import thumbsupAnimation from './assets/5000-thumbs-up.json'


export default class App extends Component {

  componentDidMount(){
    this.animation.play()
  }

  render() {
    return (
      
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to Lottie Animations by OS Authority :-)</Text>
        <View>
          <Animation
            ref={animation => {
              this.animation = animation;
            }}
            style={{
              width: 200,
              height: 200
            }}
            loop={true}
            source={thumbsupAnimation}
          />
        </View>

      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  welcome: {
    fontSize: 25,
    textAlign: 'center',
    margin: 10,
    color: '#000'
  }
});

Now if you run

react-native run-android

or

react-native run-ios

you should see the following screen

react native lottifiles test screen

Download Source Code

The full source code for this example can be found at

https://github.com/Muhammad-Iqbal/React-Native_LottiFilesTut

Add Comment

one × 2 =