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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

  1. 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 comment

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.