PhotoGrid.js

import React, { Component, } from 'react'
import {
  View,
  Image,
  Text,
  Dimensions,
  ScrollView,
} from 'react-native'

const {height, width} = Dimensions.get('window')

class PhotoGrid extends Component {

  static propTypes = {}

  static defaultProps = {}

  constructor(props) {
    super(props)
    this.state = {}
  }
  
  renderRow(row, j) {
    const {inset=40} = this.props
    return (
      <View
        key={j}
        style={{
          flexDirection: 'row',
          justifyContent: "space-between",
          alignItems: "flex-start",
          marginHorizontal: inset,
        }}>
        {row.map((i) => {
          return this.renderImage(i, j)
        })}
      </View>
    )
  }
  
  renderImage(i = 0, j) {
    let {columns = 3, margin = 10, radius=20, inset=40} = this.props
    let size = (width - margin * (columns - 1) - inset * 2) / columns
    return (
      <Image 
        key={i}
        style={{
          width: size,
          height: size,
          marginTop: i < columns ? 0 : margin,
          borderRadius: radius,
        }}
        resizeMode={"cover"}
        source={{uri:'https://unsplash.it/600/400/?image=' + (i * 12)}}        
      >
      </Image>
    )
  }

  render() {
    const {count = 50, columns = 3, inset = 40} = this.props
    const images = []
    for (let i = 0; i <= count; i++) {
      for (let j = 0; j < columns; j++) {
        if (j === 0) {
          images.push([]) 
        }
        images[images.length - 1].push(i * columns + j)
      }
    }
    return (
      <ScrollView style={{
          paddingVertical: inset,
        }}>
        <View>
          {images.map((row, j) => {
            return (
              this.renderRow(row, j)
            )
          })}
        </View>
      </ScrollView>
    )
  }
}

export default PhotoGrid