npmpackage.info

Gathering detailed insights and metrics for lottie-react-native

Other packages similar to lottie-react-native

lottie-ios

4.5.1

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with bodymovin and renders the vector animations natively on mobile and through React Native!

react-native-lottie-splash-screen

1.1.2

A lottie splash screen for react-native, hide when application loaded ,it works on iOS and Android.

lottie-react-native-extend

0.2.5

Lottie wrapper for React Native Web

@react-native-oh-tpl/lottie-react-native

6.4.1-0.1.17-rc.3

c-api-foundation

Gathering detailed insights and metrics for lottie-react-native

lottie-react-native - 7.2.4 | npmpackage.info

lottie-react-native

Lottie wrapper for React Native.

7.2.4

16,956

Apache-2.0

Kotlin

280.64 kB

4.2

Installations

npm install lottie-react-native

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

22.16.0

NPM Version

10.9.2 Pull Requests

Open

5

Total

449

Closed

153

Merged

291

Issues

Open

54

Total

889

Closed

835

Releases

Release 7.2.4

v7.2.4

Updated on Jul 08, 2025

v7.2.3

Updated on Jun 27, 2025

v7.2.2

Updated on Jan 16, 2025

v7.2.1

Updated on Jan 07, 2025

v7.2.0

Updated on Jan 07, 2025

v7.1.0

Updated on Nov 01, 2024

View All 47 releases

Languages

Kotlin

C++

TypeScript

Swift

Objective-C

Objective-C++

JavaScript

Ruby

HTML

Kotlin (28.85%)

C++ (19.92%)

TypeScript (15.51%)

C# (11.15%)

Swift (11.05%)

Objective-C (4.09%)

Objective-C++ (3.57%)

JavaScript (3.24%)

Ruby (2.15%)

HTML (0.39%)

C (0.09%)

Developer

react-native-community

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

Apache-2.0 License

16,956 Stars

850 Commits

1,799 Forks

223 Watchers

13 Branches

141 Contributors

Updated on Jul 12, 2025

Maintainers

View All 141 Contributors

Package Meta Information

Latest Version

7.2.4

Package Id

lottie-react-native@7.2.4

Unpacked Size

280.64 kB

Size

60.34 kB

File Count

NPM Version

10.9.2

Node Version

22.16.0

Published on

Jul 08, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

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 changelog.

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.

1<PropertyGroup Label="LottieReactNativeProps">
2    <LottieReactNativeDir>$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\lottie-react-native\package.json'))\node_modules\lottie-react-native</LottieReactNativeDir>
3</PropertyGroup>
4<ImportGroup Label="LottieReactNativeTargets">
5    <Import Project="$(LottieReactNativeDir)\src\windows\cppwinrt\PropertySheets\LottieGen.Auto.targets" />
6</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:

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

1// C++
2#include <winrt/LottieReactNative.h>
3#include <winrt/AnimatedVisuals.h>
4
5...
6
7PackageProviders().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:

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

1// js
2<LottieView source={'MyAnimation'} />

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

Usage

Lottie can be used in a declarative way:

1import React from 'react';
2import LottieView from 'lottie-react-native';
3
4export default function Animation() {
5  return (
6    <LottieView source={require('../path/to/animation.json')} autoPlay loop />
7  );
8}

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

1import React, { useEffect, useRef } from 'react';
2import LottieView from 'lottie-react-native';
3
4export default function AnimationWithImperativeApi() {
5  const animationRef = useRef<LottieView>(null);
6
7  useEffect(() => {
8    animationRef.current?.play();
9
10    // Or set a specific startFrame and endFrame with:
11    animationRef.current?.play(30, 120);
12  }, []);
13
14  return (
15    <LottieView
16      ref={animationRef}
17      source={require('../path/to/animation.json')}
18    />
19  );
20}

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

1import React, { useEffect, useRef, Animated } from 'react';
2import { Animated, Easing } from 'react-native';
3import LottieView from 'lottie-react-native';
4
5const AnimatedLottieView = Animated.createAnimatedComponent(LottieView);
6
7export default function ControllingAnimationProgress() {
8  const animationProgress = useRef(new Animated.Value(0));
9
10  useEffect(() => {
11    Animated.timing(animationProgress.current, {
12      toValue: 1,
13      duration: 5000,
14      easing: Easing.linear,
15      useNativeDriver: false,
16    }).start();
17  }, []);
18
19  return (
20    <AnimatedLottieView
21      source={require('../path/to/animation.json')}
22      progress={animationProgress.current}
23    />
24  );
25}

Changing color of layers:

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

1import React from 'react';
2import LottieView from 'lottie-react-native';
3
4export default function ChangingColorOfLayers() {
5  return (
6    <LottieView
7      source={require('../path/to/animation.json')}
8      colorFilters={[
9        {
10          keypath: 'button',
11          color: '#F00000',
12        },
13        {
14          keypath: 'Sending Loader',
15          color: '#F00000',
16        },
17      ]}
18      autoPlay
19      loop
20    />
21  );
22}

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:

1const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
2
3const defaultConfig = getDefaultConfig(__dirname);
4
5/**
6 * Metro configuration
7 * https://facebook.github.io/metro/docs/configuration
8 *
9 * @type {import('metro-config').MetroConfig}
10 */
11const config = {
12  resolver: {
13    assetExts: [...defaultConfig.resolver.assetExts, 'lottie'],
14  },
15};
16
17module.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:

1module.exports = 'lottie-test-file-stub';

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

1module.exports = {
2  ...
3  moduleNameMapper: {
4    ...,
5    '\\.(lottie)$': '<rootDir>/jest/__mocks__/lottieMock.js',
6  },
7  ...
8}

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.

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

Example1

Example2

Example3

Community

Example4

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

8

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

5

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

5

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-fabric-build.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/android-fabric-build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-fabric-build.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/android-fabric-build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-fabric-build.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/android-fabric-build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-fabric-build.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/android-fabric-build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-paper-build.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/android-paper-build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-paper-build.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/android-paper-build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-paper-build.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/android-paper-build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-paper-build.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/android-paper-build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-fabric-build.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/ios-fabric-build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-fabric-build.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/ios-fabric-build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-fabric-build.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/ios-fabric-build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-paper-build.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/ios-paper-build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-paper-build.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/ios-paper-build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint-test.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/lint-test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint-test.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/lint-test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/lottie-react-native/lottie-react-native/release.yml/master?enable=pin
Info: 0 out of 17 GitHub-owned GitHubAction dependencies pinned

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

53 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-mpg4-rc92-vx8v
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
Warn: Project is vulnerable to: GHSA-m5qc-5hw7-8vg7
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-ph34-pc88-72gc
Warn: Project is vulnerable to: GHSA-m6cx-g6qm-p2cx
Warn: Project is vulnerable to: GHSA-x8qc-rrcw-4r46
Warn: Project is vulnerable to: GHSA-4328-8hgf-7wjr
Warn: Project is vulnerable to: GHSA-93f3-23rq-pjfp
Warn: Project is vulnerable to: GHSA-pw54-mh39-w3hc
Warn: Project is vulnerable to: GHSA-xgh6-85xh-479p
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-325j-24f4-qv5x
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-xc7v-wxcw-j472
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h

Score

4.2

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to lottie-react-native

Other packages similar to lottie-react-native

lottie-react-native

Installations

Developer Guide

Yes

CommonJS

22.16.0

10.9.2

Pull Requests

5

449

153

291

Issues

54

889

835

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

Lottie React Native

Installing

Breaking Changes in v6!

iOS and Android

Web

Windows (React Native >= 0.63)

Usage

If you want to use .lottie files

Setup jest for dotLottie files

API

Troubleshooting

More

10

10

10

8

5

5

0

0

0

0

0

0

0

4.2

/10

If you want to use `.lottie` files