Focus boundary example apps

This RSG 2.0 SDK app demonstrates the TypeScript-based FocusBoundary and useFocusable APIs for virtual focus management.

This app uses the FocusBoundary and useFocusable components from @roku-sdk/components, the pure-TypeScript approach to managing focus without relying on BrightScript's SceneGraph focus system.

Examples

The app includes these examples:

• Focus Boundary: FocusBoundary and useFocusable API with section switching (menu to color picker)
• Nested Focus Boundary: Nested FocusBoundary composition with TypeScript-level key bubbling and rememberLastFocus
• Navigation Map: Explicit navigationMap instead of the linear navigation prop
• Can Receive Focus: canReceiveFocus handler for disabling and enabling items at runtime

Key concepts

These concepts apply across the examples:

• FocusBoundary is a pure TypeScript context provider that does not have a SceneGraph node.
• useFocusable provides a reactive isFocused() accessor for visual state.
• onKey is a declarative map from keys to handlers.
• The onKey map dispatches keys entirely in TypeScript.
• Key bubbling happens through the FocusBoundary chain in TypeScript.

Controls

You can use these keys to navigate the app:

• Arrow keys: Navigate within and between focus boundaries
• OK: Activate the focused item
• Back: Return to the previous boundary or menu

Development

You can use these commands to build, test, and lint the app:

npx rk dev          # Build + deploy to Roku device
pnpm test           # Run tests
pnpm run lint       # Lint sources