Chapter 2 · Practice 5 of 5
Ship images at the size you show them and cache remote ones
Why it matters
The React Native list docs warn that image loading can block the JavaScript thread, and recommend cached, optimized images. Large images also cost memory, which is what gets apps killed on low-end phones.
- Request thumbnails from your server or CDN at roughly the display size.
- Use an image component with disk caching for remote images, such as
expo-imagein Expo apps. - Give every image explicit dimensions or an aspect ratio so the layout does not jump.
- On iOS, animate an image's size with
transform: [{ scale }]rather than width and height, which the performance guide notes re-crops and rescales the image on every frame.
Do
- Serve list thumbnails, load full images on the detail screen
Avoid
- Loading full-resolution photos into a list of small avatars