React Native Best Practices

Chapter 2 · Practice 5 of 5

Ship images at the size you show them and cache remote ones

From Components and styling

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-image in 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