{"id":3916,"url":"https://github.com/lottie-react-native/lottie-react-native","last_synced_at":"2026-01-12T02:27:49.553Z","repository":{"id":37869036,"uuid":"80233816","full_name":"lottie-react-native/lottie-react-native","owner":"lottie-react-native","description":"Lottie wrapper for React Native.","archived":false,"fork":false,"pushed_at":"2025-04-16T15:28:47.000Z","size":417829,"stargazers_count":16924,"open_issues_count":57,"forks_count":1790,"subscribers_count":222,"default_branch":"master","last_synced_at":"2025-05-13T14:21:45.405Z","etag":null,"topics":["after-effects","animations","bodymovin","react","react-native"],"latest_commit_sha":null,"homepage":"https://airbnb.io/lottie/#/react-native","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lottie-react-native.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["matinzd"]}},"created_at":"2017-01-27T18:24:50.000Z","updated_at":"2025-05-13T09:14:27.000Z","dependencies_parsed_at":"2022-07-14T06:20:27.790Z","dependency_job_id":"b4606ee9-18eb-4628-af1f-836ea9aa8337","html_url":"https://github.com/lottie-react-native/lottie-react-native","commit_stats":{"total_commits":599,"total_committers":157,"mean_commits":"3.8152866242038215","dds":0.8848080133555927,"last_synced_commit":"d0407d2491d0ce89d4fd8637f53c261110cdf2d5"},"previous_names":["react-native-community/lottie-react-native","airbnb/lottie-react-native"],"tags_count":86,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lottie-react-native%2Flottie-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lottie-react-native%2Flottie-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lottie-react-native%2Flottie-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lottie-react-native%2Flottie-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lottie-react-native","download_url":"https://codeload.github.com/lottie-react-native/lottie-react-native/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254000824,"owners_count":21997441,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["after-effects","animations","bodymovin","react","react-native"],"created_at":"2024-01-05T20:16:55.239Z","updated_at":"2026-01-12T02:27:49.547Z","avatar_url":"https://github.com/lottie-react-native.png","language":"Kotlin","readme":"# Lottie React Native\n\n[![npm Version](https://img.shields.io/npm/v/lottie-react-native.svg)](https://www.npmjs.com/package/lottie-react-native) [![License](https://img.shields.io/npm/l/lottie-react-native.svg)](https://www.npmjs.com/package/lottie-react-native)\n\nLottie component for React Native ([iOS](https://github.com/airbnb/lottie-ios), [Android](https://github.com/airbnb/lottie-android), and [Windows](https://github.com/CommunityToolkit/Lottie-Windows))\n\nLottie is an ecosystem of libraries for parsing [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) animations exported as JSON with [bodymovin](https://github.com/bodymovin/bodymovin) and rendering them natively!\n\nFor the first time, designers can create **and ship** beautiful animations without an engineer painstakingly recreating it by hand.\n\n## Installing\n\n## Breaking Changes in v6!\n\nWe'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](/MIGRATION-5-TO-6.md).\n\nStay informed to ensure a seamless transition to the latest version. Thank you!\n\n### iOS and Android\n\n- Install `lottie-react-native` (latest):\n\n```\nyarn add lottie-react-native\n```\n\nGo to your ios folder and run:\n\n```\npod install\n```\n\n### Web\n\n- Install `lottie-react-native` (latest):\n\n```\nyarn add lottie-react-native\n```\n\n- Add dependencies for web players:\n\n```\nyarn add @lottiefiles/dotlottie-react\n```\n\n### Windows (React Native \u003e= 0.63)\n\n\u003cdetails\u003e\n\u003csummary\u003eInstall the `lottie-react-native` npm package. (Click to expand)\u003c/summary\u003e\n\u003cbr\u003e\n    \nAdd 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.\n```xml\n\u003cPropertyGroup Label=\"LottieReactNativeProps\"\u003e\n    \u003cLottieReactNativeDir\u003e$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\\lottie-react-native\\package.json'))\\node_modules\\lottie-react-native\u003c/LottieReactNativeDir\u003e\n\u003c/PropertyGroup\u003e\n\u003cImportGroup Label=\"LottieReactNativeTargets\"\u003e\n    \u003cImport Project=\"$(LottieReactNativeDir)\\src\\windows\\cppwinrt\\PropertySheets\\LottieGen.Auto.targets\" /\u003e\n\u003c/ImportGroup\u003e\n```\n\nAdd the LottieReactNative.vcxproj file to your Visual Studio solution to ensure it takes part in the build.\n\nFor C# apps, you'll need to install the following packages through NuGet:\n\n- LottieGen.MsBuild\n- Microsoft.UI.Xaml\n- Win2D.uwp\n- Microsoft.Toolkit.Uwp.UI.Lottie\n  - This package is used for loading JSON dynamically. If you only need codegen animation, you can set `\u003cEnableLottieDynamicSource\u003efalse\u003c/EnableLottieDynamicSource\u003e` in your project file and omit this reference.\n\nFor C++ apps, you'll need these NuGet packages:\n\n- LottieGen.MsBuild\n- Microsoft.UI.Xaml\n\nWinUI 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 `\u003cWinUIVersion\u003e` property.\n\nIn your application code where you set up your React Native Windows PackageProviders list, add the LottieReactNative provider:\n\n```csharp\n// C#\nPackageProviders.Add(new LottieReactNative.ReactPackageProvider(new AnimatedVisuals.LottieCodegenSourceProvider()));\n```\n\n```cpp\n// C++\n#include \u003cwinrt/LottieReactNative.h\u003e\n#include \u003cwinrt/AnimatedVisuals.h\u003e\n\n...\n\nPackageProviders().Append(winrt::LottieReactNative::ReactPackageProvider(winrt::AnimatedVisuals::LottieCodegenSourceProvider()));\n```\n\nCodegen 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:\n\n```xml\n\u003c!-- .vcxproj or .csproj --\u003e\n\u003cItemGroup\u003e\n    \u003cLottieAnimation Include=\"Assets/Animations/MyAnimation.json\" Name=\"MyAnimation\" /\u003e\n\u003c/ItemGroup\u003e\n```\n\n```js\n// js\n\u003cLottieView source={\"MyAnimation\"} style={{width: \"100%\", height: \"100%\"}} /\u003e\n```\n\nCodegen is available to both C# and C++ applications. Dynamic loading of JSON strings at runtime is currently only supported in C# applications.\n\n\u003c/details\u003e\n\n## Privacy (iOS)\n\nLottie iOS and Lottie React Native do not collect any data. We provide this notice to help you fill out [App Privacy Details](https://developer.apple.com/app-store/app-privacy-details/). Both libraries provide privacy manifests ([Lottie iOS's privacy manifest](https://github.com/airbnb/lottie-ios/blob/master/Sources/PrivacyInfo.xcprivacy), [Lottie React Native's privacy manifest](https://github.com/lottie-react-native/lottie-react-native/blob/master/packages/core/ios/PrivacyInfo.xcprivacy)) which can be included in your app and are available as bundle resources within the libraries by default.\n\n## Usage\n\nLottie can be used in a declarative way:\n\n```jsx\nimport React from \"react\";\nimport LottieView from \"lottie-react-native\";\n\nexport default function Animation() {\n  return (\n    \u003cLottieView\n      source={require(\"../path/to/animation.json\")}\n      style={{width: \"100%\", height: \"100%\"}}\n      autoPlay\n      loop\n    /\u003e\n  );\n}\n```\n\nAdditionally, there is an imperative API which is sometimes simpler.\n\n```tsx\nimport React, { useEffect, useRef } from \"react\";\nimport LottieView from \"lottie-react-native\";\n\nexport default function AnimationWithImperativeApi() {\n  const animationRef = useRef\u003cLottieView\u003e(null);\n\n  useEffect(() =\u003e {\n    animationRef.current?.play();\n\n    // Or set a specific startFrame and endFrame with:\n    animationRef.current?.play(30, 120);\n  }, []);\n\n  return (\n    \u003cLottieView\n      ref={animationRef}\n      source={require(\"../path/to/animation.json\")}\n      style={{width: \"100%\", height: \"100%\"}}\n    /\u003e\n  );\n}\n```\n\nLottie's animation view can be controlled by either React Native Animated or Reanimated API.\n\n```tsx\nimport React, { useEffect, useRef, Animated } from \"react\";\nimport { Animated, Easing } from \"react-native\";\nimport LottieView from \"lottie-react-native\";\n\nconst AnimatedLottieView = Animated.createAnimatedComponent(LottieView);\n\nexport default function ControllingAnimationProgress() {\n  const animationProgress = useRef(new Animated.Value(0));\n\n  useEffect(() =\u003e {\n    Animated.timing(animationProgress.current, {\n      toValue: 1,\n      duration: 5000,\n      easing: Easing.linear,\n      useNativeDriver: false,\n    }).start();\n  }, []);\n\n  return (\n    \u003cAnimatedLottieView\n      source={require(\"../path/to/animation.json\")}\n      progress={animationProgress.current}\n      style={{width: \"100%\", height: \"100%\"}}\n    /\u003e\n  );\n}\n```\n\nChanging color of layers:\n\n```jsx\nimport React from \"react\";\nimport LottieView from \"lottie-react-native\";\n\nexport default function ChangingColorOfLayers() {\n  return (\n    \u003cLottieView\n      source={require(\"../path/to/animation.json\")}\n      colorFilters={[\n        {\n          keypath: \"button\",\n          color: \"#F00000\",\n        },\n        {\n          keypath: \"Sending Loader\",\n          color: \"#F00000\",\n        },\n      ]}\n      style={{width: \"100%\", height: \"100%\"}}\n      autoPlay\n      loop\n    /\u003e\n  );\n}\n```\n\n## If you want to use `.lottie` files\n\nYou need to modify your `metro.config.js` file accordingly by adding `lottie` extension to the `assetExts` array:\n\n```js\nconst { getDefaultConfig, mergeConfig } = require(\"@react-native/metro-config\");\n\nconst defaultConfig = getDefaultConfig(__dirname);\n\n/**\n * Metro configuration\n * https://facebook.github.io/metro/docs/configuration\n *\n * @type {import('metro-config').MetroConfig}\n */\nconst config = {\n  resolver: {\n    assetExts: [...defaultConfig.resolver.assetExts, \"lottie\"],\n  },\n};\n\nmodule.exports = mergeConfig(getDefaultConfig(__dirname), config);\n```\n\n## Setup jest for dotLottie files\n\nCreate a file in the following path `__mocks__/lottieMock.js` and add the following code:\n\n```js\nmodule.exports = \"lottie-test-file-stub\";\n```\n\nThen add the following to your `jest.config.js` file:\n\n```js\nmodule.exports = {\n  ...\n  moduleNameMapper: {\n    ...,\n    '\\\\.(lottie)$': '\u003crootDir\u003e/jest/__mocks__/lottieMock.js',\n  },\n  ...\n}\n```\n\n## API\n\nYou can find the full list of props and methods available in our [API document](https://github.com/airbnb/lottie-react-native/blob/master/docs/api.md). These are the most common ones:\n\n| Prop               | Description                                                                                                                                                                                                                                                                     | Default                                                                                                                         |\n| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |\n| **`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_                                                                                                                          |\n| **`style`**        | Style attributes for the view, as expected in a standard [`View`](https://facebook.github.io/react-native/docs/layout-props.html).                                                                                                                                              | You need to set it manually. Refer to this [pull request](https://github.com/lottie-react-native/lottie-react-native/pull/992). |\n| **`loop`**         | A boolean flag indicating whether or not the animation should loop.                                                                                                                                                                                                             | `true`                                                                                                                          |\n| **`autoPlay`**     | A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API.                                                                                                                                           | `false`                                                                                                                         |\n| **`colorFilters`** | An array of objects denoting layers by KeyPath and a new color filter value (as hex string).                                                                                                                                                                                    | `[]`                                                                                                                            |\n\n[More...](https://github.com/airbnb/lottie-react-native/blob/master/docs/api.md)\n\n## Troubleshooting\n\nNot all After Effects features are supported by Lottie. If you notice there are some layers or animations missing check [this list](https://github.com/airbnb/lottie/blob/master/supported-features.md) to ensure they are supported.\n\nWhen 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](https://developer.android.com/studio/debug/logcat) and the [console on iOS](https://developer.apple.com/documentation/xcode/stepping-through-code-and-inspecting-variables-to-isolate-bugs), as both ecosystems will have logs attached in case of an error that usually highlights what has gone wrong.\n\n## More\n\nView more documentation, FAQ, help, examples, and more at [airbnb.io/lottie](https://airbnb.io/lottie/)\n\n![Example1](docs/gifs/Example1.gif)\n\n![Example2](docs/gifs/Example2.gif)\n\n![Example3](docs/gifs/Example3.gif)\n\n![Community](docs/gifs/Community%202_3.gif)\n\n![Example4](docs/gifs/Example4.gif)\n","funding_links":["https://github.com/sponsors/matinzd"],"categories":["Components","Java","Kotlin","二、核心开发工具与库（按场景分类）","Animation \u0026 Gestures"],"sub_categories":["UI","4. 动画（交互效果）","Graphics \u0026 Drawing"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flottie-react-native%2Flottie-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flottie-react-native%2Flottie-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flottie-react-native%2Flottie-react-native/lists"}