A trick to speed up the loading of cached images on React Native
Be it an app or website, speed is crucial. Too much time taken to load content can turn away users, putting to waste hundreds, if not thousands of man-hours spent painstakingly writing, and reviewing code.
Quite recently, some of our code ninjas got together and built a nifty little component that can be made use of by anyone coding in a React Native environment. We have now made the code freely accessible on GitHub for you to experiment with.
Note: This library supports React Native 0.6 or above, which means iOS 9.0 and Android 4.1 (API 16) or newer.
What Does This Module Do?
In a nutshell, this module is a simple, lightweight CachedImage component that is adept at handling how an image will load based on network connectivity. It can deliver significant performance improvement, particularly when called upon to fetch high-resolution images within an app.
This module can be used to:
- Manage how images are rendered within an app while reducing a user’s mobile data usage
- Enable offline support for online images.
- Manage an application cache within a predefined cache storage limit, or reduce/limit how much of a device’s internal storage can be used by an app
- Reduce loading times of static online images by switching between low-resolution and high-resolution images
How Does This Module Work?
The module itself is built on React Native 16’s Context API, which allows to initiate a cache manager when an application starts up. A developer can define a cache limit for the whole application (500 MB for instance) and the module can cache images up to its defined cache limits without the need for concurrent caching processes. The cache manager will also scrap any data which exceeds defined storage limits.
The freedom to define a cache limit opens up the opportunity for developers to deploy our module on lower-end devices, which often possess relatively low internal memory capacities.
It is important to note that our module favors a client-side caching approach. Images will be downloaded and stored using a unique file naming pattern, which aligns with their original URLs. Whenever the application next requests for a similar URL, the caching module will step in to serve up the relevant cached image.
Since the whole point of a caching module is to reduce demands on device and network resources, our module makes use of the react-native-fetch-blob module to handle native (Android/ iOS ) file system access requests. Not only does this make our module lightweight, but it also reduces the dependence on excessive boilerplate code.
A Special Note From Our Developers
- This module provides a simple solution for handling cache with limits, but only for images. In practice though, requirements may vary from application to application. So feel free to use the architecture/structuring of this module to come up with customizable, scalable, and configurable advanced caching modules that support other file types as well.
- Currently, we have not implemented a validation method to prevent the scrapping of cache data that is in use. Because of this, defining a low value for the cache limit could lead to corrupted images. Therefore, use your judgment when deciding on the cache limit.
That’s about it. Do play around with this little module, and let us know what you think!
Cover image credits: salonlfc.com/