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.

referencesperf-memory.md

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

Memory Management on TV

On TVs, you're sharing RAM with the OS, video decoder, DRM, audio buffers, and even the live TV tuner. Your UI runs in the leftovers.

Quick Reference

  • Many devices have 1-1.5 GB total — your app might only get 300-500 MB
  • 4K video streams eat 100-200 MB just for decoded frames
  • Poster/backdrop caches are the biggest UI-side memory lever
  • Smart TVs aggressively reclaim memory from your app

Symptoms of Memory Pressure

  • Sudden GC spikes (frame drops during scrolling)
  • Images unloading from cache and re-downloading mid-session
  • Crashes or forced restarts (Tizen and webOS are notorious)

Image Memory Optimization

Bad:

<Image source={{ uri: posterUrl }} />

Without cache control, changing posterUrl holds multiple decoded bitmaps until GC runs.

Better:

<Image
  source={{ uri: posterUrl, cache: 'force-cache' }}
  resizeMode="cover"
/>

Or use react-native-fast-image for cache control.

List Item Memory

Even with virtualization, if row components keep large objects in state (full metadata blobs), you're holding memory hostage.

Better: Store only IDs in list item state, fetch full details on demand.

TV-Specific Checks

  1. Match asset size to display size — A decoded 4K backdrop for a small thumbnail wastes the same memory as a visible full-screen asset.

  2. Measure with video mounted — UI memory that looks fine without playback can fail once decoded frames and DRM buffers exist.

  3. Keep cache pressure visible — Watch for poster eviction/re-download loops during fast row navigation.

  4. Avoid large list item state — Keep IDs in rows; fetch full metadata on demand.

  5. Use native profiling tools:

    • Android TV/Fire TV: Android Studio Profiler → Memory tab
    • Apple TV: Xcode Instruments → Allocations + Leaks
    • Tizen/webOS: Emulator memory usage overlays

Platform Quirks

  • Low-end Fire TV: ~0.5-1 GB RAM total. Every extra library adds startup time.
  • Tizen/webOS: Aggressive OS memory reclaim — your app can be killed without warning.
  • Apple TV 4K: More generous RAM (4 GB) but don't assume you can skip optimization.

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