How To Create Animations With Lottie-React-Native

Display beautiful animations in your React Native app

Photo by Ishan @seefromthesky on Unsplash.

So you’ve built a breathtaking animation using After Effects and you want to show it off to the world. One method to do so is to use it as a splash screen or a loader component in your app. But there’s one minor problem: Adobe doesn’t allow you to do that.

This is where lottie-react-native comes in. This library allows you to render your animations in your React Native app. The best part? It takes a minimal amount of code to help you get up and running.

In this article, you will learn how to integrate the lottie-react-native library into your project. This will be the outcome:

Result of this article

Now that we have talked about its advantages, let’s get started!

Getting Started

Project initialization

In this article, we will use Expo for our project. To initialize a React Native app, run the following terminal command:

expo init lottie-tutorial

Installation of dependencies

We need the following modules:

• lottie-react-native — To create our animations.
• lottie-ios — Peer dependency to help render graphics on iOS.

npm install lottie-react-native lottie-ios@3.18

When that’s done, we will get our required assets.

Asset files

You can use your own animations by exporting them with the Bodymovin plugin. But for this guide, we will use the Lottie Files directory. It includes a ton of free animations that you can import into your project. For now, we will use the Lava Preloader and the Switch Toggle animations.

To get these assets, download your desired files in JSON format: