Rive en Android, Flutter y React Native

¿Qué paquete de Rive necesito para cada plataforma?

Los nombres de los paquetes cambiaron hace poco, así que empieza con la lista actual:

La última columna es importante porque Rive declaró obsoletos los inputs de la máquina de estados en favor de Data Binding. Rive afirma que los archivos existentes basados en inputs siguen funcionando, y en Android y Flutter las API de inputs siguen disponibles. React Native es la excepción: el runtime nuevo está eliminando los métodos de inputs según un calendario publicado.

Revisa qué expone tu .riv antes de escribir código. Un archivo que solo tiene inputs necesita las API de inputs; un archivo con view models puede usar Data Binding. El comando Convert Inputs to View Models del editor puede agregar view models a un archivo antiguo.

¿Cómo agrego Rive a una app de Android?

Agrega el runtime desde Maven Central al build.gradle de tu módulo. La documentación de Rive muestra la versión 11.9.2; la más reciente en Maven Central era la 11.14.1 cuando lo revisamos en octubre de 2026, así que usa la versión más reciente.

dependencies {
    implementation 'app.rive:rive-android:11.14.1'
}

Rive concentra el desarrollo nuevo en su API de Compose. La API basada en View, construida en torno a RiveAnimationView, ahora se llama "legacy", pero Rive afirma que seguirá siendo compatible. Para una app nueva con Compose, sigue la sección de Compose de la documentación de Rive para Android. Para una app existente basada en View, o cuando necesites los métodos de inputs que aparecen abajo, la vista legacy es el camino más directo:

<app.rive.runtime.kotlin.RiveAnimationView
    android:id="@+id/character"
    android:layout_width="220dp"
    android:layout_height="220dp"
    app:riveResource="@raw/character"
    app:riveStateMachine="CharacterStateMachine" />

Coloca el .riv en res/raw/ (ahí los nombres de archivo deben ir en minúsculas y con guiones bajos). Si tu pantalla está escrita en Compose pero quieres la vista legacy, puedes alojar RiveAnimationView dentro del composable de interoperabilidad AndroidView de Compose.

En dispositivos ARM-v8a, Rive indica que el runtime pesa 2.40 MB de descarga y 7.03 MB instalado (enero de 2026).

¿Cómo controlo los estados en Android?

El RiveAnimationView legacy tiene un método por cada tipo de input. Cada uno recibe el nombre de la máquina de estados y el nombre del input:

val character = findViewById<RiveAnimationView>(R.id.character)

// Number input: pick a loop
character.setNumberState("CharacterStateMachine", "mood", 5f)

// Boolean input (if your file has one)
character.setBooleanState("CharacterStateMachine", "muted", true)

// Trigger input: play a one-shot
character.fireState("CharacterStateMachine", "success")

Llama a estos métodos desde el hilo principal, normalmente en respuesta al estado del view model. Un patrón común es observar un flujo de estado de la UI, asignar cada estado a un número de mood y disparar triggers para eventos puntuales, como un pago completado.

Los nombres distinguen entre mayúsculas y minúsculas. Si no pasa nada, confirma que la vista se configuró con el mismo nombre de máquina de estados que pasas a estos métodos; de lo contrario, el archivo reproduce su animación predeterminada e ignora los inputs.

Estos métodos pertenecen al sistema de inputs, que está obsoleto. Funcionan con los archivos existentes basados en inputs. Para archivos con view models, usa en su lugar las API de Data Binding de Rive para Android.

¿Cómo uso Rive en Flutter?

Agrega el paquete rive. La documentación de Rive indica rive: ^0.14.11, y hay una versión mayor 0.15.x disponible como versión de desarrollo. Los ejemplos de esta guía usan la 0.14.

dependencies:
  rive: ^0.14.11

flutter:
  assets:
    - assets/character.riv

Inicializa el runtime nativo una sola vez; luego carga el archivo, crea un controlador para la máquina de estados y renderízalo con RiveWidget:

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await RiveNative.init();
  runApp(const MyApp());
}

class Character extends StatefulWidget {
  const Character({super.key});
  @override
  State<Character> createState() => _CharacterState();
}

class _CharacterState extends State<Character> {
  File? file;
  RiveWidgetController? controller;

  @override
  void initState() {
    super.initState();
    _load();
  }

  Future<void> _load() async {
    final f = await File.asset('assets/character.riv', riveFactory: Factory.rive);
    if (f == null) return;
    setState(() {
      file = f;
      controller = RiveWidgetController(
        f,
        stateMachineSelector: StateMachineSelector.byName('CharacterStateMachine'),
      );
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    file?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final c = controller;
    if (c == null) return const SizedBox(width: 220, height: 220);
    return SizedBox(width: 220, height: 220, child: RiveWidget(controller: c, fit: Fit.contain));
  }
}

Rive también ofrece RiveWidgetBuilder, que gestiona por ti los estados de carga y de error. Úsalo si prefieres escribir menos código repetitivo (boilerplate).

Carga el archivo una vez y consérvalo durante toda la vida de la pantalla. Volver a cargarlo en build reinicia la animación y desperdicia trabajo. Llama a dispose tanto en el controlador como en el archivo cuando el widget desaparezca, como se muestra arriba, para liberar los recursos nativos.

¿Cómo asigno un número o disparo un trigger en Flutter?

La propiedad stateMachine del controlador da acceso por nombre a los inputs heredados. Los números y booleanos tienen value; los triggers tienen fire().

final sm = controller!.stateMachine;

final mood = sm.number('mood');
final success = sm.trigger('success');

mood?.value = 5;    // loading loop
success?.fire();    // one-shot reaction

// When you no longer need them:
mood?.dispose();
success?.dispose();

Busca los inputs después de que exista el controlador, guarda las referencias en lugar de buscarlas en cada fotograma y libéralas junto con el controlador. Las búsquedas devuelven null si el nombre no existe, así que una llamada null-aware oculta los errores de escritura; registra una advertencia en las compilaciones de depuración si falta un input.

Como en otras plataformas, los inputs están obsoletos en favor de Data Binding, pero el runtime de Rive para Flutter aún los admite en archivos existentes. Los archivos con view models se pueden controlar con la API de Data Binding de Flutter.

¿Cómo uso Rive en React Native?

El runtime actual de Rive para React Native está construido sobre Nitro Modules. Instálalo junto con su dependencia peer:

npm install @rive-app/react-native react-native-nitro-modules

Incluye código nativo, así que en proyectos de Expo necesita una development build en lugar de Expo Go. La documentación de Rive describe la API del componente y Data Binding para este runtime.

El cambio clave para los archivos existentes: los métodos de inputs de la máquina de estados están obsoletos en el nuevo runtime. El calendario de migración de Rive es el siguiente: la v0.4 funciona sin advertencias, la v0.5 muestra advertencias en tiempo de ejecución y la v0.6 elimina las API obsoletas. Cuando lo revisamos en octubre de 2026, la versión más reciente en npm era la 0.5.x, así que la 0.6 aún no se había publicado; consulta npm para ver la versión actual. Si tu .riv solo tiene inputs, quédate en una versión anterior a la v0.6 mientras planificas la migración, o convierte el archivo a view models y usa Data Binding.

El paquete anterior rive-react-native está obsoleto. Es posible que algunas apps existentes todavía lo usen; ahí las llamadas heredadas se ven así:

import Rive, { RiveRef } from "rive-react-native";

const ref = useRef<RiveRef>(null);

<Rive ref={ref} resourceName="character" stateMachineName="CharacterStateMachine" />

ref.current?.setInputState("CharacterStateMachine", "mood", 5);
ref.current?.fireState("CharacterStateMachine", "success");

Los archivos de Charmotion incluyen ambos sistemas de control: la CharacterStateMachine predeterminada funciona con las API de inputs de Android, Flutter y React Native heredado descritas arriba, y CharacterViewModelMachine, con el view model Character (un número mood y un trigger por reacción), cubre Data Binding, incluido React Native Nitro v0.6 y versiones posteriores.

Agrega una animación de Rive en Android, Flutter o React Native

1. Revisa el archivo. Busca el nombre de la máquina de estados y comprueba si el .riv expone inputs o view models; eso determina qué API puedes usar.
2. Instala el runtime. Android: implementation 'app.rive:rive-android:…'. Flutter: rive: ^0.14.11. React Native: npm install @rive-app/react-native react-native-nitro-modules.
3. Incluye el .riv. Usa res/raw/ en Android, un asset declarado en pubspec.yaml en Flutter o la configuración de assets documentada por el runtime en React Native.
4. Renderízala. Usa RiveAnimationView (o la API de Compose) en Android, RiveWidget con un RiveWidgetController en Flutter o el componente de Rive en React Native.
5. Controla la máquina de estados. Android: setNumberState y fireState. Flutter: stateMachine.number('mood').value y stateMachine.trigger('success').fire(). Usa Data Binding para archivos con view models.
6. Prepárate para la obsolescencia. En React Native Nitro, los métodos de inputs se eliminan en la v0.6; fija una versión anterior o migra primero el archivo a view models.

Preguntas frecuentes

¿Rive funciona en Expo?

Sí, con una development build. El runtime de Rive para React Native incluye código nativo a través de Nitro Modules, así que no puede ejecutarse dentro de la app estándar Expo Go. Crea una development build de Expo o usa un proyecto bare de React Native, y luego instala @rive-app/react-native y react-native-nitro-modules.

¿rive-react-native sigue teniendo soporte?

El paquete rive-react-native está obsoleto. Rive recomienda para los proyectos nuevos @rive-app/react-native, basado en Nitro, por su mejor rendimiento y sus nuevas funciones. Las apps existentes pueden seguir funcionando con el paquete antiguo por ahora, pero planifica la migración, sobre todo porque las nuevas funciones y el trabajo en Data Binding se centran en el nuevo runtime.

¿Debo usar Compose o RiveAnimationView en Android?

Usa la API de Compose en apps nuevas hechas con Compose, ya que es donde Rive concentra el desarrollo. RiveAnimationView, la API heredada basada en View, sigue teniendo soporte y es la opción sencilla para pantallas basadas en View o cuando dependes de setNumberState y fireState con archivos basados en inputs. Compose puede alojarla mediante AndroidView.

¿Qué versión de Rive para Flutter debo usar?

Usa la versión estable que indica la documentación de Rive, actualmente rive ^0.14.11, construida en torno a RiveWidget y RiveWidgetController. Existe una versión mayor 0.15.x como versión de desarrollo; pruébala en una rama antes de adoptarla, ya que las versiones mayores pueden cambiar las API y los ejemplos de código escritos para la 0.14.

Respuestas rápidas de esta guía

• ¿Qué paquete de Rive debo usar para React Native?

Fuentes

• Android runtime, Rive
• Android runtime: Inputs (legacy), Rive
• Flutter runtime, Rive
• Flutter runtime: Inputs (legacy), Rive
• Feature support, Rive
• React Native migration guide, Rive
• Data binding migration guide, Rive
• Runtime sizes, Rive