expo-image Tutorial: Caching, Blurhash Placeholders, and Performance in React Native (2026)

Updated: June 26, 2026

expo-image is the modern image component for React Native that replaces the legacy Image primitive with native-backed caching, Blurhash and Thumbhash placeholders, smooth transitions, and first-class WebP and AVIF support. In this guide I'll walk through installing it in Expo SDK 55, configuring memory and disk caching, generating Blurhash placeholders at build time, prefetching critical images, and benchmarking the difference against the React Native built-in Image, with code you can drop straight into a project.

• expo-image wraps SDWebImage on iOS and Glide on Android, giving disk and memory caching with zero config, unlike the React Native Image component which has no built-in disk cache on Android.
• Blurhash and Thumbhash placeholders eliminate the blank-frame flash by rendering a tiny encoded preview while the full image loads. A 28-character Blurhash decodes in under 1 ms.
• The contentFit prop replaces resizeMode and matches CSS object-fit semantics: cover, contain, fill, none, and scale-down.
• Image.prefetch() warms the cache for upcoming screens, and cachePolicy="memory-disk" keeps repeated views render-instant after the first fetch.
• WebP and AVIF reduce payload by 25–50% versus JPEG; expo-image decodes both natively on iOS 14+ and Android 12+.
• Migrating from react-native-fast-image is mostly a search-and-replace, but resizeMode becomes contentFit, and source.uri is just source with a string URL.

What is expo-image and why use it

The React Native Image component shipped in 2015 and honestly hasn't changed much since. On Android it has no persistent disk cache, decodes on the JS thread, can't smoothly cross-fade between sources, and has no concept of a placeholder beyond a static defaultSource. expo-image, introduced as an Expo Module in SDK 48 and stabilized through SDK 55, fixes all of that by wrapping two battle-tested native libraries: SDWebImage on iOS and Glide on Android. Both run off the JS thread, persist to disk, deduplicate concurrent requests for the same URL, and decode modern formats.

In practice that means three measurable wins: faster perceived load (placeholders bridge the blank gap), faster real load on repeat views (disk hit instead of network), and lower memory pressure (Glide and SDWebImage downsample to the target dimensions instead of decoding the full source). For lists of remote images, like product grids, social feeds, or avatars in a chat, the difference is usually the gap between janky and smooth scrolling. If you're also working on list performance, see our FlashList v2 guide, which pairs naturally with expo-image for high-throughput scroll views.

Installing expo-image in Expo SDK 55

Installation is a single command in any Expo or Expo-prebuilt project. The package autolinks on both platforms; you don't need to touch native code unless you've ejected to a bare React Native workflow that doesn't use Expo Modules.

npx expo install expo-image

If you're on a bare React Native 0.79+ project without the Expo Modules core, install expo first so the native module system is in place:

npx install-expo-modules@latest
npm install expo-image

That's it for setup. No extra Podfile entries, no Gradle changes, no manifest permissions. expo-image ships native binaries for both architectures (old and new) and is fully compatible with the React Native New Architecture, which we covered in our New Architecture migration checklist. On a development build, run npx expo run:ios or npx expo run:android to rebuild with the native module included. On Expo Go SDK 55, expo-image is bundled already.

Basic usage and prop differences from React Native Image

The API is intentionally close to React Native's Image so you can swap most usages with a search-and-replace, but a few props have been renamed for clarity. The big one: resizeMode is now contentFit, and its values match CSS object-fit exactly. source also accepts a plain string URL in addition to the { uri } object form.

import { Image } from 'expo-image';
import { StyleSheet, View } from 'react-native';

export function ProductCard({ product }) {
  return (
    <View style={styles.card}>
      <Image
        source={product.imageUrl}
        style={styles.image}
        contentFit="cover"
        transition={200}
        cachePolicy="memory-disk"
        accessibilityLabel={product.name}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  card: { borderRadius: 12, overflow: 'hidden' },
  image: { width: '100%', aspectRatio: 1 },
});

The most common prop migrations: resizeMode="cover" becomes contentFit="cover"; defaultSource becomes placeholder; onLoadEnd becomes onLoad (which fires with sizing metadata). The style prop accepts the same flexbox values as before, including aspectRatio, which is the cleanest way to reserve space and prevent layout shift while a remote image loads.

Caching policies: memory, disk, and memory-disk

So, this is where expo-image pulls ahead most clearly. The cachePolicy prop has four values, each with a clear use case:

Policy	Memory	Disk	Best for
none	No	No	One-off images that change every request (signed URLs with short TTL).
memory	Yes	No	Hot images viewed many times in one session but irrelevant on next launch.
disk	No	Yes	Large images you don't want filling RAM but want available offline.
memory-disk (default)	Yes	Yes	Everything else. Sane default for product images, avatars, feeds.

The disk cache size is capped at 100 MB by default on both platforms and uses an LRU eviction policy. You can clear caches manually, which is useful after a logout or when shipping a content update:

import { Image } from 'expo-image';

await Image.clearMemoryCache();
await Image.clearDiskCache();

Blurhash and Thumbhash placeholders

Blurhash encodes an image into roughly 20–30 characters that decode into a smoothly-blurred low-resolution preview. expo-image decodes Blurhashes natively in microseconds, so they render instantly while the real image streams in. Thumbhash is a newer competitor with sharper edges and alpha-channel support, also natively supported.

const blurhash = 'L6PZfSi_.AyE_3t7t7R**0o#DgR4';

<Image
  source="https://cdn.example.com/products/sneaker.webp"
  placeholder={{ blurhash }}
  placeholderContentFit="cover"
  contentFit="cover"
  transition={300}
  style={{ width: 200, height: 200 }}
/>

Generate Blurhashes at upload time, not on-device. The canonical Node implementation is the blurhash npm package; pair it with sharp in your image pipeline:

// scripts/encode-blurhash.mjs
import sharp from 'sharp';
import { encode } from 'blurhash';

export async function generateBlurhash(imagePath) {
  const { data, info } = await sharp(imagePath)
    .raw()
    .ensureAlpha()
    .resize(32, 32, { fit: 'inside' })
    .toBuffer({ resolveWithObject: true });

  return encode(new Uint8ClampedArray(data), info.width, info.height, 4, 4);
}

Store the resulting string alongside your image URL in the database or CMS, then pass it through the API. For Thumbhash, use placeholder={{ thumbhash }} instead. The syntax is identical.

Cross-fade transitions and content fit

The transition prop accepts either a number (milliseconds for a fade) or an object with duration, timing, and effect fields. A 200–300 ms cross-fade is the sweet spot: shorter feels jarring, longer feels sluggish. The transition runs between the placeholder and the loaded image, and also between two real images if you change the source dynamically (think: a theme toggle swapping a logo).

<Image
  source={avatarUrl}
  placeholder={{ blurhash }}
  transition={{ duration: 250, effect: 'cross-dissolve', timing: 'ease-in-out' }}
  contentFit="cover"
  style={styles.avatar}
/>

contentFit options map to CSS exactly. cover fills the box and crops overflow, which is the default for thumbnails and hero images. contain letterboxes to fit without cropping, useful for logos and infographics. fill stretches non-proportionally (rarely what you want). none renders at native resolution, and scale-down picks the smaller of contain and none. There's also a contentPosition prop that controls focal point: set contentPosition="top" to keep faces in frame when cropping portrait images.

How do you prefetch images in React Native?

Prefetching warms the cache before the user sees the image. The classic case: on a list screen, prefetch the detail-screen images for items in view so navigation feels instant. expo-image exposes a static prefetch method that fills both the memory and disk caches.

import { Image } from 'expo-image';
import { useEffect } from 'react';

export function useImagePrefetch(urls) {
  useEffect(() => {
    if (!urls?.length) return;
    Image.prefetch(urls, 'memory-disk').catch(() => {
      // Prefetch failures are non-critical; the image will load on first render.
    });
  }, [urls]);
}

Call useImagePrefetch with the next N URLs you expect to render. For example, the top 10 detail images in a feed, or the next page of a paginated grid. prefetch accepts a single URL or an array, and the second argument controls the cache policy (defaults to memory-disk). Combine it with an onViewableItemsChanged callback on FlashList to prefetch detail images for whatever's currently scrolled into view, and the user feels zero wait when they tap.

WebP, AVIF, and SVG support

Modern formats are the single biggest payload win you can make. WebP saves roughly 25–34% over JPEG at equal visual quality, and AVIF saves another 20% over WebP. expo-image decodes both natively on iOS 14+ and Android 12+, with automatic fallback to JPEG on older OS versions if you serve both.

SVG support is partial: vector files render correctly but can't be cached or transitioned the same way as raster images. For SVGs, prefer react-native-svg directly if you need styling, animation, or theme-aware fills. Lottie animations should use lottie-react-native, not expo-image.

Migrating from react-native-fast-image

react-native-fast-image was the default solution for years, but development has slowed and it doesn't support the New Architecture as of mid-2026. The migration to expo-image is mostly mechanical:

FastImage prop	expo-image equivalent
source={{ uri, priority }}	source={uri} + priority="high" prop
resizeMode={FastImage.resizeMode.cover}	contentFit="cover"
FastImage.preload([{ uri }])	Image.prefetch([uri])
FastImage.clearMemoryCache()	Image.clearMemoryCache()
cache: FastImage.cacheControl.web	cachePolicy="memory-disk"

One subtle difference (and this one bit me on a migration last spring): FastImage's onLoad received { nativeEvent: { width, height } }; expo-image's onLoad fires with { source: { width, height, mediaType } }. Update any code that reads image dimensions from the load event. For broader app-performance work, our React Native performance optimization guide covers how image handling fits into the bigger picture.

Benchmarks: expo-image vs Image vs FastImage

I ran a quick benchmark on a Pixel 7 with a list of 100 product images served from Cloudflare R2 (WebP, average 80 KB). Times below are median over 5 cold runs after clearing all caches, measured from list mount to last image visible. The results match what other teams have reported and what the official expo-image docs describe.

Component	Cold render	Warm render (cached)	Memory peak
React Native Image	3.8 s	3.5 s (no disk cache)	312 MB
react-native-fast-image	2.4 s	0.4 s	198 MB
expo-image	2.1 s	0.3 s	176 MB

The cold-render gap between expo-image and FastImage is small but consistent. SDWebImage's request deduplication helps when multiple cells request the same CDN host. The warm-render gap to React Native's Image is the headline: a 12× speedup on the second view, which is what users actually experience on repeat scrolls.

Frequently Asked Questions

What is the difference between expo-image and React Native Image?

expo-image is backed by SDWebImage on iOS and Glide on Android, giving it persistent disk caching, request deduplication, Blurhash and Thumbhash placeholders, cross-fade transitions, and native WebP/AVIF decoding. The React Native Image component has none of these. It relies on the platform's HTTP cache, which on Android does not persist images to disk by default.

Does expo-image support SVG?

Partially. SVG files render but can't be cached, transitioned, or styled the same way as raster images. For interactive or theme-aware vector graphics, use react-native-svg directly instead.

How do I clear the expo-image cache?

Call Image.clearMemoryCache() to flush in-memory bitmaps and Image.clearDiskCache() to delete the persistent cache. Both are static async methods on the Image export from expo-image. A common pattern is to call both on user logout.

Can I use expo-image without Expo?

Yes. Bare React Native projects can install the Expo Modules core with npx install-expo-modules, then npm install expo-image. You don't need to use Expo Router, EAS, or any other Expo product, just the modules system.

Is Blurhash better than Thumbhash for placeholders?

Thumbhash produces sharper edges and supports transparency, which Blurhash does not, but the encoded string is slightly longer (~30 vs ~25 bytes). For photographs Blurhash looks softer and is the de facto standard; for UI assets with alpha (icons, badges) Thumbhash wins. Both are supported by expo-image with the same API.