Handle TV devices

Add support for : 

 - TVEventHandler events
 - Platform.isTV 
 - hasTVPreferredFocus property
 - nextFocusUp, nextFocusRight, nextFocusDown, nextFocusLeft properties
 - back event from remote control

Author: dev-seb

packages/react-native-web/src/exports/BackHandler/index.js

@@ -12,9 +12,12 @@ function emptyFunction() {}
 
 const BackHandler = {
   exitApp: emptyFunction,
-  addEventListener() {
+  addEventListener(event, callback) {
+    document.addEventListener(event, callback);
     return {
-      remove: emptyFunction
+      remove: () => {
+        document.removeEventListener(event, callback);
+      }
     };
   },
   removeEventListener: emptyFunction

packages/react-native-web/src/exports/Platform/index.js

@@ -16,6 +16,9 @@ const Platform = {
       return true;
     }
     return false;
+  },
+  get isTV(): boolean {
+    return process.env.REACT_APP_IS_TV === "true";
   }
 };
 

packages/react-native-web/src/exports/TVEventHandler/index.js

@@ -1 +1,102 @@
-export default {};
+class TVEventHandler {
+
+  constructor() {
+    this.component = null;
+    this.callback = null;
+  }
+
+  enable(component, callback) {
+    this.component = component;
+    this.callback = callback;
+    document.addEventListener(
+      'onHWKeyEvent',
+      this.onHWKeyEvent.bind(this)
+    );
+  }
+
+  disable() {
+    document.removeEventListener(
+      'onHWKeyEvent',
+      this.onHWKeyEvent
+    );
+  }
+
+  onHWKeyEvent(event) {
+    if (this.callback) {
+      if (event && event.detail) {
+        const tvEvent = event.detail.tvEvent;
+        if(tvEvent) {
+          this.callback(this.component, tvEvent);
+        }
+      }
+    }
+  }
+
+  static dispatchEvent(tvEvent) {
+    // Dispatch tvEvent through onHWKeyEvent
+    const hwKeyEvent = new CustomEvent("onHWKeyEvent", {
+      detail: {tvEvent: tvEvent},
+    });
+    document.dispatchEvent(hwKeyEvent);
+  }
+
+  static getTVEvent(event) {
+    // create tv event
+    let tvEvent = {
+      eventKeyAction: -1,
+      eventType: '',
+      tag: ''
+    };
+    // Key Event
+    if (event.type === 'keydown' || event.type === 'keyup') {
+      // get event type
+      switch (event.key) {
+        case 'Enter':
+          tvEvent.eventType = 'select';
+          break;
+        case 'ArrowUp':
+          tvEvent.eventType = 'up';
+          break;
+        case 'ArrowRight':
+          tvEvent.eventType = 'right';
+          break;
+        case 'ArrowDown':
+          tvEvent.eventType = 'down';
+          break;
+        case 'ArrowLeft':
+          tvEvent.eventType = 'left';
+          break;
+        case 'MediaPlayPause':
+          tvEvent.eventType = 'playPause';
+          break;
+        case 'MediaRewind':
+          tvEvent.eventType = 'rewind';
+          break;
+        case 'MediaFastForward':
+          tvEvent.eventType = 'fastForward';
+          break;
+        case 'Menu':
+          tvEvent.eventType = 'menu';
+          break;
+      }
+      if (event.type === 'keydown') {
+        tvEvent.eventKeyAction = 0;
+      }
+      else if (event.type === 'keyup') {
+        tvEvent.eventKeyAction = 1;
+      }
+    }
+    // Focus / Blur event
+    else if (event.type === 'focus' || event.type === 'blur') {
+      tvEvent.eventType = event.type;
+    }
+    // Get tag from id attribute
+    if (event.target && event.target.id) {
+      tvEvent.tag = event.target.id;
+    }
+    return tvEvent;
+  }
+
+}
+
+export default TVEventHandler;

packages/react-native-web/src/exports/TextInput/index.js

@@ -20,6 +20,7 @@ import findNodeHandle from '../findNodeHandle';
 import React from 'react';
 import StyleSheet from '../StyleSheet';
 import TextInputState from '../../modules/TextInputState';
+import Platform from '../Platform';
 
 const isAndroid = canUseDOM && /Android/i.test(navigator && navigator.userAgent);
 const emptyObject = {};
@@ -241,8 +242,10 @@ class TextInput extends React.Component<TextInputProps> {
   };
 
   _handleKeyDown = e => {
-    // Prevent key events bubbling (see #612)
-    e.stopPropagation();
+    if(!Platform.isTV) {
+      // Prevent key events bubbling (see #612)
+      e.stopPropagation();
+    }
 
     // Backspace, Escape, Tab, Cmd+Enter, and Arrow keys only fire 'keydown'
     // DOM events

packages/react-native-web/src/exports/Touchable/index.js

@@ -18,6 +18,8 @@ import Position from './Position';
 import React from 'react';
 import UIManager from '../UIManager';
 import View from '../View';
+import Platform from "../Platform";
+import TVEventHandler from "../TVEventHandler";
 
 type Event = Object;
 type PressEvent = Object;
@@ -380,6 +382,7 @@ const TouchableMixin = {
       };
       this._touchableNode.addEventListener('blur', this._touchableBlurListener);
     }
+
   },
 
   /**
@@ -403,7 +406,8 @@ const TouchableMixin = {
    */
   touchableGetInitialState: function() {
     return {
-      touchable: { touchState: undefined, responderID: null }
+      touchable: { touchState: undefined, responderID: null },
+      focused: false
     };
   },
 
@@ -566,6 +570,7 @@ const TouchableMixin = {
    * using `Touchable.Mixin.withoutDefaultFocusAndBlur`.
    */
   touchableHandleFocus: function(e: Event) {
+    this.state.focused = true;
     this.props.onFocus && this.props.onFocus(e);
   },
 
@@ -578,6 +583,7 @@ const TouchableMixin = {
    * `Touchable.Mixin.withoutDefaultFocusAndBlur`.
    */
   touchableHandleBlur: function(e: Event) {
+    this.state.focused = false;
     this.props.onBlur && this.props.onBlur(e);
   },
 
@@ -873,6 +879,48 @@ const TouchableMixin = {
   // delays and longPress)
   touchableHandleKeyEvent: function(e: Event) {
     const { type, key } = e;
+    if(Platform.isTV) {
+      // Get tvEvent
+      const tvEvent = TVEventHandler.getTVEvent(e);
+      // Dispatch 'select' tvEvent to component
+      if(tvEvent.eventType === 'select') {
+        this.touchableHandlePress(tvEvent);
+      }
+      // Dispatch tvEvent to all listeners
+      TVEventHandler.dispatchEvent(tvEvent);
+      // Handle next focus
+      if(this._touchableNode) {
+        let nextFocusID = '';
+        // Check nextFocus* properties
+        if(this._touchableNode.hasAttribute("nextFocusUp") && key === 'ArrowUp') {
+          nextFocusID = this._touchableNode.getAttribute("nextFocusUp");
+        }
+        else if(this._touchableNode.hasAttribute("nextFocusRight") && key === 'ArrowRight') {
+          nextFocusID = this._touchableNode.getAttribute("nextFocusRight");
+        }
+        else if(this._touchableNode.hasAttribute("nextFocusDown") && key === 'ArrowDown') {
+          nextFocusID = this._touchableNode.getAttribute("nextFocusDown");
+        }
+        else if(this._touchableNode.hasAttribute("nextFocusLeft") && key === 'ArrowLeft') {
+          nextFocusID = this._touchableNode.getAttribute("nextFocusLeft");
+        }
+        if(nextFocusID && nextFocusID !== '') {
+          // Get DOM element
+          const element = document.getElementById(nextFocusID);
+          if(element && element.tabIndex >= 0) {
+            // Force focus
+            element.focus();
+            // Stop event propagation
+            e.stopPropagation();
+          }
+        }
+      }
+      // Trigger Hardware Back Press for Back/Escape event keys
+      if(type === 'keydown' && (key === 'Back' || key === 'Escape')) {
+        const hwKeyEvent = new CustomEvent("hardwareBackPress", {});
+        document.dispatchEvent(hwKeyEvent);
+      }
+    }
     if (key === 'Enter' || key === ' ') {
       if (type === 'keydown') {
         if (!this._isTouchableKeyboardActive) {

packages/react-native-web/src/exports/TouchableHighlight/index.js

@@ -14,10 +14,14 @@ import type { Props as TouchableWithoutFeedbackProps } from '../TouchableWithout
 import applyNativeMethods from '../../modules/applyNativeMethods';
 import createReactClass from 'create-react-class';
 import ensurePositiveDelayProps from '../Touchable/ensurePositiveDelayProps';
+import findNodeHandle from '../../exports/findNodeHandle';
 import * as React from 'react';
 import StyleSheet from '../StyleSheet';
 import Touchable from '../Touchable';
 import View from '../View';
+import UIManager from '../UIManager';
+import Platform from '../Platform';
+import TVEventHandler from "../TVEventHandler";
 
 type Event = Object;
 type PressEvent = Object;
@@ -169,6 +173,10 @@ const TouchableHighlight = ((createReactClass({
   componentDidMount: function() {
     this._isMounted = true;
     ensurePositiveDelayProps(this.props);
+    // Focus component
+    if(Platform.isTV && this.props.hasTVPreferredFocus === true) {
+      UIManager.focus(findNodeHandle(this));
+    }
   },
 
   componentWillUnmount: function() {
@@ -187,6 +195,15 @@ const TouchableHighlight = ((createReactClass({
   },
   */
 
+  /**
+   * Set focus to current element
+   */
+  setTVPreferredFocus(hasTVPreferredFocus) {
+    if(Platform.isTV && hasTVPreferredFocus === true) {
+      UIManager.focus(findNodeHandle(this));
+    }
+  },
+
   /**
    * `Touchable.Mixin` self callbacks. The mixin will invoke these if they are
    * defined on your component.
@@ -206,11 +223,37 @@ const TouchableHighlight = ((createReactClass({
   },
 
   touchableHandleFocus: function(e: Event) {
-    this.props.onFocus && this.props.onFocus(e);
+    if(Platform.isTV) {
+      this.state.focused = true;
+      // Keep underlay visible
+      this._showUnderlay();
+      // Get tvEvent
+      const tvEvent = TVEventHandler.getTVEvent(e);
+      // Dispatch tvEvent to component
+      this.props.onFocus && this.props.onFocus(tvEvent);
+      // Dispatch tvEvent to all listeners
+      TVEventHandler.dispatchEvent(tvEvent);
+    }
+    else {
+      this.props.onFocus && this.props.onFocus(e);
+    }
   },
 
   touchableHandleBlur: function(e: Event) {
-    this.props.onBlur && this.props.onBlur(e);
+    if(Platform.isTV) {
+      this.state.focused = false;
+      // Hide underlay
+      this._hideUnderlay();
+      // Get tvEvent
+      const tvEvent = TVEventHandler.getTVEvent(e);
+      // Dispatch tvEvent to component
+      this.props.onBlur && this.props.onBlur(tvEvent);
+      // Dispatch tvEvent to all listeners
+      TVEventHandler.dispatchEvent(tvEvent);
+    }
+    else {
+      this.props.onBlur && this.props.onBlur(e);
+    }
   },
 
   touchableHandlePress: function(e: PressEvent) {
@@ -262,6 +305,9 @@ const TouchableHighlight = ((createReactClass({
   _hideUnderlay: function() {
     clearTimeout(this._hideTimeout);
     this._hideTimeout = null;
+    if(Platform.isTV && this.state.focused) {
+      return;
+    }
     if (this.props.testOnly_pressed) {
       return;
     }
@@ -298,7 +344,9 @@ const TouchableHighlight = ((createReactClass({
         onKeyDown={this.touchableHandleKeyEvent}
         //isTVSelectable={true}
         //tvParallaxProperties={this.props.tvParallaxProperties}
-        //hasTVPreferredFocus={this.props.hasTVPreferredFocus}
+        hasTVPreferredFocus={this.props.hasTVPreferredFocus}
+        onFocus={this.touchableHandleFocus}
+        onBlur={this.touchableHandleBlur}
         //nextFocusDown={this.props.nextFocusDown}
         //nextFocusForward={this.props.nextFocusForward}
         //nextFocusLeft={this.props.nextFocusLeft}