Deft
Ask AI

Search

Search skills, authors and topics

vercel-labs / agent-skills

vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

View sourceExpoReact NativePerformanceMotion

Install

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills
title
Use Compressed Images in Lists
impact
HIGH
impactDescription
faster load times, less memory
tags
lists, images, performance, optimization

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):

tsx
function ProductItem({ product }: { product: Product }) {  return (    <View>      {/* 4000x3000 image loaded for a 100x100 thumbnail */}      <Image        source={{ uri: product.imageUrl }}        style={{ width: 100, height: 100 }}      />      <Text>{product.name}</Text>    </View>  )}

Correct (request appropriately-sized image):

tsx
function ProductItem({ product }: { product: Product }) {  // Request a 200x200 image (2x for retina)  const thumbnailUrl = `${product.imageUrl}?w=200&h=200&fit=cover`
  return (    <View>      <Image        source={{ uri: thumbnailUrl }}        style={{ width: 100, height: 100 }}        contentFit='cover'      />      <Text>{product.name}</Text>    </View>  )}

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.