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

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

{
  "name": "GridList",
  "category": "lists",
  "description": "An auto-generated grid list that calculate item size according to given props",
  "extends": [
    "FlatList"
  ],
  "extendsLink": [
    "https://reactnative.dev/docs/flatlist"
  ],
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridListScreen.tsx",
  "props": [
    {
      "name": "numColumns",
      "type": "number",
      "description": "Number of items to show in a row (ignored when passing maxItemWidth)"
    },
    {
      "name": "itemSpacing",
      "type": "number",
      "description": "Spacing between each item"
    },
    {
      "name": "maxItemWidth",
      "type": "number",
      "description": "Allow a responsive item width to the maximum item width"
    },
    {
      "name": "listPadding",
      "type": "number",
      "description": "List padding (used for item size calculation)"
    },
    {
      "name": "containerWidth",
      "type": "number",
      "description": "Pass when you want to use a custom container width for calculation"
    },
    {
      "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": "contentContainerStyle",
      "type": "ScrollView[contentContainerStyle]",
      "description": "Custom content container style"
    }
  ],
  "snippet": [
    "<GridList>",
    " data={items$1}",
    " maxItemWidth={140$2}",
    " numColumns={2$3}",
    " itemSpacing={Spacings.s3$4}",
    " listPadding={Spacings.s5$5}",
    "/>"
  ],
  "docs": {
    "hero": {
      "title": "GridList",
      "description": "GridList display a collection of GridListItems organized in a repeated grid pattern. \n\nGridList allows users to scan content based on images and compare items within a collection.",
      "type": "hero",
      "layout": "horizontal",
      "content": [
        {
          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_cover.png"
        }
      ]
    },
    "tabs": [
      {
        "title": "Overview",
        "sections": [
          {
            "type": "list",
            "items": [
              {
                "title": "GridList with Avatars",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_usage_avatars.png"
                  }
                ]
              },
              {
                "title": "GridList with MediaItems",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_usage_mediaItems.png"
                  }
                ]
              }
            ],
            "layout": "horizontal",
            "title": "Usage Examples"
          },
          {
            "type": "list",
            "items": [
              {
                "title": "Option 1 - Max Item Width",
                "description": "Set maximum width of a single item, and amount of items in a row will be set automatically according to screen width. 
Columns number will be dynamic according to how many items fit the screen.",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_columns_maxWidth.png"
                  }
                ]
              },
              {
                "title": "Option 2 - Column Number",
                "description": "Set amount of columns, and items width will be automatic according to screen width. Columns number will be fixed.",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_columns_number.png"
                  }
                ]
              }
            ],
            "title": "Columns Options"
          },
          {
            "type": "section",
            "layout": "horizontal",
            "title": "Spec",
            "description": "markdown: \n### Spacing between items\nHorizontal gutter by default is minimum S4 and can be modified.  \nVertical gutter is equal to horizontal gutter.\n### Last item counter\nOnce grid reaches Max of items, the last item should get an overlay color and number of remaining items.  \nThe item content shouldn’t be displayed.  \nThis state is available in the MediaItem and Avatar components.",
            "content": [
              {
                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_spec.png"
              }
            ]
          }
        ]
      }
    ]
  }
}