React Native میں animations کیسے کام کرتے ہیں؟

Question

IT Interview Practice · Accepted Answer

React Native **animations** کو built-in **Animated** API اور مقبول **Reanimated** library کے ذریعے سپورٹ کرتا ہے۔ Animations صارف کے تجربے کو smooth motion اور transitions کے ساتھ بہتر بناتے ہیں۔ کارکردگی (animations کو native thread پر چلانا) ایک اہم تنبیہ ہے۔ ## Animated API (built-in) ```jsx import { Animated } from 'react-native'; const fadeAnim = useRef(new Animated.Value(0)).current; // an animated value // animate it (e.g. fade in) Animated.timing(fadeAnim, { toValue: 1, duration: 500, useNativeDriver: true, // run on the NATIVE thread (smooth — important!) }).start(); // apply it to a component ... ``` **Animated** API animated values استعمال کرتا ہے جو `Animated.View` وغیرہ پر apply ہوتی ہیں۔ اہم ترین `useNativeDriver: true` animation کو **native thread** پر چلاتا ہے (smooth، JS سے محدود نہیں)۔ ## Reanimated (پیچیدہ animations کے لیے سفارش کی گئی) ```text REACT NATIVE REANIMATED → a popular library for performant, complex animations: → runs animations on the native/UI thread (smooth, off the JS thread) → supports gestures (with react-native-gesture-handler), worklets, spring physics → better for complex, interactive, gesture-driven animations than the basic Animated API → The go-to for advanced animations in React Native. ``` ## یہاں کارکردگی اہم کیوں ہے ```text ⚠️ Animations driven by the JS thread can be JANKY (the JS thread is busy / blocked) → → useNativeDriver (Animated) or Reanimated run animations on the NATIVE/UI thread → smooth even if JS is busy → Running animations natively (not on the JS thread) is KEY to smooth animations in RN. ``` ## اہمیت React Native میں animations کو سمجھنا قیمتی ہے کیونکہ **animations صارف کے تجربے کو smooth motion اور transitions کے ساتھ بہتر بناتے ہیں** جو apps کو polished محسوس کرواتے ہیں، اس لیے یہ عملی علم مفید ہے — اور کارکردگی کی تنبیہات React Native میں خاص طور پر اہم ہیں۔ Built-in **Animated** API (animated values کو Animated components پر apply کرتے ہوئے) animations کی بنیاد فراہم کرتا ہے۔ اہم طور پر، کارکردگی کے پہلو کو سمجھنا — کہ **JavaScript thread سے چلائے جانے والے animations بدتر ہو سکتے ہیں** (اگر JS thread مصروف ہو) اور **native/UI thread** پر animations چلانا (Animated میں `useNativeDriver: true` کے ذریعے، یا Reanimated کے ذریعے) انہیں smooth رکھتا ہے جب JS مصروف ہو — React Native میں performant animations کے لیے کلیدی بصیرت ہے، React Native کے JS/native threading model کو دیکھتے ہوئے قابل غور۔ **Reanimated** کو سمجھنا (performant، پیچیدہ، gesture-driven animations کی مقبول library جو native thread پر چلتی ہے، worklets، spring physics، اور gestures کو سپورٹ کرتی ہے) قیمتی ہے کیونکہ یہ React Native میں **advanced animations کے لیے بہترین** ہے، بنیادی Animated API سے بہتر پیچیدہ interactive animations کے لیے۔ دونوں کو سمجھنا — سادہ animations کے لیے built-in Animated API (`useNativeDriver` کے ساتھ) اور پیچیدہ کے لیے Reanimated، دونوں animation کو natively چلانے کے لیے تاکید کرتے ہیں — animation toolkit کو cover کرتا ہے۔ Polished animations اہم طور پر UX کو بہتر بناتے ہیں، اور انہیں smooth رکھنا (native thread پر چلا کر) اہم چیلنج ہے جو React Native کی architecture پیش کرتی ہے۔ چونکہ smooth animations UX کو بہتر بناتے ہیں اور React Native میں animation کی کارکردگی animations کو native thread پر چلانے پر منحصر ہے (`useNativeDriver` یا Reanimated کے ذریعے)، اور چونکہ Animated API، Reanimated، اور خاص طور پر native-thread کارکردگی کی تنبیہ کو سمجھنا smooth animations بنانے میں مدد دیتا ہے، React Native میں animations کو سمجھنا قیمتی، عملی طور پر relevant علم ہے — motion کے ساتھ UX کو بہتر بنانے کے لیے مفید، جہاں animations کو natively چلانے کا React-Native-specific تشویش smoothness کے لیے خاص طور پر اہم ہے، polished React Native apps بنانے کے لیے ایک قیمتی ہنر۔

Animated API (built-in)

Reanimated (پیچیدہ animations کے لیے سفارش کی گئی)

یہاں کارکردگی اہم کیوں ہے

اہمیت

متعلقہ سوالات