React Native और Flutter में Lottie बनाम Rive (2026)

2026 में कौन से पैकेज मौजूदा हैं?

पिछले दो साल में दोनों इकोसिस्टम में पैकेज के नाम या ज़रूरतें बदली हैं, इसलिए ट्यूटोरियल जल्दी पुराने हो जाते हैं। नीचे दिए वर्ज़न 12 अक्टूबर 2026 को जाँचे गए थे।

दोनों प्लेटफ़ॉर्म पर पैटर्न एक जैसा है: After Effects एक्सपोर्ट के लिए क्लासिक Lottie प्लेयर, dotLottie इंटरैक्टिविटी के लिए अलग LottieFiles प्लेयर, और एक ऑफ़िशियल Rive रनटाइम।

क्या इन्हें New Architecture चाहिए?

मौजूदा Lottie के लिए, हाँ। lottie-react-native की README के अनुसार इस पैकेज को React Native 0.84 या उससे नया वर्ज़न और New Architecture चाहिए। पुराने React Native वर्ज़न वाले प्रोजेक्ट को अपग्रेड करना होगा या पैकेज के किसी पुराने major release पर रहना होगा। README में Metro config बदलकर .lottie सपोर्ट के बारे में भी बताया गया है, और यह भी कि वेब टारगेट @lottiefiles/dotlottie-react इस्तेमाल करता है।

Rive का नया रनटाइम React Native की न्यूनतम ज़रूरत कम रखता है: 0.78 या उसके बाद का वर्ज़न (0.79 या बाद का सुझाया गया), साथ में Expo SDK 53+, iOS 15.1+, Android SDK 24+ और Nitro Modules 0.25.2+। इसमें नेटिव code है, इसलिए Expo प्रोजेक्ट को Expo Go के बजाय development build चाहिए।

# Lottie
npm install lottie-react-native

# Rive (Nitro runtime)
npm install @rive-app/react-native react-native-nitro-modules

व्यवहार में, जो प्रोजेक्ट lottie-react-native की ज़रूरत पूरी करता है, वह Rive की ज़रूरत भी पूरी करता है। उल्टा सच नहीं है: React Native 0.78 से 0.83 पर चल रहा ऐप आज Rive का नया रनटाइम अपना सकता है, लेकिन मौजूदा Lottie release नहीं। जिस दिन अपग्रेड करें, उस दिन दोनों README जाँचें, क्योंकि ज़रूरतें React Native के release के साथ बदलती रहती हैं।

Rive के Nitro रनटाइम में क्या बदला?

Rive ने अपना React Native इंटीग्रेशन Nitro Modules पर फिर से बनाया और इसे @rive-app/react-native के रूप में पब्लिश किया। पुराना rive-react-native पैकेज अभी भी सपोर्टेड है, लेकिन Rive माइग्रेट करने की सलाह देता है।

यह rewrite Margelo ने किया, जिसने 9 जुलाई 2026 को नतीजे पब्लिश किए। iPhone 13 mini पर, उसके अनुसार 24 Rive views लेगेसी रनटाइम से 94 गुना तेज़ी से लोड हुए (29 ms बनाम 2,716 ms), 4.7 गुना कम मेमोरी लगी (112 MB बनाम 525 MB) और properties 3.2 गुना तेज़ी से लिखी गईं। दो बातें ध्यान रखें: रनटाइम Margelo ने बनाया है, इसलिए ये आँकड़े बनाने वाले के अपने हैं, और ये नए Rive की तुलना पुराने Rive से करते हैं, Rive की Lottie से नहीं।

API भी data binding पर आ गया है। आप useRiveFile से फ़ाइल लोड करते हैं, view model instance बनाते हैं, और useRiveNumber और useRiveTrigger जैसे hooks से properties bind करते हैं। Rive की माइग्रेशन गाइड के अनुसार state-machine इनपुट methods deprecated हैं: वर्ज़न 0.5 रनटाइम warnings लॉग करता है और 0.6 deprecated APIs हटा देता है। अगर आपकी .riv फ़ाइलें सिर्फ़ लेगेसी इनपुट देती हैं, तो 0.5 से आगे अपग्रेड करने से पहले view model properties जोड़ने की योजना बनाएँ।

दोनों API का code React Native ऐप में एनिमेशन कैसे जोड़ें में है।

मोबाइल पर Lottie स्टेट मशीन कहाँ चलती हैं?

LottieFiles के dotLottie प्लेयर में। LottieFiles ने सितंबर 2025 में Lottie Creator में विज़ुअल स्टेट मशीन जोड़ीं; ये .lottie फ़ाइलों के अंदर स्टोर होती हैं, जिनमें इनपुट (numbers, strings, booleans और events), pointer interactions और conditional transitions होते हैं।

क्लासिक पैकेज, lottie-react-native और Flutter का lottie, After Effects एनिमेशन को प्रोग्रामेटिक कंट्रोल के साथ चलाने के लिए बने हैं: play, pause, लूप, progress सेट करना, किसी frame range को चलाना। आप app code से segments या फ़ाइलें बदलकर खुद स्टेट जैसा व्यवहार बना सकते हैं, जो कुछ गिनी-चुनी स्टेट के लिए काम करता है।

अगर आप logic को फ़ाइल के अंदर रखना चाहते हैं, तो @lottiefiles/dotlottie-react-native या dotlottie_flutter इस्तेमाल करें, जो dotLottie स्टेट मशीन और थीम सपोर्ट करते हैं। यह क्लासिक प्लेयर से अलग dependency है, इसलिए फ़ैसला करने से पहले अपने टारगेट के लिए इसका प्लेटफ़ॉर्म सपोर्ट और परिपक्वता जाँच लें।

Rive के रनटाइम में स्टेट मशीन हमेशा शामिल होती है, क्योंकि यह .riv फ़ॉर्मेट का हिस्सा है। Lottie बनाम Rive स्टेट मशीन में दोनों मॉडल की तुलना एक-एक क्षमता के आधार पर की गई है।

क्या Flutter का lottie पैकेज आधिकारिक है?

नहीं। pub.dev पर व्यापक रूप से इस्तेमाल होने वाला lottie पैकेज (अक्टूबर 2026 तक वर्ज़न 3.6.1) xaha.dev द्वारा प्रकाशित है, और यह खुद को lottie-android से पोर्ट किया गया Lottie player का pure Dart इम्प्लीमेंटेशन बताता है। pure Dart होने के कारण यह किसी native Lottie लाइब्रेरी को रैप करने के बजाय Flutter के अपने canvas से ड्रॉ करता है। यह Lottie.asset या Lottie.network से assets लोड करता है और एक custom decoder के ज़रिए .lottie फ़ाइलें पढ़ सकता है।

Lottie.asset('assets/loading.json', width: 160, height: 160, repeat: true)

dotLottie और Lottie Creator बनाने वाली कंपनी LottieFiles एक अलग plugin, dotlottie_flutter, मेंटेन करती है, जिसमें स्टेट मशीन और theme सपोर्ट है।

अपने आप में इनमें से कोई भी स्थिति समस्या नहीं है। कम्युनिटी पैकेज बेहतरीन और अच्छी तरह मेंटेन किए हुए हो सकते हैं; ज़्यादातर Flutter ट्यूटोरियल में यही पैकेज डिफ़ॉल्ट विकल्प है। यह बात दो कारणों से मायने रखती है: सपोर्ट से जुड़े सवाल LottieFiles के बजाय पैकेज की अपनी repository में जाते हैं, और LottieFiles जो फ़ीचर फ़ॉर्मेट में जोड़ती है, जैसे स्टेट मशीन, वे पहले उसके अपने players में आते हैं।

Flutter में rive_native क्या बदलता है?

Rive का आधिकारिक Flutter पैकेज rive है, जो verified publisher rive.app से आता है। 0.14 लाइन ने रनटाइम का ज़्यादातर हिस्सा एक नए rive_native पैकेज में शिफ़्ट कर दिया, और पुराना आर्किटेक्चर legacy 0.13 लाइन (0.13.20) के रूप में जारी है।

दिखने वाला बदलाव renderer का चुनाव है। फ़ाइल लोड करते समय आप एक factory पास करते हैं: Factory.rive Rive Renderer इस्तेमाल करता है, और Factory.flutter Flutter के अपने renderer से ड्रॉ करता है। Rive के docs बताते हैं कि कुछ फ़ीचर, जैसे vector feathering, के लिए Rive Renderer ज़रूरी है, और Flutter में कोई डिफ़ॉल्ट renderer नहीं है, इसलिए आपको इसे साफ़ तौर पर चुनना होता है।

final file = await File.asset('assets/character.riv', riveFactory: Factory.rive);

Widgets भी बदले हैं: मौजूदा docs में RiveWidget के साथ RiveWidgetController, या RiveWidgetBuilder इस्तेमाल होता है, जो loading और एरर स्टेट संभालता है। जो ट्यूटोरियल RiveAnimation.asset दिखाते हैं, वे legacy API के बारे में हैं।

एक ही Flutter ऐप में दोनों पैकेज के साथ-साथ सेटअप के लिए Flutter ऐप में एनिमेशन कैसे जोड़ें देखें।

क्या मोबाइल पर Rive, Lottie से तेज़ है?

इसके सबूत उतने पक्के नहीं हैं जितना ज़्यादातर लेख बताते हैं। हमें जो एकमात्र स्वतंत्र सीधी तुलना मिली, वह Callstack का जनवरी 2023 का React Native टेस्ट है, जो एक पुराने Android फ़ोन Sony Xperia Z3 पर किया गया था। इसमें Rive के लिए लगभग 60 FPS और Lottie के लिए 17 FPS मापा गया, जबकि Rive ने कुल मेमोरी ज़्यादा इस्तेमाल की (276 MB बनाम 246 MB)। Callstack ने 24.37 KB की एक Lottie को 2 KB की .riv के रूप में फिर से बनाया भी।

तब से दोनों लाइब्रेरी बदल चुकी हैं। lottie-ios 4.0 ने सपोर्टेड एनिमेशन के लिए Core Animation rendering engine को डिफ़ॉल्ट बना दिया, जिससे हर फ़्रेम का काम main thread से हट गया; Rive का React Native रनटाइम Nitro पर फिर से लिखा गया। इन दोनों बदलावों की एक-दूसरे से स्वतंत्र रूप से benchmark तुलना नहीं हुई है।

वज़न बताना आसान है। Rive अपने native रनटाइम के साइज़ प्रकाशित करता है: iOS पर लगभग 1.67 MB और Android arm64 पर 2.40 MB अतिरिक्त डाउनलोड साइज़। Lottie की native लाइब्रेरी इसके बराबर आधिकारिक आँकड़े प्रकाशित नहीं करतीं। Flutter का lottie पैकेज pure Dart है, इसलिए यह अपनी कोई native binary नहीं जोड़ता।

सच्ची सलाह यही है कि अपने एनिमेशन को अपने सबसे कमज़ोर target device पर profile करें। Rive बनाम Lottie परफ़ॉर्मेंस में हर प्रकाशित माप और उसकी सीमाओं को विस्तार से देखा गया है।

cross-platform टीम को क्या चुनना चाहिए?

Lottie चुनें, अगर:

• आपके एनिमेशन After Effects या LottieFiles लाइब्रेरी से आते हैं और ज़्यादातर सीधे लूप हैं;
• आप New Architecture के साथ React Native 0.84+ पर हैं, या pure-Dart player के साथ Flutter पर;
• आप पहले से वेब या native पर Lottie इस्तेमाल करते हैं, इसलिए फ़ाइलें साझा होती हैं;
• स्टेट की ज़रूरतें सरल हैं, या आप स्टेट मशीन के लिए dotLottie players अपनाने को तैयार हैं।

Rive चुनें, अगर:

• एक कैरेक्टर या कंट्रोल में कई स्टेट हैं, जिनके बीच ऐप का कोड स्विच करता है;
• आप React Native, Flutter, native iOS और Android, और वेब पर एक ही फ़ाइल और एक जैसे property नाम चाहते हैं;
• आप React Native 0.78 से 0.83 पर हैं और अभी अपग्रेड नहीं कर सकते;
• आप दोनों frameworks पर फ़ॉर्मेट बनाने वाली कंपनी का ही आधिकारिक रनटाइम चाहते हैं।

अगर आपको टूल की जगह कैरेक्टर सेट चाहिए, तो Charmotion अपलोड किए गए कैरेक्टर, मैस्कॉट या लोगो से एक बनाता है: Data Binding व्यू मॉडल और पुराने इनपुट वाली एक .riv में 17 एनिमेशन, कुछ ही मिनटों में, साथ में ज़रूरत पर वीडियो एक्सपोर्ट। यह Rive और वीडियो देता है, Lottie नहीं।

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

क्या lottie-react-native, Expo के साथ काम करता है?

हाँ, अगर वर्ज़न मेल खाते हों। इसे npx expo install से इंस्टॉल करें ताकि वर्ज़न आपके Expo SDK के अनुसार हो, और जाँच लें कि SDK का React Native वर्ज़न पैकेज की ज़रूरत पूरी करता है: मौजूदा रिलीज़ के लिए New Architecture के साथ React Native 0.84 या नया वर्ज़न चाहिए। पुराने SDK के लिए पैकेज का पुराना major वर्ज़न चाहिए।

क्या मैं rive-react-native इस्तेमाल करता रह सकता हूँ?

हाँ, फ़िलहाल। Rive के अनुसार legacy rive-react-native पैकेज अभी भी सपोर्टेड है, लेकिन वह @rive-app/react-native पर माइग्रेट करने की सलाह देता है। नया रनटाइम data binding इस्तेमाल करता है; इसके state-machine input methods वर्ज़न 0.5 में warnings लॉग करते हैं और 0.6 में हटा दिए गए हैं, इसलिए view models पर जाने की योजना बनाएँ।

क्या Flutter का lottie पैकेज .lottie फ़ाइलें सपोर्ट करता है?

यह एक custom decoder के ज़रिए .lottie फ़ाइलें पढ़ सकता है, जैसा इसके pub.dev डॉक्यूमेंटेशन में दिखाया गया है। dotLottie स्टेट मशीन और themes के लिए LottieFiles एक अलग dotlottie_flutter plugin मेंटेन करती है। फ़ाइल के अंदर logic चलाने के बजाय, कोड से कंट्रोल करते हुए एनिमेशन चलाने के लिए क्लासिक पैकेज सबसे सही है।

क्या एक ही Rive फ़ाइल React Native और Flutter दोनों में इस्तेमाल हो सकती है?

हाँ। .riv फ़ॉर्मेट Rive के सभी आधिकारिक रनटाइम में एक जैसा है, इसलिए एक ही फ़ाइल React Native, Flutter, native iOS और Android, और वेब पर चलती है। हर ऐप में एक जैसे view model property नाम इस्तेमाल करें, और जहाँ vector feathering जैसे फ़ीचर चाहिए वहाँ Rive Renderer चुनें।

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

• क्या lottie-react-native के लिए New Architecture ज़रूरी है?
• क्या Flutter का lottie पैकेज आधिकारिक है?

स्रोत

• lottie-react-native, lottie-react-native on GitHub
• React Native runtime, Rive
• React Native migration guide, Rive
• Rewriting Rive React Native with Nitro Modules, Margelo
• rive package, pub.dev
• lottie package, pub.dev
• dotLottie Flutter player, LottieFiles Developers
• Lottie vs Rive: optimizing mobile app animation, Callstack