patterntypescriptreact-nativeTip

Image Caching in React Native with expo-image

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

image cachingexpo-imagereact-native-fast-imageSDWebImageGlideblurhashplaceholder

Problem

The built-in Image component from react-native has no disk caching on iOS (only in-memory) and inconsistent behavior across platforms, causing images to re-download on every mount.

Solution

Use expo-image (based on SDWebImage on iOS and Glide on Android). It provides disk caching by default, progressive loading, blurhash placeholders, and priority hints. Set cachePolicy='memory-disk' (the default). For a non-Expo project, use react-native-fast-image.

Why

SDWebImage and Glide are industry-standard image caching libraries for native iOS/Android. They handle LRU disk cache, memory pressure, and progressive JPEG decoding natively — far more efficiently than a JS-layer cache.

Gotchas

Cache keys are based on the image URL — changing URL query params bypasses cache even for the same image
blurhash placeholder requires a pre-computed hash from the server; compute it at upload time
SVG images are not supported by expo-image — use react-native-svg + SvgUri for those
Large animated GIFs/WebPs can consume significant memory — set allowDownscaling appropriately

Code Snippets

expo-image with blurhash placeholder and disk cache

import { Image } from 'expo-image';

const blurhash = '|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[fQj[ayayj[ayfjj[j[ayjuayj[';

export function CachedImage({ uri }: { uri: string }) {
  return (
    <Image
      source={{ uri }}
      placeholder={blurhash}
      contentFit="cover"
      transition={300}
      cachePolicy="memory-disk"
      style={{ width: 200, height: 200 }}
    />
  );
}

Revisions (0)

No revisions yet.