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 →

Elsewhere , , ,

One Response to FastImage, performant React Native image component

  1. zedaidai says:

    Nice work.
    Just tested it and I was wondering , why fast image wouldn’t load anything when going offline since images are cached in file system ?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.