Get my new tutorials in your inbox every week

React Native Lottie animations

I have been experimenting with React Native apps and how to run motion graphic animations inside such apps for some time now. And that’s where I came across the fantastic library called Lottie. If you are wondering how to integrate awesome motion graphics in your React Native mobile app, then Lottie is the answer. This tutorial will walk you through how to get started with Lottie animations for React Native iOS Apps. For Android, I will come up with a separate post sometime later.

TLDR;

What is Lottie?

Let’s hear it from the creators of Lottie…

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Airbnb

You can read and explore more about Lottie from its official page. Let’s see an example below,

This is what Lottie can do to your mobile applications

How does it work?

  1. Using BodyMovin plugin you can export your Adobe After Effects animations to a JSON file.
  2. This exported JSON data can then be rendered as motion graphic animation inside your React Native app using the Lottie library.

Where do I get the animations?

Well, you can either higher a designer who knows Adobe After Effects or you can download these animations for free from this website called Lottiefiles. For this tutorial, I am using free downloaded files from Lottiefiles.

Why not GIF’s or Videos?

Simple answer – They are too heavy and will make your app size grow. Lottie files are JSON and hence lightweight.

Alright, without wasting much time lets get started with our tutorial for integrating Lottie animations into our React Native app. First things first, What do you need?

The Setup

You are writing React Native mobile apps and of course, you need to have your React Native development tools set up on your computer. I will not go into the details of it. You can surely find everything on the web, official RN site or you can also go through one of my presentation slides.

I am excited, let’s get to the point…

Alright, let’s create an app from scratch and go through the steps. You can also find these instructions from the official Git repo.

Create a new React Native project

react-native init LottieTry

once done, cd into your project directory

cd LottieTry

Install React Native Lottie

yarn add lottie-react-native
yarn add [email protected]

Go to your ios folder (inside /LottieTry)

cd ios/

Install necessary pod dependencies

pod install

This will install the React Native module pods for lottie-ios and lottie-react-native. Once done it will also link all the native dependencies. So no need to do “react-native link lottie-react-native” separately.

Now you can go ahead and launch your RN app,

Open LottieTry/ios/LottieTry.xcworkspace
Hit the Run button

So far so good, but there is one last step that needs to be done or else you might get this error while building the app from XCode (I got it…)

clang: error: linker command failed with exit code 1 (use -v to see invocation)

Follow the steps mentioned below to fix this error.

1. Open the XCode project, and under targets select LottieTry. See the image below

lottie for react native

2. Select the Build Settings tab and search for “library search paths”. Refer to the image below,

react native lottie

3. Under Library Search Paths, add the following to Debug and Release. Double click to open the dialog.

$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)

Refer the screenshots below,

linking issue fix for lottie react native
linking issue fix for lottie

Now clean the project and build or run again. The linking error should be gone now.

At the time of writing this tutorial, these are the versions that I had,

  • react-native – 0.60.5
  • react-native-cli – 2.0.1
  • lottie-react-native – 3.1.1
  • NodeJS – v8.10.0
  • npm – 5.6.0
  • yarn – 1.10.1
  • XCode – 10.1

Need not worry, it should work with the versions you are having unless there are breaking changes. I would recommend reading the official docs. Still, having issues with your set up, give me a shout in the comments section.

Let’s write some code and build our animated app

Now that our app is up and running, let’s integrate our first Lottie animation. For this tutorial, I am using this car animation from Lottiefiles. Go ahead and download the JSON file and save it in a folder called assets inside the LottieTry RN project.

add the json file inside assets folder

Next, import the lottie-react-native module in your App.js file

import LottieView from 'lottie-react-native';

And then declare the component inside your render() function,

<LottieView source={require('./assets/car.json')} autoPlay loop style={{height: 200}}/>

You can use props such as autoPlay, loop to customize your animation. You can even add styles such as height, width, backgroundColor, etc. Basically all the styles that you can apply to a View component can be applied to LottieView. Some examples below,

<LottieView 
  source={require('./assets/car.json')} 
  autoPlay 
  loop 
  style={{
    height: 400,
    backgroundColor: 'red'
  }}/>

You can also use absolute positioning to place your Lottie animation

<LottieView 
  source={require('./assets/car.json')} 
  autoPlay 
  loop 
  style={{
    position: 'absolute',
    bottom: 0,
    height: 200,
    backgroundColor: 'yellow'
  }}/>

See the full list of props and methods from the official document. So now you should have the car animation running inside your View.

car animation lottie
Our car animation

Check the full source code below,

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

const App = () => {
  return (
    <Fragment>
      <SafeAreaView style={styles.container}>
        <StatusBar barStyle="dark-content" />
        <View style={styles.body}>
          <Text>This is a Car Animation</Text>
          <LottieView source={require('./assets/car.json')} autoPlay loop style={{height: 400}}/>
        </View>
       </SafeAreaView>
    </Fragment>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  body: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 15
  },
  
});

export default App;

You can play around with the code, add multiple Lottie JSON in your view and try to position them. Use a ScrollView and see what happens. Fork my git repo which has this example.

Github repo

https://github.com/jsphkhan/ReactNativeTry/tree/master/LottieTry

I will soon start writing more tutorials on React Native. Till then, chow!!

If you are looking to run Lottie animations for your React web application, you can read this tutorial which covers all the steps. It includes source code and demo.

Write a Comment

Your email address will not be published. Required fields are marked *