TVInputDemo

A demo project for React Native for TV.

This project uses the Expo SDK, as described in the Expo guide "Build Expo apps for TV".

RNTV demonstrations included

• Simple buttons
• Buttons that detect when they are focused (activated) by the TV focus engine
• Use of Pressable
• Use of TextInput
• TV-specific focus management components and APIs (TVFocusGuideView, nextFocus(), hasTVPreferredFocus())
• Apple TV menu key enablement with TVEventControl
• Handling remote control events explicitly with useTVEventHandler()
• Dark/light theming with useColorScheme() and React context

Other demonstrations included

• Navigation with React Navigation
• Animation with React Native Reanimated
• Material design components from React Native Paper
• Video demo using the Video component from the expo-av package

Getting started

• Clone this repo
• In the TVInputDemo directory, execute

yarn
yarn prebuild # Clean and generate native projects
yarn ios # Start app in simulator for Apple TV
yarn android # Start app for Android TV, a TV emulator should already be running

Fabric (bridgeless) enabled by default

• In app.json, newArchEnabled is set to true for both platforms in the expo-build-properties plugin properties
• To run the app without Fabric:
  • Change the value of newArchEnabled to false
  • Rerun yarn prebuild to regenerate the native files

Known issues

• Apple TV simulator issues (these will not occur when building for real devices, and seem to be actual bugs in the simulator):
  • Video will pause after a few seconds if full screen video is selected in the video example

Apple TV screenshots (light theme)

Android TV screenshots (dark theme)