Add support for Android TV devices

Libraries/Components/AppleTV/TVEventHandler.ios.js → Libraries/Components/AppleTV/TVEventHandler.js

@@ -9,7 +9,7 @@
  */
 'use strict';
 
-const React = require('React');
+const Platform = require('Platform');
 const TVNavigationEventEmitter = require('NativeModules').TVNavigationEventEmitter;
 const NativeEventEmitter = require('NativeEventEmitter');
 
@@ -19,13 +19,13 @@ function TVEventHandler() {
 }
 
 TVEventHandler.prototype.enable = function(component: ?any, callback: Function) {
-  if (!TVNavigationEventEmitter) {
+  if (Platform.OS === 'ios' && !TVNavigationEventEmitter) {
     return;
   }
 
   this.__nativeTVNavigationEventEmitter = new NativeEventEmitter(TVNavigationEventEmitter);
   this.__nativeTVNavigationEventListener = this.__nativeTVNavigationEventEmitter.addListener(
-    'onTVNavEvent',
+    'onHWKeyEvent',
     (data) => {
       if (callback) {
         callback(component, data);

Libraries/Components/AppleTV/TVViewPropTypes.js

@@ -15,17 +15,13 @@ const PropTypes = require('prop-types');
  */
 const TVViewPropTypes = {
     /**
-     * *(Apple TV only)* When set to true, this view will be focusable
-     * and navigable using the Apple TV remote.
-     *
-     * @platform ios
+     * When set to true, this view will be focusable
+     * and navigable using the TV remote.
      */
     isTVSelectable: PropTypes.bool,
 
     /**
-     * *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view.
-     *
-     * @platform ios
+     * May be set to true to force the TV focus engine to move focus to this view.
      */
     hasTVPreferredFocus: PropTypes.bool,
 

Libraries/Components/Button.js

@@ -53,6 +53,7 @@ class Button extends React.Component<{
   title: string,
   onPress: () => any,
   color?: ?string,
+  hasTVPreferredFocus?: ?boolean,
   accessibilityLabel?: ?string,
   disabled?: ?boolean,
   testID?: ?string,
@@ -75,6 +76,10 @@ class Button extends React.Component<{
      * If true, disable all interactions for this component.
      */
     disabled: PropTypes.bool,
+    /**
+     * TV preferred focus (see documentation for the View component).
+     */
+    hasTVPreferredFocus: PropTypes.bool,
     /**
      * Handler to be called when the user taps the button
      */
@@ -83,12 +88,6 @@ class Button extends React.Component<{
      * Used to locate this view in end-to-end tests.
      */
     testID: PropTypes.string,
-    /**
-     * *(Apple TV only)* TV preferred focus (see documentation for the View component).
-     *
-     * @platform ios
-     */
-    hasTVPreferredFocus: PropTypes.bool,
   };
 
   render() {

Libraries/Components/Touchable/Touchable.js

@@ -315,7 +315,7 @@ const LONG_PRESS_ALLOWED_MOVEMENT = 10;
  */
 const TouchableMixin = {
   componentDidMount: function() {
-    if (!Platform.isTVOS) {
+    if (!Platform.isTV) {
       return;
     }
 
@@ -329,7 +329,7 @@ const TouchableMixin = {
         } else if (evt.eventType === 'blur') {
           cmp.touchableHandleActivePressOut && cmp.touchableHandleActivePressOut(evt);
         } else if (evt.eventType === 'select') {
-          cmp.touchableHandlePress && cmp.touchableHandlePress(evt);
+          cmp.touchableHandlePress && !cmp.props.disabled && cmp.touchableHandlePress(evt);
         }
       }
     });

Libraries/Components/Touchable/TouchableNativeFeedback.android.js

@@ -82,6 +82,11 @@ const TouchableNativeFeedback = createReactClass({
      */
     background: backgroundPropType,
 
+    /**
+     * TV preferred focus (see documentation for the View component).
+     */
+    hasTVPreferredFocus: PropTypes.bool,
+
     /**
      * Set to true to add the ripple effect to the foreground of the view, instead of the
      * background. This is useful if one of your child views has a background of its own, or you're
@@ -156,7 +161,9 @@ const TouchableNativeFeedback = createReactClass({
   touchableHandleActivePressIn: function(e: Event) {
     this.props.onPressIn && this.props.onPressIn(e);
     this._dispatchPressedStateChange(true);
-    this._dispatchHotspotUpdate(this.pressInLocation.locationX, this.pressInLocation.locationY);
+    if (this.pressInLocation) {
+      this._dispatchHotspotUpdate(this.pressInLocation.locationX, this.pressInLocation.locationY);
+    }
   },
 
   touchableHandleActivePressOut: function(e: Event) {
@@ -244,6 +251,8 @@ const TouchableNativeFeedback = createReactClass({
       testID: this.props.testID,
       onLayout: this.props.onLayout,
       hitSlop: this.props.hitSlop,
+      isTVSelectable: true,
+      hasTVPreferredFocus: this.props.hasTVPreferredFocus,
       onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,
       onResponderTerminationRequest: this.touchableHandleResponderTerminationRequest,
       onResponderGrant: this.touchableHandleResponderGrant,

Libraries/Components/Touchable/TouchableOpacity.js

@@ -128,9 +128,7 @@ const TouchableOpacity = createReactClass({
      */
     activeOpacity: PropTypes.number,
     /**
-     * *(Apple TV only)* TV preferred focus (see documentation for the View component).
-     *
-     * @platform ios
+     * TV preferred focus (see documentation for the View component).
      */
     hasTVPreferredFocus: PropTypes.bool,
     /**

Libraries/Components/View/PlatformViewPropTypes.ios.js → Libraries/Components/View/PlatformViewPropTypes.js

@@ -11,7 +11,10 @@
 const Platform = require('Platform');
 
 let TVViewPropTypes = {};
-if (Platform.isTVOS) {
+// We need to always include TVViewPropTypes on Android
+// as unlike on iOS we can't detect TV devices at build time
+// and hence make view manager export a different list of native properties.
+if (Platform.isTV || Platform.OS === 'android') {
   TVViewPropTypes = require('TVViewPropTypes');
 }
 

Libraries/Utilities/Platform.android.js

@@ -22,6 +22,10 @@ const Platform = {
     const constants = NativeModules.PlatformConstants;
     return constants && constants.isTesting;
   },
+  get isTV(): boolean {
+    const constants = NativeModules.PlatformConstants;
+    return constants && constants.uiMode === 'tv';
+  },
   select: (obj: Object) => 'android' in obj ? obj.android : obj.default,
 };
 

Libraries/Utilities/Platform.ios.js

@@ -22,7 +22,13 @@ const Platform = {
     const constants = NativeModules.PlatformConstants;
     return constants ? constants.interfaceIdiom === 'pad' : false;
   },
+  /**
+   * Deprecated, use `isTV` instead.
+   */
   get isTVOS() {
+    return Platform.isTV;
+  },
+  get isTV() {
     const constants = NativeModules.PlatformConstants;
     return constants ? constants.interfaceIdiom === 'tv' : false;
   },

RNTester/android/app/src/main/AndroidManifest.xml

@@ -20,9 +20,14 @@
     android:minSdkVersion="16"
     android:targetSdkVersion="23" />
 
+  <!--
+  android:icon is used to display launcher icon on mobile devices.
+  android:banner is used to display a rectangular banned launcher icon on Android TV devices.
+  -->
   <application
       android:name=".RNTesterApplication"
       android:allowBackup="true"
+      android:banner="@drawable/tv_banner"
       android:icon="@drawable/launcher_icon"
       android:label="@string/app_name"
       android:theme="@style/Theme.ReactNative.AppCompat.Light" >
@@ -34,6 +39,8 @@
       <intent-filter>
         <action android:name="android.intent.action.MAIN" />
         <category android:name="android.intent.category.LAUNCHER" />
+        <!-- Needed to properly create a launch intent when running on Android TV -->
+        <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
       </intent-filter>
       <intent-filter>
         <action android:name="android.intent.action.VIEW" />

React/Modules/RCTTVNavigationEventEmitter.m

@@ -9,7 +9,7 @@
 
 NSString *const RCTTVNavigationEventNotification = @"RCTTVNavigationEventNotification";
 
-static NSString *const TVNavigationEventName = @"onTVNavEvent";
+static NSString *const TVNavigationEventName = @"onHWKeyEvent";
 
 @implementation RCTTVNavigationEventEmitter
 

ReactAndroid/src/androidTest/java/com/facebook/react/tests/CatalystNativeJSToJavaParametersTestCase.java

@@ -98,7 +98,7 @@ public void run() {
     mRecordingTestModule = new RecordingTestModule();
     mCatalystInstance = ReactTestHelper.catalystInstanceBuilder(this)
         .addNativeModule(mRecordingTestModule)
-        .addNativeModule(new AndroidInfoModule())
+        .addNativeModule(new AndroidInfoModule(getContext()))
         .addNativeModule(new DeviceInfoModule(getContext()))
         .addNativeModule(new AppStateModule(getContext()))
         .addNativeModule(new FakeWebSocketModule())

ReactAndroid/src/androidTest/java/com/facebook/react/tests/CatalystUIManagerTestCase.java

@@ -88,7 +88,7 @@ public void run() {
 
     jsModule = ReactTestHelper.catalystInstanceBuilder(this)
         .addNativeModule(uiManager)
-        .addNativeModule(new AndroidInfoModule())
+        .addNativeModule(new AndroidInfoModule(getContext()))
         .addNativeModule(new DeviceInfoModule(getContext()))
         .addNativeModule(new AppStateModule(getContext()))
         .addNativeModule(new FakeWebSocketModule())

ReactAndroid/src/androidTest/java/com/facebook/react/tests/ProgressBarTestCase.java

@@ -80,7 +80,7 @@ public void run() {
 
     mInstance = ReactTestHelper.catalystInstanceBuilder(this)
         .addNativeModule(mUIManager)
-        .addNativeModule(new AndroidInfoModule())
+        .addNativeModule(new AndroidInfoModule(getContext()))
         .addNativeModule(new DeviceInfoModule(getContext()))
         .addNativeModule(new AppStateModule(getContext()))
         .addNativeModule(new FakeWebSocketModule())

ReactAndroid/src/androidTest/java/com/facebook/react/tests/ViewRenderingTestCase.java

@@ -61,7 +61,7 @@ public void run() {
 
     mCatalystInstance = ReactTestHelper.catalystInstanceBuilder(this)
         .addNativeModule(uiManager)
-        .addNativeModule(new AndroidInfoModule())
+        .addNativeModule(new AndroidInfoModule(getContext()))
         .addNativeModule(new DeviceInfoModule(getContext()))
         .addNativeModule(new AppStateModule(getContext()))
         .addNativeModule(new FakeWebSocketModule())

ReactAndroid/src/main/java/com/facebook/react/CoreModulesPackage.java

@@ -79,7 +79,7 @@ public List<ModuleSpec> getNativeModules(final ReactApplicationContext reactCont
             new Provider<NativeModule>() {
               @Override
               public NativeModule get() {
-                return new AndroidInfoModule();
+                return new AndroidInfoModule(reactContext);
               }
             }),
         ModuleSpec.nativeModuleSpec(

ReactAndroid/src/main/java/com/facebook/react/ReactActivity.java

@@ -75,11 +75,21 @@ public void onActivityResult(int requestCode, int resultCode, Intent data) {
     mDelegate.onActivityResult(requestCode, resultCode, data);
   }
 
+  @Override
+  public boolean onKeyDown(int keyCode, KeyEvent event) {
+    return mDelegate.onKeyDown(keyCode, event) || super.onKeyDown(keyCode, event);
+  }
+
   @Override
   public boolean onKeyUp(int keyCode, KeyEvent event) {
     return mDelegate.onKeyUp(keyCode, event) || super.onKeyUp(keyCode, event);
   }
 
+  @Override
+  public boolean onKeyLongPress(int keyCode, KeyEvent event) {
+    return mDelegate.onKeyLongPress(keyCode, event) || super.onKeyLongPress(keyCode, event);
+  }
+
   @Override
   public void onBackPressed() {
     if (!mDelegate.onBackPressed()) {

ReactAndroid/src/main/java/com/facebook/react/ReactActivityDelegate.java

@@ -127,6 +127,16 @@ public void onActivityResult(int requestCode, int resultCode, Intent data) {
     }
   }
 
+  public boolean onKeyDown(int keyCode, KeyEvent event) {
+    if (getReactNativeHost().hasInstance()
+      && getReactNativeHost().getUseDeveloperSupport()
+      && keyCode == KeyEvent.KEYCODE_MEDIA_FAST_FORWARD) {
+      event.startTracking();
+      return true;
+    }
+    return false;
+  }
+
   public boolean onKeyUp(int keyCode, KeyEvent event) {
     if (getReactNativeHost().hasInstance() && getReactNativeHost().getUseDeveloperSupport()) {
       if (keyCode == KeyEvent.KEYCODE_MENU) {
@@ -143,6 +153,16 @@ public boolean onKeyUp(int keyCode, KeyEvent event) {
     return false;
   }
 
+  public boolean onKeyLongPress(int keyCode, KeyEvent event) {
+    if (getReactNativeHost().hasInstance()
+        && getReactNativeHost().getUseDeveloperSupport()
+        && keyCode == KeyEvent.KEYCODE_MEDIA_FAST_FORWARD) {
+      getReactNativeHost().getReactInstanceManager().showDevOptionsDialog();
+      return true;
+    }
+    return false;
+  }
+
   public boolean onBackPressed() {
     if (getReactNativeHost().hasInstance()) {
       getReactNativeHost().getReactInstanceManager().onBackPressed();