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

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

{
  "name": "GridListItem",
  "category": "lists",
  "description": "A single grid view/list item component",
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx",
  "props": [
    {
      "name": "imageProps",
      "type": "ImageProps",
      "description": "Image props object for rendering an image item"
    },
    {
      "name": "containerProps",
      "type": "TouchableOpacityProps | ViewProps",
      "description": "Props to pass on to the touchable container"
    },
    {
      "name": "renderCustomItem",
      "type": "() => React.ReactElement",
      "description": "Custom GridListItem to be rendered in the GridView",
      "required": true
    },
    {
      "name": "itemSize",
      "type": "number | ImageSize",
      "description": "The item size"
    },
    {
      "name": "title",
      "type": "string | React.ReactElement",
      "description": "Title content text"
    },
    {
      "name": "titleTypography",
      "type": "string",
      "description": "Title content typography"
    },
    {
      "name": "titleColor",
      "type": "string",
      "description": "Title content color"
    },
    {
      "name": "titleLines",
      "type": "number",
      "description": "Title content number of lines"
    },
    {
      "name": "subtitle",
      "type": "string | React.ReactElement",
      "description": "Subtitle content text"
    },
    {
      "name": "subtitleTypography",
      "type": "string",
      "description": "Subtitle content typography"
    },
    {
      "name": "subtitleColor",
      "type": "string",
      "description": "Subtitle content color"
    },
    {
      "name": "subtitleLines",
      "type": "number",
      "description": "Subtitle content number of lines"
    },
    {
      "name": "description",
      "type": "string | React.ReactElement",
      "description": "Description content text"
    },
    {
      "name": "descriptionTypography",
      "type": "string",
      "description": "Description content typography"
    },
    {
      "name": "descriptionColor",
      "type": "string",
      "description": "Description content color"
    },
    {
      "name": "descriptionLines",
      "type": "number",
      "description": "Description content number of lines"
    },
    {
      "name": "overlayText",
      "type": "boolean",
      "description": "Renders the title, subtitle and description inside the item"
    },
    {
      "name": "overlayTextContainerStyle",
      "type": "ViewStyle",
      "description": "Custom container styling for inline text"
    },
    {
      "name": "alignToStart",
      "type": "boolean",
      "description": "Should content be align to start",
      "default": "center"
    },
    {
      "name": "horizontalAlignment",
      "type": "HorizontalAlignment",
      "description": "Content horizontal alignment",
      "default": "center"
    },
    {
      "name": "containerStyle",
      "type": "ViewStyle",
      "description": "Custom container style"
    },
    {
      "name": "onPress",
      "type": "TouchableOpacityProps['onPress']",
      "description": "The item's action handler"
    },
    {
      "name": "renderOverlay",
      "type": "() => React.ReactElement",
      "description": "Renders an overlay on top of the image"
    },
    {
      "name": "testID",
      "type": "string",
      "description": "Test ID for component"
    }
  ],
  "snippet": [
    "<GridListItem key={index$1} title={'Title'$2} subtitle={'Subtitle'$3} description={'Description goes here'$4}/>"
  ],
  "docs": {
    "hero": {
      "title": "GridListItem",
      "description": "Grid list items represent individual items in a grid view.\nEach item can display optional text below or on top the image",
      "type": "hero",
      "layout": "horizontal",
      "content": [
        {
          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridListItem/gridListItem_cover.png"
        }
      ]
    },
    "tabs": [
      {
        "title": "Overview",
        "sections": [
          {
            "type": "table",
            "columns": [
              "Property",
              "Preview"
            ],
            "items": [
              {
                "title": "Media Item",
                "content": [
                  {
                    "props": {
                      "itemSize": 124,
                      "title": "Title",
                      "subtitle": "Subtitle"
                    }
                  }
                ]
              },
              {
                "title": "Avatar",
                "content": [
                  {
                    "props": {
                      "itemSize": 124,
                      "title": "Title",
                      "subtitle": "Subtitle",
                      "avatar": {
                        "source": {
                          "uri": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/avatar_1.jpg"
                        },
                        "size": "XLarge"
                      }
                    }
                  }
                ]
              },
              {
                "title": "Custom component",
                "description": "(renderCustomItem)",
                "content": [
                  {
                    "props": {
                      "itemSize": 124,
                      "title": "Title",
                      "subtitle": "Subtitle",
                      "thumbnail": {
                        "source": {
                          "uri": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/CustomComponent_Square.png"
                        }
                      }
                    }
                  }
                ]
              }
            ],
            "title": "Media Types"
          },
          {
            "type": "table",
            "columns": [
              "Property",
              "Preview"
            ],
            "items": [
              {
                "title": "Text under image (default)",
                "content": [
                  {
                    "props": {
                      "itemSize": 124,
                      "title": "Title",
                      "subtitle": "Subtitle"
                    }
                  }
                ]
              },
              {
                "title": "OverlayText",
                "content": [
                  {
                    "props": {
                      "itemSize": 124,
                      "title": "Title",
                      "subtitle": "Subtitle",
                      "overlayText": true
                    }
                  }
                ]
              }
            ],
            "title": "Layout"
          },
          {
            "type": "table",
            "columns": [
              "Property",
              "Preview"
            ],
            "items": [
              {
                "title": "Title (default)",
                "content": [
                  {
                    "props": {
                      "itemSize": 124,
                      "title": "Title"
                    }
                  }
                ]
              },
              {
                "title": "Subtitle",
                "content": [
                  {
                    "props": {
                      "itemSize": 124,
                      "title": "Title",
                      "subtitle": "Subtitle"
                    }
                  }
                ]
              },
              {
                "title": "Description",
                "content": [
                  {
                    "props": {
                      "itemSize": 124,
                      "title": "Title",
                      "subtitle": "Subtitle",
                      "description": "Description"
                    }
                  }
                ]
              }
            ],
            "title": "Text Types"
          },
          {
            "type": "table",
            "columns": [
              "Property",
              "Preview"
            ],
            "items": [
              {
                "title": "Text alignment",
                "description": "horizontalAlignment",
                "content": [
                  {
                    "props": {
                      "itemSize": 124,
                      "title": "Title",
                      "horizontalAlignment": "center"
                    }
                  }
                ]
              },
              {
                "title": "Max lines number",
                "description": "markdown:\ntitleLines
 \nsubtitleLines
 \ndescriptionLines  ",
                "content": [
                  {
                    "props": {
                      "itemSize": 124,
                      "title": "This text shows a long text example",
                      "subtitle": "This text shows a long text example",
                      "description": "This text shows a long text example",
                      "titleLines": 2,
                      "subtitleLines": 2,
                      "descriptionLines": 2
                    }
                  }
                ]
              },
              {
                "title": "Text color",
                "description": "titleColor
 \nsubtitleColor
 \ndescriptionColor",
                "content": [
                  {
                    "props": {
                      "itemSize": 124,
                      "title": "Title",
                      "subtitle": "Subtitle",
                      "description": "Description",
                      "titleColor": "#9A27D5",
                      "subtitleColor": "#116DFF",
                      "descriptionColor": "#008563"
                    }
                  }
                ]
              },
              {
                "title": "Text styles",
                "description": "titleTypography   \nsubtitleTypography  \ndescriptionTypography",
                "content": [
                  {
                    "props": {
                      "itemSize": 124,
                      "title": "Title",
                      "subtitle": "Subtitle",
                      "description": "Description",
                      "titleTypography": "headingL",
                      "subtitleTypography": "bodyMedium",
                      "descriptionTypography": "bodyMedium"
                    }
                  }
                ]
              }
            ],
            "title": "Styling Options"
          }
        ]
      }
    ]
  }
}