Image Caching in React Native
Update. It’s been almost a year since I wrote this story. You can read my latest finding on this topic in the story below.
I’m currently on a React native project, and I would like to share the formulas that I used in order to provide a smooth user experience when displaying images. These formulas are also available in the react-native-img-cache package.
Update: Starting version 0.43, the React Native Image component has now a cache property: e.g. cache: force-cache. This is a major improvement but only for iOS and at this time, I wasn’t able to use it in a way that provides a user experience as smooth as react-native-img-cache.
This is a major improvement, however at this time, I wasn’t able to use it in a way that provides a smooth user experience as good as react-native-img-cache. This module provides also more control over the way images are downloaded via cancel(). This can be extremely useful when scrolling quickly through a list of images.
User-Generated Images
For user-generated images (e.g., a picture uploaded by the app user), we use two different caching strategies: immutable and mutable. An immutable caching strategy assumes that the image will never change. A mutable caching strategy assumes the image will change over time. Why do we need both strategies? Consider the user profile below.
When displaying a user profile, the information on where the profile picture is located is provided by the backend. However, when displaying a list of posts for instance, we would like to show a thumbnail of the user profile picture without doing an extra request to the backend.
Immutable images rely on the backend to provide the latest image URI. In the case of a profile picture, the backend might return the following information.
Caching such images is trivial, by using the hash of the image URI, we can check if it exists within the local cache. The example below is implemented using react-native-fetch-blob.
For mutable images, we need to implement an observable interface. For each URI in the app, an observer will watch his current path in the local cache. If the cache of the image is busted, the observer will receive the new local path of the image.
The code snippet below shows how an implementation of IIMageCache can be used within a React native component (using Mobx):
The implementation of IIMageCache can also take care of not downloading the same image concurrently. By adding an extra parameter to the interface, we can also provide both caching strategies with the same cache provider.
The current implementation of ImageCache is available as an npm package here.
Static images
For static images, I wrote a small package that scans a folder for images and generates a class containing all static images within my app. See below:
If the user is using an old version of the app, the backend might refer to a static image that doesn’t exist on the installed version of the app. If this is the case, we fetch the image remotely:
Et voilà! I hope this article might be helpful to you, and I look forward to reading your feedback. Next stop, we use ListView to efficiently scroll through images.
