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
Grid Flatlist Example
Flatlist Examplenpm install grid-flatlist-react-nativeimport 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
/>| 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. |
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent