reactnative_gridlayout.js

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ListView,
  Text,
  Dimensions
} from 'react-native';

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

export default class App extends Component<{}> {
  constructor(props){
    super(props);

    let dataItems  = Array.apply(null, { length: 20 }).map(Number.call, Number);
    let dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

    this.state = {
      items: dataSource.cloneWithRows(dataItems)
    }

  }
  render() {
    return (
      <View style={styles.container}>
        <ListView
          contentContainerStyle={styles.list}
          dataSource={this.state.items}
          renderRow={(rowData) => <View style={styles.item}><Text>Item num: {rowData}</Text></View>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginTop: 30
  },
  item: {
    width: (width - espacioVertical * 3) / 2, // Cambia estos valores para agregar mas columnas o filas
    marginBottom: espacioVertical,
    flexDirection: 'column',
    alignSelf: 'flex-start',
    backgroundColor: '#A4D6E1',
    height: 150
  },
  list: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
    paddingHorizontal: espacioVertical,
  },
});