Modify template to use react-native-tvos for TV support (#1)

* Changes to align with react-native-tvos

* Add TV specific code to example app

* Update README

* Update README and package.json

Author: douglowder

README.md

@@ -22,31 +22,29 @@
 - Elegant usage directly within the [React Native CLI](https://github.com/react-native-community/cli)
 - Consistent with the default React Native template
 - Minimal additional dependencies
+- Support for Apple TV and Android TV using the [React Native for TV](https://github.com/react-native-tvos/react-native-tvos) package
 
 ## :arrow_forward: Usage
 
 ```sh
-npx react-native init MyApp --template react-native-template-typescript
+npx react-native init MyApp --template react-native-template-typescript-tv
 ```
 
 ### Usage with older versions of React Native
 
-#### e.g. `react-native@0.62.x`
+#### e.g. `react-native-tvos@0.63.1-3` (previous versions do not have TS types for TV props)
 
 ```sh
-npx react-native init MyApp --template react-native-template-typescript@6.4.*
+npx react-native init MyApp --template react-native-template-typescript-tv@6.5.8
 ```
 
 See the below table to find out which version of the template to use.
 
-#### React Native <=> Template Version
+#### react-native-tvos Version <=> Template Version
 
 | React Native  	| Template  	|
 |---	            |---	        |
-| 0.63  	        | 6.5.*       |
-| 0.62  	        | 6.4.*       |
-| 0.61  	        | 6.3.*       |
-| 0.60  	        | 6.2.*       |
+| 0.63.1-3  	    | 6.5.8       |
 
 ### Note on the legacy CLI
 There seems to be quite some confusion about the legacy CLI. This template only works with the new CLI. Make sure you have uninstalled the legacy `react-native-cli` first (`npm uninstall -g react-native-cli`), for the below command to work. If you wish to not use `npx`, you can also install the new CLI globally (`npm i -g @react-native-community/cli` or `yarn global add @react-native-community/cli`).

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "react-native-template-typescript",
+  "name": "react-native-template-typescript-tv",
   "version": "0.0.1",
-  "description": "Clean and minimalist React Native template for a quick start with TypeScript.",
+  "description": "Clean and minimalist React Native template for a quick start with TypeScript for Android TV and Apple TV.",
   "scripts": {
     "prepublishOnly": "npm --no-git-tag-version version $TRAVIS_TAG"
   },
@@ -11,7 +11,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/emin93/react-native-template-typescript.git"
+    "url": "git+https://github.com/react-native-tvos/react-native-template-typescript-tv.git"
   },
   "keywords": [
     "react-native",
@@ -20,10 +20,10 @@
     "template",
     "boilerplate"
   ],
-  "author": "Emin Khateeb <[email protected]>",
+  "author": "Emin Khateeb <[email protected]>, with TV modifications by Doug Lowder <[email protected]>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/emin93/react-native-template-typescript/issues"
+    "url": "https://github.com/react-native-tvos/react-native-template-typescript-tv/issues"
   },
-  "homepage": "https://github.com/emin93/react-native-template-typescript#readme"
+  "homepage": "https://github.com/react-native-tvos/react-native-template-typescript-tv#readme"
 }

template/App.tsx

@@ -15,7 +15,8 @@ import {
   ScrollView,
   View,
   Text,
-  StatusBar,
+  useTVEventHandler,
+  HWFocusEvent,
 } from 'react-native';
 
 import {
@@ -26,28 +27,35 @@ import {
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 
+import 'react-native/tvos-types.d';
+
 declare const global: {HermesInternal: null | {}};
 
 const App = () => {
+  const [lastEventType, setLastEventType] = React.useState('');
+  const myTVEventHandler = (evt: HWFocusEvent) => {
+    setLastEventType(evt.eventType);
+  };
+  useTVEventHandler(myTVEventHandler);
   return (
     <>
-      <StatusBar barStyle="dark-content" />
       <SafeAreaView>
         <ScrollView
           contentInsetAdjustmentBehavior="automatic"
           style={styles.scrollView}>
           <Header />
-          {global.HermesInternal == null ? null : (
-            <View style={styles.engine}>
+          <View style={styles.engine}>
+            <Text style={styles.footer}>TVEvent: {lastEventType}</Text>
+            {global.HermesInternal == null ? null : (
               <Text style={styles.footer}>Engine: Hermes</Text>
-            </View>
-          )}
+            )}
+          </View>
           <View style={styles.body}>
             <View style={styles.sectionContainer}>
               <Text style={styles.sectionTitle}>Step One</Text>
               <Text style={styles.sectionDescription}>
-                Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-                screen and then come back to see your edits.
+                Edit <Text style={styles.highlight}>App.tsx</Text> to change
+                this screen and then come back to see your edits.
               </Text>
             </View>
             <View style={styles.sectionContainer}>