dylanvann/react-native-fast-image

★ 8,425TypeScriptAudience · developerComplexity · 2/5LicenseSetup · moderate

Mindmap

mindmap
  root((react-native-fast-image))
    Why use it
      Fixes flickering
      Better caching
      Faster scroll lists
    Native Libraries
      SDWebImage on iOS
      Glide on Android
    Key Features
      Download priority
      Custom HTTP headers
      Image preloading
      Cache policy control
    Events
      Load start
      Progress
      Complete
      Error

mindmap root((react-native-fast-image)) Why use it Fixes flickering Better caching Faster scroll lists Native Libraries SDWebImage on iOS Glide on Android Key Features Download priority Custom HTTP headers Image preloading Cache policy control Events Load start Progress Complete Error

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Replace the standard React Native Image component to eliminate flickering when images reload in lists or navigating back to a screen.

USE CASE 2

Preload a batch of images before a screen opens so they appear instantly when the user scrolls to them.

USE CASE 3

Load images from protected URLs by attaching an Authorization header to each image request without a proxy.

USE CASE 4

Configure per-image cache policy, force re-download, follow HTTP cache headers, or only show images already on disk.

Tech stack

TypeScriptReact NativeJavaScriptObjective-CJava

Getting it running

Difficulty · moderate Time to first run · 30min

Requires React Native 0.60 or later and a working React Native project, native pods must be linked on iOS.

Use, copy, modify, and distribute freely for any purpose, including commercial, as long as you keep the copyright notice.

In plain English

react-native-fast-image is a drop-in replacement for the built-in Image component in React Native, the framework used to build iOS and Android apps with JavaScript. The standard Image component handles image loading adequately in many situations, but developers have frequently reported flickering when images reload, cache misses that cause already-seen images to download again, and sluggish performance when scrolling through lists of images. This library addresses those problems. Under the hood, FastImage wraps two established native image-loading libraries: SDWebImage on iOS and Glide on Android. Both of those libraries have been battle-tested in native app development and bring their caching and memory management strategies into the React Native world. The library provides several options beyond what the built-in component offers. You can assign a priority level to each image (low, normal, or high), which controls which downloads happen first when multiple images are loading at the same time. You can attach custom HTTP headers to image requests, including authorization tokens for protected image URLs. You can preload a list of images before they appear on screen, so they are already cached by the time the user scrolls to them. Cache behavior is configurable per image: you can tell the library to treat the URL as permanent and never re-download, to follow standard HTTP cache headers, or to only show images already stored on disk. The component supports GIF images, border radius styling, and callbacks for load start, progress, completion, and error events. There is also a method to clear the in-memory or on-disk cache programmatically. The library is MIT-licensed and requires React Native version 0.60 or later. It targets the latest version of React Native and does not maintain compatibility with older releases.

Copy-paste prompts

Prompt 1

Show me how to replace all React Native Image components in my app with FastImage, keeping the same props but adding priority='normal' and resizeMode='cover'.

Prompt 2

I need to preload 20 product images before the user opens a product list screen. Write the FastImage.preload call with an array of image URLs.

Prompt 3

My app loads images from a protected S3 bucket that requires a Bearer token header. Show me the FastImage source prop configuration to attach the Authorization header.

Prompt 4

How do I clear the FastImage on-disk cache programmatically, for example, when a user logs out and I want to remove their cached profile images?

Prompt 5

Explain the difference between FastImage's cache: 'immutable', 'web', and 'cacheOnly' options, and when I should use each.

Open on GitHub → Explain another repo

← dylanvann on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.