Skip to content

react-native-tvos/TVInputDemo

Repository files navigation

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

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)

Simulator Screenshot - Apple TV 15 - 2024-02-29 at 20 15 46 Simulator Screenshot - Apple TV 15 - 2024-02-29 at 20 16 34

Android TV screenshots (dark theme)

Screenshot_1709266637 Screenshot_1709266677

Releases

No releases published

Packages

No packages published