Skip to main content

GridView

<GridView
items={[{title: 'item 1', onPress: () => console.log('item 1 pressed')}, {title: 'item 2', onPress: () => console.log('item 2 pressed')}]}
numColumns={2}
lastItemLabel={'+'}
lastItemOverlayColor={'Colors.rgba(Colors.blue30)'}
/>
APIThis is the list of additional props for the component

itemSpacing
number
​

Spacing between each item

items
GridListItemProps[]
​

The list of items based on GridListItem props

keepItemSize
boolean
​

whether to keep the items initial size when orientation changes, in which case the apt number of columns will be calculated automatically.

lastItemLabel
string | number
​

overlay label for the last item

lastItemOverlayColor
string
​

color of overlay label for the last item

numColumns
number
​

Number of items to show in a row

renderCustomItem
(item: GridListItemProps) => React.ReactElement
​

Pass to render a custom item

viewWidth
number
​

pass the desired grid view width (will improve loading time)