Setting the file. One moment.
Skill 04 · Vercel React Native Skills
Subchapter 4.33
rules/ui-expo-image.mdMarkdown2 KBView on GitHub
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 loadingcontentFit — cover, contain, fill, scale-downtransition — Fade-in duration (ms)priority — low, normal, highcachePolicy — memory, disk, memory-disk, nonerecyclingKey — Unique key for list recyclingFor cross-platform (web + native), use SolitoImage from solito/image which uses expo-image under the hood.
Reference: expo-image (opens in a new tab)