FastImage, performant React Native image component

React Native’s Image component handles image caching like browsers for the most part. If the server is returning proper cache control headers for images you’ll generally get the sort of built in caching behavior you’d have in a browser. Even so many people have noticed:

• Flickering.
• Cache misses.
• Low performance loading from cache.
• Low performance in general.

FastImage is an Image replacement that solves these issues. FastImage is a wrapper around SDWebImage (iOS) and Glide (Android).

Don’t forget to react-native link after installation, as some native counterparts are used:

yarn add react-native-fast-image
react-native link

FastImage is basically a drop-in replacement for Image, but with some extras (such as prioritisation):

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

const YourImage = () =>
  <FastImage
    style={styles.image}
    source={{
      uri: 'https://unsplash.it/400/400?image=1',
      headers:{ Authorization: 'someAuthToken' },
      priority: FastImage.priority.normal,
    }}
    resizeMode={FastImage.resizeMode.contain}
  />

FastImage, performant React Native image component →