React Native — How to Load, Cache and Render Images from URLs

tl;dr use react-native-fast-image for better performance when loading remote assets

To use the React Native Image component to load remote assets simply provide the source prop with a uri pointing at your remote asset:

<Image>
   source={{ uri: 'https://google.com/image.png' }}
</Image>

The Problem

This image component should do some image caching if there are proper image cache headers but there are a number of issues that I and many others have experienced when using Image.

• Flickering — Image loads and flashes for a millisecond then goes transparent before appearing again
• Bad caching or no caching at all
• Overall poor performance

The Solution

A npm library called react-native-fast-image solves most of these annoying issues. When implemented into my project which requires lots of remote asset loading, it was able to noticeably improve image load times (literally seems instantaneous after an image has been cached) and fix the annoying flicker issue.

Caching not only reduces load times but also means your app will use less of your users mobile data.

Implementation

Add the package with npm i react-native-fast-image

<FastImage
  style={styles.image}
  source={{
   uri: 'https://google.com/image.png',
  }}
/>

Information about resizeMode, priority and lots of other props can be found on the github page for react-native-fast-image.

Loading Indicator

You can use the onLoadStart and onLoadEnd props to manage your loading indicator. For example:

<FastImage
  style={styles.image}
  source={{
   uri: 'https://google.com/image.png',
  }}
  onLoadStart={() => { this.setState({ loading: true })} }
  onLoadEnd={() => { this.setState({ loading: false })} }
>
  <ActivityIndicator animating={ this.state.loading } />
</FastImage>

Auto Height

With remote assets sometime you’ll want to display the entire image but don’t know the aspect ratio of the image you are fetching. In this case you can use the onLoad prop to calculate the height, for example:

<FastImage
  style={{width, height: this.state.height}}
  source={{
   uri: 'https://google.com/image.png',
  }}
  onLoad={
    (evt) => {
      this.setState({
        height: evt.nativeEvent.height/evt.nativeEvent.width*width,
      });
    }
  }
/>

Width may be set to a fixed value or a percent of the device width. It’s simple to modify this to fix the height and use auto width if you needed to.

Blur

React Native Image makes adding blur to your images a breeze with blurRadius, unfortunately FastImage does not support blur. If blurring is essential to your application and you want to use FastImage you’ll need to use another library like react-native-blur to add a blur component on top of your image.