आप React Native में images और assets को कैसे handle करते हैं?

Question

Accepted Answer

React Native ऐप्स **images** (local और remote) प्रदर्शित करते हैं और **assets** (fonts, आदि) bundle करते हैं। images को कुशलता से load करना, विभिन्न resolutions handle करना, और image performance optimize करना समझना अच्छे UX और performance के लिए महत्वपूर्ण है। ## Images load करना ```jsx import { Image } from 'react-native'; // LOCAL image (bundled with the app) — required at build time // REMOTE image (from a URL) — needs explicit dimensions ``` Local images `require` का उपयोग करती हैं (bundled); remote images एक `uri` का उपयोग करती हैं। **Images को explicit dimensions की आवश्यकता होती है** (width/height) — web के विपरीत, वे file से auto-size नहीं होतीं। ## Resolution और resizeMode ```text → RESOLUTION: provide @2x and @3x variants (logo.png, logo@2x.png, logo@3x.png) → RN picks the right one per device density (crisp on all screens) → resizeMode: cover / contain / stretch / center → how the image fits its box ``` ## Performance: images optimize करें ```text ✓ Use APPROPRIATELY-SIZED images (don't load huge images into small views — wastes memory/bandwidth) ✓ FastImage (react-native-fast-image) → better remote image performance + CACHING (caches images so they don't re-download; smoother than the default Image for lists) ✓ Use the right FORMAT (WebP for smaller sizes); lazy-load; placeholders while loading ✓ Images are a common source of memory issues / jank in lists → optimize them ``` ## यह क्यों महत्वपूर्ण है Images और assets को handle करना समझना मूल्यवान है क्योंकि **अधिकांश ऐप्स images प्रदर्शित करते हैं**, और ऐसा कुशलता से करना UX और performance दोनों को प्रभावित करता है, इसलिए यह उपयोगी व्यावहारिक ज्ञान है। **Images load करना** समझना — `require` के माध्यम से local images (build time पर bundled), `uri` के माध्यम से remote images, और महत्वपूर्ण बिंदु कि React Native में **images को explicit dimensions की आवश्यकता होती है** (web के विपरीत, वे auto-size नहीं होतीं) — किसी भी image को प्रदर्शित करने के लिए आवश्यक है। **Resolution handling** को समझना (@2x/@3x variants प्रदान करना ताकि React Native screens भर में crisp images के लिए प्रति device density सही चुने) और **resizeMode** (images अपने box में कैसे fit होती हैं) उन images के लिए महत्वपूर्ण है जो Android और iOS की विविध screen densities पर अच्छी दिखती हैं। सबसे महत्वपूर्ण रूप से, **image performance optimization** को समझना मूल्यवान है क्योंकि **images memory issues और jank का एक सामान्य स्रोत हैं** (विशेष रूप से lists में): उपयुक्त-sized images का उपयोग करना (huge images को small views में load न करना, जो memory और bandwidth बर्बाद करता है), बेहतर remote-image performance और **caching** के लिए **FastImage** का उपयोग करना (ताकि images re-download न हों और lists smoothly scroll करें — image-heavy lists के लिए default Image पर एक महत्वपूर्ण सुधार), कुशल formats का उपयोग करना (WebP), और placeholders के साथ lazy-loading। ये optimizations मायने रखते हैं क्योंकि image-heavy ऐप्स (सामान्य — feeds, galleries, profiles) वास्तविक performance समस्याओं से पीड़ित हो सकते हैं यदि images अच्छी तरह से handle न की जाएं। चूंकि अधिकांश ऐप्स images प्रदर्शित करते हैं और उन्हें अच्छी तरह से handle करना (सही loading और dimensions, resolution variants, और विशेष रूप से caching और उपयुक्त sizing के साथ performance optimization) UX (crisp, smooth-loading images) और performance (memory issues और jank से बचना) दोनों को प्रभावित करता है, React Native में images और assets को समझना मूल्यवान, व्यावहारिक रूप से प्रासंगिक ज्ञान है — images प्रदर्शित करने की सामान्य आवश्यकता के लिए महत्वपूर्ण, जहां loading, resolution, और विशेष रूप से performance optimization (caching, sizing) को समझना smooth, polished image-rich ऐप्स बनाने की कुंजी है।