How To Load Images Quickly With React Native Faster Image?

In React Native, what is image caching?

Caching is a wonderful approach to tackle problems like images loading and re-rendering from remote destinations. Downloading an image to the app’s cache directory (or any other directory available to the app) and loading it from local storage the next time the picture loads is what image caching is all about.

In React Native, there are a couple of different approaches to picture caching. If you’re designing a bare-bones React Native app, there’s a fantastic component called React Native FastImage that takes care of all your image caching without you having to write any more code. You could even construct your own image caching component from scratch if you’re using Expo or working on a more sophisticated project.

What is React Native FastImage?

React Native FastImage is a quick way to load images in React Native. All loaded pictures are aggressively cached by FastImage. You may add your own auth headers and preload pictures to your requests. GIF caching is also supported by react-native-fast-image.

To get started with React Native FastImage, first, add the FastImage component to your project:

require npm library

yarn add react-native-fast-image
or
npm install –save react-native-fast-image

After upgrading React Native 0.60, they included auto-linking, which means we no longer need to link the library but only need to install pods.

CocoaPods Installation

install pods
cd ios && pod install && cd ..

import FastImage from ‘react-native-fast-image’;

• The FastImage component’s basic implementation is shown below:

<FastImage
style={{ width: 100, height: 100 }}
source={{uri: 'https://unsplash.it/400/400?image=1'}}
/>

Using the FastImage component example

<FastImage
style={{ width: 100, height: 100 }}
source={{
uri: '...image...url...',
headers: { Authorization: 'AuthToken' },
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
/>

As you can see, this example is very identical to the basic React Native image component, but with a few more features.

Let’s take a closer look at the code.

source the image, as well as its headers and other information.

URI the path to the image you want to load is represented.

headers are placeholders for any headers you might need (auth token in the example above)

priority of the images is indicated by priority — for example, if you need to load a specific image first, you can set the priority to FastImage.priority.high

React Native Cache Property

FastImage.cacheControl.immutable is the default property for the FastImage component. If the URI changes, the image just caches or updates.

FastImage.cacheControl.web allows you to set up the FastImage component to cache images in the same way that the browser does, by using headers and the standard caching mechanism.

FastImage.cacheControl.cacheOnly to force the FastImage component to only fetch images that have previously been cached, rather than generating fresh network queries.

Example cache property

<FastImage
style={{ width: 100, height: 100 }}
source={{
uri: 'https://unsplash.it/400/400?image=1',
cache: FastImage.cacheControl.cacheOnly
}}
/>

Different Properties of React Native FastImage

Simple FastImage with source + header

<FastImage
style={{ height: 100, width: 100 }}
source={{
uri: '<image_url_here>',
headers: { Authorization: 'token' },
}}
/>

FastImage with different priority

<FastImage
style={{ height: 100, width: 100 }}
source={{
uri: '<image_url_here>',
headers: { Authorization: 'token' },
priority: FastImage.priority.low,
//priority: FastImage.priority.normal,
//priority: FastImage.priority.high,
}}
/>

FastImage with different resizeMode

<FastImage
style={{ height: 100, width: 100 }}
source={{
uri: ‘<image_url_here>',
headers: { Authorization: 'token' },
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
//resizeMode={FastImage.resizeMode.cover}
//resizeMode={FastImage.resizeMode.stretch}
//resizeMode={FastImage.resizeMode.center}
/>

FastImage with different Cache

<FastImage
style={{ height: 100, width: 100 }}
source={{
uri: '<image_url_here>',
headers: { Authorization: 'token' },
priority: FastImage.priority.normal,
cache: FastImage.cacheControl.immutable,
//cache: FastImage.cacheControl.web,
//cache: FastImage.cacheControl.cacheOnly,
}}
resizeMode={FastImage.resizeMode.contain}
/>

FastImage with Gif Support

<FastImage
style={styles.image}
source={{
uri: 'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif',
headers: { Authorization: 'token' },
priority: FastImage.priority.normal,
cache: FastImage.cacheControl.immutable,
}}
resizeMode={FastImage.resizeMode.contain}
/>

Image Corner Radius Control

<FastImage
style={{
height: 100,
backgroundColor: '#ddd',
flex: 1,
}}
source={{
uri: '<image_url_here>',
headers: { Authorization: 'token' },
priority: FastImage.priority.normal,
cache: FastImage.cacheControl.immutable,
}}
resizeMode={FastImage.resizeMode.contain}
/>

FastImage with Callback

<FastImage
style={{ height: 100, width: 100 }}
source={{
uri: '<image_url_here>',
}}
onLoadStart={e => console.log('Loading Start')}
onProgress={e =>
console.log('Loading Progress ' + e.nativeEvent.loaded / e.nativeEvent.total)
}
onLoad={e =>
console.log('Loading Loaded ' + e.nativeEvent.width, e.nativeEvent.height)
}
onLoadEnd={e => console.log('Loading Ended')}
/>