Cursor rule

1---
2alwaysApply: false
3---
4 
5## Use Compressed Images in Lists
6 
7Always load compressed, appropriately-sized images in lists. Full-resolution
8images consume excessive memory and cause scroll jank. Request thumbnails from
9your server or use an image CDN with resize parameters.
10 
11**Incorrect (full-resolution images):**
12 
13```tsx
14function ProductItem({ product }: { product: Product }) {
15  return (
16    <View>
17      {/* 4000x3000 image loaded for a 100x100 thumbnail */}
18      <Image
19        source={{ uri: product.imageUrl }}
20        style={{ width: 100, height: 100 }}
21      />
22      <Text>{product.name}</Text>
23    </View>
24  )
25}
26```
27 
28**Correct (request appropriately-sized image):**
29 
30```tsx
31function ProductItem({ product }: { product: Product }) {
32  // Request a 200x200 image (2x for retina)
33  const thumbnailUrl = `${product.imageUrl}?w=200&h=200&fit=cover`
34 
35  return (
36    <View>
37      <Image
38        source={{ uri: thumbnailUrl }}
39        style={{ width: 100, height: 100 }}
40        contentFit='cover'
41      />
42      <Text>{product.name}</Text>
43    </View>
44  )
45}
46```
47 
48Use an optimized image component with built-in caching and placeholder support,
49such as `expo-image` or `SolitoImage` (which uses `expo-image` under the hood).
50Request images at 2x the display size for retina screens.
51