ScrollingLabel

ScrollingLabel component for displaying horizontally scrolling text

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

ScrollingLabel(props: IScrollingLabelProps): JSX.Element

Description

ScrollingLabel component for displaying horizontally scrolling text.

Use ScrollingLabel when you need to display text that may exceed a fixed width and should scroll to reveal the full content. This is commonly used for titles, descriptions, or any text that may be truncated.

Parameters

Name	Type	Description
`props`	IScrollingLabelProps

Example

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

<scrollingLabel
    text="This is a long text that will scroll if it exceeds maxWidth"
    maxWidth={400}
    scrollSpeed={80}
    font={SystemFont.Medium}
    color="0xFFFFFFFF"
/>

// Scroll only 3 times then show ellipsis
<scrollingLabel
    text="Limited scroll text"
    maxWidth={200}
    repeatCount={3}
/>

Types

IScrollingLabelProps

Properties for the ScrollingLabel node.

ScrollingLabel displays a string of text that automatically scrolls horizontally if the text length exceeds the specified maximum width.

Scrolling Behavior:

If the text fits within maxWidth, it is simply drawn without scrolling
If the text exceeds maxWidth, it is initially drawn with an ellipsis (...),
then transitions to the full string and scrolls left to right, returning
to the ellipsized state after scrolling completes

Name	Type	Description
`color?`	`string`	Specifies the text color as a hex value (e.g., `0xRRGGBBAA`).
`font?`	`FontValue`	Specifies the Font node to use for rendering the text. Can be a system font enum value or a custom font URI string.
`height?`	`ResType<number>`	Specifies the height of the label in local coordinates. If set to 0, the actual height is determined by the font metrics.
`horizAlign?`	`HorizAlign`	See below.
`maxWidth?`	`ResType<number>`	Specifies the maximum width of the rendered text in local coordinates. If the rendered text width exceeds this value, the scrolling behavior is automatically triggered.
`repeatCount?`	`number`	See below.
`scrollSpeed?`	`number`	Specifies the horizontal scrolling speed in pixels per second.
`text?`	`string`	Specifies the text string to be displayed.
`vertAlign?`	`VertAlign`	See below.

Extends IGroupProps.

IScrollingLabelProps.horizAlign

Specifies the horizontal alignment of the text within the label bounds.

"left": Left edge of the text is drawn at the 0 x-coordinate
"center": Horizontal center of the text is drawn at half the computed width
"right": Right edge of the text is drawn at the computed width

IScrollingLabelProps.repeatCount

Controls the scrolling repeat behavior:

-1: Scrolls continuously (default)
0: Text remains ellipsized and never scrolls
> 0: Scrolls the specified number of times, then shows ellipsis

IScrollingLabelProps.vertAlign

Specifies the vertical alignment of the text within the label bounds.

"top": Top edge of the text is drawn at the 0 y-coordinate
"center": Vertical center of the text is drawn at half the computed height
"bottom": Bottom edge of the text is drawn at the computed height