Aplikasi React Native menampilkan gambar (lokal dan remote) dan membundel aset (font, dll). Memahami cara memuat gambar secara efisien, menangani resolusi berbeda, dan mengoptimalkan performa gambar penting untuk UX dan performa yang baik.
{ } ;
Gambar lokal menggunakan require (dibundel); gambar remote menggunakan uri. Gambar memerlukan dimensi eksplisit (width/height) — tidak seperti web, mereka tidak auto-size dari file.
→ RESOLUTION: provide @2x and @3x variants (logo.png, [email protected], [email protected]) → RN
picks the right one per device density (crisp on all screens)
→ resizeMode: cover / contain / stretch / center → how the image fits its box
✓ 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
Memahami cara menangani gambar dan aset berharga karena sebagian besar aplikasi menampilkan gambar, dan melakukannya secara efisien mempengaruhi UX dan performa, sehingga ini pengetahuan praktis yang berguna.
Memahami memuat gambar — gambar lokal via require (dibundel saat build), gambar remote via uri, dan poin penting bahwa gambar memerlukan dimensi eksplisit di React Native (tidak seperti web, mereka tidak auto-size) — diperlukan untuk menampilkan gambar apa pun.
Memahami penanganan resolusi (menyediakan varian @2x/@3x sehingga React Native memilih yang tepat per kepadatan perangkat untuk gambar yang tajam di seluruh layar) dan resizeMode (bagaimana gambar sesuai dengan kotaknya) penting untuk gambar yang terlihat bagus di kepadatan layar Android dan iOS yang beragam.
Yang paling penting, memahami optimasi performa gambar berharga karena gambar adalah sumber umum masalah memori dan jank (terutama di daftar): menggunakan gambar berukuran sesuai (tidak memuat gambar besar ke tampilan kecil, yang membuang memori dan bandwidth), menggunakan FastImage untuk performa gambar remote yang lebih baik dan caching (sehingga gambar tidak diunduh ulang dan daftar scroll mulus — peningkatan signifikan atas Image default untuk daftar kaya gambar), menggunakan format efisien (WebP), dan lazy-loading dengan placeholder.
Optimasi ini penting karena aplikasi kaya gambar (umum — feed, galeri, profil) dapat mengalami masalah performa nyata jika gambar tidak ditangani dengan baik.
Karena sebagian besar aplikasi menampilkan gambar dan menanganinya dengan baik (loading dan dimensi yang benar, varian resolusi, dan terutama optimasi performa dengan caching dan sizing yang sesuai) mempengaruhi UX (gambar tajam, smooth-loading) dan performa (menghindari masalah memori dan jank), memahami gambar dan aset di React Native adalah pengetahuan yang berharga dan relevan secara praktis — penting untuk kebutuhan umum menampilkan gambar, di mana memahami loading, resolusi, dan terutama optimasi performa (caching, sizing) adalah kunci untuk membangun aplikasi kaya gambar yang smooth dan polished.