Lottie in React Native

lottie-react-native plays Lottie JSON files in React Native apps on iOS and Android.

Install

npm install lottie-react-native
cd ios && pod install

Checked on 7 October 2026: version 7.5.0 on npm. Versions 7.4 and 7.5 need React Native 0.84 and React 19.2 or newer. On an older app, install lottie-react-native@7.3.8, the last release without that requirement. In an Expo app, run npx expo install lottie-react-native and Expo tries to pick a version that works with your app.

A working example

This plays the Loading spinner Lottie animation from the free library. Download its Lottie JSON file, then:

1. Put spinner.json in an assets folder next to the component.

2. On iOS, run pod install in the ios folder.

import { useEffect, useState } from 'react';
import { AccessibilityInfo } from 'react-native';
import LottieView from 'lottie-react-native';

export function Spinner() {
  // Playing waits until the Reduce Motion setting is known.
  const [motion, setMotion] = useState({ known: false, still: false });
  useEffect(() => {
    AccessibilityInfo.isReduceMotionEnabled().then((still) => setMotion({ known: true, still }));
  }, []);
  // autoPlay is read when the view mounts, so the key mounts it again once the setting is known.
  return (
    <LottieView
      key={String(motion.known)}
      source={require('./assets/spinner.json')}
      autoPlay={motion.known && !motion.still}
      loop
      progress={motion.still ? 0.242 : undefined}
      accessible
      accessibilityRole="progressbar"
      accessibilityLabel="Loading"
      style={{ width: 64, height: 64 }}
    />
  );
}

autoPlay is only read when the view mounts. The example checks the Reduce Motion setting first, then mounts the view again with the key prop once it knows the answer. With Reduce Motion on, progress holds a frame 24% of the way in, where the animation is complete.

The accessibility props name the animation for VoiceOver and TalkBack (a loader is a progress bar called Loading). A decorative animation is hidden from them instead, with accessibilityElementsHidden on iOS and importantForAccessibility on Android. The code is plain JavaScript that also type-checks in a strict TypeScript file.

Every animation in the library has this code on its page with its own file name filled in.

Common problems

Unable to resolve module

Metro bundles the files it finds when it builds the app, so the path inside require() has to be written out in full. A path built from a variable won't work. The path is relative to the component file.

The iOS build fails after installing

Run pod install in the ios folder, then build again.

It moves for people with Reduce Motion on

Keep the key prop. Without it, the view mounts before the setting arrives and starts playing.

Your app also runs on the web

Install @lottiefiles/dotlottie-react as well. lottie-react-native uses it to play animations on the web.

Free downloads

The editor and every export format are free, with no card and no Mosso watermark. Library downloads need a free account. You can download up to 50 library animations a day, with the limit resetting at midnight UTC. Each download contains one animation.

Create a free account or sign in to download from the library. Read the library licence before sharing the finished work.

The same code for other platforms: HTML, React, Flutter, SwiftUI, Android Compose, Webflow, Framer, WordPress.