React Native Grid Flatlist

Simple Grid FlatList with two or more columns.

⭐ The last item is not stretching

⭐ Equal spacing between items

⭐ Shadow around each item is not clipped

⭐ Any Native FlatList properties are appliable

⭐ Lightweight

Demo

Grid Flatlist Example

Flatlist Example

Installation

npm install grid-flatlist-react-native

Usage

import GridFlatList from 'grid-flatlist-react-native';

<GridFlatList
  data={[1,2,3,4,5,6]}
  renderItem={(item) => (<Text>{item}</Text>)}
  gap={10}
  paddingHorizontal={10} // Shadow around elements will not be clipped
/>

Properties

| Property | Type | Default Value | Description | |---|---|---|---| | data | Array | | Data to be rendered. | | | renderItem | Function | | Function to render each object. | | numColumns | Number | 2 | Number of columns. | | gap | Number | 12 | Spacing between each item. | | paddingHorizontal | Number | 0 | Horizontal padding applied to whole list. | | paddingTop | Number | 0 | Top padding applied to whole list. | | showsVerticalScrollIndicator | Boolean | false | When true, shows a vertical scroll indicator | | ... | ... | ... | Any Native FlatList properties are appliable. |

Support

License

MIT