RowList

RowList displays a vertical list of rows, where each row scrolls horizontally through its items

import { RowList } from "@roku-sdk/components";

RowList(props: IRowListProps): JSX.Element

Description

RowList displays a vertical list of rows, where each row scrolls horizontally through its items. Item rendering is delegated to compiled components specified by itemComponentName.

Each row can have independent size, spacing, label, counter, and focus behavior via per-row array fields. Row titles can be rendered by a separate compiled component via rowTitleComponentName.

Parameters

Example

// Register compiled components by importing their XML files
import "./compiled-components/MyRowItem.xml";

<rowList
    itemComponentName="MyRowItem"
    itemSize={[1920, 200]}
    rowItemSize={[[300, 160]]}
    numRows={4}
    showRowLabel={[true]}
    rowLabelColor="0xffffffff"
    content={listContent}
    onRowItemFocused={([row, col]) => setFocus(row, col)}
    onRowItemSelected={([row, col]) => navigate(row, col)}
/>

Types

IRowListProps

Properties for the RowList node.

RowList displays a vertical list of rows, where each row scrolls horizontally through its items. The content of each item is rendered by a compiled component specified via itemComponentName. Row titles can also be rendered by a compiled component via rowTitleComponentName.

Each row's size, spacing, label visibility, and focus animation can be configured independently using per-row array fields.

Example

// Register compiled components by importing their XML files
import "./compiled-components/MyRowItem.xml";
import "./compiled-components/MyRowTitle.xml";

<RowList
    itemComponentName="MyRowItem"
    rowTitleComponentName="MyRowTitle"
    itemSize={[1920, 200]}
    rowItemSize={[[300, 160]]}
    numRows={4}
    content={listContent}
    onRowItemFocused={([row, col]) => setFocus(row, col)}
    onRowItemSelected={([row, col]) => navigate(row, col)}
/>

Extends IArrayGridProps.

IRowListProps.content

Specifies the content for the RowList.

The root ContentNode should have one child per row. Each row child should have one child ContentNode per item in that row.

IRowListProps.imageWellBitmapUri

Specifies the bitmap file to display as a placeholder where images would appear in empty rows.

Only set to specify a custom bitmap that differs from the default.

IRowListProps.itemComponentName

Specifies the name of the compiled component used to render each row item.

Register the compiled component by importing its XML file before use:

import "./compiled-components/MyRowItem.xml";

The compiled component may define interface fields that RowList will automatically update: width, height, index, listHasFocus, itemContent, focusPercent, and itemHasFocus.

IRowListProps.rowFocusAnimationStyle

Specifies the horizontal focus movement animation style for all rows.

• floatingFocus: focus indicator moves with the focused item
• fixedFocusWrap: focus stays fixed; items wrap around
• fixedFocus: focus stays fixed; items scroll without wrapping

IRowListProps.rowItemSize

Specifies the width and height of items in each row.

Each element corresponds to a row. If the array has fewer elements than the number of rows, the last value is repeated for the remaining rows.

IRowListProps.rowItemSpacing

Specifies the horizontal spacing between items in each row.

Each element corresponds to a row. If the array has fewer elements than the number of rows, the last value is repeated.

IRowListProps.rowLabelOffset

Specifies the offset of the row label for each row.

The x-value is the horizontal offset; the y-value is the vertical spacing between the label and the row items.

IRowListProps.rowTitleComponentName

Specifies the name of the compiled component used to render row titles, replacing the default text row label.

Register the compiled component by importing its XML file before use:

import "./compiled-components/MyRowTitle.xml";

IRowListProps.variableWidthItems

When true for a row, enables variable-width items for that row. Only supported with rowFocusAnimationStyle set to fixedFocusWrap.

Item widths are read from SDItemWidth, HDItemWidth, or FHDItemWidth attributes on each item's ContentNode.