list performance images

Use Compressed Images in Lists

Always load compressed, appropriately-sized images in lists. Full-resolution images consume excessive memory and cause scroll jank. Request thumbnails from your server or use an image CDN with resize parameters.

Incorrect (full-resolution images):

function ProductItem({ product }: { product: Product }) {
  return (
    
      
      
      {product.name}
    
  )
}

Correct (request appropriately-sized image):

function ProductItem({ product }: { product: Product }) {
  // Request a 200x200 image (2x for retina)
  const thumbnailUrl = `${product.imageUrl}?w=200&h=200&fit=cover`

  return (
    
      
      {product.name}
    
  )
}

Use an optimized image component with built-in caching and placeholder support, such as expo-image or SolitoImage (which uses expo-image under the hood). Request images at 2x the display size for retina screens.