Lottie vs Rive no React Native e no Flutter (2026)

Quais pacotes estão atualizados em 2026?

Os dois ecossistemas mudaram nomes de pacotes ou requisitos nos últimos dois anos, então os tutoriais ficam desatualizados rápido. As versões abaixo foram verificadas em 12/10/2026.

O padrão é o mesmo nas duas plataformas: um player Lottie clássico para exportações do After Effects, um player separado da LottieFiles para a interatividade do dotLottie e um runtime oficial do Rive.

Eles exigem a New Architecture?

No Lottie atual, sim. O README do lottie-react-native informa que o pacote exige React Native 0.84 ou mais recente e a New Architecture. Projetos em versões mais antigas do React Native precisam atualizar ou continuar em uma versão major anterior do pacote. O README também explica o suporte a .lottie por meio de uma alteração na configuração do Metro e observa que o target web usa @lottiefiles/dotlottie-react.

O novo runtime do Rive tem um requisito mínimo de React Native menor: 0.78 ou posterior, com 0.79 ou posterior recomendado, além de Expo SDK 53+, iOS 15.1+, Android SDK 24+ e Nitro Modules 0.25.2+. Ele contém código nativo, então projetos Expo precisam de um development build em vez do Expo Go.

# Lottie
npm install lottie-react-native

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

Na prática, um projeto que atende ao requisito do lottie-react-native também atende ao do Rive. O contrário não vale: um app em React Native 0.78 a 0.83 pode adotar hoje o novo runtime do Rive, mas não a versão atual do Lottie. Confira os dois READMEs no dia em que for atualizar, porque os requisitos mudam junto com as versões do React Native.

O que mudou com o runtime Nitro do Rive?

O Rive reconstruiu sua integração com React Native sobre Nitro Modules e a publicou como @rive-app/react-native. O pacote antigo rive-react-native ainda é suportado, mas o Rive recomenda migrar.

A reescrita foi feita pela Margelo, que publicou resultados em 9 de julho de 2026. Em um iPhone 13 mini, ela relatou carregar 24 views Rive 94 vezes mais rápido que o runtime legado (29 ms contra 2.716 ms), usando 4,7 vezes menos memória (112 MB contra 525 MB) e gravando propriedades 3,2 vezes mais rápido. Duas ressalvas: a Margelo construiu o runtime, então esses números são do próprio implementador, e eles comparam o Rive novo com o Rive antigo, não o Rive com o Lottie.

A API também passou para Data Binding. Você carrega um arquivo com useRiveFile, cria uma instância de view model e vincula propriedades com hooks como useRiveNumber e useRiveTrigger. O guia de migração do Rive diz que os métodos de input da state machine estão obsoletos: a versão 0.5 registra avisos em runtime e a 0.6 remove as APIs obsoletas. Se seus arquivos .riv só expõem inputs legados, planeje adicionar propriedades de view model antes de atualizar para além da 0.5.

O código das duas APIs está em Como adicionar animação a um app React Native.

Onde as state machines do Lottie rodam no mobile?

Nos players dotLottie da LottieFiles. A LottieFiles adicionou state machines visuais ao Lottie Creator em setembro de 2025; elas ficam armazenadas dentro de arquivos .lottie, com inputs (números, strings, booleanos e eventos), interações de ponteiro e transições condicionais.

Os pacotes clássicos, lottie-react-native e o lottie do Flutter, foram feitos para reproduzir animações do After Effects com controle programático: tocar, pausar, fazer loop, definir o progresso, tocar um intervalo de frames. Você mesmo pode criar um comportamento parecido com estados alternando segmentos ou arquivos pelo código do app, o que funciona para poucos estados.

Se você prefere que a lógica fique no arquivo, use @lottiefiles/dotlottie-react-native ou dotlottie_flutter, que suportam state machines e temas do dotLottie. É uma dependência diferente do player clássico, então verifique o suporte a plataformas e a maturidade para os seus targets antes de decidir.

Os runtimes do Rive sempre incluem a state machine, porque ela faz parte do formato .riv. Lottie vs Rive: state machines compara os dois modelos recurso por recurso.

O pacote lottie para Flutter é oficial?

Não. O pacote lottie amplamente usado no pub.dev (3.6.1 em outubro de 2026) é publicado por xaha.dev e se descreve como uma implementação em Dart puro de um player Lottie, portada do lottie-android. Por ser Dart puro, ele desenha pelo próprio canvas do Flutter em vez de encapsular uma biblioteca Lottie nativa. Ele carrega assets com Lottie.asset ou Lottie.network e consegue ler arquivos .lottie por meio de um decoder personalizado.

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

A LottieFiles, empresa por trás do dotLottie e do Lottie Creator, mantém um plugin separado, dotlottie_flutter, com suporte a state machines e temas.

Nenhuma das duas situações é um problema por si só. Pacotes da comunidade podem ser excelentes e bem mantidos, e este é a escolha padrão na maioria dos tutoriais de Flutter. Isso importa por dois motivos: dúvidas de suporte vão para o repositório do próprio pacote, e não para a LottieFiles, e os recursos que a LottieFiles adiciona ao formato, como state machines, chegam primeiro aos players dela.

O que o rive_native muda no Flutter?

O pacote oficial do Rive para Flutter é o rive, do publisher verificado rive.app. A linha 0.14 levou a maior parte do runtime para um novo pacote, rive_native, e a arquitetura anterior continua como a linha legada 0.13 (0.13.20).

A mudança visível é a escolha do renderizador. Ao carregar um arquivo, você passa uma factory: Factory.rive usa o Rive Renderer, e Factory.flutter desenha pelo próprio renderizador do Flutter. A documentação do Rive observa que alguns recursos, incluindo o vector feathering, exigem o Rive Renderer, e que o Flutter não tem um renderizador padrão, então a escolha precisa ser explícita.

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

Os widgets também mudaram: a documentação atual usa RiveWidget com um RiveWidgetController, ou RiveWidgetBuilder, que cuida dos estados de carregamento e de erro. Tutoriais que mostram RiveAnimation.asset descrevem a API legada.

Para configurar os dois pacotes lado a lado em um mesmo app Flutter, veja Como adicionar animação a um app Flutter.

O Rive é mais rápido que o Lottie no celular?

As evidências são mais escassas do que a maioria dos artigos sugere. O único comparativo independente que encontramos é o teste da Callstack, de janeiro de 2023, com React Native em um Sony Xperia Z3, um celular Android antigo. Ele mediu cerca de 60 FPS para o Rive e 17 FPS para o Lottie, com o Rive usando mais memória total (276 MB contra 246 MB). A Callstack também recriou um Lottie de 24,37 KB como um .riv de 2 KB.

As duas bibliotecas mudaram desde então. O lottie-ios 4.0 tornou padrão um motor de renderização baseado em Core Animation para as animações compatíveis, o que tirou o trabalho por frame da thread principal, e o runtime do Rive para React Native foi reescrito sobre o Nitro. Nenhum benchmark independente comparou as duas versões atualizadas.

O peso é mais fácil de informar. O Rive publica o tamanho dos seus runtimes nativos: cerca de 1,67 MB a mais no tamanho do download no iOS e 2,40 MB no Android arm64. As bibliotecas nativas do Lottie não publicam números oficiais comparáveis. O pacote lottie para Flutter é Dart puro, então não adiciona nenhum binário nativo próprio.

O conselho honesto é fazer o profiling da sua própria animação no dispositivo mais básico que você pretende atender. Performance: Rive vs Lottie analisa cada medição publicada e suas ressalvas.

Qual das duas uma equipe multiplataforma deve escolher?

Escolha Lottie se:

• suas animações vêm do After Effects ou da biblioteca da LottieFiles e são, em sua maioria, loops lineares;
• você usa React Native 0.84+ com a New Architecture, ou Flutter com o player em Dart puro;
• você já usa Lottie na web ou no nativo, então os arquivos são compartilhados;
• as necessidades de estado são simples, ou você está disposto a adotar os players dotLottie para usar state machines.

Escolha o Rive se:

• um personagem ou controle tem muitos estados que o código do app alterna;
• você quer o mesmo arquivo e os mesmos nomes de propriedades no React Native, no Flutter, no iOS e Android nativos e na web;
• você usa React Native 0.78 a 0.83 e ainda não pode atualizar;
• você quer um runtime oficial da própria empresa do formato nos dois frameworks.

Se você precisa de um conjunto de personagem em vez de uma ferramenta, o Charmotion gera um a partir de um personagem, mascote ou logo enviado: 17 animações em um .riv com um view model de Data Binding e inputs clássicos, em poucos minutos, além de exportações de vídeo sob demanda. Ele entrega Rive e vídeo, não Lottie.

Perguntas frequentes

O lottie-react-native funciona com Expo?

Sim, com versões compatíveis. Instale com npx expo install para que a versão corresponda ao seu Expo SDK e confira se a versão do React Native do SDK atende ao requisito do pacote: a versão atual exige React Native 0.84 ou mais recente com a New Architecture. SDKs mais antigos precisam de uma versão major anterior do pacote.

Posso continuar usando o rive-react-native?

Sim, por enquanto. O Rive diz que o pacote legado rive-react-native ainda tem suporte, mas recomenda migrar para o @rive-app/react-native. O novo runtime usa data binding: os métodos de input da state machine geram avisos no log na versão 0.5 e são removidos na 0.6, então planeje a migração para view models.

O pacote lottie para Flutter suporta arquivos .lottie?

Ele consegue ler arquivos .lottie por meio de um decoder personalizado, como mostra sua documentação no pub.dev. Para state machines e temas do dotLottie, a LottieFiles mantém um plugin separado, o dotlottie_flutter. O pacote clássico é mais indicado para reproduzir animações com controle programático do que para executar lógica dentro do arquivo.

Um mesmo arquivo Rive pode ser usado no React Native e no Flutter?

Sim. O formato .riv é o mesmo em todos os runtimes oficiais do Rive, então um único arquivo roda no React Native, no Flutter, no iOS e Android nativos e na web. Use os mesmos nomes de propriedades do view model em cada app e escolha o Rive Renderer quando precisar de recursos como o vector feathering.

Respostas rápidas deste guia

• O lottie-react-native exige a New Architecture?
• O pacote lottie para Flutter é oficial?

Fontes

• 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