How To Load Images Quicky With React Native Faster Image?

React-Native Tutorial we are going to look into how to load Images Quick, Fast and Easy with React-Native Module React-Native Fast Image.

Fast speed of load image in react native

React Native Fast Image library is really a cool library to load the image at a very fast speed. FastImage component from react-native-fast-image is a wrapper around iOS and Android which are very powerful image loaders in the native development.

Installing Required Modules

“
$ yarn add react-native-fast-image
or
$ npm install react-native-fast-image --save

“
After the updating of React Native 0.60, they have introduced autolinking so we do not require to link the library but need to install pods.
$ react-native link react-native-fast-image

CocoaPods Installation

“
So to install pods use
$ cd ios && pod install && cd ..

Different Properties of React Native FastImage

“
First start with import FastImage in your code.
import FastImage from 'react-native-fast-image';

1. Simple FastImage with source + header

1<FastImage
2  style={styles.image}
3  source={{
4    uri: '<image_url_here>',
5    headers: { Authorization: 'token' },
6  }}
7/>

2. FastImage with different priority

1<FastImage
2    style={styles.image}
3    source={{
4        uri: '<image_url_here>',
5        headers: { Authorization: 'token' },
6        priority: FastImage.priority.low,
7        //priority: FastImage.priority.normal,
8        //priority: FastImage.priority.high,
9    }}
10/>

3. FastImage with different resizeMode

1<FastImage
2    style={styles.image}
3    source={{
4      uri: '<image_url_here>',
5      headers: { Authorization: 'token' },
6      priority: FastImage.priority.normal,
7    }}
8    resizeMode={FastImage.resizeMode.contain}
9    //resizeMode={FastImage.resizeMode.cover}
10    //resizeMode={FastImage.resizeMode.stretch}
11    //resizeMode={FastImage.resizeMode.center}
12/>

4. FastImage with different Cache

1<FastImage
2  style={styles.image}
3  source={{
4    uri: '<image_url_here>',
5    headers: { Authorization: 'token' },
6    priority: FastImage.priority.normal,
7    cache: FastImage.cacheControl.immutable,
8    //cache: FastImage.cacheControl.web,
9    //cache: FastImage.cacheControl.cacheOnly,
10  }}
11  resizeMode={FastImage.resizeMode.contain}
12/>

5. FastImage with Gif Support

1<FastImage
2    style={styles.image}
3    source={{
4      uri:
5        'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif',
6      headers: { Authorization: 'token' },
7      priority: FastImage.priority.normal,
8      cache: FastImage.cacheControl.immutable,
9    }}
10    resizeMode={FastImage.resizeMode.contain}
11/>

6. Image Corner Radius Control

1<FastImage
2    style={{
3      borderRadius: 50,
4      borderTopLeftRadius: 10,
5      borderBottomRightRadius: 10,
6      height: 100,
7      backgroundColor: '#ddd',
8      margin: 20,
9      flex: 1,
10    }}
11    source={{
12      uri: '<image_url_here>',
13      headers: { Authorization: 'token' },
14      priority: FastImage.priority.normal,
15      cache: FastImage.cacheControl.immutable,
16    }}
17    resizeMode={FastImage.resizeMode.contain}
18/>

7. FastImage with Callback

1<FastImage
2    style={{ height: 100, width: 100 }}
3    source={{
4      uri: '<image_url_here>',
5    }}
6    onLoadStart={e => console.log('Loading Start')}
7    onProgress={e =>
8      console.log(
9        'Loading Progress ' +
10          e.nativeEvent.loaded / e.nativeEvent.total
11      )
12    }
13    onLoad={e =>
14      console.log(
15        'Loading Loaded ' + e.nativeEvent.width,
16        e.nativeEvent.height
17      )
18    }
19    onLoadEnd={e => console.log('Loading Ended')}
20/>

This is how you can load the image with lightning speed using React Native Fast Image. If you have any doubts or you want to share something about the topic you can contact us. Thank you :-)

Hope you liked it. 🙂

React Native Faster Image - Load Images Quick and Fast