react-native-ui-lib/src/components/gridView/gridView.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "name": "GridView",
  "category": "lists",
  "description": "An auto-generated grid view that calculate item size according to given props",
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx",
  "props": [
    {"name": "items", "type": "GridListItemProps[]", "description": "The list of items based on GridListItem props"},
    {
      "name": "viewWidth",
      "type": "number",
      "description": "pass the desired grid view width (will improve loading time)"
    },
    {"name": "numColumns", "type": "number", "description": "Number of items to show in a row"},
    {"name": "itemSpacing", "type": "number", "description": "Spacing between each item"},
    {"name": "lastItemLabel", "type": "string | number", "description": "overlay label for the last item"},
    {"name": "lastItemOverlayColor", "type": "string", "description": "color of overlay label for the last item"},
    {
      "name": "keepItemSize",
      "type": "boolean",
      "description": "whether to keep the items initial size when orientation changes, in which case the apt number of columns will be calculated automatically."
    },
    {
      "name": "renderCustomItem",
      "type": "(item: GridListItemProps) => React.ReactElement",
      "description": "Pass to render a custom item"
    }
  ],
  "snippet": [
    "<GridView",
    " items={[{title: 'item 1', onPress: () => console.log('item 1 pressed')}, {title: 'item 2', onPress: () => console.log('item 2 pressed')}]$1}",
    " numColumns={2$2}",
    " lastItemLabel={'+'$3}",
    " lastItemOverlayColor={'Colors.rgba(Colors.blue30)'$4}",
    "/>"
  ]
}