claude-skills/react-native-skills/rules/ui-expo-image.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Use expo-image for Optimized Images	HIGH	memory efficiency, caching, blurhash placeholders, progressive loading	images, performance, expo-image, ui

Use expo-image for Optimized Images

Use expo-image instead of React Native's Image. It provides memory-efficient caching, blurhash placeholders, progressive loading, and better performance for lists.

Incorrect (React Native Image):

import { Image } from 'react-native'

function Avatar({ url }: { url: string }) {
  return <Image source={{ uri: url }} style={styles.avatar} />
}

Correct (expo-image):

import { Image } from 'expo-image'

function Avatar({ url }: { url: string }) {
  return <Image source={{ uri: url }} style={styles.avatar} />
}

With blurhash placeholder:

<Image
  source={{ uri: url }}
  placeholder={{ blurhash: 'LGF5]+Yk^6#M@-5c,1J5@[or[Q6.' }}
  contentFit="cover"
  transition={200}
  style={styles.image}
/>

With priority and caching:

<Image
  source={{ uri: url }}
  priority="high"
  cachePolicy="memory-disk"
  style={styles.hero}
/>

Key props:

• placeholder — Blurhash or thumbnail while loading
• contentFit — cover, contain, fill, scale-down
• transition — Fade-in duration (ms)
• priority — low, normal, high
• cachePolicy — memory, disk, memory-disk, none
• recyclingKey — Unique key for list recycling

For cross-platform (web + native), use SolitoImage from solito/image which uses expo-image under the hood.

Reference: expo-image