ZoomRowList

ZoomRowList displays a vertically scrolling list of rows where the focused row smoothly zooms to a larger size

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

ZoomRowList(props: IZoomRowListProps): JSX.Element

Description

ZoomRowList displays a vertically scrolling list of rows where the focused row smoothly zooms to a larger size. Each row scrolls horizontally through its items. Item rendering is delegated to compiled components specified by itemComponentName.

Parameters

Example

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

<zoomRowList
    itemComponentName="MyRowItem"
    rowWidth={1920}
    rowHeight={[120, 120, 120]}
    rowZoomHeight={[200, 200, 200]}
    rowItemHeight={[100, 100, 100]}
    rowItemZoomHeight={[180, 180, 180]}
    rowItemAspectRatio={[1.777]}
    content={listContent}
    onRowItemFocused={([row, col]) => setFocus(row, col)}
    onRowItemSelected={([row, col]) => navigate(row, col)}
/>

Types

IZoomRowListProps

Properties for the ZoomRowList node.

ZoomRowList allows a row of the Row-Row Grid to smoothly zoom up to a larger size when that row has focus. Rows are capable of gaining focus while scrolling and smoothly zooming by the specified amount. The amount to zoom can be specified on a per-row basis.

ZoomRowList extends Group and uses the same data model as RowList: a root ContentNode with child ContentNodes for each row, each containing child ContentNodes for each item.

Example

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

<ZoomRowList
    itemComponentName="MyRowItem"
    rowWidth={1920}
    rowHeight={[120, 120, 120]}
    rowZoomHeight={[200, 200, 200]}
    rowItemHeight={[100, 100, 100]}
    rowItemZoomHeight={[180, 180, 180]}
    rowItemAspectRatio={[1.777]}
    content={listContent}
    onRowItemFocused={([row, col]) => setFocus(row, col)}
    onRowItemSelected={([row, col]) => navigate(row, col)}
/>

Extends IGroupProps.

IZoomRowListProps.content

Specifies the content for the ZoomRowList.

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

IZoomRowListProps.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. The component may define: width, height, index, rowIndex, itemHasFocus, rowHasFocus, rowListHasFocus, itemContent, focusPercent, rowFocusPercent, rowHeightPercent.

FadeOutAboveFocus

Controls whether rows above the focus row fade in/out as they scroll.

• focusIsAtTop: when itemClippingRect top is 0, rows fade as they enter/exit from above
• never: rows do not fade as they enter/exit from above
• always: rows always fade as they enter/exit from above

type FadeOutAboveFocus = "focusIsAtTop" | "never" | "always";

RemainZoomedAboveFocus

Controls whether rows above the focus row remain zoomed or unzoom as they scroll.

• focusIsAtTop: when itemClippingRect top is 0, rows remain zoomed as they enter/exit from above
• never: rows zoom up/down as they enter/exit the focus region from above
• always: rows always remain zoomed as they enter/exit from above

type RemainZoomedAboveFocus = "focusIsAtTop" | "never" | "always";