How do you handle images and assets in React Native?

Question

Accepted Answer

React Native apps display **images** (local and remote) and bundle **assets** (fonts, etc.). Understanding how to load images efficiently, handle different resolutions, and optimize image performance is important for good UX and performance. ## Loading images ```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 use `require` (bundled); remote images use a `uri`. **Images need explicit dimensions** (width/height) — unlike web, they don't auto-size from the file. ## Resolution and 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: optimize images ```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 ``` ## Why it matters Understanding how to handle images and assets is valuable because **most apps display images**, and doing so efficiently affects both UX and performance, so it's useful practical knowledge. Understanding **loading images** — local images via `require` (bundled at build time), remote images via a `uri`, and the important point that **images need explicit dimensions** in React Native (unlike web, they don't auto-size) — is necessary for displaying any image. Understanding **resolution handling** (providing @2x/@3x variants so React Native picks the right one per device density for crisp images across screens) and **resizeMode** (how images fit their box) is important for images that look good on Android's and iOS's diverse screen densities. Most importantly, understanding **image performance optimization** is valuable because **images are a common source of memory issues and jank** (especially in lists): using appropriately-sized images (not loading huge images into small views, which wastes memory and bandwidth), using **FastImage** for better remote-image performance and **caching** (so images don't re-download and lists scroll smoothly — a significant improvement over the default Image for image-heavy lists), using efficient formats (WebP), and lazy-loading with placeholders. These optimizations matter because image-heavy apps (common — feeds, galleries, profiles) can suffer real performance problems if images aren't handled well. Since most apps display images and handling them well (correct loading and dimensions, resolution variants, and especially performance optimization with caching and appropriate sizing) affects both UX (crisp, smooth-loading images) and performance (avoiding memory issues and jank), understanding images and assets in React Native is valuable, practically-relevant knowledge — important for the common need of displaying images, where understanding loading, resolution, and especially performance optimization (caching, sizing) is key to building smooth, polished image-rich apps.