Slick React Native ListView feed with Cacheable Images

After uploading a photo to Firebase Storage, we want to display a feed of all the photos in the most efficient way as possible. For this, we simply use the ListView React Native component.

<ListView
  automaticallyAdjustContentInsets={true}
  initialListSize={6}
  dataSource={this.state.dataSource}
  renderRow={this._renderRow}
  renderFooter={this._renderFooter}
  onEndReached={this._onEndReached}
/>

And we render each post like this:

_renderRow = (data) => {
  const timeString = moment(data.timestamp).fromNow()
  return (
    <Post key={data.puid}
      postTitle={data.title}
      posterName={data.username}
      postTime={timeString}
      postContent={data.text}
      imagePath={data.image}
      imageWidth={data.imageWidth}
      imageHeight={data.imageHeight}
    />
  )
}

To cache the remote images to the phone we use the React Native Cacheable Image package.

CacheableImage understands its state. Once you define a source the first time it’s state has been set. You can create another component with the same source and it will load the same cached file without having to fetch from a remote URI.

<CacheableImage
  source={{ uri:this.props.imagePath }}
  resizeMode='contain'
  style={{
    height: height,
    width: screenWidth,
    alignSelf: 'center',
    marginBottom: 10,
  }}
/>

The result is very slick and shows the real power of React Native to create this kind Social Poster app or a simple Instagram clone. You can clone and test this starter app at https://github.com/jsappme/react-native-firebase-starter

Social feed of the JSapp React Native Firebase Starter app