Image Caching in React Native

Image loading is an important job of many Native applications for iOS and Android.
We want to load images as quickly as possible, and to load them only once.
When writing apps with React Native you have access to the built-in Image component.
Image usage:

React Native’s Image component handles image caching like browsers for the most part.
If the image is returned with a Cache-Control header than that will determine the caching behaviour.
e.g. If the server returns an image with
Cache-Control: max-age=365000000 (one year) than React Native
shouldn’t try to re-download the image for a year
(although the cache does have a finite size).
Even so, many people have noticed:

Cache misses.
Low performance loading from cache.
Low performance in general.

This has lead people to look for other solutions for image loading in React Native.
Existing Modules
There are some existing npm modules that attempt to solve the problems with Image.
These modules implement caching logic in JS and store the images on the file system.
A problem I had with these modules is that they don’t support
adding headers to image requests, or stripping authorization tokens from
query parameters. The result of this is that loading:
<Image source={{ uri: ‘’ }} />

Then later loading:
<Image source={{ uri: ‘’ }} />

Will result in a cache miss.
Aside from that, implementing the caching logic in JS is not optimal for performance.
These solutions are also less well tested than existing Native image loading solutions.
To solve these issues, I developed a new image component for React Native.
FastImage is a performant replacement for React Native’s Image component
that more aggressively caches images.
FastImage (React Native)
is a wrapper around
SDWebImage (iOS)
Glide (Android).
These modules have been around for years and are both widely used in production apps.
They are performant and well tested.
With FastImage you can:

Aggressively cache images.
Add authorization headers.
Prioritize images.

FastImage usage:
uri: ‘’,
headers:{ Authorization: ‘someToken’ },
priority: FastImage.PriorityNormal

Grab FastImage off npm and let me know how it works for you, or leave a comment if you have any thoughts on alternative caching strategies.
Learn More
If you’re looking for more in-depth tutorials and learning opportunities, check out our various JavaScript training options. Better yet, contact us to inquire about how you can ramp up your knowledge of the fundamentals with custom course material designed and delivered to address your immediate needs.