{"id":15117043,"url":"https://github.com/margelo/react-native-skottie","last_synced_at":"2025-05-15T02:07:44.375Z","repository":{"id":217911542,"uuid":"560520319","full_name":"margelo/react-native-skottie","owner":"margelo","description":"▶️ Efficient lottie animations using Skia's Skottie module","archived":false,"fork":false,"pushed_at":"2025-01-21T21:00:30.000Z","size":4847,"stargazers_count":960,"open_issues_count":25,"forks_count":28,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-05-08T12:15:07.612Z","etag":null,"topics":["animations","bodymovin","lottie","react-native","rive","skia","skottie"],"latest_commit_sha":null,"homepage":"https://margelo.com","language":"C++","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/margelo.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2022-11-01T17:21:54.000Z","updated_at":"2025-05-01T00:07:49.000Z","dependencies_parsed_at":"2024-04-22T08:28:06.429Z","dependency_job_id":"f86c6f5d-cd18-4635-9d49-8399b6fd1218","html_url":"https://github.com/margelo/react-native-skottie","commit_stats":null,"previous_names":["margelo/react-native-skottie","margelo/react-native-skia-skottie"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/margelo%2Freact-native-skottie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/margelo%2Freact-native-skottie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/margelo%2Freact-native-skottie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/margelo%2Freact-native-skottie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/margelo","download_url":"https://codeload.github.com/margelo/react-native-skottie/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254259383,"owners_count":22040820,"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":["animations","bodymovin","lottie","react-native","rive","skia","skottie"],"created_at":"2024-09-26T01:45:47.977Z","updated_at":"2025-05-15T02:07:39.364Z","avatar_url":"https://github.com/margelo.png","language":"C++","funding_links":[],"categories":["C++"],"sub_categories":[],"readme":"\u003ca href=\"https://margelo.io\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./docs/bg-dark.png\" /\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"./docs/bg-light.png\" /\u003e\n    \u003cimg alt=\"ReactNativeSkottie\" src=\"./docs/bg-light.png\" /\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\n### Features\n\n[Skottie](https://skia.org/docs/user/modules/skottie/) is a high performance library for running [Lottie](https://airbnb.design/lottie/) animations in [Skia](https://skia.org).\n\n- 📄 Supports Lottie files (JSON) and DotLottie files (.lottie)\n- 📈 Uses Skia's GPU-acceleration\n- 📉 Lower CPU usage\n- 🏃 Higher frame rates\n- 🔗 Based on [`@shopify/react-native-skia`](https://github.com/Shopify/react-native-skia)\n\n### Benchmark\n\nWe benchmarked react-native-skottie against [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native) on a low-end Android device running a complex animation and saw a +63% improvement in frame rates.\n\n![Screenshot of a Performance Comparison with lottie](./docs/perf_comparison_2.png)\n\n### Installation\n\n\u003e [!IMPORTANT]\n\u003e `react-native-skottie` depends on `@shopify/react-native-skia`, so make sure you install it first! (minimum required version: \u003e= 1.x.x)\n\n```sh\nyarn add react-native-skottie\n```\n\nFor Android release builds, check out the [note.](#android)\n\n### Usage\n\n```tsx\nimport { Skottie } from 'react-native-skottie';\n// DotLottie files are supported as well!\nimport LottieAnimationFile from './animation.json';\n\nexport default function App() {\n  return (\n    \u003cSkottie\n      style={styles.flex1}\n      source={LottieAnimationFile}\n      autoPlay={true}\n    /\u003e\n  );\n}\n```\n\n### Advanced usage\n\n\u003cdetails\u003e\n  \u003csummary\u003eImperative ref API\u003c/summary\u003e\n\n```tsx\nimport { Skottie } from 'react-native-skottie';\nimport { Button } from 'react-native';\n\nexport default function App() {\n  const skottieRef = useRef\u003cSkottieViewRef\u003e(null);\n\n  return (\n    \u003cView\u003e\n      \u003cSkottie\n        ref={skottieRef}\n        style={styles.flex1}\n        source={LottieAnimationFile}\n      /\u003e\n\n      \u003cButton\n        title=\"Play\"\n        onPress={() =\u003e skottieRef.current?.play()}\n      /\u003e\n      \u003cButton\n        title=\"Pause\"\n        onPress={() =\u003e skottieRef.current?.pause()}\n      /\u003e\n      \u003cButton\n        title=\"Reset\"\n        onPress={() =\u003e skottieRef.current?.reset()}\n      /\u003e\n    \u003c/View\u003e\n  );\n}\n\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eControlled by props\u003c/summary\u003e\n\n```tsx\nimport { Skottie } from 'react-native-skottie';\nimport { Button } from 'react-native';\n\nexport default function App() {\n  const [isPlaying, setIsPlaying] = useState(false);\n\n  return (\n    \u003cView\u003e\n      \u003cSkottie\n        autoPlay={isPlaying}\n        style={styles.flex1}\n        source={LottieAnimationFile}\n      /\u003e\n\n      \u003cButton\n        title=\"Play\"\n        onPress={() =\u003e setIsPlaying(true)}\n      /\u003e\n      \u003cButton\n        title=\"Pause\"\n        onPress={() =\u003e setIsPlaying(false)}\n      /\u003e\n    \u003c/View\u003e\n  );\n}\n\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eControlled by reanimated\u003c/summary\u003e\n\n\u003cbr /\u003e\nNote: React Native Animated API is not supported yet.\n\n```tsx\nimport { Skottie, SkottieAPI } from 'react-native-skottie';\nimport { useSharedValue, withTiming, Easing } from 'react-native-reanimated';\n\nexport default function App() {\n  // A progress value from 0 to 1\n  const progress = useSharedValue(0);\n\n  // We need to run the animation on our own, therefor, we need to know the\n  // animation's duration. We can either look that up from the lottie file,\n  // or we can create the SkSkottie instance ourselves and get the duration:\n  const skottieAnimation = useMemo(() =\u003e SkottieAPI.createFrom(lottieFile), []);\n  const duration = skottieAnimation.duration;\n\n  // Run the animation:\n  useEffect(() =\u003e {\n    // Will play the animation once …\n    progress.value = withTiming(1, {\n      duration: duration * 1000,\n      easing: Easing.linear,\n    });\n    // … if you want to loop you could use withRepeat\n  }, [duration]);\n\n  return (\n    \u003cSkottie\n      autoPlay={true}\n      style={styles.flex1}\n      source={LottieAnimationFile}\n      // Pass the shared value to Skottie to drive the animation:\n      progress={progress}\n    /\u003e\n  );\n}\n\n```\n\n\u003c/details\u003e\n\n## API\n\n`react-native-skottie` can be used as drop-in replacement for `lottie-react-native`, as it tries to support the same\nprops.\nNote, not all props are supported yet. If you are missing a prop for your use-case please open an issue (and at best\nalso a PR 🤝):\n\n### Props\n\n| Prop name  | Type                                          | Default | Description                                                                                                                                                                                                         |\n|------------|-----------------------------------------------|---------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| source     | `number \\| string \\| JSONObject \\| SkSkottie` | -       | The source of the animation. Can be a JSON file or a DotLottie file. Playing from web URLs is not supported yet. You can also pass a SkSkottie instance on your own, see API.                                       |\n| autoPlay   | `boolean`                                     | `false` | If true, the animation will start playing as soon as it is ready.                                                                                                                                                   |\n| loop       | `boolean`                                     | `true`  | If true, the animation will loop.                                                                                                                                                                                   |\n| progress   | `SharedValue\u003cnumber\u003e`                         | -       | A reanimated shared value from 0 to 1 that controls the progress of the animation. Note: if this is used neither the prop or imperative API will work, but you are responsible for controlling the animation state. |\n| speed      | `number`                                      | `1`     | A value that controls the speed of the animation.                                                                                                                                                                   |\n| style      | `ViewStyle`                                   | -       | The style of the animation.                                                                                                                                                                                         |\n| resizeMode | `ResizeMode` `(cover, contain, fill)`         | `cover` | The resize mode of the animation.                                                                                                                                                                                   |\n\n### Ref\n\n`react-native-skottie` provides a ref API that allows you to control the animation imperatively. The ref is of type\n`SkottieViewRef` and provides the following methods:\n\n| Method name | Description                            |\n|-------------|----------------------------------------|\n| play        | Plays the animation.                   |\n| pause       | Pauses the animation.                  |\n| reset       | Resets the animation to the beginning. |\n\n### SkottieAPI\n\n`react-native-skottie` provides a SkottieAPI that allows you to create Skottie instances on your own. This is useful if\nyou want to control the animation with reanimated or if you want to know the duration of the animation before it is\nplayed. The API is of type `SkottieAPI` and provides the following methods:\n\n| Method name           | Description                                                          |\n|-----------------------|----------------------------------------------------------------------|\n| SkottieAPI.createFrom | Creates a Skottie instance from a source (string, json, file import) |\n\n### Android\n\n#### Proguard\n\nIf you're using Proguard, make sure to add the following rule in `proguard-rules.pro`:\n\n```\n# for skia, if you haven't add it\n-keep class com.shopify.reactnative.skia.** { *; }\n\n# for skottie\n-keep class com.skiaskottie.** { *; }\n```\n\n### Community Discord\n\n[Join the Margelo Community Discord](https://discord.gg/6CSHz2qAvA) to chat about react-native-skottie or other Margelo libraries.\n\n### Adopting at scale\n\nThis library is provided _as is_.\n\nIf you stumble upon bugs or need help implementing react-native-skottie, reach out to us at https://margelo.io!\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%2Fmargelo%2Freact-native-skottie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmargelo%2Freact-native-skottie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmargelo%2Freact-native-skottie/lists"}