Blog, COLDSURF

🌊

💻

🎧

🎥

📖

📷

🧑🏻‍💻

AppleTV (tvOS) with React Native

How to Set Up

You can create a TypeScript project following the guide at react-native-template-typescript-tv.
Since we are using React Native CLI, not Expo, you can create the project with the following command:
$ npx react-native init MyApp --template react-native-template-typescript-tv
This will generate a TypeScript TV OS React Native project.

react-native-tvos

Looking at the package.json, you’ll notice that the "react-native": "npm:react-native-tvos@^0.71.10-0" package is used. This indicates that the React Native package is set to the specific version of react-native-tvos for tvOS.
This package is maintained as a tvOS-specific version of React Native, and you can follow the official repository at react-native-tvos.

Pod Install

Since we are targeting only Apple TV (tvOS), we need to run the pod install command.
$ cd MyApp
$ bundle install  # If you haven't done this CLI step, you need to.
$ cd ios
$ pod install

tvOS Target

To run tvOS, select the -tvOS target as shown in the image below, and run the app.
notion image
You will need the Apple TV simulator to run tvOS, so if you don't have it installed, make sure to install it.

react-native-video with tvOS

Although the official documentation recommends setting up tvOS, you can follow the instructions at react-native-video Installation.
You don’t need to manually link anything as everything works fine, including the release schema.
This version is around version 5.

DRM

For DRM support, if you are packaging with Pallycon service, you can refer to the example at Pallycon React Native Sample for Widevine and Fairplay examples.

react-native-reanimated with tvOS

React Native Reanimated works smoothly with tvOS in version 3. No additional setup is needed.

react-native-gesture-handler with tvOS

To ensure a successful build, you need to use "react-native-gesture-handler": "^2.10.1" version.
← Go home