grid-flatlist-react-native

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