Rive en Expo: requiere un development build (no Expo Go)

¿Rive funciona en Expo Go?

No. Expo Go es una app precompilada que contiene un conjunto fijo de módulos nativos. La documentación de Rive lo dice claramente: como su paquete de React Native contiene código nativo personalizado, no es compatible con Expo Go y necesitas un development build.

Un development build es tu propia versión de la idea de Expo Go: un build de depuración de tu app que incluye expo-dev-client y las bibliotecas nativas que hayas agregado. Sigues teniendo fast refresh y el menú de desarrollador, y los cambios de JavaScript se cargan sin recompilar. Solo recompilas cuando cambian las dependencias nativas o los config plugins.

Si ves un error, por ejemplo un módulo nativo faltante, justo cuando se renderiza una pantalla con Rive, casi seguro la app se está ejecutando en Expo Go y no en tu development build.

¿Cómo creo un development build para Rive?

A partir de un proyecto de Expo nuevo o existente, instala el dev client y el runtime de Rive con npx expo install, que elige versiones compatibles con tu SDK:

npx create-expo-app my-rive-app
cd my-rive-app
npx expo install expo-dev-client
npx expo install @rive-app/react-native react-native-nitro-modules

El nuevo runtime está construido sobre Nitro Modules, por eso se instala react-native-nitro-modules junto con él. Luego compila e instala la app. En local, esto requiere Xcode o Android Studio:

npx expo run:ios
npx expo run:android

O deja que EAS lo compile en la nube e instálalo en un dispositivo o simulador:

eas build --profile development --platform ios
eas build --profile development --platform android

Inicia el bundler con npx expo start y abre el proyecto en tu development build, no en Expo Go. A partir de aquí, editar JavaScript funciona como siempre. Cuando agregues o cambies paquetes nativos o config plugins, ejecuta npx expo prebuild --clean (para builds locales) y vuelve a compilar.

Para renderizar el componente y controlar la máquina de estados, consulta la sección de React Native de la guía de runtimes de Rive; el código es el mismo en Expo y en React Native puro.

¿Qué paquete usar: @rive-app/react-native o rive-react-native?

Usa @rive-app/react-native en proyectos nuevos. La documentación de React Native de Rive lo presenta como el nuevo runtime y a rive-react-native como el runtime legacy.

La diferencia importa para cómo controlas la animación. El nuevo runtime admite Data Binding con view models, y Rive publicó un calendario para eliminar de él los métodos obsoletos de inputs de la máquina de estados. El paquete legacy usa las API de inputs (asignar un número, disparar un trigger por nombre de máquina de estados y de input).

• Archivo nuevo con view models: nuevo runtime, Data Binding.
• App existente con el paquete legacy y archivos solo con inputs: sigue funcionando; planifica la migración a view models antes de actualizar.

El iOS mínimo más bajo del paquete legacy (14.0 frente a 15.1) rara vez es motivo para elegirlo en 2026, ya que los SDK actuales de Expo ya apuntan a versiones más recientes de iOS.

Los archivos .riv de Charmotion admiten los dos caminos: CharacterViewModelMachine con un view model Character (un número mood de 0 a 9 y los triggers success, error, yes, no, enter y exit) para el runtime nuevo, y CharacterStateMachine con los inputs heredados equivalentes. Una sola subida te da 17 animaciones en pocos minutos, además de exportaciones bajo demanda de MP4, GIF y video transparente.

¿Cómo soluciono los errores de build de Android en Expo SDK 53?

La guía de Expo de Rive explica que el SDK de Rive para Android requiere compileSdkVersion 36 y Android Gradle Plugin 8.9.1 o posterior, mientras que Expo SDK 53 usa versiones más bajas por defecto. El síntoma es un error de Gradle durante el build de Android. La solución es subir ambas mediante config plugins en app.json:

{
  "expo": {
    "plugins": [
      ["expo-custom-agp", "8.9.2"],
      ["expo-build-properties", {
        "android": { "compileSdkVersion": 36 },
        "ios": { "deploymentTarget": "15.1" }
      }]
    ]
  }
}

Primero instala los plugins con npx expo install expo-build-properties y agrega expo-custom-agp como indica la guía. Luego regenera los proyectos nativos y vuelve a compilar:

npx expo prebuild --clean
npx expo run:android

Es posible que los SDK de Expo más recientes ya usen estas versiones por defecto; revisa la página de Expo de Rive para tu SDK antes de agregar ajustes que no necesitas. Cambiar la versión del plugin de Gradle afecta a todos los módulos nativos, así que recompila y haz una prueba rápida de toda la app, no solo de la pantalla con Rive.

¿Qué deployment target de iOS necesita Rive?

Según la guía de Expo de Rive, el nuevo runtime requiere iOS 15.1 o posterior. Defínelo de forma explícita con expo-build-properties, como en el app.json anterior, para que el proyecto de Xcode generado y CocoaPods coincidan:

["expo-build-properties", { "ios": { "deploymentTarget": "15.1" } }]

Si tu app ya apunta a una versión de iOS más reciente, conserva el valor más alto. Bajarlo para que coincida con Rive rompería otras dependencias.

Después de cambiar el target, ejecuta npx expo prebuild --clean antes de npx expo run:ios. Los Pods desactualizados son la causa más común de que un cambio de target parezca no tener efecto. En EAS, el prebuild limpio se hace en cada build, así que basta con hacer commit del cambio en app.json.

La guía de Expo de Rive no indica un mínimo comparable para Android más allá de la configuración de compilación de la sección anterior, pero prueba en la versión de Android más antigua que admita tu app, ya que el rendimiento de renderizado varía más en dispositivos de gama baja.

¿Puedo usar Lottie en Expo Go mientras hago prototipos?

Es posible. La referencia del SDK de Expo ha listado lottie-react-native como incluido en Expo Go, instalado con npx expo install lottie-react-native. Los módulos incluidos cambian entre versiones del SDK, así que revisa la documentación de Expo para tu versión antes de depender de él.

Si está disponible, Lottie es un sustituto razonable mientras diseñas pantallas en Expo Go: un clip idle en loop en el lugar donde irá la mascota. Ten en cuenta lo que pierdes. Lottie no tiene view models al estilo de Rive, así que pasar de idle a loading y a success implica cambiar archivos o segmentos y sincronizar tú mismo las transiciones. Cuando el personaje necesite reaccionar al estado de la app, pasa a un development build y a Rive.

Una tercera opción para prototipos es un video simple. Un MP4 del personaje, sin sonido y en loop, se reproduce en Expo Go con el módulo de video de Expo y da a los stakeholders una vista previa realista sin ninguna configuración nativa. Reemplázalo por el componente de Rive cuando tengas el development build.

¿Cómo incluyo el archivo .riv como asset?

Metro, el bundler que usa Expo, solo trata como assets las extensiones de archivo conocidas. Si cargas el archivo con require("./assets/character.riv"), agrega riv a las extensiones de assets en metro.config.js:

const { getDefaultConfig } = require("expo/metro-config");

const config = getDefaultConfig(__dirname);
config.resolver.assetExts.push("riv");

module.exports = config;

Reinicia el bundler con npx expo start --clear después de editar la configuración. Sin este paso, Metro intenta interpretar el archivo binario como JavaScript y falla con un error de resolución o de sintaxis.

Otra opción es cargar el archivo desde una URL. Así el binario de la app es más pequeño y puedes actualizar el personaje sin publicar una versión nueva, a costa de una solicitud de red en la primera carga. Para una mascota que aparece al iniciar o sin conexión, inclúyela en el bundle. En cualquier caso, carga el archivo una vez por pantalla y no en cada render.

Cómo ejecutar Rive en una app de Expo

1. Instala el dev client. Ejecuta npx expo install expo-dev-client.
2. Instala Rive. Ejecuta npx expo install @rive-app/react-native react-native-nitro-modules.
3. Configura las versiones nativas. Agrega expo-build-properties (iOS 15.1 y, en Android, compileSdkVersion 36 con SDK 53) a app.json.
4. Registra el tipo de asset. Agrega riv a resolver.assetExts en metro.config.js.
5. Generar. Ejecuta npx expo prebuild --clean y npx expo run:ios, o eas build --profile development.
6. Abre el proyecto en el development build. Inicia npx expo start y abre el proyecto en tu development build, no en Expo Go.

Preguntas frecuentes

¿Puedo agregar Rive a Expo sin hacer eject?

Sí. Expo ya no requiere hacer eject. Los development builds y los config plugins te permiten agregar paquetes nativos como @rive-app/react-native sin salir del managed workflow. npx expo prebuild genera los proyectos nativos por ti, y EAS Build puede generar los binarios en la nube.

¿Necesito una Mac para compilar Rive para iOS con Expo?

No, si usas EAS Build, que compila el development build de iOS en los servidores de Expo y te entrega un build instalable. Para compilar localmente con npx expo run:ios necesitas Xcode, que solo funciona en macOS. Para instalarlo en un iPhone físico también necesitas una cuenta de desarrollador de Apple para firmar la app.

¿Rive funciona con Expo Router?

Sí. Expo Router solo se encarga de la navegación, así que una pantalla que renderiza el componente de Rive se comporta como cualquier otra. Carga el archivo una vez por pantalla, libéralo cuando la pantalla se desmonte y evita recrear el componente en cada render para que la animación no se reinicie de forma inesperada.

Respuestas rápidas de esta guía

• ¿Rive funciona en Expo Go?
• ¿Por qué falla mi build de Android con Expo SDK 53 después de agregar Rive?

Fuentes

• Adding Rive to Expo, Rive
• React Native runtime, Rive
• Introduction to development builds, Expo
• Customizing Metro, Expo