skilld
All skills
callstackincubator avatar

/react-native-tv-best-practices

@fa0bad0 official
by Callstack Incubatorcallstackincubator/agent-skills1.7k stars
118

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.

Ask your Agent

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

This session only. Nothing lands on disk.

referencesa11y-overview.md

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

Accessibility on TV — Overview

What's different about accessibility on TV versus mobile/web — the deltas you can't infer from general React Native a11y knowledge. For prop usage and patterns see a11y-implementation.md; for the audit list see a11y-checklist.md. WCAG/POUR and the legal baseline (ADA, Section 508, EN 301 549) apply to TV exactly as to mobile/web — treat a11y as a requirement, not a nice-to-have.

Quick Reference

  • TV accessibility differs from mobile/web on three axes: D-pad navigation, focus-driven UI, and viewing distance
  • Focus management is the primary a11y surface on TV — there is no touch fallback
  • Screen readers: TalkBack (Android TV), VoiceOver (Apple TV), VoiceView (Fire TV)
  • Behavior is NOT consistent across platforms — test on each device, not just one

Why TV Accessibility Is Unique

Feature TV Mobile Web
Input Remote / voice Touch + assistive tech Keyboard, mouse, screen readers
Focus Management Essential (D-pad) Implicit with touch Tab focus
Screen Reader Limited/inconsistent VoiceOver, TalkBack JAWS, NVDA, VoiceOver
Text Scaling Limited; fixed layout Dynamic type CSS zoom
Contrast Critical (viewing distance) Important Important
Gestures Not applicable Swipe, pinch Keyboard, mouse

Platform Screen Readers

Platform Tool Activation
Fire TV VoiceView Accessibility settings
Apple TV VoiceOver Menu + Siri Remote, or Settings
Android TV TalkBack Accessibility shortcut or dev settings

Platform Differences

  • Fire TV (VoiceView): Similar to TalkBack but not all props honored on older models. Extra verbose by default.
  • Apple TV (VoiceOver): Focus can jump non-linearly. accessibilityHint read immediately after label. Role mapping consistent with iOS.
  • Android TV (TalkBack): Linear D-pad navigation. accessibilityHint sometimes skipped unless accessible={true} is explicit.

These are the core React Native accessibility props (accessible, accessibilityLabel, accessibilityRole, accessibilityState, accessibilityLiveRegion, accessibilityViewIsModal) you'll use on TV, but support varies by platform — see a11y-implementation.md for TV-specific usage and the platform quirks above for where they diverge.

Related Skills

Source: SKILL.md on GitHub

Third-party checks

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

Provenance

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