Lottie React Native

Lottie component for React Native (iOS and Android)

Lottie is an ecosystem of libraries for parsing Adobe After Effects animations exported as JSON with bodymovin and rendering them natively!

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.

Installing

Breaking Changes in v6!

We've made some significant updates in version 6 that may impact your current setup. To get all the details about these changes, check out the migration guide.

Stay informed to ensure a seamless transition to the latest version. Thank you!

iOS and Android

• Install lottie-react-native (latest):

yarn add lottie-react-native

Go to your ios folder and run:

pod install

Privacy (iOS)

Lottie iOS and Lottie React Native do not collect any data. We provide this notice to help you fill out App Privacy Details. Both libraries provide privacy manifests (Lottie iOS's privacy manifest, Lottie React Native's privacy manifest) which can be included in your app and are available as bundle resources within the libraries by default.

Usage

Lottie can be used in a declarative way:

import React from "react";
import LottieView from "lottie-react-native";

export default function Animation() {
  return (
    <LottieView
      source={require("../path/to/animation.json")}
      style={{width: "100%", height: "100%"}}
      autoPlay
      loop
    />
  );
}

Additionally, there is an imperative API which is sometimes simpler.

import React, { useEffect, useRef } from "react";
import LottieView from "lottie-react-native";

export default function AnimationWithImperativeApi() {
  const animationRef = useRef<LottieView>(null);

  useEffect(() => {
    animationRef.current?.play();

    // Or set a specific startFrame and endFrame with:
    animationRef.current?.play(30, 120);
  }, []);

  return (
    <LottieView
      ref={animationRef}
      source={require("../path/to/animation.json")}
      style={{width: "100%", height: "100%"}}
    />
  );
}

Lottie's animation view can be controlled by either React Native Animated or Reanimated API.

import React, { useEffect, useRef, Animated } from "react";
import { Animated, Easing } from "react-native";
import LottieView from "lottie-react-native";

const AnimatedLottieView = Animated.createAnimatedComponent(LottieView);

export default function ControllingAnimationProgress() {
  const animationProgress = useRef(new Animated.Value(0));

  useEffect(() => {
    Animated.timing(animationProgress.current, {
      toValue: 1,
      duration: 5000,
      easing: Easing.linear,
      useNativeDriver: false,
    }).start();
  }, []);

  return (
    <AnimatedLottieView
      source={require("../path/to/animation.json")}
      progress={animationProgress.current}
      style={{width: "100%", height: "100%"}}
    />
  );
}

Changing color of layers:

import React from "react";
import LottieView from "lottie-react-native";

export default function ChangingColorOfLayers() {
  return (
    <LottieView
      source={require("../path/to/animation.json")}
      colorFilters={[
        {
          keypath: "button",
          color: "#F00000",
        },
        {
          keypath: "Sending Loader",
          color: "#F00000",
        },
      ]}
      style={{width: "100%", height: "100%"}}
      autoPlay
      loop
    />
  );
}

If you want to use .lottie files

You need to modify your metro.config.js file accordingly by adding lottie extension to the assetExts array:

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  resolver: {
    assetExts: [...defaultConfig.resolver.assetExts, "lottie"],
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Setup jest for dotLottie files

Create a file in the following path __mocks__/lottieMock.js and add the following code:

module.exports = "lottie-test-file-stub";

Then add the following to your jest.config.js file:

module.exports = {
  ...
  moduleNameMapper: {
    ...,
    '\\.(lottie)$': '<rootDir>/jest/__mocks__/lottieMock.js',
  },
  ...
}

API

You can find the full list of props and methods available in our API document. These are the most common ones:

Prop	Description	Default
source	Mandatory - The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json').	None
style	Style attributes for the view, as expected in a standard View.	You need to set it manually. Refer to this pull request.
loop	A boolean flag indicating whether or not the animation should loop.	true
autoPlay	A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API.	false
colorFilters	An array of objects denoting layers by KeyPath and a new color filter value (as hex string).	[]

More...

Troubleshooting

Not all After Effects features are supported by Lottie. If you notice there are some layers or animations missing check this list to ensure they are supported.

When it comes to animations, please validate that your animation file is compliant with the standard (for example, that it doesn't have floating number in places that require integers). If you have an animation that is not working as expected, it is always recommended that you look at the Logcat output on Android and the console on iOS, as both ecosystems will have logs attached in case of an error that usually highlights what has gone wrong.

More

View more documentation, FAQ, help, examples, and more at airbnb.io/lottie