Image Caching in React Native

Image caching in React Native:

  • Image Caching in React Native
    Written by Dylan Vann08 May 2017

    Image loading is an important job of many Native applications for iOS and Android.

  • Image

    When writing apps with React Native you have access to the built-in Image component.

  • Image usage:

    Image source={{ uri: }} /

    React Native’s Image component handles image caching like browsers for the most part.

  • FastImage

    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.

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.

@ReactiveConf: 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.

component.

usage:

component handles image caching like browsers for the most part.

header than that will determine the caching behaviour.

e.g. If the server returns an image with

(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:

This has lead people to look for other solutions for image loading in React Native.

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:

Then later loading:

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.

component

that more aggressively caches images.

FastImage (React Native) is a wrapper around

SDWebImage (iOS) and

Glide (Android). These modules have been around for years and are both widely used in production apps.

They are performant and well tested.

you can:

usage:

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.

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.

Image Caching in React Native