Reanimated और Shared Values इंस्टॉल करना
react-native-reanimated इंस्टॉल करें, Babel प्लगइन जोड़ें, useSharedValue से shared values बनाएँ और useAnimatedStyle का उपयोग करके उन्हें एनिमेटेड स्टाइल से जोड़ें।
Reanimated और Shared Values इंस्टॉल करना, CoddyKit पर React Native Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह React Native Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
Reanimated क्यों मौजूद है
React Native Reanimated एक अधिक शक्तिशाली ऐनिमेशन लाइब्रेरी है, जो बिल्ट-इन Animated API की क्षमताओं से आगे जाती है। Animated API ऐनिमेशन कॉन्फ़िगरेशन को एक बार नेटिव पर भेजकर वहीं चलाती है, जबकि Reanimated आपको वर्कलेट कहलाने वाला मनमाना JavaScript-जैसा लॉजिक सीधे UI थ्रेड पर, हर फ़्रेम में चलाने देता है।
इससे उँगली की स्थिति पर वास्तविक समय में प्रतिक्रिया देने वाले जेस्चर-आधारित ऐनिमेशन संभव होते हैं, जिन्हें Animated API के पहले से कॉन्फ़िगर किए गए तरीके से हासिल नहीं किया जा सकता। Reanimated 3 वर्तमान संस्करण है और React Native Gesture Handler के सहज इंटरैक्शन का आधार है।
react-native-reanimated इंस्टॉल करना
Reanimated को npm से इंस्टॉल करें, फिर babel.config.js में Babel प्लगइन जोड़ें। Babel प्लगइन बिल्ड के समय वर्कलेट फ़ंक्शन को बदलता है, ताकि वे UI थ्रेड पर चल सकें। प्लगइन के बिना लाइब्रेरी रनटाइम पर चुपचाप विफल हो जाएगी।
Expo प्रबंधित वर्कफ़्लो के लिए, लाइब्रेरी आपके SDK संस्करण के साथ संगत होनी चाहिए। इंस्टॉल करने से पहले Reanimated की संगतता तालिका देखें। इंस्टॉलेशन के बाद आपको नेटिव ऐप फिर से बनाना होगा—Reanimated को OTA अपडेट के माध्यम से नहीं जोड़ा जा सकता।
// Terminal:
// npx expo install react-native-reanimated
// babel.config.js:
module.exports = {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
// IMPORTANT: Reanimated plugin must be listed LASTuseSharedValue: Reanimated का मूल साधन
useSharedValue, Animated.Value के बराबर Reanimated साधन है। यह ऐसा मान बनाता है जो JavaScript थ्रेड और UI थ्रेड के बीच साझा होता है और ब्रिज से गुज़रे बिना UI थ्रेड पर चलने वाले वर्कलेट से पढ़ा और लिखा जा सकता है।
useState के विपरीत, साझा मान को लिखने से React का री-रेंडर ट्रिगर नहीं होता। इसके बजाय, यह UI थ्रेड पर ऐनिमेटेड स्टाइल को सीधे अपडेट करता है। इसी से सहज जेस्चर ट्रैकिंग संभव होती है—React की भागीदारी के बिना प्रति सेकंड 60 या उससे अधिक बार स्थिति अपडेट करना।
import { useSharedValue } from 'react-native-reanimated';
import { useEffect } from 'react';
export default function MyComponent() {
const offset = useSharedValue(0);
const opacity = useSharedValue(1);
// Read the value: offset.value
// Write to it: offset.value = 100
}useAnimatedStyle: मानों को स्टाइल से जोड़ना
useAnimatedStyle ऐसा स्टाइल ऑब्जेक्ट बनाता है जिसकी फिर से गणना UI थ्रेड पर तब होती है, जब उसके द्वारा पढ़े जाने वाले किसी साझा मान में बदलाव होता है। आप एक वर्कलेट फ़ंक्शन देते हैं, जो .value के माध्यम से साझा मान पढ़ते हुए स्टाइल ऑब्जेक्ट लौटाता है। लौटाई गई स्टाइल को ReanimatedView से जोड़ें (Reanimated से Animated.View के रूप में इम्पोर्ट किया गया)।
यही साझा मानों और दिखाई देने वाले UI के बीच का सेतु है। स्टाइल फ़ंक्शन UI थ्रेड पर चलता है, इसलिए React रेंडरिंग या JavaScript थ्रेड पर इसका कोई प्रभाव नहीं पड़ता।
import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';
export default function Box() {
const offset = useSharedValue(0);
const animatedStyles = useAnimatedStyle(() => ({
transform: [{ translateX: offset.value }],
}));
return <Animated.View style={[styles.box, animatedStyles]} />;
}withTiming और withSpring ऐनिमेशन
साझा मान पर Animated.timing कॉल करने के बजाय, आप उसे withTiming या withSpring का लौटाया हुआ मान असाइन करते हैं। ये ऐनिमेशन फ़ंक्शन हैं, जो UI थ्रेड पर मूल्यांकित होकर साझा मान को समय के साथ लक्ष्य मान की ओर ले जाते हैं।
offset.value = withTiming(100) असाइन करने से सहज टाइमिंग ऐनिमेशन शुरू होता है। offset.value = withSpring(100) असाइन करने से स्प्रिंग शुरू होती है। असाइनमेंट का यह सिंटैक्स Animated API के अनिवार्य .start() पैटर्न से सरल है।
import { useSharedValue, withTiming, withSpring } from 'react-native-reanimated';
const offset = useSharedValue(0);
// Trigger a timing animation:
function moveRight() {
offset.value = withTiming(200, { duration: 500 });
}
// Trigger a spring:
function springRight() {
offset.value = withSpring(200, { damping: 15, stiffness: 100 });
}Opacity और Scale को ऐनिमेट करना
Opacity और scale के साझा मान भी बिल्कुल इसी तरह काम करते हैं—एक साझा मान बनाएँ, useAnimatedStyle से ऐनिमेटेड स्टाइल बनाएँ और ट्रांज़िशन शुरू करने के लिए मान को ऐनिमेशन फ़ंक्शन असाइन करें। एक ही useAnimatedStyle में कई साझा मानों को जोड़ा जा सकता है।
Animated API की तुलना में मुख्य लाभ यह है कि useAnimatedStyle में मौजूद वर्कलेट फ़ंक्शन UI थ्रेड पर जेस्चर इवेंट के साथ-साथ चलता है, जिससे वास्तविक समय में पूरी तरह सहज ट्रैकिंग संभव होती है।
const scale = useSharedValue(1);
const opacity = useSharedValue(0);
const style = useAnimatedStyle(() => ({
opacity: opacity.value,
transform: [{ scale: scale.value }],
}));
// Animate on press:
function press() {
scale.value = withSpring(0.9);
opacity.value = withTiming(0.7, { duration: 150 });
}
function release() {
scale.value = withSpring(1);
opacity.value = withTiming(1, { duration: 150 });
}useAnimatedStyle के वर्कलेट नियम
useAnimatedStyle को दिया गया फ़ंक्शन एक वर्कलेट है—यह JavaScript थ्रेड पर नहीं, बल्कि UI थ्रेड पर चलता है। इसका अर्थ है कि यह JavaScript क्लोज़र, इम्पोर्ट किए गए मॉड्यूल या React स्थिति को सीधे एक्सेस नहीं कर सकता। यह केवल साझा मानों और परिभाषा के समय कैप्चर किए गए मूलभूत नियतांकों को एक्सेस कर सकता है।
Reanimated का Babel प्लगइन वर्कलेट फ़ंक्शन को UI थ्रेड के लिए सुरक्षित बनाने हेतु बदलता है। इन नियमों का उल्लंघन करने पर आपको अस्पष्ट रनटाइम त्रुटियाँ दिखाई देंगी। संदेह होने पर जटिलता बढ़ाने से पहले किसी सरल रूपांतरण के साथ परीक्षण करें।
const offset = useSharedValue(0);
const MULTIPLIER = 2; // primitives captured OK
// CORRECT: only reads sharedValue and primitive
const style = useAnimatedStyle(() => ({
transform: [{ translateX: offset.value * MULTIPLIER }],
}));
// WRONG: accessing React state would throw
// const [reactState] = useState(0);
// const badStyle = useAnimatedStyle(() => ({
// opacity: reactState, // cannot read React state in worklet
// }));Expo Go के साथ Reanimated चलाना
Reanimated के लिए नेटिव मॉड्यूल को ऐप बाइनरी में कंपाइल करना आवश्यक है। Expo प्रबंधित वर्कफ़्लो में इसका अर्थ है कि आपको मानक Expo Go ऐप के बजाय एक डेवलपमेंट बिल्ड चाहिए (जो npx expo run:android या npx expo run:ios से बनाया जाता है), क्योंकि मानक Expo Go में Reanimated का नेटिव मॉड्यूल शामिल नहीं होता।
एक आसान विकल्प Expo का डेवलपमेंट क्लाइंट (expo-dev-client) उपयोग करना है। यह अनुकूलित Expo Go है, जिसमें आपके अपने नेटिव मॉड्यूल शामिल होते हैं। इसे इंस्टॉल करें, फिर से बिल्ड करें और Reanimated समर्थित डेवलपमेंट वातावरण पाने के लिए QR कोड स्कैन करें।
// Install expo-dev-client for Reanimated support:
// npx expo install expo-dev-client
// npx expo run:ios (or run:android)
// Then in babel.config.js ensure:
module.exports = {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'], // must be last
};withSequence के साथ ऐनिमेशन की कड़ी बनाना
Reanimated अलग-अलग Animated.sequence या Animated.loop ऑब्जेक्ट के बिना, सीधे मान के असाइनमेंट में ऐनिमेशन संयोजित करने के लिए withSequence और withRepeat उपलब्ध कराता है। इसका सिंटैक्स अधिक संक्षिप्त और फ़ंक्शनल है।
withRepeat एक ऐनिमेशन, दोहराव की संख्या (अनंत के लिए −1) और दिशा उलटने के लिए एक बूलियन मान स्वीकार करता है। withSequence कई ऐनिमेशन चरणों को क्रम से जोड़ता है।
import { withTiming, withSpring, withSequence, withRepeat } from 'react-native-reanimated';
// Shake animation: left, right, center
offset.value = withSequence(
withTiming(-10, { duration: 100 }),
withTiming(10, { duration: 100 }),
withTiming(0, { duration: 100 })
);
// Pulse animation (infinite):
opacity.value = withRepeat(
withTiming(0.3, { duration: 600 }),
-1, // repeat forever
true // reverse each cycle
);साझा मानों को React स्थिति की तुलना में पढ़ना
एक महत्वपूर्ण मानसिक मॉडल: शेयर्ड वैल्यूज़ React स्टेट नहीं होतीं। offset.value में लिखने से दोबारा रेंडर नहीं होता। UI सीधे एनिमेटेड स्टाइल के ज़रिए अपडेट होता है। यदि आपको किसी शेयर्ड वैल्यू को React स्टेट के साथ सिंक्रोनाइज़ करना हो (जैसे, सशर्त JSX रेंडर करने के लिए), तो useAnimatedReaction या runOnJS का उपयोग करके UI थ्रेड से React स्टेट सेटर को कॉल करें।
इस सीमा को समझना — Reanimated, React के रेंडर चक्र के बाहर काम करता है — इसे प्रभावी ढंग से इस्तेमाल करने और बग से बचने की कुंजी है।
import { useAnimatedReaction, runOnJS } from 'react-native-reanimated';
const [isVisible, setIsVisible] = React.useState(true);
const opacity = useSharedValue(1);
// React to shared value changes on JS thread:
useAnimatedReaction(
() => opacity.value,
(current) => {
if (current === 0) runOnJS(setIsVisible)(false);
}
);Reanimated बनाम Animated API: सारांश
प्रत्येक एनिमेशन सिस्टम का उपयोग कब करें:
- Animated API — सरल प्रवेश/निकास एनिमेशन, अपारदर्शिता में धीरे-धीरे बदलाव और पहले से कॉन्फ़िगर किए गए क्रम। इसे सीखना आसान है, यह React Native के साथ मिलता है और अधिकांश ऐप्स के लिए पर्याप्त है।
- Reanimated — जेस्चर के अनुसार प्रतिक्रिया देने वाले एनिमेशन, रीयल-टाइम ट्रैकिंग और जटिल इंटरैक्टिव भौतिकी। जब एनिमेशन को हर फ़्रेम पर लाइव जेस्चर स्थिति के अनुसार प्रतिक्रिया देनी हो, तब इसकी आवश्यकता होती है।
कई प्रोडक्शन ऐप्स सरल UI बदलावों के लिए Animated API और स्वाइप किए जा सकने वाले कार्ड, बॉटम शीट तथा ड्रैग-एंड-ड्रॉप जैसे जेस्चर-आधारित कॉम्पोनेंट्स के लिए केवल Reanimated का उपयोग करते हैं।
त्वरित जाँच
इस पाठ में React Native मोबाइल डेवलपमेंट की अवधारणाओं की अपनी समझ जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: useSharedValue शून्य-ब्रिज-ओवरहेड एनिमेशन के लिए JS और UI थ्रेड्स के बीच साझा की गई वैल्यू बनाता है, useAnimatedStyle UI-थ्रेड वर्कलेट के ज़रिए शेयर्ड वैल्यूज़ को कॉम्पोनेंट स्टाइल्स से जोड़ता है, और एनिमेशन शुरू करने के लिए withTiming तथा withSpring को sharedValue.value में असाइन किया जाता है। अब हम वर्कलेट्स और यह जानेंगे कि वे पूरी तरह UI थ्रेड पर चलने वाले जटिल जेस्चर लॉजिक को कैसे सक्षम बनाते हैं।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “Reanimated और Shared Values इंस्टॉल करना” पाठ निःशुल्क है?
हाँ — React Native Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Reanimated और Shared Values इंस्टॉल करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Reanimated और Shared Values इंस्टॉल करना” में मैं क्या सीखूँगा?
react-native-reanimated इंस्टॉल करें, Babel प्लगइन जोड़ें, useSharedValue से shared values बनाएँ और useAnimatedStyle का उपयोग करके उन्हें एनिमेटेड स्टाइल से जोड़ें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Native Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Native Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Native Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“Reanimated और Shared Values इंस्टॉल करना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Native Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Native Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Reanimated और Shared Values इंस्टॉल करना
- Worklets और UI थ्रेड पर कोड चलाना
- Gesture Handler से Pan और Swipe जेस्चर
- Pinch-to-Zoom और Rotation