React Native Image Caching Component

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

20x Top Writer | Rethinking human growth through meditation and spirituality. Join me: bit.ly/reinventnewsletter 🙏🏻