Rive or Lottie: choosing an animation tool for React Native and web

Every app we design has a handful of moments that need more than a fade: an empty state, a success screen, a toggle with character, an onboarding mascot. For those, the choice usually comes down to two tools. Lottie, the JSON animation format that grew out of After Effects. And Rive, a design tool with its own file format and runtimes built for interactive graphics.

Both work in React Native and on the web. Both are free to ship at runtime. They are built on different ideas, though, and picking the wrong one costs weeks. This review covers how each works today, where each one breaks down, and how we choose.

Two different ideas of an animation

A Lottie file is a description of a timeline. Designers animate in Adobe After Effects, and the Bodymovin plugin exports the composition as JSON that a player renders frame by frame. The format is open. The Lottie Animation Community, a non-profit project hosted by the Linux Foundation, now maintains a formal specification. You play it, pause it, seek it, or play a segment of it.

dotLottie (.lottie) is the packaged version: one compressed file that can hold several animations, their image assets, themes and state machines. LottieFiles drives the format and its players, and the dotLottie 2.0 spec is where interactivity was added.

A Rive file (.riv) is a compact binary built in the Rive editor. It holds artboards, timeline animations and, most importantly, state machines: a graph of states and transitions that decides which animation plays, driven by inputs from your code or by pointer events inside the graphic. Newer files can also expose view models through data binding, so the app sets values such as a progress number or a user's name and the graphic reacts.

That difference is the whole review in one line. Lottie started as playback and has added interactivity. Rive started as interactivity and handles playback as a simple case.

Authoring: After Effects or a dedicated editor

Lottie's strength is that motion designers already know After Effects. If your brand's motion lives in AE files, Lottie gets it into the app with the least retraining. The catch is that not every AE feature survives export. Effects, some expressions and certain layer types either don't render or render differently per player, so we always preview exports on real devices before signing off.

LottieFiles also offers Lottie Creator, a browser-based editor that imports Lottie JSON, dotLottie and SVG and exports Lottie JSON, dotLottie and video formats. Since September 2025 it can build state machines, with interactions limited at launch to mouse enter, leave, down and up.

Rive is its own editor, in the browser or as a desktop app. Designers rig vector graphics with bones and constraints, animate on timelines, and wire up state machines visually. There is no After Effects import, so the work starts there. In exchange, the designer can build and test the interactive logic themselves instead of handing a spec to an engineer.

Runtimes in React Native and on the web

The package landscape changed in 2026, so here is where things stood at the start of September.

• Rive, React Native: @rive-app/react-native is Rive's new runtime, built on Nitro Modules, and the docs recommend it over the legacy rive-react-native package, which is still supported. Per the docs it needs React Native 0.78+ and, with Expo, SDK 53+. A 0.5 beta that moves it onto Rive's newer native runtimes was in testing.
• Rive, web: @rive-app/webgl2 draws with the Rive Renderer, the same renderer as the editor. @rive-app/canvas and the smaller @rive-app/canvas-lite use Canvas2D, and React wrappers exist for each.
• Lottie, React Native: lottie-react-native wraps the native Lottie libraries on iOS and Android and plays both JSON and .lottie files. 7.x was the stable line; an 8.0 release candidate appeared in late August, so check its React Native and New Architecture requirements before upgrading.
• dotLottie, React Native: @lottiefiles/dotlottie-react-native uses LottieFiles' own native players and exposes the dotLottie state machine API (stateMachineLoad, stateMachineFire, typed input setters). It needs a development build; Expo Go does not include its native module.
• Lottie, web: the long-standing lottie-web player renders to SVG, canvas or HTML. LottieFiles' @lottiefiles/dotlottie-web and @lottiefiles/dotlottie-react use a WebAssembly engine and support dotLottie state machines.

Here is the shape of the new Rive API in React Native. You load the file once, create a view model instance, and set values from your own state.

import { useEffect } from 'react';
import { RiveView, useRiveFile, useViewModelInstance, useRiveNumber } from '@rive-app/react-native';

export function GoalRing({ progress }: { progress: number }) {
  const { riveFile } = useRiveFile(require('./goal_ring.riv'));
  const { instance } = useViewModelInstance(riveFile, { async: true });
  const { setValue } = useRiveNumber('progress', instance);

  useEffect(() => { setValue(progress); }, [progress, setValue]);

  return riveFile && instance ? (
    <RiveView file={riveFile} dataBind={instance} style={{ width: 160, height: 160 }} />
  ) : null;
}

Performance, stated carefully

We don't publish frame-rate comparisons, because results depend on the file far more than on the tool. A Lottie with a few shape layers is cheap. A Lottie exported from a heavy AE comp with masks, mattes and hundreds of layers can drop frames on a mid-range Android phone no matter which player draws it. The same goes for a Rive file with thousands of vertices.

A few structural points do hold. Raw Lottie JSON can get large, and dotLottie exists partly to fix that with compression and shared assets. Both modern web players download a WebAssembly engine on first use, which matters on a landing page where the animation is above the fold. And on every platform, an animation that keeps looping off-screen costs battery; pause it when it is not visible.

Our rule is simple: test the actual file on the slowest device you support, with the profiler open, before it ships.

Side by side

Our verdict: when we pick which

We pick Lottie when the animation is a story with a beginning and an end: an onboarding illustration, a success burst, an empty-state loop. We also pick it when the client already has motion designers in After Effects or a library of existing Lottie files. Reusing that work is worth more than any feature on the Rive side.

We pick Rive when the graphic has to respond: a mascot that reacts to input, a progress ring bound to live data, a toggle or tab bar with real character, anything with more than two states. Building that in Lottie means stitching segments together in app code, and every new state becomes an engineering ticket. In Rive the designer owns the logic, and engineering only sets values.

• Count the statesOne or two states (play, done): Lottie. Three or more, or states that depend on app data: Rive.
• Look at who will author itAn AE motion designer on the team pushes towards Lottie. A designer willing to learn a new editor opens up Rive.
• Check the runtime you will shipOn React Native, confirm Expo and New Architecture support for the exact package version before design starts.
• Budget for the web playerBoth modern web players load a WebAssembly engine. Lazy-load below the fold, and preload when the animation is the hero.
• Test the real file on a slow phoneFile complexity decides performance. Profile before release, and pause off-screen loops.
• Respect reduced motionShow a static frame or a short cross-fade when the user has asked the system for less motion.

Most of our apps end up with both: Lottie for a few illustrative moments, Rive for the one or two interactive pieces that carry the brand. That is a fine outcome, as long as each team knows which tool owns which moment.

Sources

1. React Native - Rive · Rive
2. State Machine Overview - Rive · Rive
3. Data Binding Overview - Rive · Rive
4. lottie-web · Airbnb on GitHub
5. lottie-react-native · GitHub
6. dotLottie · LottieFiles
7. State Machines Are Finally in Lottie Creator · LottieFiles
8. Lottie Animation Community · Lottie Animation Community