Why use expo-image instead of React Native's Image?

expo-image adds automatic memory and disk caching, blurhash/thumbhash placeholders, smooth fade transitions, and better performance in long lists — all with a familiar API. It's a near drop-in replacement that reduces flicker and load times.

What replaces resizeMode in expo-image?

expo-image uses the `contentFit` prop instead of `resizeMode`. Common values are 'cover', 'contain', 'fill', and 'none' — 'cover' is the most common and matches the web's object-fit behavior.

How do I cache images with expo-image?

Caching is on by default. Control it with the `cachePolicy` prop — 'memory-disk' (default) caches to both, 'memory' caches only in RAM, and 'disk' persists across launches. expo-image handles cache eviction for you.

expo-image: Faster, Smoother Images in React Native

Slow, flickering images are one of the most common React Native performance complaints — and expo-image is the fix. It's a modern image component with built-in caching, placeholders, and transitions that make lists and galleries feel instant. It's a near drop-in replacement for React Native's Image, which is why it's become one of the most-searched Expo modules.

Install

npx expo install expo-image

No config plugin or permissions needed — just import and use.

Basic usage

import { Image } from "expo-image"

export default function Avatar() {
  return (
    <Image
      source="https://picsum.photos/400"
      style={{ width: 120, height: 120, borderRadius: 60 }}
      contentFit="cover"
      transition={300}
    />
  )
}

Two things to notice versus RN's Image:

source accepts a plain URL string (or an object/require).
contentFit replaces resizeMode ("cover", "contain", "fill", "none").

Add a blurhash placeholder

Show a blurred preview instantly while the full image loads — no layout shift, no blank box:

<Image
  source="https://picsum.photos/800"
  placeholder={{ blurhash: "LEHV6nWB2yk8pyo0adR*.7kCMdnj" }}
  contentFit="cover"
  transition={400}
  style={{ width: "100%", height: 220 }}
/>

The transition prop cross-fades from placeholder to image.

Control caching

Caching is on by default. Tune it per image:

<Image
  source="https://cdn.example.com/hero.jpg"
  cachePolicy="memory-disk" // "memory" | "disk" | "memory-disk" | "none"
  priority="high"           // "low" | "normal" | "high" — hint for above-the-fold images
  style={{ width: "100%", height: 300 }}
/>

memory-disk (the default) keeps a copy in RAM for the session and on disk across app launches, so repeat views are instant.

Migrating from React Native's Image

The swap is mostly mechanical:

// Before
import { Image } from "react-native"
<Image source={{ uri }} resizeMode="cover" />

// After
import { Image } from "expo-image"
<Image source={uri} contentFit="cover" transition={200} />

Map resizeMode → contentFit, and you get caching, placeholders, and transitions for free.

Gotchas

Always give the image an explicit width/height (or flex sizing) — like RN's Image, it won't size itself from the source.
Use blurhash or thumbhash placeholders for hero images to eliminate perceived load time.
In long lists (FlatList/FlashList), expo-image's caching noticeably cuts scroll jank.

Next steps

Displaying photos users picked or captured? Combine this with the expo-image-picker guide and expo-camera tutorial. See all ten in the top Expo SDK modules roundup.