{"library":"react-native-tvos","title":"React Native for TV","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-tvos"],"cli":null},"imports":["import { View, Text, StyleSheet } from 'react-native-tvos';","import { TouchableOpacity } from 'react-native-tvos';","import { TVEventHandler } from 'react-native-tvos';","import { TVFocusGuideView } from 'react-native-tvos';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState, useEffect } from 'react';\nimport { View, Text, StyleSheet, TouchableOpacity, TVEventHandler } from 'react-native-tvos';\n\nconst App = () => {\n  const [focusedItem, setFocusedItem] = useState('none');\n\n  useEffect(() => {\n    const tvEventHandler = new TVEventHandler();\n    tvEventHandler.enable(this, (cmp, evt) => {\n      if (evt && evt.eventKind === 'select') {\n        console.log(`Item selected: ${focusedItem}`);\n        // Handle selection logic based on focusedItem\n      }\n    });\n\n    return () => {\n      tvEventHandler.disable();\n    };\n  }, [focusedItem]);\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.header}>Welcome to React Native TV!</Text>\n      <TouchableOpacity\n        onFocus={() => setFocusedItem('Button 1')}\n        onBlur={() => setFocusedItem('none')}\n        style={[styles.button, focusedItem === 'Button 1' && styles.buttonFocused]}\n        activeOpacity={0.8}\n        testID=\"button1\"\n      >\n        <Text style={styles.buttonText}>Button 1</Text>\n      </TouchableOpacity>\n      <TouchableOpacity\n        onFocus={() => setFocusedItem('Button 2')}\n        onBlur={() => setFocusedItem('none')}\n        style={[styles.button, focusedItem === 'Button 2' && styles.buttonFocused]}\n        activeOpacity={0.8}\n        testID=\"button2\"\n      >\n        <Text style={styles.buttonText}>Button 2</Text>\n      </TouchableOpacity>\n      <Text style={styles.footer}>Currently focused: {focusedItem}</Text>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#222',\n  },\n  header: {\n    fontSize: 48,\n    color: 'white',\n    marginBottom: 40,\n  },\n  button: {\n    backgroundColor: '#4CAF50',\n    paddingVertical: 20,\n    paddingHorizontal: 50,\n    borderRadius: 10,\n    marginVertical: 15,\n    width: 400,\n    alignItems: 'center',\n  },\n  buttonFocused: {\n    borderColor: 'yellow',\n    borderWidth: 5,\n  },\n  buttonText: {\n    color: 'white',\n    fontSize: 32,\n    fontWeight: 'bold',\n  },\n  footer: {\n    fontSize: 28,\n    color: '#AAA',\n    marginTop: 40,\n  },\n});\n\nexport default App;\n","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}