React Native for TV

0.85.0-0 · active · verified Sun Apr 19

This package provides a fork of React Native specifically adapted for developing applications on TV platforms, including Apple TV (tvOS) and Android TV. It extends the core React Native framework with TV-specific navigation primitives, focus management, and input handling necessary for an optimal 10-foot user experience. The current stable version, `0.85.0-0`, aligns closely with mainstream React Native releases (e.g., React Native 0.85.x) but maintains its own maintenance cycle to integrate TV-specific features and fixes. Development appears active, with frequent updates tracking React Native's primary release train, evidenced by recent `0.85.0-0` release candidates and the final `0.85.0-0` release following `0.84.x` and `0.83.x`. Its key differentiators lie in its specialized focus engine, robust remote control input integration, and UI component adaptations for large screen environments, making it the primary choice for building native TV applications with React.

Common errors

Warnings

Install

Imports

Quickstart

Demonstrates a basic React Native for TV application with focusable elements, remote control input handling using `TVEventHandler`, and dynamic style changes based on focus state. This provides a foundational example for building interactive TV user interfaces.

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, TVEventHandler } from 'react-native-tvos';

const App = () => {
  const [focusedItem, setFocusedItem] = useState('none');

  useEffect(() => {
    const tvEventHandler = new TVEventHandler();
    tvEventHandler.enable(this, (cmp, evt) => {
      if (evt && evt.eventKind === 'select') {
        console.log(`Item selected: ${focusedItem}`);
        // Handle selection logic based on focusedItem
      }
    });

    return () => {
      tvEventHandler.disable();
    };
  }, [focusedItem]);

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Welcome to React Native TV!</Text>
      <TouchableOpacity
        onFocus={() => setFocusedItem('Button 1')}
        onBlur={() => setFocusedItem('none')}
        style={[styles.button, focusedItem === 'Button 1' && styles.buttonFocused]}
        activeOpacity={0.8}
        testID="button1"
      >
        <Text style={styles.buttonText}>Button 1</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onFocus={() => setFocusedItem('Button 2')}
        onBlur={() => setFocusedItem('none')}
        style={[styles.button, focusedItem === 'Button 2' && styles.buttonFocused]}
        activeOpacity={0.8}
        testID="button2"
      >
        <Text style={styles.buttonText}>Button 2</Text>
      </TouchableOpacity>
      <Text style={styles.footer}>Currently focused: {focusedItem}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#222',
  },
  header: {
    fontSize: 48,
    color: 'white',
    marginBottom: 40,
  },
  button: {
    backgroundColor: '#4CAF50',
    paddingVertical: 20,
    paddingHorizontal: 50,
    borderRadius: 10,
    marginVertical: 15,
    width: 400,
    alignItems: 'center',
  },
  buttonFocused: {
    borderColor: 'yellow',
    borderWidth: 5,
  },
  buttonText: {
    color: 'white',
    fontSize: 32,
    fontWeight: 'bold',
  },
  footer: {
    fontSize: 28,
    color: '#AAA',
    marginTop: 40,
  },
});

export default App;

view raw JSON →