Tired of reinventing the wheel?
I'm building a React Native component library - built with Tailwind CSS - designed to help developers build awesome apps in record time.
React Native has a built in Image component that allows you to use images from a remote source in your app. In theory this component handles caching the way that caching for images is handled on the web assuming that the correct headers are set, but it can be a bit hit and miss.
Luckily there is React Native Fast Image - a third party alternative that is performant and easy to use. In this article I'll show you how to use it to cache images in your React Native app.
What is React Native Fast Image
React Native Fast Image is a React Native library that allows you to manage caching with images in React Native. It's a wrapper around SDWebImage on iOS and Glide on Android.
Installing React Native Fast Image
You can install react-native-fast-image with the following command using NPM:
Alternatively, if your project is using Yarn, you can run:
To configure the package to work with iOS, you'll also need to run pod install in your iOS directory:
You should now be all set to use React Native Fast Image!
How to load an image with React Native Fast Image
As react-native-fast-image works very similarly to the standard React Native image component, at least in terms of the API, it should feel very familiar to React Native developers. You import the package at the top of your React Native component and then use the FastImage component in place of the standard Image component.
Setting the source of an Image with React Native Fast Image
To set the source of an image, simply pass an object with a URI path for the image you want to display, along with any headers that are required to load it. You can also add a priority value and a cache setting (I'll get to those later in the article).
Setting a Resize Mode with React Native Fast Image
You can set one of four resize modes with react-native-fast-image:
- Contain - this will contain your image and display it fully, but you might be left with gaps horizontally if your image doesn't have the correct aspect ratio.
- Cover - this will stretch your image whilst maintaining the aspect ratio to ensure that your image covers the given width and height and leaves no gaps. The downside to this method is that parts of your image could end up being trimmed to fit.
- Stretch - Using stretch will stretch your image to cover the height and width without trimming any of it - but in the process will disregard the aspect ratio and distort your image.
- Center - This works similarly to contain mode, but rather than touching the outer edges of the container, it will be centred inside it and have uniform space on each side.
Setting a loading priority with React Native Fast Image
You can set the priority with which your app should load an image by using the priority prop. This gives you three options in order of priority; high, normal and low.
How to cache an image with React Native Fast Image
You can set the cache strategy for an image as part of the source object. There are three different strategies that you can use:
- Immutable: This will only update your image if the url of your image changes.
- Web: This will essentially use the same caching strategy that you would use on the web with headers.
- Cache only: This will essentially stop loading new image updates, and will only show images from the cache.
Preloading an image with React Native Fast Image
You can preload an image with react-native-fast-image by using the preload function. Simply pass it an array of image URI's and it will preload those images for you to display later: