React Native Faster Image — Load Images Quick and Fast

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

<FastImage
  style={styles.image}
  source={{
    uri: '<image_url_here>',
    headers: { Authorization: 'token' },
  }}
/>

2. FastImage with different priority

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

3. FastImage with different resizeMode

<FastImage
    style={styles.image}
    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}
/>

4. FastImage with different Cache

<FastImage
  style={styles.image}
  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}
/>

5. 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}
/>

6. Image Corner Radius Control

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

7. 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')}
/>

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

Originally published at http://blog.logicwind.com on July 8, 2020.