npmpackage.info

Gathering detailed insights and metrics for lottie-react-native

Other packages similar to lottie-react-native

@killerwink/lottie-react-native-color

1.0.2

Change lottie react native .json file colors

lottie-web

5.12.2

After Effects plugin for exporting animations to SVG + JavaScript or canvas + JavaScript

lottie-react

2.4.0

Lottie for React

react-lottie

1.2.9

lottie animation view for React

Gathering detailed insights and metrics for lottie-react-native

lottie-react-native

Lottie wrapper for React Native.

7.1.0

16,759

Apache-2.0

Kotlin

979.00 B

59,157,203 4.4

Installations

npm install lottie-react-native

Pull Requests

Open

5

Total

425

Closed

138

Merged

282

Issues

Open

42

Total

862

Closed

820

Releases

v7.1.0

Published on 01 Nov 2024

v7.0.0

Published on 15 Sept 2024

v6.7.2

Published on 07 Apr 2024

v6.7.1

Published on 07 Apr 2024

v6.7.0

Published on 03 Mar 2024

v6.7.0-rc1

Published on 04 Feb 2024

View all 42 releases

Developer

react-native-community

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

18.19.1

NPM Version

10.2.4 Statistics

16,759 Stars

829 Commits

1,776 Forks

227 Watching

11 Branches

137 Contributors

Updated on 27 Nov 2024

Bundle Size

2.17 kB

Minified

979.00 B

Minified + Gzipped

Bundlephobia

Languages

Kotlin (28.14%)

C++ (20.27%)

TypeScript (15.08%)

Swift (11.4%)

C# (11.35%)

Objective-C (4.16%)

Objective-C++ (3.63%)

JavaScript (3.3%)

Ruby (2.19%)

HTML (0.39%)

C (0.09%)

Total Downloads

Cumulative downloads

Total Downloads

59,157,203

Last day

-0.3%

79,143

Compared to previous day

Last week

2.5%

398,043

Compared to previous week

Last month

9.6%

1,654,519

Compared to previous month

Last year

24.9%

17,171,771

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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.

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"} 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:

1import React from "react";
2import LottieView from "lottie-react-native";
3
4export default function Animation() {
5  return (
6    <LottieView
7      source={require("../path/to/animation.json")}
8      style={{width: "100%", height: "100%"}}
9      autoPlay
10      loop
11    />
12  );
13}

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      style={{width: "100%", height: "100%"}}
19    />
20  );
21}

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      style={{width: "100%", height: "100%"}}
24    />
25  );
26}

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      style={{width: "100%", height: "100%"}}
19      autoPlay
20      loop
21    />
22  );
23}

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.

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

No vulnerabilities found.

10

Dangerous-Workflow

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

10

Maintained

Determines if the project is "actively maintained".

10

License

Determines if the project has defined a license.

8

Code-Review

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

8

Binary-Artifacts

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

0

Token-Permissions

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

0

CII-Best-Practices

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

0

Security-Policy

Determines if the project has published a security policy.

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
Info: 0 out of 15 GitHub-owned GitHubAction dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

43 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r
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-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 / 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 / GHSA-xgh6-85xh-479p
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-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-xc7v-wxcw-j472
Warn: Project is vulnerable to: GHSA-cchq-frgv-rjh5
Warn: Project is vulnerable to: GHSA-g644-9gfx-q4q4

Score

4.4

/10

Last Scanned on 2024-11-18

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

Pull Requests

5

425

138

282

Issues

42

862

820

Releases

Developer

Developer Guide

CommonJS

Yes

18.19.1

10.2.4

Statistics

Bundle Size

2.17 kB

979.00 B

Languages

Total Downloads

59,157,203

Daily Downloads

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)

Privacy (iOS)

Usage

If you want to use .lottie files

Setup jest for dotLottie files

API

Troubleshooting

More

10

10

10

8

8

0

0

0

0

0

0

0

4.4

/10

If you want to use `.lottie` files