React Native Image Caching Component

Image for post
Image for post
Photo by Fimpli on Unsplash

As a developer, you’ll almost always have a good internet connection but your users won’t.

A key part of good user experience is that the user can access as many features as possible even when there is a slow/no internet connection.

When your app relies heavily on media — images/videos — it is all the more necessary to ensure that it loads almost instantly.

To ensure this, the best way is to store them on the user’s device the first time it loads and then uses the stored file every other time the user opens the app to view the said media file.

Of course, this isn’t a solution that would work in all cases but in my project, where I had to show an image/video-based food menu, showing the images/videos of food items at all times is 100% necessary.

So without much talking here is a simple component that I used in React Native to achieve the goal at hand. The libraries used for this component are rn-fetch-blob and shorthash.

The utility function is-empty is also in the gist

Written by

Get my new book, Bend Reality: Timeless Tools to Shift the Illusion of Reality, Reinvent Yourself and Master Life:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store