All skills
callstackincubator avatar

/react-native-tv-best-practices

@fa0bad0 official

Reviews React Native TV apps for focus/D-pad navigation, 10-foot UI layout, TV playback/DRM integration, low-memory TV performance, and TV accessibility. Use when building, debugging, or reviewing react-native-tvos, Expo TV, Amazon Vega/Kepler, or React Native web TV targets where the issue depends on remote input, TV focus, TV packaging, TV hardware, or TV playback constraints.

Use this Skill: https://skilld.dev/gh/callstackincubator/agent-skills/react-native-tv-best-practices

This session only. Nothing lands on disk.

referencestest-strategy.md

≈583 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Testing Strategy for React Native TV Apps

TV testing should prove the remote-controlled paths that break differently from mobile: focus order, Back/Menu behavior, player controls, low-memory carousels, and platform packaging.

Quick Reference

  • Use integration tests for JS-owned focus state, player-control state, and remote event handlers
  • Use E2E tests for native focus engine behavior, app launch, routing, playback startup, and Back/Menu behavior
  • For agent-run accessibility smoke, load the agent-device skill and read agent-device help workflow, then inspect labels, roles, states, and focused elements from the accessibility tree
  • Use real hardware for overscan, remote latency, memory pressure, video decode, DRM, and display/color checks
  • Keep emulators/simulators for fast route, focus, and smoke coverage; do not treat them as final device validation
  • Reuse the same user flows for performance baselines where possible

JS Integration Tests

Prefer a saved or generated app state that includes rows, entitlement state, player state, and modal state:

const snapshot = require('my-state.json');
const { Wrapper } = loadStateFromSnapshot(snapshot);
render(<Wrapper><VideoPlayer /></Wrapper>);
  • Mock native player/focus modules when JS tests cannot load them
  • Mock timers for auto-hide controls, debounce, and "are you still watching" flows
  • Avoid mocking app state in tests that are meant to prove focus restoration or navigation paths

See test-javascript.md for the local tvRemote helper pattern.

CI Scope

  • PR checks: static checks, unit tests, integration tests, and changed-platform build checks
  • Nightly/release checks: E2E on representative TV devices, playback startup, agent-device accessibility-tree smoke, memory-sensitive carousel flows
  • Device matrix: at least one Apple TV target, one Android TV/Fire TV target, and any required Vega/Tizen/webOS target

Related Skills

Source: SKILL.md on GitHub

No alerts1mo3 checks · Risk SAFE
  • Gen Agent Trust Hub1mo

    This skill provides comprehensive documentation and best practices for developing React Native applications for TV platforms. It contains technical guidelines for focus management, performance, and video playback without any malicious patterns, obfuscation, or unsafe code execution.

  • Socket1mo

    No alerts

  • Snyk1mo

    Risk: LOW · No issues

Signed by skilld at fa0bad0. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 weeks ago.

Activeupdated 2 months ago

README badge

README badge for callstackincubator/agent-skills/react-native-tv-best-practices