Skip to main content

Using a Repeater

Repeater creates similar views from a short, bounded items array. Use it for small groups such as a few action buttons, badges, or icons on a detail screen.

Repeater is not a list or grid surface

Do not use Repeater for content rails, grids, EPGs, season or episode lists, catalogs, or any other collection that can grow. Use CollectionView for those cases. It provides stronger virtualization and focus behavior and can render cells from AppConfig fragments.

Choose the Right Surface

ContentUse
A few similar buttons, icons, or badgesRepeater
One heterogeneous page that extends beyond the viewport, such as a long form or detail screenScrollView
A data-driven list, rail, grid, EPG, season list, or episode listCollectionView

CollectionView can also support detail screens and form-like layouts when their sections are naturally modeled as rows or items. Prefer it when the content can grow, changes frequently, or benefits from fragment-based layout and style updates.

Basic Usage

This example renders three detail-screen actions. Keep the item count deliberately small and predictable.

Repeater({
id: 'detailActions',
items: [
{ id: 'play', title: 'Play' },
{ id: 'trailer', title: 'Trailer' },
{ id: 'favorite', title: 'Favorite' },
],
direction: Direction.Horizontal,
itemSpacing: 16,
visibleSizeInDirection: 692,
constantViewSize: [220, 64],
getView: (item, index) =>
Button({
id: `detail-action-${item.id}`,
text: String(item.title),
width: 220,
height: 64,
}).isInitialFocus(index === 0),
});

Important fields are:

  • items: the source values.
  • getView: creates a view for each visible item.
  • direction and itemSpacing: control the sequence layout.
  • constantViewSize or getViewSize: tell Repeater how much space each item occupies.
  • visibleSizeInDirection: defines the visible extent used for layout.

Placement Rules

Use Repeater as part of a normal screen view tree, such as a small action area on a detail screen.

Do not embed Repeater, ScrollView, or ScrollContainer inside a CollectionView cell, custom cell, or supplementary/header view. Nested repeated or scrolling surfaces complicate focus, recycling, and rendering ownership. Model that content as CollectionView rows and cells instead, and use fragments for reusable or separately updated presentation.

Learn More

Talk to us