Learn to create a visually appealing loading image component for React Native in this thee part series covering creating an asynchronous image component in React Native, animations, and progressive images.

Wyatt McBain

Follow

Sep 5, 2017 · 3 min read

A good practice when creating user experiences is to display a placeholder in place of an image while it’s loaded from the network. By doing so our apps feel faster to the user and get background tasks out of the way so they can accomplish their goals.

In part 1 of this series you will create a React Native component that will display a color placeholder that is replaced by a network image once it loads from the network.

Skip to the Source

• Github Source | Branch: part-1
• Snack Demo
• Open Source Component

Humble Beginnings

To create this component we need two container views, one for the placeholder and another for the Image. When the Image loads we want to remove the placeholder from the View containing them.

We do this by setting state on the component which will allow the placeholder to render conditionally by observing the Image’s onLoad property. Additionally we’ll require a prop for the placeholder’s color and set the Image’s resizeMode to contain so that the image scales to fit within.

class AsyncImage extends Component {
  
  constructor(props: Props) {
    super(props)
    this.state = { loaded: false }
  }  render() {
    const { 
      source, 
      placeholderColor 
    } = this.props    return (
      <View>        <Image
          source={source}
          resizeMode={'contain'}
          onLoad={this._onLoad} />        {!this.state.loaded &&
          <View
            style={{
              backgroundColor: placeholderColor
            }} />      </View>
    )
  }  _onLoad = () => {
    this.setState(() => ({ loaded: true }))
  }
}

Positioning the Components

One effective way to position two components on top of one another is to have height and width style requirements (we add requirements with flow in our projects), then pass those styles to each component including the container. The placeholder and Image will then be positioned absolutely so that they lay flat on top of one another.

This method allows the component to work in almost any flex or absolute positioned layout.

render() {
  const {
    placeholderColor,
    style,
    source
  } = this.props  return (
    <View
      style={style}>      <Image
        source={source}
        resizeMode={'contain'}
        style={[
          style,
          {
            position: 'absolute',
            resizeMode: 'contain'
          }
        ]}
        onLoad={this._onLoad} />      {!this.state.loaded &&
        <View
          style={[
            style,
            {
              backgroundColor: placeholderColor,
              position: 'absolute'
            }
        ]} />
      }
  
    </View>
  )
}

With this defined we would use our AsyncImage component to create the demo at the top of the page:

<AsyncImage
  style={{
    borderRadius: 50,
    height: 100,
    width: 100
  }}
  source={{
    uri: 'https://goo.gl/2W4iW6'
  }}
  placeholderColor='#b3e5fc'/>

View the source here

Next Steps

In the rest of this series we’ll make this component look even better.

• Part II | Animations
• Part III | Placeholder and Progressive Images

Thanks for reading! We look forward to sharing more with this series and feel free to ask any questions below. 🚀

Did you know we curate the best resources on React Native and related frameworks just for you each week? Subscribe to our weekly React Native Newsletter to get it in your inbox each week. 🙌🏻