Android, Flutter और React Native में Rive

हर प्लेटफ़ॉर्म के लिए कौन-सा Rive package चाहिए?

Package के नाम हाल में बदले हैं, इसलिए मौजूदा लिस्ट से शुरू करें:

आखिरी कॉलम अहम है, क्योंकि Rive ने स्टेट मशीन इनपुट को deprecated करके उनकी जगह data binding को चुना है। Rive के मुताबिक मौजूदा इनपुट-आधारित फ़ाइलें काम करती रहेंगी, और Android व Flutter पर input APIs उपलब्ध रहेंगी। React Native अपवाद है: नया runtime पहले से घोषित timeline के अनुसार input methods हटा रहा है।

Code लिखने से पहले जाँचें कि आपकी .riv क्या देती है। जिस फ़ाइल में सिर्फ़ इनपुट हैं, उसे input APIs चाहिए; जिस फ़ाइल में व्यू मॉडल हैं, वह data binding इस्तेमाल कर सकती है। Editor का Convert Inputs to View Models कमांड पुरानी फ़ाइल में व्यू मॉडल जोड़ सकता है।

Android ऐप में Rive कैसे जोड़ें?

Maven Central से runtime को अपने module की build.gradle में जोड़ें। Rive के docs में version 11.9.2 दिखाया गया है; अक्टूबर 2026 में जब हमने जाँचा, तब Maven Central पर latest version 11.14.1 था, इसलिए सबसे नया release इस्तेमाल करें।

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

Rive नया development अपनी Compose API पर केंद्रित कर रहा है। RiveAnimationView पर आधारित View-based API को अब "legacy" कहा जाता है, लेकिन Rive के मुताबिक इसका सपोर्ट जारी रहेगा। नए Compose ऐप के लिए Rive के Android docs का Compose सेक्शन देखें। मौजूदा View-based ऐप के लिए, या जब आपको नीचे दिए input methods चाहिए हों, legacy view सीधा रास्ता है:

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

.riv को res/raw/ में रखें (वहाँ फ़ाइल के नाम lowercase और underscores के साथ होने चाहिए)। अगर आपकी स्क्रीन Compose में लिखी है लेकिन आप legacy view चाहते हैं, तो RiveAnimationView को Compose के AndroidView interop composable के अंदर host कर सकते हैं।

ARM-v8a devices पर Rive के अनुसार runtime का डाउनलोड साइज़ 2.40 MB और install होने पर 7.03 MB है (जनवरी 2026)।

Android पर स्टेट्स कैसे कंट्रोल करें?

Legacy RiveAnimationView में हर इनपुट टाइप के लिए एक method है। हर method स्टेट मशीन का नाम और इनपुट का नाम लेता है:

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

इन्हें main thread से कॉल करें, आमतौर पर व्यू मॉडल की स्टेट के जवाब में। एक आम पैटर्न यह है कि UI state flow को observe करें और हर स्टेट को एक मूड नंबर से मैप करें, और पूरा हुआ पेमेंट जैसे एक बार होने वाले इवेंट के लिए ट्रिगर फ़ायर करें।

नाम case-sensitive होते हैं। अगर कुछ नहीं होता, तो पक्का करें कि view उसी स्टेट मशीन नाम से कॉन्फ़िगर किया गया है जो आप इन methods में पास करते हैं; वरना फ़ाइल अपना डिफ़ॉल्ट एनिमेशन चलाती है और इनपुट को अनदेखा करती है।

ये methods deprecated इनपुट सिस्टम का हिस्सा हैं। ये मौजूदा इनपुट-आधारित फ़ाइलों के लिए काम करते हैं। व्यू मॉडल वाली फ़ाइलों के लिए इनकी जगह Rive के Android Data Binding APIs इस्तेमाल करें।

Flutter में Rive का इस्तेमाल कैसे करें?

rive पैकेज जोड़ें। Rive के docs में rive: ^0.14.11 दिखाया गया है, और 0.15.x major version एक dev release के रूप में उपलब्ध है। यहाँ के उदाहरण 0.14 के लिए हैं।

dependencies:
  rive: ^0.14.11

flutter:
  assets:
    - assets/character.riv

native runtime को एक बार initialize करें, फिर फ़ाइल लोड करें, स्टेट मशीन के लिए एक controller बनाएँ और उसे 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 RiveWidgetBuilder भी देता है, जो आपके लिए loading और एरर स्टेट संभालता है। अगर आप कम boilerplate चाहते हैं तो इसका इस्तेमाल करें।

फ़ाइल को एक बार लोड करें और स्क्रीन के पूरे lifetime तक रखें। इसे build में दोबारा लोड करने से एनिमेशन फिर से शुरू हो जाता है और बेकार का काम होता है। native resources छोड़ने के लिए, widget हटने पर controller और फ़ाइल दोनों को dispose करें, जैसा ऊपर दिखाया गया है।

Flutter में नंबर सेट या ट्रिगर फ़ायर कैसे करें?

controller का stateMachine नाम से legacy इनपुट तक पहुँच देता है। नंबर और boolean में value होता है; ट्रिगर में 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();

controller बन जाने के बाद इनपुट ढूँढें, हर फ़्रेम पर ढूँढने के बजाय उनके references रखें, और controller के साथ उन्हें dispose करें। अगर नाम मौजूद नहीं है तो lookup null लौटाते हैं, इसलिए null-aware कॉल typo को छिपा देती है; अगर कोई इनपुट नहीं मिलता तो debug builds में warning लॉग करें।

दूसरे प्लेटफ़ॉर्म की तरह, इनपुट Data Binding के पक्ष में deprecated हैं, लेकिन Rive का Flutter runtime मौजूदा फ़ाइलों के लिए अब भी इन्हें सपोर्ट करता है। व्यू मॉडल वाली फ़ाइलों को इसकी जगह Flutter Data Binding API से कंट्रोल किया जा सकता है।

React Native में Rive का इस्तेमाल कैसे करें?

Rive का मौजूदा React Native runtime Nitro Modules पर बना है। इसे इसकी peer dependency के साथ इंस्टॉल करें:

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

इसमें native code शामिल है, इसलिए Expo प्रोजेक्ट में इसके लिए Expo Go नहीं, बल्कि development build चाहिए। Rive के docs में इस runtime के component API और Data Binding का विवरण है।

मौजूदा फ़ाइलों के लिए मुख्य बदलाव: नए runtime में स्टेट मशीन इनपुट methods deprecated हैं। Rive की migration timeline यह है: v0.4 बिना warning के काम करता है, v0.5 runtime warnings लॉग करता है, और v0.6 deprecated APIs हटा देता है। अक्टूबर 2026 में जब हमने जाँचा, तब npm पर latest release 0.5.x थी, यानी 0.6 अभी ship नहीं हुआ था; मौजूदा version के लिए npm देखें। अगर आपकी .riv में सिर्फ़ इनपुट हैं, तो migration की योजना बनाते समय v0.6 से पहले के version पर रहें, या फ़ाइल को view models में बदलकर Data Binding इस्तेमाल करें।

पुराना rive-react-native पैकेज deprecated है। मौजूदा ऐप अब भी इसे इस्तेमाल कर सकते हैं, जहाँ legacy कॉल कुछ ऐसी दिखती हैं:

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

Charmotion फ़ाइलों में दोनों कंट्रोल सिस्टम शामिल हैं: डिफ़ॉल्ट CharacterStateMachine ऊपर दिए Android, Flutter और legacy React Native इनपुट APIs के साथ काम करती है, और CharacterViewModelMachine, Character व्यू मॉडल (एक mood नंबर और हर रिएक्शन के लिए एक ट्रिगर) के साथ Data Binding को कवर करती है, जिसमें React Native Nitro v0.6 और उसके बाद के version भी शामिल हैं।

Android, Flutter या React Native में Rive एनिमेशन जोड़ें

1. फ़ाइल जाँचें. स्टेट मशीन का नाम पता करें और देखें कि .riv इनपुट देती है या view models; इसी से तय होता है कि आप कौन-सा API इस्तेमाल कर सकते हैं।
2. रनटाइम इंस्टॉल करें. Android: implementation 'app.rive:rive-android:…'. Flutter: rive: ^0.14.11. React Native: npm install @rive-app/react-native react-native-nitro-modules.
3. .riv को bundle करें. Android पर res/raw/, Flutter पर pubspec.yaml में declared asset, या React Native पर runtime के docs में बताया गया asset setup इस्तेमाल करें।
4. इसे रेंडर करें. Android पर RiveAnimationView (या Compose API), Flutter पर RiveWidgetController के साथ RiveWidget, या React Native पर Rive component इस्तेमाल करें।
5. स्टेट मशीन चलाएँ. Android: setNumberState और fireState. Flutter: stateMachine.number('mood').value और stateMachine.trigger('success').fire()। व्यू मॉडल वाली फ़ाइलों के लिए Data Binding इस्तेमाल करें।
6. deprecation की तैयारी करें. React Native Nitro पर v0.6 में इनपुट methods हटा दिए गए हैं; कोई पुराना version pin करें या पहले फ़ाइल को view models पर migrate करें।

अक्सर पूछे जाने वाले सवाल

क्या Rive, Expo में काम करता है?

हाँ, development build के साथ। Rive के React Native runtime में Nitro Modules के ज़रिए native code शामिल है, इसलिए यह स्टैंडर्ड Expo Go ऐप में नहीं चल सकता। Expo development build बनाएँ या bare React Native प्रोजेक्ट इस्तेमाल करें, फिर @rive-app/react-native और react-native-nitro-modules इंस्टॉल करें।

क्या rive-react-native अब भी सपोर्टेड है?

rive-react-native पैकेज deprecated है। बेहतर परफ़ॉर्मेंस और नए फ़ीचर के लिए Rive नए प्रोजेक्ट्स को Nitro-आधारित @rive-app/react-native की ओर भेजता है। मौजूदा ऐप फ़िलहाल पुराने पैकेज पर चलते रह सकते हैं, लेकिन बदलाव की योजना बनाएँ, खासकर इसलिए कि नए फ़ीचर और Data Binding का काम नए runtime के लिए हो रहा है।

Android पर Compose इस्तेमाल करें या RiveAnimationView?

नए Compose ऐप के लिए Compose API इस्तेमाल करें, क्योंकि Rive का development इसी पर केंद्रित है। RiveAnimationView, यानी legacy View API, अब भी सपोर्टेड है और View-आधारित स्क्रीन के लिए, या जब आप इनपुट-आधारित फ़ाइलों के साथ setNumberState और fireState पर निर्भर हों, तब यह आसान विकल्प है। Compose इसे AndroidView के ज़रिए host कर सकता है।

Rive का कौन-सा Flutter version इस्तेमाल करें?

Rive के docs में दी गई stable release इस्तेमाल करें, जो अभी rive ^0.14.11 है और RiveWidget और RiveWidgetController पर आधारित है। 0.15.x major version एक dev release के रूप में मौजूद है; अपनाने से पहले इसे किसी branch में आज़माएँ, क्योंकि major versions में APIs और 0.14 के लिए लिखे code samples बदल सकते हैं।

इस गाइड से झटपट जवाब

• React Native के लिए कौन-सा Rive पैकेज इस्तेमाल करें?

स्रोत

• 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