What are we going to use

1. React Native tvOS

React Native tvOS is a specialized version of React Native that enables development for TV platforms. It’s a fork of the core React Native repository that extends support to include both phone and TV targets.

Key Features:

• Built-in support for Android TV, Apple TV.
• Aligned with React Native.
• Offers the same Focus management and remote control API across different OSs.

Implementation:

To use React Native tvOS in your project, modify your package.json:

{
  "dependencies": {
    "react-native": "npm:react-native-tvos"
  }
}

2. Expo: The Framwork for React Native

Expo serves as a powerful framework that simplifies React Native development, including TV app development. Starting with SDK 50, Expo provides dedicated support for building TV applications. The official guide for building TV apps with Expo is available here. Expo makes developing a TV app really easy with the following steps:

TV Development with Expo:

1. Prerequisites:

   • For Android TV:
     • Node.js (LTS) on macOS or Linux
     • Android Studio (Iguana or later)
     • Android TV system image
   • For Apple TV:
     • Node.js (LTS) on macOS
     • Xcode 15 or later
     • tvOS SDK 17 or later

2. Project Setup:

# For basic TV app
npx create-expo-app MyTVProject -e with-tv
 
# For TV app with Router (SDK 51+)
npx create-expo-app MyTVProject -e with-router-tv

3. Building for TV Platforms:

# For Android TV
export EXPO_TV=1
npx expo run:android
 
# For Apple TV
export EXPO_TV=1
npx expo run:ios

3. React TV Space Navigation: Managing Focus

React TV Space Navigation is a specialized library designed to handle one of the most crucial aspects of TV app development: focus management. It provides a declarative API for implementing intuitive spatial navigation (that’s why its name) in TV apps.

Key Features:

• Cross-platform focus management
• Declarative API for spatial navigation
• Some useful built-in UI component for TV
• Easy to use remote control input management

Basic Implementation:

Remeber to include the dependency:

npm install react-tv-space-navigation
# or
yarn add react-tv-space-navigation

Declare your focusable component wrapping it up with the SpatialNavigationFocusableView inside a SpatialNavigationRoot

import { 
  SpatialNavigationRoot, 
  SpatialNavigationFocusableView 
} from 'react-tv-space-navigation';
 
const TVScreen = () => (
  <SpatialNavigationRoot>
    <SpatialNavigationFocusableView onSelect={() => console.log('Selected!')}>
      {({ isFocused }) => (
        <View style={[styles.item, isFocused && styles.focused]}>
          <Text>Focusable Item</Text>
        </View>
      )}
    </SpatialNavigationFocusableView>
  </SpatialNavigationRoot>
);

Conclusion

Using the combination of React Native tvOS, Expo, and React TV Space Navigation we are going to build a template app for TV app development that you can use for your solutions!