# Lottie React Native: After Effects Animations in iOS, Android, and Windows Apps

> Lottie React Native wraps the native Lottie renderers for iOS, Android, and Windows, letting React Native developers play Adobe After Effects animations exported as JSON without converting them to GIFs or hand-coding equivalent motion.

**lottie-react-native/lottie-react-native** — Lottie wrapper for React Native.

- Repository: https://github.com/lottie-react-native/lottie-react-native
- Website: https://airbnb.io/lottie/#/react-native
- Stars: 17,207 · Forks: 1,801
- Language: TypeScript
- License: Apache-2.0
- Published: 2026-09-21 · Updated: 2026-09-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/lottie-react-native-lottie-react-native

## The Problem: Designer-to-Developer Animation Handoff

Animators working in Adobe After Effects can produce motion design that is difficult to recreate by hand in code and expensive to ship as video or GIF. Video files are large and play at fixed dimensions. GIFs have limited color depth, produce large file sizes for complex motion, and cannot be tinted or composed with other UI elements programmatically.

Lottie addresses this by treating the Adobe After Effects animation as a JSON data file exported through the bodymovin plugin. The JSON describes the animation's keyframes, shapes, colors, and timing. A Lottie renderer on the target platform reads that JSON and draws each frame using native graphics primitives, producing smooth, resolution-independent animation that can be tinted, paused, reversed, or scrubbed from code.

lottie-react-native is the React Native wrapper over the platform-specific Lottie libraries: lottie-ios for iOS, lottie-android for Android, and Lottie-Windows for Windows via the Community Toolkit. It exposes a single `LottieView` component with a consistent API across platforms.

## Architecture and Platform Coverage

The package is structured as a Yarn monorepo. The `packages/core/` directory contains the shared TypeScript bindings and the platform-specific native module code. The `example/` directory provides a working React Native app demonstrating the API across iOS, Android, macOS, Windows, and web.

Platform support differs by implementation:

On iOS and Android, Lottie React Native uses the native Lottie renderers (lottie-ios and lottie-android), which draw animations using Core Animation on iOS and Android's Canvas API respectively. These renderers support the full bodymovin export feature set, though not every After Effects effect maps to a supported Lottie feature.

On Windows, the integration uses Lottie-Windows from the Microsoft Community Toolkit. The Windows path requires adding project file changes and NuGet packages (LottieGen.MsBuild, Microsoft.UI.Xaml, and for C# apps additional packages for dynamic JSON loading). The README notes that dynamic loading of JSON strings at runtime is currently only supported in C# applications on Windows; C++ apps require codegen animations compiled at build time.

For web, a separate dependency is required:

```bash
yarn add @lottiefiles/dotlottie-react
```

The web renderer uses a different underlying library than the native platforms, so behavior may differ from the iOS and Android implementations.

## Installing Lottie React Native on iOS and Android

Lottie React Native v7.x requires React Native 0.84 or newer and the New Architecture. For projects on older React Native versions, version 7.3.x is the recommended pinned version.

Install the package:

```bash
yarn add lottie-react-native
```

For iOS, run CocoaPods after installing:

```bash
pod install
```

The iOS integration includes a privacy manifest (`PrivacyInfo.xcprivacy`), which is available as a bundle resource within the library. The README states that neither Lottie iOS nor Lottie React Native collects any data, and the privacy manifest documents this for the App Store App Privacy Details requirement.

## Using LottieView: Declarative and Imperative APIs

The simplest usage is declarative. Import `LottieView` and point `source` at a local JSON file:

```jsx
import React from "react";
import LottieView from "lottie-react-native";

export default function Animation() {
  return (
    <LottieView
      source={require("../path/to/animation.json")}
      style={{width: "100%", height: "100%"}}
      autoPlay
      loop
    />
  );
}
```

For programmatic control, an imperative API is available through a ref. The `play()` method accepts optional start and end frame numbers:

```tsx
import React, { useEffect, useRef } from "react";
import LottieView from "lottie-react-native";

export default function AnimationWithImperativeApi() {
  const animationRef = useRef<LottieView>(null);

  useEffect(() => {
    animationRef.current?.play(30, 120);
  }, []);

  return (
    <LottieView
      ref={animationRef}
      source={require("../path/to/animation.json")}
      style={{width: "100%", height: "100%"}}
    />
  );
}
```

Animation playback can also be driven by React Native's Animated API or by Reanimated, using `Animated.createAnimatedComponent(LottieView)` to accept an animated progress value. This allows the animation to be scrubbed in sync with scroll position, gesture state, or any other animated value. Layer colors can be changed at runtime through the `colorFilters` prop, which accepts an array of keypath-and-color pairs matching the layer names in the After Effects project.

## Using .lottie Files and the metro.config.js Requirement

Beyond JSON, Lottie animations can also be packaged as `.lottie` files, which are ZIP archives containing the JSON and any bundled assets. Using `.lottie` files in a React Native project requires updating `metro.config.js` to include the extension in the asset resolver. The README notes this requirement but defers the specific configuration to the documentation.

The monorepo includes an `example-v8/` directory alongside the standard `example/` directory, which contains a Nitro-based variant of the library (`lottie-react-native-nitro`). The `package.json` root scripts expose `nitro:` prefixed commands for this variant, indicating active development on a Nitro Modules integration path alongside the standard implementation.

## Limitations and Wrong-Fit Scenarios

Not all After Effects features are supported. After Effects has a large surface area of effects, expressions, and plugins. Bodymovin can only export features that map to supported Lottie primitives. Animations that rely on unsupported effects will either render incorrectly or not at all. Designers need to validate their animations in the Lottie preview tools before shipping.

The New Architecture requirement in v7.x is a hard constraint. React Native projects still on the legacy paper renderer cannot use v7.x. The 7.3.x line supports older React Native versions but does not receive the improvements landing in v7.x.

Windows support is substantially more complex than iOS and Android. The required project file changes, NuGet packages, and the limitation that dynamic JSON loading only works in C# apps mean that Windows integration is not a drop-in addition. Teams targeting Windows should read the full Windows setup section in the README before committing to Lottie.

For highly complex generative or data-driven animations, where the animation structure changes at runtime based on application state, Lottie's JSON-is-the-source-of-truth model becomes a constraint. In those cases, a code-driven animation library is a better fit.

## Lottie vs. Rive in React Native

Rive is an alternative animation format and runtime that allows animations to have interactive state machines, responding to inputs and transitions driven by application logic. Where a Lottie animation plays a pre-authored sequence, a Rive animation can branch between states based on events from the application.

Lottie React Native renders static sequences authored entirely in After Effects. Designers who work in After Effects and hand off JSON files fit the Lottie workflow. Teams whose animations need runtime branching, hover states, or game-like interactivity fit the Rive model better. The two tools serve different points on the animation complexity spectrum; choosing between them comes down to whether the animation is a playback sequence or a reactive state machine.

## Conclusion

Lottie React Native is the standard choice for React Native teams that receive animation assets from designers working in After Effects and need those animations to run at native quality on iOS and Android. The requirement for React Native 0.84 and the New Architecture in v7.x means projects still on the old architecture must stay on 7.3.x until they migrate. Teams building simple looping icons or progress indicators will find the `autoPlay` and `loop` props sufficient with minimal setup; teams that need frame-accurate playback scrubbed by gesture handlers will use the imperative API with Reanimated. Web support requires the separate `@lottiefiles/dotlottie-react` package and adds a dependency that behaves differently from the native renderer.

## FAQ

### Is Lottie a JSON format?

Yes. Lottie animations are exported from Adobe After Effects as JSON files using the bodymovin plugin. The JSON describes keyframes, shapes, colors, and timing, which the Lottie renderer reads and draws using native graphics primitives on each platform.

### Is Lottie free to use?

The lottie-react-native library is open source and licensed under the Apache-2.0 license, which permits free use in commercial projects. LottieFiles, the platform for hosting and discovering Lottie animations, is a separate service with its own terms.

### How do I install lottie-react-native?

Run `yarn add lottie-react-native`, then `pod install` in the iOS directory for iOS projects. React Native 0.84 or newer and the New Architecture are required for v7.x. Projects on older React Native versions should pin to 7.3.x.

### Is Lottie better than GIF for React Native animations?

Lottie animations are resolution-independent, support transparency without color limitations, can be tinted and controlled programmatically, and are typically smaller in file size than equivalent GIFs for complex animations. The README describes Lottie as letting designers create and ship animations without engineers recreating them by hand.

### How does lottie-react-native compare to Rive?

Lottie renders static sequences authored in After Effects and exported as JSON. Rive supports interactive state machines where animations can branch based on application events. Lottie fits After Effects workflows; Rive fits scenarios where animations need to respond to runtime state changes.

## Sources

- [License: Apache-2.0](https://github.com/lottie-react-native/lottie-react-native/blob/master/LICENSE)
- [lottie-react-native/lottie-react-native on GitHub](https://github.com/lottie-react-native/lottie-react-native)
- [Project website](https://airbnb.io/lottie/#/react-native)
- [README](https://github.com/lottie-react-native/lottie-react-native/blob/master/README.md)
- [Releases](https://github.com/lottie-react-native/lottie-react-native/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/lottie-react-native-lottie-react-native