Increasing image performance in react native with Fast Image

By Sumeet Lubal

Published in Image

February 22, 2023

2 min read

Increasing image performance in react native with Fast Image

Introduction

Mobile app performance is crucial to providing a seamless user experience. One way to improve app performance is to optimize the images used within the app. In this blog, we will explore the react-native-fast-image library and how it can help optimize your app’s performance by efficiently loading and displaying images.

Introduction to react-native-fast-image

React-native-fast-image is a library that offers a fast, efficient, and highly customizable way of loading images in your app. It uses the native platform’s image rendering engine to provide a seamless user experience. The library offers features such as image caching, progressive loading, and preloading, which can significantly improve the performance of your app.

Installing and importing react-native-fast-image

To use react-native-fast-image in your app, you need to install it using npm or yarn.

Yarn: yarn add react-native-fast-image npm: npm install react-native-fast-image

After installation, you can import it into your project using the following code:

import FastImage from 'react-native-fast-image';

Loading images with react-native-fast-image

To load an image with react-native-fast-image, you can use the <FastImage> component and specify the image source using the source prop. For example:

<FastImage
  source={{
    uri: "https://example.com/image.png",
    priority: FastImage.priority.normal,
  }}
  style={{ width: 200, height: 200 }}
  resizeMode={FastImage.resizeMode.contain}
/>

In the above example, we specify the source of the image and its priority. The priority prop determines the priority of the image download, and can be either FastImage.priority.low, FastImage.priority.normal, or FastImage.priority.high. We also specify the style and resize mode of the image.

Using image caching with react-native-fast-image

React-native-fast-image offers image caching, which allows you to store images in the device’s cache memory, reducing the need to download them every time they are required. This significantly improves the app’s performance by reducing network requests and decreasing load times.

To enable image caching, you can use the priority prop and set it to FastImage.priority.high. For example:

<FastImage
  source={{
    uri: "https://example.com/image.png",
    priority: FastImage.priority.high,
    cache: FastImage.cacheControl.cacheOnly,
  }}
  style={{ width: 200, height: 200 }}
  resizeMode={FastImage.resizeMode.contain}
/>

In the above example, we set the priority prop to FastImage.priority.high, and the cache prop to FastImage.cacheControl.cacheOnly, which tells react-native-fast-image to only use the cached version of the image.

Progressive loading with react-native-fast-image

React-native-fast-image also offers progressive loading, which allows you to display a low-quality version of an image first, and then gradually load a higher quality version as it becomes available. This can significantly improve the user experience by reducing load times and allowing users to view images quickly.

To enable progressive loading, you can use the progressiveRenderingEnabled prop and set it to true. For example:

<FastImage
  source={{
    uri: "https://example.com/image.png",
    priority: FastImage.priority.normal,
  }}
  style={{ width: 200, height: 200 }}
  resizeMode={FastImage.resizeMode.contain}
  progressiveRenderingEnabled={true}
/>

In the above example, we set the progressiveRenderingEnabled prop to true, which tells react-native-fast-image to use progressive loading for the image.

Preloading images with react native

React-native-fast-image also offers the ability to preload images, which allows you to load images in the background before they are needed. This can improve the user experience by reducing load times when images are required.

To preload an image, you can use the preload method provided by react-native-fast-image. For example:

FastImage.preload([
  { uri: "https://example.com/image1.png" },
  { uri: "https://example.com/image2.png" },
]);

In the above example, we use the preload method to load two images in the background before they are needed. You can call this method at any point in your app, such as in the componentDidMount lifecycle method.

Advanced customization with react-native-fast-image

React-native-fast-image offers a wide range of customization options, allowing you to fine-tune the library to suit your app’s needs. Some of the advanced customization options include: