Lottie vs Rive in React Native and Flutter (2026)

Which packages are current in 2026?

Both ecosystems changed package names or requirements in the last two years, so tutorials go stale quickly. Versions below were checked on 2026-10-12.

The pattern is the same on both platforms: a classic Lottie player for After Effects exports, a separate LottieFiles player for dotLottie interactivity, and one official Rive runtime.

Do they need the New Architecture?

For current Lottie, yes. The lottie-react-native README states that the package requires React Native 0.84 or newer and the New Architecture. Projects on older React Native versions need to upgrade or stay on an older major release of the package. The README also covers .lottie support through a Metro config change, and notes that the web target uses @lottiefiles/dotlottie-react.

Rive's new runtime sets a lower React Native floor: 0.78 or later, with 0.79 or later recommended, plus Expo SDK 53+, iOS 15.1+, Android SDK 24+ and Nitro Modules 0.25.2+. It contains native code, so Expo projects need a development build rather than Expo Go.

# Lottie
npm install lottie-react-native

# Rive (Nitro runtime)
npm install @rive-app/react-native react-native-nitro-modules

In practice, a project that meets lottie-react-native's requirement also meets Rive's. The reverse is not true: an app on React Native 0.78 to 0.83 can adopt Rive's new runtime today but not the current Lottie release. Check both READMEs on the day you upgrade, because requirements move with React Native releases.

What changed with Rive's Nitro runtime?

Rive rebuilt its React Native integration on Nitro Modules and published it as @rive-app/react-native. The older rive-react-native package is still supported, but Rive recommends migrating.

The rewrite was done by Margelo, which published results on July 9, 2026. On an iPhone 13 mini, it reported loading 24 Rive views 94 times faster than the legacy runtime (29 ms versus 2,716 ms), using 4.7 times less memory (112 MB versus 525 MB) and writing properties 3.2 times faster. Two caveats: Margelo built the runtime, so these are implementer figures, and they compare new Rive with old Rive, not Rive with Lottie.

The API also moved to data binding. You load a file with useRiveFile, create a view model instance, and bind properties with hooks such as useRiveNumber and useRiveTrigger. Rive's migration guide says the state-machine input methods are deprecated: version 0.5 logs runtime warnings and 0.6 removes the deprecated APIs. If your .riv files only expose legacy inputs, plan to add view model properties before upgrading past 0.5.

Code for both APIs is in How to add animation to a React Native app.

Where do Lottie state machines run on mobile?

In LottieFiles' dotLottie players. LottieFiles added visual state machines to Lottie Creator in September 2025; they are stored inside .lottie files, with inputs (numbers, strings, booleans and events), pointer interactions and conditional transitions.

The classic packages, lottie-react-native and Flutter's lottie, are built around playing After Effects animations with programmatic control: play, pause, loop, set progress, play a frame range. You can build state-like behavior yourself by switching segments or files from app code, which works for a handful of states.

If you want the logic in the file instead, use @lottiefiles/dotlottie-react-native or dotlottie_flutter, which support dotLottie state machines and themes. That is a different dependency from the classic player, so check its platform support and maturity for your targets before committing.

Rive's runtimes always include the state machine, because it is part of the .riv format. Lottie vs Rive state machines compares the two models capability by capability.

Is the Flutter lottie package official?

No. The widely used lottie package on pub.dev (3.6.1 as of October 2026) is published by xaha.dev and describes itself as a pure Dart implementation of a Lottie player, ported from lottie-android. Being pure Dart, it draws through Flutter's own canvas rather than wrapping a native Lottie library. It loads assets with Lottie.asset or Lottie.network and can read .lottie files through a custom decoder.

Lottie.asset('assets/loading.json', width: 160, height: 160, repeat: true)

LottieFiles, the company behind dotLottie and Lottie Creator, maintains a separate plugin, dotlottie_flutter, with state machine and theme support.

Neither status is a red flag by itself. Community packages can be excellent and well maintained; this one is the default choice in most Flutter tutorials. It matters for two reasons: support questions go to the package's own repository rather than to LottieFiles, and features that LottieFiles adds to the format, such as state machines, arrive in its own players first.

What does rive_native change in Flutter?

Rive's official Flutter package is rive, from the verified publisher rive.app. The 0.14 line moved most of the runtime into a new rive_native package, and the previous architecture continues as the legacy 0.13 line (0.13.20).

The visible change is a renderer choice. When you load a file you pass a factory: Factory.rive uses the Rive Renderer, and Factory.flutter draws through Flutter's own renderer. Rive's docs note that some features, including vector feathering, require the Rive Renderer, and that Flutter has no default renderer, so you choose explicitly.

final file = await File.asset('assets/character.riv', riveFactory: Factory.rive);

Widgets also changed: the current docs use RiveWidget with a RiveWidgetController, or RiveWidgetBuilder, which handles loading and error states. Tutorials showing RiveAnimation.asset describe the legacy API.

For a side-by-side setup of both packages in one Flutter app, see How to add animation to a Flutter app.

Is Rive faster than Lottie on mobile?

The evidence is thinner than most articles suggest. The only independent head-to-head we found is Callstack's January 2023 React Native test on a Sony Xperia Z3, an old Android phone. It measured roughly 60 FPS for Rive and 17 FPS for Lottie, with Rive using more total memory (276 MB versus 246 MB). Callstack also recreated a 24.37 KB Lottie as a 2 KB .riv.

Both libraries have changed since. lottie-ios 4.0 made a Core Animation rendering engine the default for supported animations, which moved per-frame work off the main thread; Rive's React Native runtime was rewritten on Nitro. Neither change has been benchmarked against the other independently.

Weight is easier to state. Rive publishes its native runtime sizes: about 1.67 MB added download size on iOS and 2.40 MB on Android arm64. Lottie's native libraries do not publish comparable official figures. The Flutter lottie package is pure Dart, so it adds no native binary of its own.

The honest advice is to profile your own animation on your lowest-end target device. Rive vs Lottie performance goes through every published measurement and its caveats.

Which should a cross-platform team choose?

Choose Lottie if:

• your animations come from After Effects or the LottieFiles library and are mostly linear loops;
• you are on React Native 0.84+ with the New Architecture, or on Flutter with the pure-Dart player;
• you already use Lottie on web or native, so files are shared;
• state needs are simple, or you are ready to adopt the dotLottie players for state machines.

Choose Rive if:

• one character or control has many states that app code switches between;
• you want the same file and property names on React Native, Flutter, native iOS and Android, and the web;
• you are on React Native 0.78 to 0.83 and cannot upgrade yet;
• you want an official runtime from the format's own company on both frameworks.

If you need a character set rather than a tool, Charmotion generates one from an uploaded character, mascot or logo: 17 animations in one .riv with a Data Binding view model and legacy inputs, plus video exports, in about 1–2 hours. It delivers Rive and video, not Lottie.

Frequently asked questions

Does lottie-react-native work with Expo?

Yes, with matching versions. Install it with npx expo install so the version fits your Expo SDK, and check that the SDK's React Native version meets the package's requirement: the current release needs React Native 0.84 or newer with the New Architecture. Older SDKs need an older major version of the package.

Can I keep using rive-react-native?

Yes, for now. Rive says the legacy rive-react-native package is still supported but recommends migrating to @rive-app/react-native. The new runtime uses data binding; its state-machine input methods log warnings in version 0.5 and are removed in 0.6, so plan the move to view models.

Does the Flutter lottie package support .lottie files?

It can read .lottie files through a custom decoder, as its pub.dev documentation shows. For dotLottie state machines and themes, LottieFiles maintains a separate dotlottie_flutter plugin. The classic package is best suited to playing animations with programmatic control rather than running logic inside the file.

Can one Rive file be used in React Native and Flutter?

Yes. The .riv format is the same across Rive's official runtimes, so one file plays in React Native, Flutter, native iOS and Android, and on the web. Use the same view model property names in each app, and choose the Rive Renderer where you need features such as vector feathering.

Quick answers from this guide

• Does lottie-react-native require the New Architecture?
• Is the Flutter lottie package official?

Sources

• lottie-react-native — lottie-react-native on GitHub
• React Native runtime — Rive
• React Native migration guide — Rive
• Rewriting Rive React Native with Nitro Modules — Margelo
• rive package — pub.dev
• lottie package — pub.dev
• dotLottie Flutter player — LottieFiles Developers
• Lottie vs Rive: optimizing mobile app animation — Callstack