{"id":20093082,"url":"https://github.com/lottiefiles/dotlottie-react-native","last_synced_at":"2026-03-05T12:31:17.342Z","repository":{"id":253135327,"uuid":"838398395","full_name":"LottieFiles/dotlottie-react-native","owner":"LottieFiles","description":"Official LottieFiles player for rendering Lottie and dotLottie animations in React Native","archived":false,"fork":false,"pushed_at":"2025-11-11T09:13:05.000Z","size":2020,"stargazers_count":25,"open_issues_count":9,"forks_count":6,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-11-11T10:16:39.109Z","etag":null,"topics":["dotlottie","lottie","lottie-android","lottie-ios","lottie-react-native","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LottieFiles.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-08-05T15:00:47.000Z","updated_at":"2025-11-11T09:04:32.000Z","dependencies_parsed_at":"2025-10-21T05:19:15.904Z","dependency_job_id":"f241f377-c5d9-418c-9121-4909b426f4e5","html_url":"https://github.com/LottieFiles/dotlottie-react-native","commit_stats":null,"previous_names":["lottiefiles/dotlottie-react-native"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/LottieFiles/dotlottie-react-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fdotlottie-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fdotlottie-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fdotlottie-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fdotlottie-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LottieFiles","download_url":"https://codeload.github.com/LottieFiles/dotlottie-react-native/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fdotlottie-react-native/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30124420,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T11:11:57.947Z","status":"ssl_error","status_checked_at":"2026-03-05T11:11:29.001Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["dotlottie","lottie","lottie-android","lottie-ios","lottie-react-native","react-native"],"created_at":"2024-11-13T16:45:50.415Z","updated_at":"2026-03-05T12:31:17.334Z","avatar_url":"https://github.com/LottieFiles.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dotLottie React Native\n\nLottie \u0026 dotLottie component for React Native ([iOS](https://github.com/LottieFiles/dotlottie-ios/), [Android](https://github.com/LottieFiles/dotlottie-android/), and [Web](https://github.com/LottieFiles/dotlottie-web))\n\n## Installation\n\n### npm\n\n```sh\nnpm install @lottiefiles/dotlottie-react-native\n```\n\n### yarn\n\n```sh\nyarn add @lottiefiles/dotlottie-react-native\n```\n\n### Pod Installation (iOS)\n\nTo support iOS 15.4, ensure your `Podfile` specifies the platform version:\n\n```ruby\nplatform :ios, '15.4'\n```\n\nAfter installing the package, navigate to the `ios` directory and install the pods:\n\n```sh\ncd ios\npod install\n```\n\n### Metro Configuration\n\nTo support `.lottie` files, update your `metro.config.js`:\n\n```javascript\n// metro.config.js\nconst { getDefaultConfig } = require('metro-config');\n\nmodule.exports = (async () =\u003e {\n  const {\n    resolver: { sourceExts, assetExts },\n  } = await getDefaultConfig();\n  return {\n    resolver: {\n      assetExts: [...assetExts, 'lottie'],\n    },\n  };\n})();\n```\n\n### Expo Configuration\n\nExpo projects must include the native binaries before this library can render animations. We ship a config plugin scaffold (`withDotLottie`) so Expo developers can prepare builds with minimal setup.\n\n1. **Add the plugin** – the package already declares it under the `expo.plugins` field, so it is applied automatically. To customize behaviour, you can reference it explicitly in `app.json`:\n\n   ```json\n   {\n     \"expo\": {\n       \"plugins\": [\"@lottiefiles/dotlottie-react-native/plugin\"]\n     }\n   }\n   ```\n\n2. **Generate native projects** – run `expo prebuild` (or initialise a development build if you haven’t already):\n\n   ```sh\n   expo prebuild\n   ```\n\n3. **Create a development build** – install the native code with `expo run:ios` / `expo run:android`, or your preferred EAS build workflow. Expo Go does not bundle the DotLottie native module.\n\n\u003e Tip: this repository ships an Expo dev-client harness under `expo-example/`. Use it to exercise the config plugin locally with `yarn workspace dotlottie-react-native-expo-example prebuild`.\n\n#### Managed workflow fallback\n\nIf you must stay in Expo Go, fall back to the web implementation shipped in this package (or the underlying `@lottiefiles/dotlottie-react`) until a native build is available:\n\n```tsx\nimport { Platform } from 'react-native';\nimport { DotLottie as DotLottieNative } from '@lottiefiles/dotlottie-react-native';\nimport { DotLottie as DotLottieWeb } from '@lottiefiles/dotlottie-react';\n\nexport const DotLottie = Platform.select({\n  ios: DotLottieNative,\n  android: DotLottieNative,\n  default: DotLottieWeb,\n});\n```\n\nThis keeps the API surface consistent while you work entirely in Expo Go. Once you produce a dev build, swap back to the native export everywhere or gate the fallback behind feature flags.\n\n### Web Support\n\nThis package supports React Native Web out of the box. The web implementation uses [@lottiefiles/dotlottie-react](https://www.npmjs.com/package/@lottiefiles/dotlottie-react) under the hood.\n\n## React Native New Architecture\n\n`@lottiefiles/dotlottie-react-native` now ships with a Legacy Interop bridge so the same component works on both Paper and Fabric. Paper remains the default on every platform, and you can opt-in to the new architecture per-app.\n\n- **iOS:** enable Fabric by turning on `RCT_NEW_ARCH_ENABLED` before running `pod install`. For example:\n\n  ```sh\n  cd ios\n  RCT_NEW_ARCH_ENABLED=1 bundle exec pod install\n  ```\n\n  Clearing the flag (or setting it to `0`) keeps the Paper manager in place. No changes are required to continue using Paper.\n\n- **Android:** toggle the architecture by setting `newArchEnabled=true` in `android/gradle.properties`, or pass `-PnewArchEnabled=true`/`false` (or `ORG_GRADLE_PROJECT_newArchEnabled=...`) on the Gradle command line.\n\nThe repository’s example app exposes Yarn scripts to exercise each mode:\n\n```sh\nyarn ios:paper         # Paper build\nyarn ios:fabric        # Fabric build\nyarn android:paper     # Paper build\nyarn android:fabric    # Fabric build\n```\n\nUse the matching `:build` variants (for example, `yarn ios:fabric:build`) when you only need to compile instead of launching the simulator/emulator.\n\n## Usage\n\n```ts\nimport { Button, StyleSheet, View } from 'react-native';\nimport { DotLottie, Mode, type Dotlottie } from '@lottiefiles/dotlottie-react-native';\nimport { useRef } from 'react';\n\nexport default function App() {\n  const ref = useRef\u003cDotlottie\u003e(null);\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cDotLottie\n        ref={ref}\n        source={require('../assets/animation.lottie')}\n        style={styles.box}\n        loop={false}\n        autoplay={false}\n      /\u003e\n      \u003cButton title=\"Play\" onPress={() =\u003e ref.current?.play()} /\u003e\n      \u003cButton title=\"Pause\" onPress={() =\u003e ref.current?.pause()} /\u003e\n      \u003cButton title=\"Stop\" onPress={() =\u003e ref.current?.stop()} /\u003e\n      \u003cButton title=\"Loop\" onPress={() =\u003e ref.current?.setLoop(true)} /\u003e\n      \u003cButton title=\"Speed\" onPress={() =\u003e ref.current?.setSpeed(1)} /\u003e\n      \u003cButton\n        title=\"FORWARD\"\n        onPress={() =\u003e ref.current?.setPlayMode(Mode.FORWARD)}\n      /\u003e\n      \u003cButton\n        title=\"REVERSE\"\n        onPress={() =\u003e ref.current?.setPlayMode(Mode.REVERSE)}\n      /\u003e\n    \u003c/View\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  box: {\n    width: 200,\n    height: 200,\n    marginVertical: 20,\n  },\n});\n```\n\n## API Reference\n\n### Props\n\n| Prop                    | Type                        | Default Value | Description                                                            |\n| ----------------------- | --------------------------- | ------------- | ---------------------------------------------------------------------- |\n| `source`                | `string \\| { uri: string }` | **Required**  | Specifies the animation file to be loaded (local or remote URL).       |\n| `style`                 | `ViewStyle`                 | `undefined`   | Custom styles for the animation container.                             |\n| `loop`                  | `boolean`                   | `false`       | Determines if the animation should loop continuously.                  |\n| `autoplay`              | `boolean`                   | `false`       | Determines if the animation should start playing automatically.        |\n| `speed`                 | `number`                    | `1.0`         | The playback speed of the animation (e.g., 0.5, 1, 2).                 |\n| `playMode`              | `Mode`                      | `FORWARD`     | The play mode: `FORWARD`, `REVERSE`, `BOUNCE`, `REVERSE_BOUNCE`.       |\n| `useFrameInterpolation` | `boolean`                   | `false`       | Enables frame interpolation for smoother animations.                   |\n| `segment`               | `[number, number]`          | `undefined`   | Specifies a segment of the animation to play `[startFrame, endFrame]`. |\n| `marker`                | `string`                    | `undefined`   | Specifies a marker to use for playback.                                |\n| `themeId`               | `string`                    | `undefined`   | The theme ID to apply to the animation.                                |\n| `stateMachineId`        | `string`                    | `undefined`   | The ID of the state machine to load and start automatically.           |\n\n### Methods\n\nAccess these methods via a ref:\n\n```typescript\nconst ref = useRef\u003cDotlottie\u003e(null);\nref.current?.play();\n```\n\n| Method                                                     | Description                                      |\n| ---------------------------------------------------------- | ------------------------------------------------ |\n| `play()`                                                   | Starts playing the animation.                    |\n| `pause()`                                                  | Pauses the animation.                            |\n| `stop()`                                                   | Stops the animation and resets to the beginning. |\n| `setLoop(loop: boolean)`                                   | Sets the looping behavior of the animation.      |\n| `setSpeed(speed: number)`                                  | Sets the playback speed of the animation.        |\n| `setPlayMode(mode: Mode)`                                  | Sets the play mode of the animation.             |\n| `setFrame(frame: number)`                                  | Sets the current frame of the animation.         |\n| `freeze()`                                                 | Freezes the animation at the current frame.      |\n| `unfreeze()`                                               | Unfreezes the animation.                         |\n| `resize(width: number, height: number)`                    | Resizes the animation viewport.                  |\n| `setSegment(start: number, end: number)`                   | Sets a segment of the animation to play.         |\n| `setMarker(marker: string)`                                | Sets a marker for playback.                      |\n| `setTheme(themeId: string)`                                | Applies a theme to the animation.                |\n| `loadAnimation(animationId: string)`                       | Loads a specific animation by ID.                |\n| `stateMachineStart()`                                      | Starts the state machine.                        |\n| `stateMachineStop()`                                       | Stops the state machine.                         |\n| `stateMachineLoad(stateMachineId: string)`                 | Loads a state machine by ID.                     |\n| `stateMachineFire(event: string)`                          | Fires an event in the state machine.             |\n| `stateMachineSetNumericInput(key: string, value: number)`  | Sets a numeric input value in the state machine. |\n| `stateMachineSetStringInput(key: string, value: string)`   | Sets a string input value in the state machine.  |\n| `stateMachineSetBooleanInput(key: string, value: boolean)` | Sets a boolean input value in the state machine. |\n\n### Events\n\n| Event                                  | Description                                                   |\n| -------------------------------------- | ------------------------------------------------------------- |\n| `onLoad?: () =\u003e void`                  | Called when the animation is loaded.                          |\n| `onComplete?: () =\u003e void`              | Called when the animation completes.                          |\n| `onLoadError?: () =\u003e void`             | Called when there's an error loading the animation.           |\n| `onPlay?: () =\u003e void`                  | Called when the animation starts playing.                     |\n| `onPause?: () =\u003e void`                 | Called when the animation is paused.                          |\n| `onStop?: () =\u003e void`                  | Called when the animation is stopped.                         |\n| `onLoop?: (loopCount: number) =\u003e void` | Called when the animation loops, with the current loop count. |\n| `onFrame?: (frameNo: number) =\u003e void`  | Called on each frame update.                                  |\n| `onRender?: (frameNo: number) =\u003e void` | Called when a frame is rendered.                              |\n| `onFreeze?: () =\u003e void`                | Called when the animation is frozen.                          |\n| `onUnFreeze?: () =\u003e void`              | Called when the animation is unfrozen.                        |\n| `onDestroy?: () =\u003e void`               | Called when the animation is destroyed.                       |\n\n### State Machine Events\n\n| Event                                                                                                  | Description                                      |\n| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------ |\n| `onStateMachineStart?: () =\u003e void`                                                                     | Called when the state machine starts.            |\n| `onStateMachineStop?: () =\u003e void`                                                                      | Called when the state machine stops.             |\n| `onStateMachineStateEntered?: (enteringState: string) =\u003e void`                                         | Called when entering a new state.                |\n| `onStateMachineStateExit?: (leavingState: string) =\u003e void`                                             | Called when exiting a state.                     |\n| `onStateMachineTransition?: (previousState: string, newState: string) =\u003e void`                         | Called during a state transition.                |\n| `onStateMachineBooleanInputChange?: (inputName: string, oldValue: boolean, newValue: boolean) =\u003e void` | Called when a boolean input changes.             |\n| `onStateMachineNumericInputChange?: (inputName: string, oldValue: number, newValue: number) =\u003e void`   | Called when a numeric input changes.             |\n| `onStateMachineStringInputChange?: (inputName: string, oldValue: string, newValue: string) =\u003e void`    | Called when a string input changes.              |\n| `onStateMachineInputFired?: (inputName: string) =\u003e void`                                               | Called when an input event is fired.             |\n| `onStateMachineCustomEvent?: (message: string) =\u003e void`                                                | Called when a custom state machine event occurs. |\n| `onStateMachineError?: (message: string) =\u003e void`                                                      | Called when a state machine error occurs.        |\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flottiefiles%2Fdotlottie-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flottiefiles%2Fdotlottie-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flottiefiles%2Fdotlottie-react-native/lists"}