FlexGrid example: Fantasy TV

A tabbed, heterogeneous home screen built on @roku-sdk/flex-grid, with a hero carousel, poster and landscape shelves, and a spotlight row whose focused item expands into an overlay. You can read this example when the built-in strategies and plugins do not cover your requirements.

Purpose

This app shows how to extend FlexGrid rather than fork it. The extension code is at the app level: a custom horizontal strategy composed from the SDK's pieces, and custom plugins written against the plugin API. If you need only a standard grid, you can start with Showcase or Cowboy TV instead.

Summary

This app covers the following areas:

A template registry mapping row types to cell templates (src/components/template-registry.ts)
A custom horizontal strategy built with composeHorizontalStrategy, createPinnedFocusXExtension, and matchRowWhen (fantasy-horizontal-strategy.ts), with rows matched by template rather than hardcoded indices
Plugins written against InitGridPlugin and GridPluginInternals: a spotlight overlay (spotlight-plugin.tsx) and hero carousel dots (hero-dots-plugin.tsx)
Clipping one row's cards with @roku-sdk/flex-grid/row-clip
A top tab bar as a nested horizontal FocusBoundary that hands focus to the grid and back
Per-row data fetched as JSON, cached per tab, with full high definition (FHD) artwork downscaled on high definition (HD) devices

The app fetches row data and artwork at runtime from a Roku-hosted content delivery network (CDN). See src/components/data.ts for more information about the URL layout and the JSON shape that each row expects. To use your own data, you can replace the fetch in data.ts; you must keep the FantasyCell shape.

Related examples

FlexGrid example: Cowboy TV: an app-style grid that uses only built-in plugins
Pooled item row example: pooling and navigation in a single row

Development

You can use these commands to start the app, run tests, and run the linter:

npx rk dev
pnpm test
pnpm run lint