FullStack Labs

Please Upgrade Your Browser.

Unfortunately, Internet Explorer is an outdated browser and we do not currently support it. To have the best browsing experience, please upgrade to Microsoft Edge, Google Chrome or Safari.
Welcome to FullStack Labs. We use cookies to enable better features on our website. Cookies help us tailor content to your interests and locations and provide many other benefits of the site. For more information, please see our Cookies Policy and Privacy Policy.

Airbnb's Lottie: After Effects Animations and React Native

Written by 
Yeison Betancourt
Mid-Level Software Engineer
Airbnb's Lottie: After Effects Animations and React Native
blog post background
Recent Posts
Getting Started with Single Sign-On
Choosing the Right State Management Tool for Your React Apps
Accessibility in Focus: The Intersection of Screen Readers, Keyboards, and QA Testing

For this tutorial, we’re going to create a project in React Native to integrate some animation with Lottie. Lottie is a library from Airbnb that is used in different platforms such as React Native to include Adobe After Effects animations exported as JSON. For more information, you can check out its official documentation at airbnb.io/lottie.

Table of contents

1. Create React Native project

Assuming that you have the environment ready to create a project with React Native Cli, you’re going to use the next command to create an app with a template of typescript:

npx react-native init LottieApp --template react-native-template-typescript

To start metro, run the next command in React Native project folder:

npx react-native start

To start the app, run the next command in other terminal:

npx react-native run-ios / npx react-native run-android

2. Install Lottie library 

To install the library, you have to install the dependencies and set up the environment for iOS and Android. In order to do it follow the following instructions:

a. Install lottie-react-native and lottie-ios (3.1.8):

npm i --save lottie-react-native
npm i --save lottie-ios@3.1.8

Then go to your iOS folder and run:

pod install

b. Now that you have installed the library and everything looks good, we have to import the library in the view that you want. In this tutorial we’re going to use our main view, App.tsx

Before using the library, you have to know how to use it and which components you have available, you can find this information in the API documentation.

API documentation table

3. Create or download the Lottie example

You can create your own animation using Adobe After Effects animations exported as JSON with Bodymovin and then export it as JSON to be used in the project. Or you can download some examples from the official page LottieFiles.

For this tutorial we’re going to use an animation from the website Lottiefiles. Download the following as a Lottie JSON:


4. Add Lottie into the project

Now that we have our animation, move it to a new folder in the project. We’re going to move the file to the next route: 


Rename the file to software-development.json and save it.

5. Integrate the library into the project

To integrate this library you have to import it:

import LottieView from 'lottie-react-native';

And then to use this component, we just need to use it:

-- CODE language-jsx keep-markup --

={(ref) => (animation = ref)}



We’re going to make some changes in our file App.tsx to include this component and update the design of the screen.

-- CODE language-jsx keep-markup --
 * Sample React Native App
 * https://github.com/facebook/react-native
 * Generated with the TypeScript template
 * https://github.com/react-native-community/react-native-template-typescript
 * @format

React, {useEffect} from 'react';

{SafeAreaView, StyleSheet, View, Text, StatusBar} from 'react-native';

{Colors} from 'react-native/Libraries/NewAppScreen';

LottieView from 'lottie-react-native';

App = () => {

animation: any;
  useEffect(() => animation.play());


      <statusbar barstyle="dark-content"></statusbar>

      <safeareaview style="{styles.safeArea}"></safeareaview>

        <view style="{styles.sectionTitle}"></view>

          <text style="{styles.title}">React Native & Lottie</text>


          ref={(ref) => (animation = ref)}





styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: Colors.white,
  sectionTitle: {
    position: 'absolute',
    top: 100,
    right: 0,
    left: 0,
  title: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
    textAlign: 'center',



6. Enjoy it...

Gif example

Using techniques like what is listed above, here at FullStack Labs we have had the opportunity to address our clients’ concerns and they love it! If you are interested in joining our team, please visit our Careers page.

Yeison Betancourt
Written by
Yeison Betancourt
Yeison Betancourt

I've always liked everything about computers. I decided to become a software developer because I realized I could do more than simply use them, but also create with them. I love finishing an application and seeing all the things that I dreamed become real — and better yet, watch as it is used by others. I've helped car companies speed up the process of acquiring and selling inventory, gamers buy access to games with cryptocurrency, and banks run their branches. My favorite language is JavaScript because it has so many excellent frameworks, like React, React Native, Angular, and Node, which can be used to create just about anything imaginable. In my free time I love to listen to music, watch movies on Netflix, and play games on my Nintendo Switch.

People having a meeting on a glass room.
Join Our Team
We are looking for developers committed to writing the best code and deploying flawless apps in a small team setting.
view careers
Desktop screens shown as slices from a top angle.
Case Studies
It's not only about results, it's also about how we helped our clients get there and achieve their goals.
view case studies
Phone with an app screen on it.
Our Playbook
Our step-by-step process for designing, developing, and maintaining exceptional custom software solutions.
VIEW OUR playbook
FullStack Labs Icon

Let's Talk!

We’d love to learn more about your project.
Engagements start at $75,000.