React Native मा animations कसरी काम गर्छन्?

Question

Accepted Answer

React Native ले built-in **Animated** API र लोकप्रिय **Reanimated** library को माध्यमबाट **animations** लाई समर्थन गर्छ। Animations ले UX लाई smooth motion र transitions को साथ सुधार गर्छ। Performance (native thread मा animations चलाउनु) एक मुख्य विचार हो। ## The 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.View` आदिमा लागु गरिएको animated values प्रयोग गर्छ। महत्त्वपूर्ण `useNativeDriver: true` ले animation लाई **native thread** मा चलाउछ (smooth, JS द्वारा blocked हुँदैन)। ## Reanimated (complex 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. ``` ## किन performance महत्त्वपूर्ण छ यहाँ ```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 ले user experience लाई smooth motion र transitions को साथ सुधार गर्छ** जसले apps लाई polish गरिएको महसुस गराउछ, त्यसैले यो उपयोगी व्यावहारिक ज्ञान हो — र performance विचारहरु विशेष गरी महत्त्वपूर्ण छन्। Built-in **Animated** API (Animated components मा लागु गरिएको animated values प्रयोग गरेर) animations को लागि आधार प्रदान गर्छ। आलोचनात्मक रूपमा, performance पहलु बुझ्नु — कि **JavaScript thread द्वारा संचालित animations janky हुन सक्छन्** (यदि JS thread व्यस्त छ) र **native/UI thread** मा animations चलाउनु (Animated मा `useNativeDriver: true` को माध्यमबाट, वा Reanimated को माध्यमबाट) JS busy हुँदा पनि तिनलाई smooth राख्छ — React Native मा smooth animations को लागि मुख्य insight हो, React Native को JS/native threading model को दिमा उल्लेखनीय विचार। **Reanimated** बुझ्नु (performant, complex, gesture-driven animations को लागि लोकप्रिय library जो native thread मा चल्छ, worklets, spring physics, र gestures लाई समर्थन गर्छ) मूल्यवान छ किनभने यो **React Native मा advanced animations को लागि go-to** हो, basic Animated API भन्दा complex interactive animations को लागि राम्रो। दुवै बुझ्नु — simpler animations को लागि built-in Animated API (useNativeDriver सँग) र complex ones को लागि Reanimated, दुवै native thread मा animations चलाउने लाई जोर दिंदै — animation toolkit लाई कभर गर्छ। Polished animations ले meaningfully UX लाई सुधार गर्छ, र तिनलाई smooth बनाउनु (native thread मा चलाएर) React Native को architecture ले प्रस्तुत गरेको मुख्य चुनौती हो। Smooth animations ले UX लाई सुधार गर्छ र React Native को animation performance native thread मा animations चलाउने मा (useNativeDriver वा Reanimated को माध्यमबाट) आलोचनात्मकरूपमा निर्भर छ, र Animated API, Reanimated, र विशेष गरी native-thread performance विचार बुझ्नु smooth animations बनाउन सक्षम गर्छ, React Native मा animations बुझ्नु मूल्यवान, व्यावहारिकरूपमा प्रासङ्गिक ज्ञान हो — motion को साथ UX लाई बढाउने को लागि उपयोगी, जहाँ React-Native-specific concern animations को smoothness को लागि native मा चलाउनु विशेष गरी महत्त्वपूर्ण छ, polished React Native apps बनाउने को लागि मूल्यवान skill।