How to use React Native Fast Image

2/24/2022

Request, Deliver, Revise, Done

Get unlimited UI Design & React Development for a fixed monthly price

50% off your first month

Introduction

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:

npm install react-native-fast-image

Alternatively, if your project is using Yarn, you can run:

yarn add react-native-fast-image

To configure the package to work with iOS, you'll also need to run pod install in your iOS directory:

cd ios && pod install

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).

import React from 'react';
import { SafeAreaView } from 'react-native';
import FastImage from 'react-native-fast-image';

const App = () => {
  return (
    <SafeAreaView>
      <FastImage
        style={{ width: 400, height: 400 }}
        source={{
          uri: 'https://your.url/image.jpg',
          headers: { Authorization: 'authToken' },
          priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
      />
    </SafeAreaView>
  );
};

export default App;

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:

FastImage.preload([
  {
    uri: 'https://your.url/your_first_image.jpg',
    headers: { Authorization: 'authToken' },
  },
  {
    uri: 'https://your.url/your_second_image.jpg',
    headers: { Authorization: 'authToken' },
  },
]);