Expo में Rive: Development Build ज़रूरी है (Expo Go नहीं)

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

नहीं। Expo Go एक prebuilt ऐप है जिसमें native modules का एक तय सेट होता है। Rive के docs साफ़ कहते हैं कि इसके React Native package में custom native code होने की वजह से यह Expo Go के साथ compatible नहीं है, और इसकी जगह आपको development build चाहिए।

development build, Expo Go वाले आइडिया का आपका अपना वर्ज़न है: आपके ऐप का एक debug build जिसमें expo-dev-client और आपकी जोड़ी हुई सभी native libraries शामिल होती हैं। आपको अब भी fast refresh और developer menu मिलते हैं, और JavaScript बदलाव बिना rebuild के load होते हैं। rebuild सिर्फ़ तब करना होता है जब native dependencies या config plugins बदलें।

अगर Rive वाली स्क्रीन render होते ही आपको missing native module जैसी कोई error दिखे, तो लगभग पक्का है कि ऐप आपके development build में नहीं, बल्कि Expo Go में चल रहा है।

Rive के लिए development build कैसे बनाएँ?

किसी नए या मौजूदा Expo project से शुरू करते हुए, dev client और Rive runtime को npx expo install से इंस्टॉल करें, जो आपके SDK के साथ compatible वर्ज़न चुनता है:

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

नया runtime, Nitro Modules पर बना है, इसीलिए इसके साथ react-native-nitro-modules भी इंस्टॉल होता है। फिर ऐप को build और इंस्टॉल करें। लोकल रूप से इसके लिए Xcode या Android Studio चाहिए:

npx expo run:ios
npx expo run:android

या EAS को cloud में build करने दें और इसे किसी device या simulator पर इंस्टॉल करें:

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

npx expo start से bundler शुरू करें और project को Expo Go में नहीं, अपने development build में खोलें। इसके बाद JavaScript edit करना सामान्य तरह से काम करता है। जब आप native packages या config plugins जोड़ें या बदलें, तो npx expo prebuild --clean चलाएँ (लोकल builds के लिए) और rebuild करें।

component render करने और स्टेट मशीन कंट्रोल करने के लिए Rive runtimes गाइड का React Native सेक्शन देखें; code, Expo और bare React Native में एक जैसा है।

कौन सा package: @rive-app/react-native या rive-react-native?

नए projects के लिए @rive-app/react-native इस्तेमाल करें। Rive के React Native docs इसे नया runtime और rive-react-native को legacy runtime बताते हैं।

यह फ़र्क इस बात के लिए मायने रखता है कि आप एनिमेशन को कैसे कंट्रोल करते हैं। नया runtime view models के साथ data binding सपोर्ट करता है, और Rive ने इसमें से deprecated स्टेट मशीन इनपुट methods हटाने की timeline जारी की है। legacy package इनपुट APIs इस्तेमाल करता है (स्टेट मशीन और इनपुट के नाम से कोई नंबर सेट करना या ट्रिगर फ़ायर करना)।

• view models वाली नई फ़ाइल: नया runtime, data binding।
• legacy package पर चल रहा मौजूदा ऐप, जिसकी फ़ाइलें सिर्फ़ इनपुट वाली हैं: यह काम करता रहेगा; upgrade करने से पहले view models पर जाने की योजना बनाएँ।

legacy package का कम iOS minimum (15.1 के मुकाबले 14.0) 2026 में इसे चुनने की वजह शायद ही बनता है, क्योंकि मौजूदा Expo SDKs पहले से नए iOS वर्ज़न target करते हैं।

Charmotion की .riv फ़ाइलें दोनों रास्ते सपोर्ट करती हैं: नए रनटाइम के लिए Character व्यू मॉडल (0 से 9 तक एक mood नंबर और success, error, yes, no, enter और exit ट्रिगर) के साथ CharacterViewModelMachine, और मिलते-जुलते पुराने इनपुट के साथ CharacterStateMachine। एक अपलोड से कुछ ही मिनटों में 17 एनिमेशन मिलते हैं, साथ में ज़रूरत पर MP4, GIF और ट्रांसपेरेंट वीडियो एक्सपोर्ट।

Expo SDK 53 पर Android build errors कैसे ठीक करें?

Rive की Expo गाइड बताती है कि Rive Android SDK को compileSdkVersion 36 और Android Gradle Plugin 8.9.1 या उससे नया चाहिए, जबकि Expo SDK 53 डिफ़ॉल्ट रूप से कम वर्ज़न इस्तेमाल करता है। इसका लक्षण Android build के दौरान Gradle error है। समाधान है app.json में config plugins के ज़रिए दोनों को बढ़ाना:

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

पहले npx expo install expo-build-properties से plugins इंस्टॉल करें और गाइड में बताए अनुसार expo-custom-agp जोड़ें। फिर native projects दोबारा generate करें और rebuild करें:

npx expo prebuild --clean
npx expo run:android

नए Expo SDKs में ये वर्ज़न शायद पहले से डिफ़ॉल्ट हों; ऐसे overrides जोड़ने से पहले जिनकी आपको ज़रूरत न हो, अपने SDK के लिए Rive का Expo पेज देखें। Gradle plugin वर्ज़न override करने से हर native module पर असर पड़ता है, इसलिए सिर्फ़ Rive स्क्रीन नहीं, पूरे ऐप को rebuild और smoke-test करें।

Rive को कौन सा iOS deployment target चाहिए?

Rive की Expo गाइड के अनुसार नए runtime को iOS 15.1 या उससे नया चाहिए। इसे ऊपर दिए app.json की तरह expo-build-properties से साफ़ तौर पर सेट करें, ताकि generate होने वाला Xcode project और CocoaPods एक जैसे रहें:

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

अगर आपका ऐप पहले से नया iOS वर्ज़न target करता है, तो ऊँची value ही रखें। Rive से मिलाने के लिए इसे कम करने से दूसरी dependencies टूट जाएँगी।

target बदलने के बाद npx expo run:ios से पहले npx expo prebuild --clean चलाएँ। target बदलाव का असर न दिखने की सबसे आम वजह पुराने Pods होते हैं। EAS पर हर build में clean prebuild होता है, इसलिए app.json बदलाव commit करना काफ़ी है।

Rive की Expo गाइड में पिछले सेक्शन की compile settings के अलावा Android के लिए ऐसा कोई minimum नहीं है, लेकिन अपने ऐप के सपोर्ट किए जाने वाले सबसे पुराने Android वर्ज़न पर टेस्ट करें, क्योंकि rendering परफ़ॉर्मेंस सबसे ज़्यादा low-end devices पर बदलती है।

क्या प्रोटोटाइप बनाते समय मैं Expo Go में Lottie इस्तेमाल कर सकता हूँ?

शायद। Expo के SDK reference में lottie-react-native को Expo Go में शामिल बताया गया है, जो npx expo install lottie-react-native से इंस्टॉल होता है। bundled modules SDK releases के बीच बदलते रहते हैं, इसलिए इस पर भरोसा करने से पहले अपने SDK वर्ज़न के लिए Expo docs देखें।

अगर यह उपलब्ध है, तो Expo Go में स्क्रीन डिज़ाइन करते समय Lottie एक ठीक-ठाक विकल्प है: जहाँ मैस्कॉट आएगा वहाँ एक लूपिंग idle क्लिप। यह भी जान लें कि आप क्या खोते हैं। Lottie में Rive जैसा व्यू मॉडल नहीं है, इसलिए idle से loading और फिर success पर जाने के लिए फ़ाइलें या segments बदलने पड़ते हैं और hand-offs की timing खुद संभालनी पड़ती है। जब कैरेक्टर को ऐप की स्टेट पर रिएक्ट करना हो, तो development build और Rive पर जाएँ।

प्रोटोटाइप के लिए तीसरा विकल्प साधारण वीडियो है। कैरेक्टर का muted, लूपिंग MP4, Expo के video module के ज़रिए Expo Go में चलता है और बिना किसी native setup के stakeholders को असली जैसा प्रीव्यू देता है। development build बन जाने पर इसे Rive component से बदल दें।

.riv फ़ाइल को asset के रूप में bundle कैसे करें?

Metro, यानी Expo का bundler, सिर्फ़ जानी-पहचानी file extensions को assets मानता है। अगर आप फ़ाइल को require("./assets/character.riv") से load करते हैं, तो metro.config.js में asset extensions में riv जोड़ें:

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

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

module.exports = config;

config में बदलाव करने के बाद npx expo start --clear से bundler को restart करें। इस स्टेप के बिना Metro binary फ़ाइल को JavaScript की तरह parse करने की कोशिश करता है और resolution या syntax error के साथ fail हो जाता है।

या फिर फ़ाइल को किसी URL से load करें। इससे ऐप binary छोटी रहती है और आप बिना release के कैरेक्टर अपडेट कर सकते हैं, लेकिन पहले load पर एक network request लगती है। जो मैस्कॉट launch पर या offline दिखता है, उसे bundle करें। दोनों ही तरीकों में फ़ाइल को हर render पर नहीं, हर स्क्रीन पर एक बार load करें।

Expo ऐप में Rive कैसे चलाएँ

1. dev client इंस्टॉल करें. npx expo install expo-dev-client चलाएँ।
2. Rive इंस्टॉल करें. npx expo install @rive-app/react-native react-native-nitro-modules चलाएँ।
3. नेटिव वर्ज़न सेट करें. expo-build-properties (iOS 15.1, और SDK 53 पर Android compileSdkVersion 36) को app.json में जोड़ें।
4. asset टाइप रजिस्टर करें. riv को resolver.assetExts में जोड़ें, जो metro.config.js में है।
5. बिल्ड करें. npx expo prebuild --clean और npx expo run:ios चलाएँ, या eas build --profile development इस्तेमाल करें।
6. dev build में खोलें. npx expo start चलाएँ और प्रोजेक्ट को अपने development build में खोलें, Expo Go में नहीं।

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

क्या मैं eject किए बिना Expo में Rive जोड़ सकता हूँ?

हाँ। Expo में अब eject करने की ज़रूरत नहीं है। Development builds और config plugins की मदद से आप managed workflow में रहते हुए @rive-app/react-native जैसे नेटिव पैकेज जोड़ सकते हैं। npx expo prebuild आपके लिए नेटिव प्रोजेक्ट बना देता है, और EAS Build क्लाउड में बाइनरी तैयार कर सकता है।

क्या Expo के साथ iOS के लिए Rive बिल्ड करने के लिए Mac चाहिए?

अगर आप EAS Build इस्तेमाल करते हैं तो नहीं। यह iOS development build को Expo के सर्वर पर कंपाइल करता है और आपको इंस्टॉल करने लायक बिल्ड देता है। npx expo run:ios से लोकल बिल्ड करने के लिए Xcode चाहिए, जो सिर्फ़ macOS पर चलता है। किसी असली iPhone पर इंस्टॉल करने के लिए साइनिंग हेतु Apple developer account भी ज़रूरी है।

क्या Rive, Expo Router के साथ काम करता है?

हाँ। Expo Router सिर्फ़ नेविगेशन संभालता है, इसलिए Rive component रेंडर करने वाली स्क्रीन बाकी किसी भी स्क्रीन की तरह ही काम करती है। हर स्क्रीन पर फ़ाइल एक बार लोड करें, स्क्रीन unmount होने पर उसे release करें, और हर render पर component दोबारा न बनाएँ, ताकि एनिमेशन अचानक फिर से शुरू न हो।

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

• क्या Rive, Expo Go में काम करता है?
• Rive जोड़ने के बाद मेरा Expo SDK 53 Android बिल्ड फ़ेल क्यों होता है?

स्रोत

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