lottie-react-native

Lottie wrapper for React Native.

16,784

1,776

16,784

View on GitHub View on NPM

Top Related Projects

lottie-android

35,135

Render After Effects animations natively on Android and iOS, Web, and React Native

lottie-ios

25,724

An iOS library to natively render After Effects vector animations

react-native-svg

7,554

SVG library for React Native, React Native Web, and plain React web projects.

react-native-circular-progress

2,156

React Native component for creating animated, circular progress with ReactART

react-native-animatable

9,855

Standard set of easy to use animations and declarative transitions for React Native

Quick Overview

Lottie React Native is a mobile library that renders After Effects animations in real time, allowing you to use them as easily as static images. It provides a powerful and flexible way to add high-quality animations to React Native applications, enhancing user experience and visual appeal.

Pros

Easy integration with React Native projects
High-performance rendering of complex animations
Supports a wide range of After Effects features
Reduces app size compared to traditional animation methods

Cons

Requires knowledge of After Effects for creating animations
Some advanced After Effects features may not be fully supported
Performance can be impacted on older devices with complex animations
Debugging animation issues can be challenging

Code Examples

Basic usage of Lottie animation:

import Lottie from 'lottie-react-native';

function App() {
  return (
    <Lottie
      source={require('./animation.json')}
      autoPlay
      loop
    />
  );
}

Controlling animation progress:

import React, { useRef } from 'react';
import Lottie from 'lottie-react-native';

function ControlledAnimation() {
  const animationRef = useRef(null);

  const playAnimation = () => {
    animationRef.current?.play();
  };

  return (
    <>
      <Lottie
        ref={animationRef}
        source={require('./animation.json')}
        progress={0.5}
      />
      <Button title="Play" onPress={playAnimation} />
    </>
  );
}

Using Lottie with custom properties:

import Lottie from 'lottie-react-native';

function CustomizedAnimation() {
  return (
    <Lottie
      source={require('./animation.json')}
      colorFilters={[
        {
          keypath: 'Button',
          color: '#FFA500',
        },
        {
          keypath: 'Slider',
          color: '#4CAF50',
        },
      ]}
    />
  );
}

Getting Started

To use Lottie React Native in your project:

Install the package:
```
npm install lottie-react-native
```
For iOS, install pods:
```
cd ios && pod install
```

Import and use in your component:

import Lottie from 'lottie-react-native';

function MyComponent() {
  return (
    <Lottie
      source={require('./animation.json')}
      autoPlay
      loop
    />
  );
}

Make sure to have your Lottie JSON file (exported from After Effects) in your project directory.

Competitor Comparisons

lottie-android

35,135

Render After Effects animations natively on Android and iOS, Web, and React Native

Pros of lottie-android

Native Android performance optimization
Seamless integration with Android development workflows
Extensive Android-specific features and customization options

Cons of lottie-android

Limited to Android platform only
Steeper learning curve for developers not familiar with Android development

Code Comparison

lottie-android:

val animationView = findViewById<LottieAnimationView>(R.id.animation_view)
animationView.setAnimation(R.raw.animation)
animationView.playAnimation()

lottie-react-native:

import LottieView from 'lottie-react-native';

<LottieView
  source={require('./animation.json')}
  autoPlay
  loop
/>

Summary

lottie-android offers superior performance and integration for native Android development, making it ideal for Android-specific projects. However, it's limited to the Android platform and may require more Android-specific knowledge.

lottie-react-native provides cross-platform compatibility and easier integration for React Native developers, but may not offer the same level of performance optimization for Android as the native library.

The choice between the two depends on the project requirements, target platforms, and development team expertise. For Android-only projects, lottie-android might be preferable, while cross-platform projects may benefit from lottie-react-native's versatility.

lottie-ios

25,724

An iOS library to natively render After Effects vector animations

Pros of lottie-ios

Native iOS performance and optimizations
Direct integration with iOS frameworks and APIs
Smaller package size, focused solely on iOS

Cons of lottie-ios

Limited to iOS platform only
Requires separate implementation for Android
Steeper learning curve for React Native developers

Code Comparison

lottie-ios:

let animationView = LOTAnimationView(name: "animation")
animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
animationView.play()
view.addSubview(animationView)

lottie-react-native:

import LottieView from 'lottie-react-native';

<LottieView
  source={require('./animation.json')}
  autoPlay
  loop
  style={{width: 200, height: 200}}
/>

The lottie-ios code is written in Swift and requires more setup, while lottie-react-native uses a simpler React Native component approach. lottie-ios offers more fine-grained control over the animation, but lottie-react-native provides a more straightforward integration for React Native projects.

lottie-react-native is cross-platform, supporting both iOS and Android with a single implementation, making it more suitable for React Native developers. However, lottie-ios may offer better performance and deeper integration with iOS-specific features for native iOS applications.

react-native-svg

7,554

SVG library for React Native, React Native Web, and plain React web projects.

Pros of react-native-svg

More lightweight and focused on SVG rendering
Better performance for static SVG content
Simpler integration for basic SVG use cases

Cons of react-native-svg

Limited animation capabilities compared to Lottie
Requires manual creation and manipulation of SVG elements
Less suitable for complex, designer-created animations

Code Comparison

react-native-svg:

import Svg, { Circle, Rect } from 'react-native-svg';

<Svg height="100" width="100">
  <Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" />
  <Rect x="15" y="15" width="70" height="70" stroke="red" strokeWidth="2" fill="yellow" />
</Svg>

lottie-react-native:

import LottieView from 'lottie-react-native';

<LottieView
  source={require('./animation.json')}
  autoPlay
  loop
/>

react-native-svg is ideal for simple, static SVG rendering with better performance, while lottie-react-native excels in complex, designer-created animations with easier implementation for dynamic content. The choice depends on the specific project requirements and the complexity of the desired animations.

react-native-circular-progress

2,156

React Native component for creating animated, circular progress with ReactART

Pros of react-native-circular-progress

Lightweight and focused on circular progress animations
Simple API for creating and customizing circular progress bars
Supports both determinate and indeterminate progress animations

Cons of react-native-circular-progress

Limited to circular progress animations only
Less versatile compared to Lottie's support for complex animations
Smaller community and fewer resources available

Code Comparison

react-native-circular-progress:

<CircularProgress
  size={120}
  width={15}
  fill={60}
  tintColor="#00e0ff"
  backgroundColor="#3d5875"
/>

lottie-react-native:

<LottieView
  source={require('./animation.json')}
  autoPlay
  loop
/>

Summary

react-native-circular-progress is a specialized library for creating circular progress animations in React Native. It offers a simple API and lightweight implementation, making it ideal for projects that specifically need circular progress indicators. However, it lacks the versatility and complex animation capabilities of Lottie React Native.

Lottie React Native, on the other hand, supports a wide range of animations created in After Effects, including but not limited to circular progress. It has a larger community and more resources available, but may be overkill for projects that only require simple circular progress animations.

Choose react-native-circular-progress for focused circular progress needs, and Lottie React Native for more complex and diverse animation requirements in your React Native projects.

react-native-animatable

9,855

Standard set of easy to use animations and declarative transitions for React Native

Pros of react-native-animatable

Simpler API for basic animations, easier to get started
Lightweight and doesn't require additional assets
Built-in preset animations for quick implementation

Cons of react-native-animatable

Limited to basic animations, less suitable for complex or custom animations
Doesn't support vector-based animations or keyframe animations
May require more manual work for intricate, multi-step animations

Code Comparison

react-native-animatable:

import * as Animatable from 'react-native-animatable';

<Animatable.View animation="fadeIn" duration={1000}>
  <Text>Fading in</Text>
</Animatable.View>

lottie-react-native:

import LottieView from 'lottie-react-native';

<LottieView
  source={require('./animation.json')}
  autoPlay
  loop
/>

react-native-animatable offers a more straightforward approach for simple animations, while lottie-react-native provides powerful capabilities for complex, pre-designed animations. The choice between the two depends on the project's specific animation requirements and complexity.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Lottie React Native

Lottie component for React Native (iOS, Android, and Windows)

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

Web

Install lottie-react-native (latest):

yarn add lottie-react-native

Add dependencies for web players:

yarn add @lottiefiles/dotlottie-react

Windows (React Native >= 0.63)

Install the `lottie-react-native` npm package. (Click to expand)

Add the following to the end of your project file. For C# apps, this should come after any Microsoft.Windows.UI.Xaml.CSharp.targets includes. For C++ apps, it should come after any Microsoft.Cpp.targets includes.

<PropertyGroup Label="LottieReactNativeProps">
    <LottieReactNativeDir>$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\lottie-react-native\package.json'))\node_modules\lottie-react-native</LottieReactNativeDir>
</PropertyGroup>
<ImportGroup Label="LottieReactNativeTargets">
    <Import Project="$(LottieReactNativeDir)\src\windows\cppwinrt\PropertySheets\LottieGen.Auto.targets" />
</ImportGroup>

Add the LottieReactNative.vcxproj file to your Visual Studio solution to ensure it takes part in the build.

For C# apps, you'll need to install the following packages through NuGet:

LottieGen.MsBuild
Microsoft.UI.Xaml
Win2D.uwp
Microsoft.Toolkit.Uwp.UI.Lottie
- This package is used for loading JSON dynamically. If you only need codegen animation, you can set <EnableLottieDynamicSource>false</EnableLottieDynamicSource> in your project file and omit this reference.

For C++ apps, you'll need these NuGet packages:

LottieGen.MsBuild
Microsoft.UI.Xaml

WinUI 2.6 (Microsoft.UI.Xaml 2.6.0) is required by default. Overriding this requires creating a Directory.Build.props file in your project root with a <WinUIVersion> property.

In your application code where you set up your React Native Windows PackageProviders list, add the LottieReactNative provider:

// C#
PackageProviders.Add(new LottieReactNative.ReactPackageProvider(new AnimatedVisuals.LottieCodegenSourceProvider()));

// C++
#include <winrt/LottieReactNative.h>
#include <winrt/AnimatedVisuals.h>

...

PackageProviders().Append(winrt::LottieReactNative::ReactPackageProvider(winrt::AnimatedVisuals::LottieCodegenSourceProvider()));

Codegen animations are supported by adding LottieAnimation items to your project file. These will be compiled into your application and available at runtime by name. For example:

<!-- .vcxproj or .csproj -->
<ItemGroup>
    <LottieAnimation Include="Assets/Animations/MyAnimation.json" Name="MyAnimation" />
</ItemGroup>

// js
<LottieView source={"MyAnimation"} style={{width: "100%", height: "100%"}} />

Codegen is available to both C# and C++ applications. Dynamic loading of JSON strings at runtime is currently only supported in C# applications.

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:

NOTE: This feature may not work properly on Android. We will try fix it soon.

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.

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

Example1

Example2

Example3

Community

Example4

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of lottie-android

Cons of lottie-android

Code Comparison

Summary

Pros of lottie-ios

Cons of lottie-ios

Code Comparison

Pros of react-native-svg

Cons of react-native-svg

Code Comparison

Pros of react-native-circular-progress

Cons of react-native-circular-progress

Code Comparison

Summary

Pros of react-native-animatable

Cons of react-native-animatable

Code Comparison

Convert designs to code with AI

README

Lottie React Native

Installing

Breaking Changes in v6!

iOS and Android

Web

Windows (React Native >= 0.63)

Privacy (iOS)

Usage

If you want to use .lottie files

Setup jest for dotLottie files

API

Troubleshooting

More

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days

If you want to use `.lottie` files