Lottie vs Rive en React Native y Flutter (2026)

¿Qué paquetes están vigentes en 2026?

Ambos ecosistemas cambiaron nombres de paquetes o requisitos en los últimos dos años, así que los tutoriales quedan desactualizados rápido. Las versiones de abajo se verificaron el 12 de octubre de 2026.

El patrón es el mismo en ambas plataformas: un reproductor clásico de Lottie para exportaciones de After Effects, un reproductor aparte de LottieFiles para la interactividad de dotLottie y un único runtime oficial de Rive.

¿Necesitan la New Architecture?

En el caso de la versión actual de Lottie, sí. El README de lottie-react-native indica que el paquete requiere React Native 0.84 o posterior y la New Architecture. Los proyectos con versiones anteriores de React Native deben actualizarse o quedarse en una versión mayor anterior del paquete. El README también explica la compatibilidad con .lottie mediante un cambio en la configuración de Metro y señala que el destino web usa @lottiefiles/dotlottie-react.

El nuevo runtime de Rive exige una versión mínima de React Native más baja: 0.78 o posterior, con 0.79 o posterior recomendada, además de Expo SDK 53+, iOS 15.1+, Android SDK 24+ y Nitro Modules 0.25.2+. Contiene código nativo, así que los proyectos de Expo necesitan un development build en lugar de Expo Go.

# Lottie
npm install lottie-react-native

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

En la práctica, un proyecto que cumple el requisito de lottie-react-native también cumple el de Rive. Lo contrario no es cierto: una app en React Native 0.78 a 0.83 puede adoptar hoy el nuevo runtime de Rive, pero no la versión actual de Lottie. Revisa ambos README el día que actualices, porque los requisitos cambian con cada versión de React Native.

¿Qué cambió con el runtime Nitro de Rive?

Rive reconstruyó su integración con React Native sobre Nitro Modules y la publicó como @rive-app/react-native. El paquete anterior, rive-react-native, sigue teniendo soporte, pero Rive recomienda migrar.

La reescritura la hizo Margelo, que publicó resultados el 9 de julio de 2026. En un iPhone 13 mini, informó que cargaba 24 vistas de Rive 94 veces más rápido que el runtime heredado (29 ms frente a 2716 ms), con 4.7 veces menos memoria (112 MB frente a 525 MB) y escribiendo propiedades 3.2 veces más rápido. Dos salvedades: Margelo desarrolló el runtime, así que son cifras del propio implementador, y comparan el Rive nuevo con el Rive anterior, no Rive con Lottie.

La API también pasó a Data Binding. Cargas un archivo con useRiveFile, creas una instancia de view model y vinculas propiedades con hooks como useRiveNumber y useRiveTrigger. La guía de migración de Rive indica que los métodos de inputs de la máquina de estados están obsoletos: la versión 0.5 muestra advertencias en tiempo de ejecución y la 0.6 elimina las API obsoletas. Si tus archivos .riv solo exponen inputs heredados, planea agregar propiedades de view model antes de actualizar más allá de la 0.5.

El código para ambas API está en Cómo agregar animación a una app de React Native.

¿Dónde se ejecutan las máquinas de estados de Lottie en móviles?

En los reproductores dotLottie de LottieFiles. LottieFiles incorporó máquinas de estados visuales a Lottie Creator en septiembre de 2025; se guardan dentro de archivos .lottie, con inputs (números, cadenas, booleanos y eventos), interacciones de puntero y transiciones condicionales.

Los paquetes clásicos, lottie-react-native y lottie de Flutter, están pensados para reproducir animaciones de After Effects con control programático: reproducir, pausar, poner en loop, fijar el progreso o reproducir un rango de fotogramas. Puedes crear un comportamiento similar a estados por tu cuenta cambiando segmentos o archivos desde el código de la app, lo que funciona bien con unos pocos estados.

Si prefieres que la lógica esté en el archivo, usa @lottiefiles/dotlottie-react-native o dotlottie_flutter, que admiten máquinas de estados y temas de dotLottie. Es una dependencia distinta del reproductor clásico, así que revisa su compatibilidad con plataformas y su madurez para tus destinos antes de decidirte.

Los runtimes de Rive siempre incluyen la máquina de estados, porque forma parte del formato .riv. Máquinas de estados en Lottie vs Rive compara los dos modelos función por función.

¿El paquete lottie de Flutter es oficial?

No. El paquete lottie más usado de pub.dev (3.6.1 a octubre de 2026) lo publica xaha.dev y se describe como una implementación en Dart puro de un reproductor de Lottie, portada desde lottie-android. Al ser Dart puro, dibuja con el propio canvas de Flutter en lugar de envolver una biblioteca nativa de Lottie. Carga recursos con Lottie.asset o Lottie.network y puede leer archivos .lottie mediante un decodificador personalizado.

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

LottieFiles, la empresa detrás de dotLottie y Lottie Creator, mantiene un plugin aparte, dotlottie_flutter, con soporte para máquinas de estados y temas.

Ninguna de las dos situaciones es un problema en sí. Los paquetes de la comunidad pueden ser excelentes y estar bien mantenidos; este es la opción por defecto en la mayoría de los tutoriales de Flutter. Importa por dos razones: las preguntas de soporte van al repositorio del propio paquete y no a LottieFiles, y las funciones que LottieFiles agrega al formato, como las máquinas de estados, llegan primero a sus propios reproductores.

¿Qué cambia rive_native en Flutter?

El paquete oficial de Rive para Flutter es rive, del publicador verificado rive.app. La línea 0.14 trasladó la mayor parte del runtime a un nuevo paquete, rive_native, y la arquitectura anterior continúa como la línea legacy 0.13 (0.13.20).

El cambio visible es la elección del renderizador. Al cargar un archivo pasas una factory: Factory.rive usa el Rive Renderer y Factory.flutter dibuja con el renderizador propio de Flutter. La documentación de Rive indica que algunas funciones, como el vector feathering, requieren el Rive Renderer, y que en Flutter no hay renderizador por defecto, así que debes elegirlo de forma explícita.

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

Los widgets también cambiaron: la documentación actual usa RiveWidget con un RiveWidgetController, o RiveWidgetBuilder, que gestiona los estados de carga y de error. Los tutoriales que muestran RiveAnimation.asset describen la API legacy.

Para configurar ambos paquetes lado a lado en una misma app de Flutter, consulta Cómo agregar animación a una app de Flutter.

¿Rive es más rápido que Lottie en móviles?

La evidencia es más escasa de lo que sugieren la mayoría de los artículos. La única comparación directa independiente que encontramos es la prueba de Callstack en React Native de enero de 2023, en un Sony Xperia Z3, un teléfono Android antiguo. Midió aproximadamente 60 FPS para Rive y 17 FPS para Lottie, con Rive usando más memoria total (276 MB frente a 246 MB). Callstack también recreó un Lottie de 24,37 KB como un .riv de 2 KB.

Ambas bibliotecas han cambiado desde entonces. lottie-ios 4.0 convirtió un motor de renderizado basado en Core Animation en el predeterminado para las animaciones compatibles, lo que sacó del hilo principal el trabajo de cada fotograma; el runtime de Rive para React Native se reescribió sobre Nitro. Ninguno de estos cambios se ha comparado con el otro de forma independiente.

El peso es más fácil de precisar. Rive publica el tamaño de sus runtimes nativos: alrededor de 1,67 MB de descarga adicional en iOS y 2,40 MB en Android arm64. Las bibliotecas nativas de Lottie no publican cifras oficiales comparables. El paquete lottie de Flutter es Dart puro, así que no agrega ningún binario nativo propio.

El consejo honesto es perfilar tu propia animación en el dispositivo de gama más baja que quieras soportar. Rendimiento de Rive vs Lottie repasa cada medición publicada y sus salvedades.

¿Cuál debería elegir un equipo multiplataforma?

Elige Lottie si:

• tus animaciones vienen de After Effects o de la biblioteca de LottieFiles y son principalmente loops lineales;
• usas React Native 0.84+ con la New Architecture, o Flutter con el reproductor en Dart puro;
• ya usas Lottie en web o en nativo, así que los archivos se comparten;
• tus necesidades de estados son simples, o estás listo para adoptar los reproductores de dotLottie para máquinas de estados.

Elige Rive si:

• un personaje o control tiene muchos estados entre los que cambia el código de la app;
• quieres el mismo archivo y los mismos nombres de propiedades en React Native, Flutter, iOS y Android nativos, y la web;
• usas React Native 0.78 a 0.83 y todavía no puedes actualizar;
• quieres un runtime oficial de la propia empresa del formato en ambos frameworks.

Si necesitas un set de personaje en lugar de una herramienta, Charmotion lo genera a partir de un personaje, mascota o logo que subes: 17 animaciones en un .riv con un view model de Data Binding e inputs heredados, en pocos minutos, además de exportaciones de video bajo demanda. Entrega Rive y video, no Lottie.

Preguntas frecuentes

¿lottie-react-native funciona con Expo?

Sí, con versiones compatibles. Instálalo con npx expo install para que la versión se ajuste a tu SDK de Expo, y comprueba que la versión de React Native del SDK cumpla el requisito del paquete: la versión actual necesita React Native 0.84 o posterior con la New Architecture. Los SDK más antiguos necesitan una versión major anterior del paquete.

¿Puedo seguir usando rive-react-native?

Sí, por ahora. Rive indica que el paquete legacy rive-react-native sigue teniendo soporte, pero recomienda migrar a @rive-app/react-native. El nuevo runtime usa Data Binding; sus métodos de inputs de la máquina de estados muestran advertencias en la versión 0.5 y se eliminan en la 0.6, así que planifica la migración a view models.

¿El paquete lottie de Flutter admite archivos .lottie?

Puede leer archivos .lottie mediante un decodificador personalizado, como muestra su documentación en pub.dev. Para las máquinas de estados y los temas de dotLottie, LottieFiles mantiene un plugin aparte, dotlottie_flutter. El paquete clásico es más adecuado para reproducir animaciones con control desde el código que para ejecutar lógica dentro del archivo.

¿Se puede usar un mismo archivo de Rive en React Native y Flutter?

Sí. El formato .riv es el mismo en todos los runtimes oficiales de Rive, así que un solo archivo se reproduce en React Native, Flutter, iOS y Android nativos, y en la web. Usa los mismos nombres de propiedades del view model en cada app y elige el Rive Renderer donde necesites funciones como el vector feathering.

Respuestas rápidas de esta guía

• ¿lottie-react-native requiere la New Architecture?
• ¿El paquete lottie de Flutter es oficial?

Fuentes

• 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