react-native-fast-image/example/ImageGrid.js

// @flow
import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  FlatList,
  Platform,
  StatusBar,
} from 'react-native'

const getImageUrl = (id, width, height) => `https://unsplash.it/${width}/${height}?image=${id}`

class ImageGrid extends Component {
  constructor(props: Object) {
    super(props)

    fetch('https://unsplash.it/list')
    .then(res => res.json())
    .then(this._onFetchImagesSuccess)
  }

  state = {
    images: [],
    itemHeight: 0,
  }

  _onLayout = (e) => {
    const width = e.nativeEvent.layout.width
    this.setState({
      itemHeight: width / 4,
    })
  }

  _onFetchImagesSuccess = (images) => {
    this.setState({
      images,
    })
  }

  _getItemLayout = (data, index) => {
    const { itemHeight } = this.state
    return { length: itemHeight, offset: itemHeight * index, index }
  }

  _renderItem = ({ item }) => {
    const ImageComponent = this.props.ImageComponent
    const uri = getImageUrl(item.id, 100, 100)
    return (
      <View style={styles.imageContainer} >
        <ImageComponent
          source={{ uri }}
          style={styles.image}
        />
      </View>
    )
  }

  _extractKey = (item) => {
    return item.id
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          onLayout={this._onLayout}
          style={styles.list}
          columnWrapperStyle={[styles.columnWrapper, { height: this.state.itemHeight }]}
          data={this.state.images}
          renderItem={this._renderItem}
          numColumns={4}
          keyExtractor={this._extractKey}
          getItemLayout={this._getItemLayout}
        />
        <View style={styles.statusBarUnderlay} />
      </View>
    )
  }
}

const MARGIN = 2
const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight

const styles = StyleSheet.create({
  statusBarUnderlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: STATUS_BAR_HEIGHT,
    backgroundColor: 'white',
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'stretch',
    justifyContent: 'center',
  },
  list: {
    marginTop: STATUS_BAR_HEIGHT,
    flex: 1,
  },
  columnWrapper: {
    flex: 1,
    flexDirection: 'row',
    marginLeft: -MARGIN,
    marginRight: -MARGIN,
  },
  image: {
    flex: 1,
    width: null,
    height: null,
    margin: MARGIN,
    backgroundColor: '#eee',
  },
  imageContainer: {
    flex: 1,
    alignItems: 'stretch',
  }
})

export default ImageGrid