How to Add Beautiful Animations in your App using React Native Lottie

React Native Lottie is a library that parses Adobe After Effects animations exported as JSON and renders natively in your react native app. This library reduces a lot of development time when you are adding animations in your app. In this blog post let’s see how to add animations in your app using react native lottie.

I am using a react native version greater than 0.60.0 and hence I just need to install the library and the linking will occur automatically. Install the react native lottie library using the following commands:

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

If you are using some other versions of react native then check out the installation instructions from here.

Now, you need Adobe After Effects animations as JSON. Go to https://lottiefiles.com/ which is a cool website with designers who provide free animations as JSON. You just need to create an account there and download the animation as JSON.

Create a folder named animations and paste the JSON file in it. Now, paste the following code in your App.js.

import React from 'react';
import {View, StyleSheet} from 'react-native';
import LottieView from 'lottie-react-native';
import task from './animations/task.json';

const App = () => {
  return (
    <View style={styles.container}>
      <LottieView source={task} autoPlay loop />
    </View>
  );
};

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

export default App;

The output of the react native lottie example is as given below: