GridListItemGrid list items represent individual items in a grid view. Each item can display optional text below or on top the image

Overview

Media Types

Property	Preview
Media Item
Avatar
Custom component (renderCustomItem)

Layout

Property	Preview
Text under image (default)
OverlayText

Text Types

Property	Preview
Title (default)
Subtitle
Description

Styling Options

Property	Preview
Text alignment horizontalAlignment
Max lines number markdown: titleLines subtitleLines descriptionLines
Text color titleColor subtitleColor descriptionColor
Text styles titleTypography subtitleTypography descriptionTypography

Dev

PlaygroundCode Example

APIThis is the list of additional props for the component

alignToStart

boolean

Should content be align to start. Default is center

alignToStart

boolean

Should content be align to start. Default is center

avatar

AvatarProps

Avatar props object for rendering an avatar item

containerProps

TouchableOpacityProps | ViewProps

Props to pass on to the touchable container

containerProps

TouchableOpacityProps | ViewProps

Props to pass on to the touchable container

containerStyle

ViewStyle

Custom container style

containerStyle

ViewStyle

Custom container style

description

string | React.ReactElement

Description content text

description

string | React.ReactElement

Description content text

descriptionColor

string

Description content color

descriptionColor

string

Description content color

descriptionLines

number

Description content number of lines

descriptionLines

number

Description content number of lines

descriptionTypography

string

Description content typography

descriptionTypography

string

Description content typography

horizontalAlignment

HorizontalAlignment

Content horizontal alignment. Default is center

horizontalAlignment

HorizontalAlignment

Content horizontal alignment. Default is center

imageProps

ImageProps

Image props object for rendering an image item

imageProps

ImageProps

Image props object for rendering an image item

itemSize

number | ImageSize

The item size

itemSize

number | ImageSize

The item size

onPress

TouchableOpacityProps['onPress']

The item's action handler

onPress

TouchableOpacityProps['onPress']

The item's action handler

overlayText

boolean

Renders the title, subtitle and description inside the item

overlayText

boolean

Renders the title, subtitle and description inside the item

overlayTextContainerStyle

ViewStyle

Custom container styling for inline text

overlayTextContainerStyle

ViewStyle

Custom container styling for inline text

renderCustomItem

() => React.ReactElement

Required

Custom GridListItem to be rendered in the GridView

renderCustomItem

() => React.ReactElement

Required

Custom GridListItem to be rendered in the GridView

renderOverlay

() => React.ReactElement

Renders an overlay on top of the image

renderOverlay

() => React.ReactElement

Renders an overlay on top of the image

subtitle

string | React.ReactElement

Subtitle content text

subtitle

string | React.ReactElement

Subtitle content text

subtitleColor

string

Subtitle content color

subtitleColor

string

Subtitle content color

subtitleLines

number

Subtitle content number of lines

subtitleLines

number

Subtitle content number of lines

subtitleTypography

string

Subtitle content typography

subtitleTypography

string

Subtitle content typography

testID

string

Test ID for component

testID

string

Test ID for component

thumbnail

ThumbnailProps

Thumbnail props object for rendering a Thumbnail item

title

string | React.ReactElement

Title content text

title

string | React.ReactElement

Title content text

titleColor

string

Title content color

titleColor

string

Title content color

titleLines

number

Title content number of lines

titleLines

number

Title content number of lines

titleTypography

string

Title content typography

titleTypography

string

Title content typography