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

tsx

import { Image } from 'react-native'

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

Correct (expo-image):

tsx

import { Image } from 'expo-image'

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

With blurhash placeholder:

tsx

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

tsx

<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