Lottie Animations in React Native

Introduction

Welcome to this tutorial where we will explore utilizing Lottie animations in your React Native projects, with the help of detailed examples.

Lottie is an open-source animation tool that makes it simple for designers and programmers to make engaging and interactive animations. It makes it possible to employ scalable, high-quality vector animations that can be easily integrated into a variety of platforms, such as iOS, Android, and the web.

Developers can improve user experiences by including great animations into their applications using Lottie files.

With this link, you can navigate LottieFiles, search and download your Lottie animation file!

So, let's dive in and discover the magic of Lottie!

Creating Project

npx create-expo-app react-native-lottie

Next, navigate to the project directory:

cd react-native-lottie

Installing Dependencies

To use Lottie Files in our project, we should install lottie-react-native

npx expo install lottie-react-native

Starting the Emulator:

To start the emulator, run the command:

npx expo start

The emulator is up and running!

Implementation

For this example, we will use a paper-plane animation file. You can download it here
Download the .json lottie file and copy it into your project!

// ./App.js
 
import { View } from 'react-native';
import LottieView from 'lottie-react-native';
import React, { useRef } from 'react';
 
export default function App() {
 
  const animation = useRef(null);
 
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <LottieView
        autoPlay
        ref={animation}
        style={{
          width: 300,
          height: 300,
        }}
        source={require('./9844-loading-40-paperplane.json')}
      />
    </View>
  );
}

It is animating now!

You can control the animaton with useRef

animation.current?.reset();
animation.current?.play();

To adjust the size, modify the width and height properties of the LottieView component or utilize the device width for a full-fit.

// ./App.js
 
import { View, Dimensions } from 'react-native';
import LottieView from 'lottie-react-native';
import React, { useRef } from 'react';
 
export default function App() {
 
  const windowWidth = Dimensions.get('window').width;
 
  const animation = useRef(null);
 
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <LottieView
        autoPlay
        ref={animation}
        style={{
          width: windowWidth,
          height: windowWidth,
        }}
        source={require('./9844-loading-40-paperplane.json')}
      />
    </View>
  );
}

Let's make a another cool example with FadeIn animation 😍

You you should install Reanimated library

npx expo install react-native-reanimated

Next, update the babel.config.js file:

// ./babel.config.js
 
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

Download the new welcome animation here.
By utilizing the Reanimated library, we can create stunning FadeIn effects for each component!

// ./App.js
 
import { View, Text, TouchableOpacity, Dimensions, TextInput } from 'react-native';
import LottieView from 'lottie-react-native';
import React, { useRef } from 'react';
import Animated, { FadeInDown } from 'react-native-reanimated';
 
export default function App() {
 
  const windowWidth = Dimensions.get('window').width;
 
  const animation = useRef(null);
 
  return (
    <View style={{ flex: 1, backgroundColor: '#FFF', padding: 18 }}>
 
      <Animated.View entering={FadeInDown.delay(500).duration(1000)}>
 
        <LottieView
          autoPlay
          ref={animation}
          style={{
            width: windowWidth,
            height: windowWidth,
            alignSelf: 'center',
            marginTop: 20
          }}
          source={require('./27637-welcome.json')}
        />
      </Animated.View>
 
      <Animated.View entering={FadeInDown.delay(1000).duration(500)}>
        <Text style={{ fontSize: 18, fontWeight: '600', color: '#4863e1', alignSelf: 'center', marginTop: 12 }}>Create an account</Text>
 
        <View style={{ borderWidth: 0.5, borderColor: '#4863e1', borderRadius: 10, padding: 12, marginTop: 12 }}>
          <TextInput placeholder='Enter Your Email' placeholderTextColor={'#4863e1'} style={{ fontSize: 16 }}></TextInput>
        </View>
      </Animated.View>
      
      <Animated.View entering={FadeInDown.delay(1200).duration(500)}>
        <TouchableOpacity style={{ backgroundColor: '#4863e1', padding: 12, borderRadius: 10, justifyContent: 'center', alignItems: 'center', marginTop: 12 }}>
          <Text style={{ fontSize: 16, fontWeight: '500', color: '#FFF' }}>Register</Text>
        </TouchableOpacity>
      </Animated.View>
 
    </View>
  );
}

"dependencies": {
    "expo": "~48.0.18",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.8",
    "lottie-react-native": "5.1.4",
    "react-native-reanimated": "~2.14.4"
  }

Conclusion

We have examined Lottie animations' potential and discovered a seamless way to include them into React Native projects. You may improve your applications using Lottie by including charming animations that increase user engagement and delight.

Lottie Animations in React Native

Introduction

Understanding Lottie

Creating Project

Installing Dependencies

Starting the Emulator:

Implementation

Final

Source Code

Project Dependencies

Conclusion