How to Integrate Lottie View Animations into React Native

 

Companies like Microsoft, Facebook, Instagram, and Tesla have adopted this tool to develop their applications, and for this reason, React Native is one of the most popular frameworks at the moment. React Native is an open-source technology developed by Facebook to build native, cross-platform mobile apps from the same code base written in JavaScript and React.

 

What does this mean? This solves the typical problem of creating an app, which can run on both Android and iOS, without having two separate projects in two programming languages, something that has become typical in app development.

 

React Native allows you to create mobile applications using React but it is not the same React for the web but a React focused on apps, this means that when you develop, although you can use many React concepts such as components, state handlers, and others, you no longer it will use HTML elements if not, now it will use them with native mobile interface elements.

 

How to use Lottie to embed animations in a React Native app

 

Lottie is a library to create display animations with json files. Its popularity has increased in recent years so several major companies are already using it to integrate animations into their applications.

 

First, we need to create a React Native project. In the terminate, run the following command:

 

npx react-native init lottie
cd lottie

 

Next, the Lottie npm package for React Native is installed:

 

npm i lottie-react-native

 

Once you have the package installed, go to the official Lottie website: https://lottiefiles.com/ and you are going to click on the “discover” section and then on “free animations” (it should be noted that before downloading any animation, you must register first), then you just select the animation you want to use in your application.

 

Lottie has two types of animations: the free ones and those accessible to paid users, something to keep in mind.

 

After having selected the application that you want to integrate with the React Native application, click on download and download it with a json file, ideal to use in your application. Then put this file into the project.

 

Run your React Native app with the following command:

 

npm run Android

 

While the app is running, include the following code in App.js:

 

import React from 'react';
import {SafeAreaView, Text, View} from 'react-native';
import LottieView from 'lottie-react-native';

const App = () => {
  return (
    <SafeAreaView>
      <Text>Lottie View Animation</Text>
    </SafeAreaView>
  );
};

export defaultApp;

 

Then, in the same App.js, include the Lottie animation:

 

<View style={{height: 400, width: 400}}>
 <LottieView source={require('./lottie.json')} autoPlay loop />
 </View>

 

You will notice that the animation will start playing in the emulator and it will play for an indefinite amount of time, so to make sure it only plays once, you will use the useRef and useEffect hooks to make it play for three seconds while the animation is playing. application is loading.

 

Also, in this example, we used the Animated module and created a function that will make the animation play only once and then created a variable called progress to use in the LottieView component.

 

The App.js code will be this:

 

import React, {useEffect, useRef} from 'react';
import {SafeAreaView, Text, View, Animated} from 'react-native';
import LottieView from 'lottie-react-native';

const App = () => {
  const progress = useRef(new Animated.Value(0)).current;

  const handleLikeAnimation = () => {
    Animated.timing(progress, {
      toValue: 1,
      duration: 3000,
      useNativeDriver: true,
    }).start();
  };
  useEffect(() => {
    handleLikeAnimation();
  }, []);

  return (
    <SafeAreaView>
      <Text>Lottie View Animation</Text>
      <View style={{height: 400, width: 400}}>
        <LottieView
          progress={progress}
          source={require('./lottie.json')}
        />
      </View>
    </SafeAreaView>
  );
};

export defaultApp;

 

And in this way it was possible to integrate a Lottie animation within a React Native application, giving it a dynamic touch and improving the user experience every time they visit our application.

 

We recommend you on video