# lottie-react-native/lottie-react-native

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/lottie-react-native-lottie-react-native).**

17,162 stars · 1,801 forks · Kotlin · Apache-2.0

## Links

- GitHub: https://github.com/lottie-react-native/lottie-react-native
- Homepage: https://airbnb.io/lottie/#/react-native
- awesome-repositories: https://awesome-repositories.com/repository/lottie-react-native-lottie-react-native.md

## Topics

`after-effects` `animations` `bodymovin` `react` `react-native`

## Description

lottie-react-native is a library for rendering Lottie JSON animations as native graphics within a cross-platform mobile framework. It serves as a JSON-based animation renderer that parses design-exported files into high-performance vector animations on mobile devices.

The framework uses a GPU-accelerated vector animation implementation to offload rendering to the device processor, reducing CPU load to maintain smooth motion. It provides a cross-platform motion framework for controlling animation playback, layout scaling, and dynamic color modifications across different mobile screens.

The library covers animation playback control and layer customization, including the ability to modify specific layer colors via keypaths. It supports loading animations from remote URLs and synchronizing animation progress with external drivers for interactive visual feedback.

## Tags

### Graphics & Multimedia

- [JSON Animation Rendering](https://awesome-repositories.com/f/graphics-multimedia/json-animation-rendering.md) — Parses JSON-based animation files into native graphics hierarchies for high-performance vector drawing.
- [GPU-Accelerated UI Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/gpu-accelerated-ui-rendering.md) — Offloads rendering to the GPU to reduce CPU load and maintain high frame rates on mobile devices. ([source](https://github.com/lottie-react-native/lottie-react-native/blob/master/MIGRATION-5-TO-6.md))
- [Lottie Players](https://awesome-repositories.com/f/graphics-multimedia/lottie-players.md) — Provides a native playback component specifically designed to render animations exported in the Lottie JSON format.
- [Layer Visual Customizations](https://awesome-repositories.com/f/graphics-multimedia/custom-animation-effects/layer-visual-customizations.md) — Supports modifying the appearance of individual animation layers using color filters and dynamic text replacements. ([source](https://github.com/lottie-react-native/lottie-react-native/blob/master/CHANGELOG.md))
- [Dynamic Color Filters](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/colors/dynamic-color-filters.md) — Allows real-time updates to specific animation layer colors using keypaths and hex strings to support dynamic themes. ([source](https://github.com/lottie-react-native/lottie-react-native#readme))
- [Remote Animation Assets](https://awesome-repositories.com/f/graphics-multimedia/remote-animation-assets.md) — Enables fetching and updating animation files from remote URLs without requiring full application store updates.
- [Vector Asset Optimizations](https://awesome-repositories.com/f/graphics-multimedia/vector-asset-optimizations.md) — Optimizes mobile app bundle size and performance by using vector-based JSON animations instead of raster videos.

### Mobile Development

- [React Native Libraries](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/react-native-libraries.md) — Provides a specialized library that extends React Native with high-quality vector animation capabilities.

### Operating Systems & Systems Programming

- [GPU-Accelerated UI Rendering](https://awesome-repositories.com/f/operating-systems-systems-programming/hardware-interfacing-drivers/hardware-acceleration/graphics-acceleration/gpu-accelerated-ui-rendering.md) — Uses a GPU-accelerated graphics pipeline to ensure high-performance, smooth rendering of complex vector animations.

### Programming Languages & Runtimes

- [JavaScript-to-Native Bridges](https://awesome-repositories.com/f/programming-languages-runtimes/language-interoperability/interoperability/javascript-to-native-bridges.md) — Implements a native bridge to send playback commands from JavaScript to native modules efficiently.

### User Interface & Experience

- [Animation Playback Controls](https://awesome-repositories.com/f/user-interface-experience/animation-frameworks/animation-playback-controls.md) — Manages animation looping, autoplay, and playback state through declarative properties and imperative commands. ([source](https://github.com/lottie-react-native/lottie-react-native#readme))
- [Cross-Platform Motion Systems](https://awesome-repositories.com/f/user-interface-experience/cross-platform-motion-systems.md) — Implements a framework for maintaining consistent animation playback and layout scaling across different mobile platforms.
- [Declarative UI Motion Frameworks](https://awesome-repositories.com/f/user-interface-experience/declarative-ui-motion-frameworks.md) — Enables the creation of interactive UIs where animations respond dynamically to state changes and user input.
- [Animation Lifecycle Callbacks](https://awesome-repositories.com/f/user-interface-experience/animation-frameworks/animation-lifecycle-callbacks.md) — Triggers custom callback functions at specific animation lifecycle stages, such as when an animation finishes. ([source](https://github.com/lottie-react-native/lottie-react-native/blob/master/CHANGELOG.md))
- [External Driver Integration](https://awesome-repositories.com/f/user-interface-experience/animation-frameworks/animation-playback-controls/external-driver-integration.md) — Supports linking animation progress to external drivers to synchronize motion with other UI elements.
- [External Driver Synchronization](https://awesome-repositories.com/f/user-interface-experience/animation-frameworks/animation-playback-controls/external-driver-synchronization.md) — Synchronizes visual playback with other UI movements by linking the animation to external drivers. ([source](https://github.com/lottie-react-native/lottie-react-native/blob/master/README.md))
- [Declarative Visualization States](https://awesome-repositories.com/f/user-interface-experience/declarative-visualization-states.md) — Provides a declarative mapping between React component state and native animation rendering updates.
- [Interactive Animation Triggers](https://awesome-repositories.com/f/user-interface-experience/interactive-animation-triggers.md) — Provides visual feedback by triggering specific animations based on app events or layout changes.
- [Remote Media Loading](https://awesome-repositories.com/f/user-interface-experience/remote-media-loading.md) — Fetches and renders animation JSON files from remote URLs instead of relying on local bundles. ([source](https://github.com/lottie-react-native/lottie-react-native/blob/master/CHANGELOG.md))
- [Keypath Mapping](https://awesome-repositories.com/f/user-interface-experience/style-props-frameworks/property-based-style-mappings/keypath-mapping.md) — Allows targeting specific animation layers using string-based keypaths for runtime property and color modifications.