GridView

Grid lists are an alternative to standard list views.

Usage

export default class MyComponent extends Component {
  state = {
    items: [],
  };

  _genRows = () => {
    const items = this.state.items.slice(0);
    const itemsLength = items.length;

    if (itemsLength >= 5) {
      return;
    }

    for (let i = 0; i < 4; i++) {
      items.push({ id: itemsLength + i });
    }

    this.setState({
      items,
    });
  }

  _renderItem = item => {
    return (
      <Card>
        <Text>{item.id}</Text>
      </Card>
    );
  };

  _keyExtractor = item => item.id

  _getNumberOfColumns = (width) => {
    return Math.floor(width / 160)
  }

  render() {
    const { items } = this.state;
    return (
      <GridView
        spacing={40}
        getNumberOfColumns={this._getNumberOfColumns}
        data={items}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
        onEndReached={this._genRows}
      />
    );
  }
}

Props

spacing (required)
Type: number
Default value: 0

Gutter between the items.

getNumberOfColumns (required)
Type: (width: number) => number
Default value: () => 1

Function which determine number of columns.

data (required)
Type: Array<any>

Data for the list.

keyExtractor (required)
Type: (item: any) => string

Function which should return ID base on the item.

renderItem (required)
Type: (item: any) => React.Element<any>

Component for rendering item.

onLayout
Type: Function
theme
Type: Theme