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
export EXPO_TV=1
npx expo prebuild --clean
yarn ios # for Apple TV
yarn android # for Android TV, a TV emulator should already be running

Enabling Fabric

• In app.json, set newArchEnabled to true in the expo-build-properties plugin
• Then redo the above steps:

export EXPO_TV=1
npx expo prebuild --clean
yarn ios # for Apple TV
yarn android # for Android TV, a TV emulator should already be running

Known issues

• Apple TV simulator issues (these will not occur when building for real devices, and seem to be actual bugs in the simulator):
  • You will need a tvOS 15.x simulator to test video (tvos 16 and 17 simulators won't play the video)
  • 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)