Rive no Android, Flutter e React Native

Qual pacote do Rive eu preciso para cada plataforma?

Os nomes dos pacotes mudaram recentemente, então comece pela lista atual:

A última coluna é importante porque o Rive descontinuou os inputs de state machine em favor do Data Binding. Segundo o Rive, os arquivos existentes baseados em inputs continuam funcionando, e no Android e no Flutter as APIs de inputs seguem disponíveis. O React Native é a exceção: o novo runtime está removendo os métodos de inputs seguindo um cronograma publicado.

Confira o que o seu .riv expõe antes de escrever código. Um arquivo só com inputs precisa das APIs de inputs; um arquivo com view models pode usar Data Binding. O comando Convert Inputs to View Models do editor pode adicionar view models a um arquivo mais antigo.

Como adicionar Rive a um app Android?

Adicione o runtime a partir do Maven Central no build.gradle do seu módulo. A documentação do Rive mostra a versão 11.9.2; a mais recente no Maven Central era a 11.14.1 quando verificamos, em outubro de 2026, então use a versão mais nova.

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

O Rive está concentrando o desenvolvimento novo na sua API do Compose. A API baseada em View, construída em torno de RiveAnimationView, agora é chamada de "legada", mas o Rive afirma que ela continuará tendo suporte. Para um app novo em Compose, siga a seção de Compose da documentação do Rive para Android. Para um app existente baseado em View, ou quando você precisar dos métodos de inputs abaixo, a view legada é o caminho mais direto:

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

Coloque o .riv em res/raw/ (os nomes de arquivo ali precisam estar em minúsculas e com underscores). Se a sua tela é escrita em Compose, mas você quer a view legada, pode hospedar RiveAnimationView dentro do composable de interoperabilidade AndroidView do Compose.

Em dispositivos ARM-v8a, o Rive informa que o runtime tem 2,40 MB de download e 7,03 MB instalado (janeiro de 2026).

Como controlar os estados no Android?

A RiveAnimationView legada tem um método para cada tipo de input. Cada um recebe o nome da state machine e o nome do 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")

Chame esses métodos na thread principal, normalmente em resposta ao estado do view model. Um padrão comum é observar um flow de estado da UI e mapear cada estado para um número de humor, disparando triggers para eventos pontuais, como um pagamento concluído.

Os nomes diferenciam maiúsculas de minúsculas. Se nada acontecer, confirme que a view foi configurada com o mesmo nome de state machine que você passa para esses métodos; caso contrário, o arquivo toca a animação padrão e ignora os inputs.

Esses métodos fazem parte do sistema de inputs, que está obsoleto. Eles funcionam em arquivos existentes baseados em inputs. Para arquivos com view models, use as APIs de Data Binding do Rive para Android.

Como usar o Rive no Flutter?

Adicione o pacote rive. A documentação do Rive indica rive: ^0.14.11, e uma nova versão principal 0.15.x está disponível como versão de desenvolvimento (dev release). Os exemplos aqui usam a 0.14.

dependencies:
  rive: ^0.14.11

flutter:
  assets:
    - assets/character.riv

Inicialize o runtime nativo uma vez, depois carregue o arquivo, crie um controller para a state machine e renderize com 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));
  }
}

O Rive também oferece o RiveWidgetBuilder, que cuida dos estados de carregamento e de erro para você. Use-o se preferir menos boilerplate.

Carregue o arquivo uma vez e mantenha-o durante todo o ciclo de vida da tela. Recarregá-lo em build reinicia a animação e desperdiça processamento. Faça o dispose do controller e do arquivo quando o widget deixar de existir, como mostrado acima, para liberar os recursos nativos.

Como definir um número ou disparar um trigger no Flutter?

O stateMachine do controller dá acesso aos inputs legados pelo nome. Números e booleanos têm um value; triggers têm 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();

Busque os inputs depois que o controller existir, guarde as referências em vez de buscá-los a cada frame e faça o dispose deles junto com o controller. As buscas retornam null se o nome não existir, então uma chamada null-aware esconde erros de digitação; registre um aviso nos builds de debug se algum input estiver faltando.

Como em outras plataformas, os inputs estão obsoletos em favor do Data Binding, mas o runtime Flutter do Rive ainda os suporta em arquivos existentes. Arquivos com view models podem ser controlados pela API de Data Binding do Flutter.

Como usar o Rive no React Native?

O runtime atual do Rive para React Native é construído sobre Nitro Modules. Instale-o junto com a dependência peer:

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

Ele inclui código nativo, então em projetos Expo precisa de um development build, e não do Expo Go. A documentação do Rive descreve a API do componente e o Data Binding desse runtime.

A principal mudança para arquivos existentes: os métodos de input da state machine estão obsoletos no novo runtime. O cronograma de migração do Rive é o seguinte: a v0.4 funciona sem avisos, a v0.5 registra avisos em tempo de execução e a v0.6 remove as APIs obsoletas. Quando verificamos, em outubro de 2026, a versão mais recente no npm era a 0.5.x, ou seja, a 0.6 ainda não tinha sido lançada; confira a versão atual no npm. Se o seu .riv tiver apenas inputs, fique em uma versão anterior à v0.6 enquanto planeja a migração, ou converta o arquivo para view models e use Data Binding.

O pacote antigo rive-react-native está obsoleto. Apps existentes ainda podem usá-lo, e nele as chamadas legadas ficam assim:

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");

Os arquivos do Charmotion incluem os dois sistemas de controle: a CharacterStateMachine padrão funciona com as APIs de input do Android, do Flutter e do React Native legado mostradas acima, e a CharacterViewModelMachine, com o view model Character (um número mood e um trigger por reação), cobre o Data Binding, inclusive no React Native Nitro v0.6 e posteriores.

Adicione uma animação Rive no Android, Flutter ou React Native

1. Verifique o arquivo. Descubra o nome da state machine e se o .riv expõe inputs ou view models; isso define qual API você pode usar.
2. Instale o 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. Inclua o .riv no pacote. Use res/raw/ no Android, um asset declarado em pubspec.yaml no Flutter ou a configuração de assets documentada pelo runtime no React Native.
4. Renderize. Use RiveAnimationView (ou a API do Compose) no Android, RiveWidget com um RiveWidgetController no Flutter ou o componente do Rive no React Native.
5. Controle a state machine. Android: setNumberState e fireState. Flutter: stateMachine.number('mood').value e stateMachine.trigger('success').fire(). Use Data Binding para arquivos com view models.
6. Planeje a descontinuação. No React Native Nitro, os métodos de input são removidos na v0.6; fixe uma versão anterior ou migre o arquivo para view models antes.

Perguntas frequentes

O Rive funciona no Expo?

Sim, com um development build. O runtime do Rive para React Native inclui código nativo por meio de Nitro Modules, então não roda dentro do app Expo Go padrão. Crie um development build do Expo ou use um projeto React Native puro (bare) e depois instale @rive-app/react-native e react-native-nitro-modules.

O rive-react-native ainda é suportado?

O pacote rive-react-native está obsoleto. O Rive recomenda, para novos projetos, o @rive-app/react-native baseado em Nitro, que oferece melhor performance e recursos novos. Apps existentes podem continuar no pacote antigo por enquanto, mas planeje a migração, principalmente porque os novos recursos e o trabalho em Data Binding são voltados ao novo runtime.

Devo usar Compose ou RiveAnimationView no Android?

Use a API do Compose em novos apps Compose, já que é nela que o Rive concentra o desenvolvimento. O RiveAnimationView, a API legada baseada em View, continua suportado e é a escolha simples para telas baseadas em View ou quando você depende de setNumberState e fireState com arquivos baseados em inputs. O Compose pode hospedá-lo por meio de AndroidView.

Qual versão do Rive para Flutter devo usar?

Use a versão estável indicada na documentação do Rive, atualmente rive ^0.14.11, construída em torno de RiveWidget e RiveWidgetController. Existe uma versão principal 0.15.x como dev release; teste-a em uma branch antes de adotá-la, já que versões principais podem mudar APIs e os exemplos de código escritos para a 0.14.

Respostas rápidas deste guia

• Qual pacote do Rive devo usar no React Native?

Fontes

• 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