React Native Fast Image — High-Performance Image Component

Introduction

React Native Fast Image replaces the built-in Image component with a version backed by proven native image libraries. It solves common problems with the default component such as flickering during reloads, missing cache control, and slow rendering in long scrollable lists.

What React Native Fast Image Does

• Loads and caches remote images using SDWebImage on iOS and Glide on Android
• Supports priority levels (low, normal, high) to control image loading order
• Provides preload functionality to warm the cache before images appear on screen
• Handles authorization headers and cookies for loading images behind authentication
• Supports GIF and WebP animated image formats natively on both platforms

Architecture Overview

The component delegates all image fetching, decoding, and caching to the native image libraries on each platform. SDWebImage on iOS and Glide on Android handle disk caching, memory caching, image decoding on background threads, and progressive loading. The React Native bridge passes the URI, headers, priority, and resize mode to the native component, which manages the full lifecycle without JavaScript involvement.

Self-Hosting & Configuration

• Install via npm and run pod-install to link native SDWebImage on iOS
• Use the source prop with uri, headers, and priority fields for remote images
• Call FastImage.preload with an array of sources to warm the disk cache
• Clear the cache programmatically with FastImage.clearMemoryCache and FastImage.clearDiskCache
• Use the onLoad, onError, and onProgress callbacks to track image loading state

Key Features

• Aggressive disk and memory caching eliminates redundant network requests
• Priority-based loading ensures above-the-fold images load before off-screen ones
• Smooth rendering in FlatList and ScrollView without flickering on re-mount
• Authorization header support for loading images from protected APIs
• Animated GIF and WebP rendering without additional dependencies

Comparison with Similar Tools

• React Native Image — the built-in component; Fast Image adds caching and priority control
• expo-image — Expo's image component with similar goals; Fast Image is the established bare RN solution
• react-native-image-cache — a JavaScript-level cache wrapper; Fast Image delegates caching to native libraries
• Glide (Android) / SDWebImage (iOS) — the underlying native libraries; Fast Image bridges them to React Native

FAQ

Q: Why do images flicker with the default Image component? A: The built-in component does not aggressively cache and may re-fetch images when components re-mount. Fast Image retains cached copies on disk.

Q: Can I use it with Expo? A: It requires native linking, so use it with Expo bare workflow or custom dev clients. Expo Go users should consider expo-image instead.

Q: How do I handle authenticated image URLs? A: Pass a headers object in the source prop with your Authorization token. The native libraries attach these headers to every image request.

Q: Does preloading block the main thread? A: No. Preloading runs asynchronously on background threads and only warms the disk cache for future use.

Sources

• https://github.com/DylanVann/react-native-fast-image