Adding an animated loader and splash screen in a React Native app

In this article, we will see how to implement a Lottie animation in a React Native app. Lottie is an open source animation file format that’s tiny, high quality, interactive, and can be manipulated at runtime. Lottie animations are mainly used for loader screen or as a start screen.

So, let's add a Lottie animation to our React Native mobile app.

Example

Go to the official Lottie animation website and download Lottie JSON.

Link to animation that I am going to use −

https://lottiefiles.com/74546-character-02# /

Name the JSON file "myloader.json" and keep it at the same level as App.js.

Now install the lottie-react-native package

npm i --save lottie-react-native

Lottie library will be used to add lottie-animation’s JSON file to your React Native App.

To add the downloaded animation, first import LottieView from lottie-react-native.

Next, insert the following lines of code in App.js −

import React from 'react';
import LottieView from 'lottie-react-native';

const App = () => {
   return (
      
         
      
   );
}

export default App;

In source attribute of LottieView, you need to give the path to the JSON of your downloaded lottie JSON file to implement that animation.

Output

On execution, it will produce the following output −