FocusableGroup example

This RSG 2.0 SDK app demonstrates BrightScript-backed FocusableGroup patterns for focus management and navigation.

This app uses the FocusableGroup and Focusable components from @roku-sdk/components, the BrightScript-backed approach to managing focus in groups of interactive elements.

Examples

The app includes these examples:

• Dynamic Children: Adding and removing focusable elements at runtime
• Reactive State Focus: Updating initial and programmatic focus through reactive signals
• Nested Groups: Multi-level FocusableGroup nesting with focus propagation
• Stacked Rows: Two stacked button rows with directional focus overrides
• Preferred Child: A group with a preferred focus child (hasPreferredFocus)
• Programmatic Focus: Using the gainFocus prop to transfer focus during animations

Controls

You can use these keys to navigate the app:

• Up and Down: Navigate within a group
• Left and Right: Navigate between items in a row
• OK: Select an item
• Back: Return to 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