React Native Lottie: Add smooth animations in Expo | ShillehTek

Video Tutorial (Optional)

Watch first if you want to follow the full setup in real time.

Project Overview

React Native (Expo) + Lottie: In this project, you add Lottie animations to a React Native Expo app so you can show a smooth JSON-based animation (for example, a “Done” animation) after a form is submitted.

Lottie (by Airbnb) helps you ship eye-catching animations without heavy performance costs, and it is a great way to improve engagement and retention.

• Time: 10 to 20 minutes
• Skill level: Beginner
• What you will build: A simple form screen that shows a Lottie JSON animation after submission

Support links from the original post: YouTube channel and https://www.buymeacoffee.com/mmshilleh.

Parts List

From ShillehTek

• None for this software-only tutorial.

External

• lottie-react-native npm package - renders Lottie JSON animations in React Native
• LottieFiles account - browse and download animation JSON files
• Done animation JSON - example animation used in this tutorial
• React Native Expo app - the project where you will install and use Lottie

Note: Place the downloaded JSON file in your app’s assets folder so it can be loaded with require() in React Native.

Step-by-Step Guide

Step 1 - Install the Lottie package

Goal: Add Lottie support to your React Native project.

What to do: In your project folder, install the dependency:

Code:

npm i lottie-react-native

Expected result: lottie-react-native is added to your project dependencies.

Step 2 - Create a LottieFiles account and download an animation

Goal: Get an animation JSON file you can render in the app.

What to do:

• Create an account (free): https://lottiefiles.com/
• Download this animation as a JSON file: https://lottiefiles.com/animations/done-BezVd9SE1f
• Place the JSON in the assets folder of your React Native application

Expected result: You have an animation JSON saved locally (for example: ./assets/animation.json).

Step 3 - Add Lottie to your screen code

Goal: Show the Lottie animation after a user submits the form.

What to do: Use the following example screen. Make sure the require() path matches where you saved your JSON file.

Code:

import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet, Text } from 'react-native';
import LottieView from 'lottie-react-native';

const FormScreen = () => {
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = () => {
    setSubmitted(true);
  };

  return (
    <View style={styles.container}>
      {!submitted ? (
        <View style={styles.formContainer}>
          <TextInput style={styles.input} placeholder="Name" />
          <TextInput style={styles.input} placeholder="Email" />
          <Button title="Submit" onPress={handleSubmit} />
        </View>
      ) : (
        <View style={{alignItems: 'center'}}>
         <Text style={{top: 200, fontSize: 20, fontWeight: 'bold'}}>Thank You For Submitting</Text> 
          <LottieView
            source={require('./assets/animation.json')}
            autoPlay
            loop={false}
            style={{flexGrow: 1, width: 400}}
          />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  formContainer: {
    width: '80%',
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    padding: 8,
  },
});

export default FormScreen;

Expected result: Before submission, you see the form. After tapping Submit, you see the “Thank You For Submitting” text and the Lottie animation plays once.

Conclusion

You just added a Lottie animation to a React Native Expo app using lottie-react-native and a downloaded JSON file from LottieFiles. This gives your UI a polished animation moment without building custom animation code from scratch.

Want parts and tools for your next build? Browse ShillehTek.com. If you want help planning or building a custom app or connected product experience, check out our IoT consulting services.