Progressive Image Loading in React Native

Internet connection speeds are variable, especially when you’re working with mobile devices. As developers we often forget that many of our users are running our apps on less powerful devices and with slower internet connections than we are. Go out into the mountains and try to access your app and see how it performs.

One of the more expensive things in an app is the remote images you’re loading. They’re going to take time to load, especially if they’re large images.

Today we’ll build a component that allows us to:

1. Pass a full size image to display (just like a normal Image component)
2. Pass a thumbnail image to display while we’re loading the full size image
3. Automatically display a placeholder in the soon-to-be-downloaded image’s place to indicate that something will be there
4. Animate between each state as we go.

Getting Started

To start create a new React Native app (via react-native init, create-react-native-app, or the expo cli) and add the following to App.js

import React from 'react';
import { StyleSheet, View, Dimensions, Image } from 'react-native';

const w = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          source={{ uri: `https://images.pexels.com/photos/671557/pexels-photo-671557.jpeg?w=${w.width * 2}&buster=${Math.random()}` }}
          style={{ width: w.width, height: w.width }}
          resizeMode="cover"
        />
      </View>
    );
  }
}

That block of code simply displays an image. It's requesting an image from Pexels at 2x the size of the screen (we want big images so they load slowly) and the buster query param will help us not cache the image so we can fully see what's going on. You wouldn't want to do this in your actual app.

Feel the Pain

Like I said before — as a developer you’ve probably got a pretty decent internet connection.

Let’s change that.

If you’re on a Mac you can install a tool called Network Link Conditioner (here’s how to install it). I’m sure there is similar for my Windows and Linux fans (chime in below if you have tool suggestions).

It will allow you to simulate just about any network condition you need. Just remember to turn it off before you start trying to stream video.

Enable it and set it to the “3G” profile.

Here’s a comparison of the starter with Network Link Conditioner off vs. on.