# airbnb/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/airbnb-lottie-react-native).**

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

## Links

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

## Description

lottie-react-native is a React Native animation library and cross-platform vector animation engine used to render high-quality animations exported from After Effects via the Lottie file format. It functions as a Lottie animation player that allows mobile applications to display hardware-accelerated animations that maintain visual quality across different screen resolutions.

The library serves as a dynamic animation controller, enabling the manipulation of playback, color filters, and text layers in real time. It provides the ability to change animation colors and visuals by applying filters to targeted keypaths based on application state or user themes.

The project covers broad capabilities for vector animation rendering from local or remote sources, including playback control for pausing, resuming, and looping. It also includes support for handling animation events and integrating animation controllers to synchronize motion with external state management tools.

## Tags

### Graphics & Multimedia

- [JSON Animation Rendering](https://awesome-repositories.com/f/graphics-multimedia/json-animation-rendering.md) — Renders complex vector animations defined in the Lottie JSON specification.
- [Vector Animation Libraries](https://awesome-repositories.com/f/graphics-multimedia/animation-motion/vector-animation-libraries.md) — Renders high-quality vector animations from local or remote sources with configurable speed and looping. ([source](https://github.com/airbnb/lottie-react-native#readme))
- [Vector Graphics Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/vector-rendering-pipelines/vector-graphics-renderers.md) — Implements a system for rendering scalable vector animations from external files within a mobile interface.
- [Lottie Players](https://awesome-repositories.com/f/graphics-multimedia/lottie-players.md) — Acts as a dedicated player for high-quality vector animations exported from After Effects via Lottie.
- [Asset Loading Systems](https://awesome-repositories.com/f/graphics-multimedia/asset-loading-systems.md) — Provides a system for importing and managing external Lottie animation files required for rendering.
- [Dynamic Color Filters](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/colors/dynamic-color-filters.md) — Allows changing the color of specific animation layers by applying filters to targeted keypaths. ([source](https://github.com/airbnb/lottie-react-native#readme))
- [Visual Filter Animators](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/visual-effects/visual-filter-animators.md) — Implements programmatic filter manipulation to change animation appearances and replace text strings. ([source](https://github.com/airbnb/lottie-react-native/blob/master/docs/api.md))

### Mobile Development

- [React Native Libraries](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/react-native-libraries.md) — Provides a specialized library for integrating high-fidelity Lottie motion design into React Native applications.

### User Interface & Experience

- [Animation Playback Controls](https://awesome-repositories.com/f/user-interface-experience/animation-frameworks/animation-playback-controls.md) — Provides methods for pausing, resuming, and manipulating the playback progress of animations. ([source](https://github.com/airbnb/lottie-react-native#readme))
- [Native Thread Animation Engines](https://awesome-repositories.com/f/user-interface-experience/animation-optimization-tools/animation-performance-optimizers/native-thread-animation-engines.md) — Offloads animation parsing and rendering to the native UI thread to ensure high-performance, jank-free transitions.
- [Cross-Platform Animation Engines](https://awesome-repositories.com/f/user-interface-experience/cross-platform-animation-engines.md) — Provides a platform-agnostic motion core for displaying hardware-accelerated animations across different mobile resolutions.
- [Imperative Animation Controllers](https://awesome-repositories.com/f/user-interface-experience/imperative-animation-controllers.md) — Provides a programmatic interface to control animation playback states outside of the standard declarative render cycles.
- [Native Rendering Bridges](https://awesome-repositories.com/f/user-interface-experience/native-rendering-bridges.md) — Implements a bridge that serializes animation commands from JavaScript to platform-specific native rendering widgets.
- [Animation Controllers](https://awesome-repositories.com/f/user-interface-experience/animation-controllers.md) — Provides systems for orchestrating animation sequences and synchronizing them with external application state management. ([source](https://github.com/airbnb/lottie-react-native#readme))
- [Animation Lifecycle Callbacks](https://awesome-repositories.com/f/user-interface-experience/animation-frameworks/animation-lifecycle-callbacks.md) — Includes lifecycle hooks that trigger custom logic when animations finish loading or complete a playback cycle. ([source](https://github.com/airbnb/lottie-react-native/blob/master/docs/api.md))
- [Dynamic Animation Controllers](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/dynamic-animation-controllers.md) — Includes tools for updating animation parameters, color filters, and text states during active execution.
- [Interactive Interface Animations](https://awesome-repositories.com/f/user-interface-experience/interactive-interface-animations.md) — Enables animations that respond in real-time to user interactions and application events in mobile environments.
- [Keypath Mapping](https://awesome-repositories.com/f/user-interface-experience/style-props-frameworks/property-based-style-mappings/keypath-mapping.md) — Enables targeting of specific animation layers for real-time modification via hierarchical property paths.
- [State-Driven Animations](https://awesome-repositories.com/f/user-interface-experience/ui-animations/state-driven-animations.md) — Supports animations that update their colors and text in real time based on application state or themes.

### Part of an Awesome List

- [UI Components](https://awesome-repositories.com/f/awesome-lists/devtools/ui-components.md) — Render high-quality After Effects animations natively on mobile.