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.
Upgrade

Airbnb's Lottie Library: Adobe After Effects Animations and React Native

Written by 
Yeison Betancourt
,
Mid-Level Software Engineer
Airbnb's Lottie Library: Adobe After Effects Animations and React Native
blog post background
Behind the Scenes: React Hooks API
How DRM Affects Right to Repair Hardware / Software
How To Set Up a Productive Work- From-Home Development Office

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:

https://lottiefiles.com/41545-software-development

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: 

	
src/animations
	

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
={(ref) => (animation = ref)}

 source={require('./src/animations/software-development.json')}

/>

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
*/

import
React, {useEffect} from 'react';

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


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


import
LottieView from 'lottie-react-native';


const
App = () => {

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

  return
(
    <>

      <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)}
          source={require('./src/animations/software-development.json')}
        />

      

    </>

  );

};

const
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',
  },

});

exportdefault
App;

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.

FullStack Labs Icon

Let's Talk!

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

company name
name
email
phone
Type of project
How did you hear about us?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.