Add support for hasTVPreferredFocus on Android TV devices

facebook · Nov 9, 2017 · 8d89d89 · 8d89d89
1 parent eff8386
commit 8d89d89
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 21 deletions.
diff --git a/Libraries/Components/AppleTV/TVViewPropTypes.js b/Libraries/Components/AppleTV/TVViewPropTypes.js
@@ -17,17 +17,13 @@ var PropTypes = require('prop-types');
  */
 var 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,
 

diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
@@ -55,6 +55,7 @@ class Button extends React.Component<{
   title: string,
   onPress: () => any,
   color?: ?string,
+  hasTVPreferredFocus?: ?boolean,
   accessibilityLabel?: ?string,
   disabled?: ?boolean,
   testID?: ?string,
@@ -76,6 +77,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
      */
@@ -93,6 +98,7 @@ class Button extends React.Component<{
       onPress,
       title,
       disabled,
+      hasTVPreferredFocus,
       testID,
     } = this.props;
     const buttonStyles = [styles.button];
@@ -123,6 +129,7 @@ class Button extends React.Component<{
         accessibilityTraits={accessibilityTraits}
         testID={testID}
         disabled={disabled}
+        hasTVPreferredFocus={hasTVPreferredFocus}
         onPress={onPress}>
         <View style={buttonStyles}>
           <Text style={textStyles} disabled={disabled}>{formattedTitle}</Text>

diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js
@@ -84,6 +84,11 @@ var 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
@@ -248,6 +253,8 @@ var 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,

diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js
@@ -129,6 +129,10 @@ var TouchableOpacity = createReactClass({
      * active. Defaults to 0.2.
      */
     activeOpacity: PropTypes.number,
+    /**
+     * TV preferred focus (see documentation for the View component).
+     */
+    hasTVPreferredFocus: PropTypes.bool,
     /**
      * Apple TV parallax effects
      */
@@ -246,6 +250,7 @@ var TouchableOpacity = createReactClass({
         testID={this.props.testID}
         onLayout={this.props.onLayout}
         isTVSelectable={true}
+        hasTVPreferredFocus={this.props.hasTVPreferredFocus}
         tvParallaxProperties={this.props.tvParallaxProperties}
         hitSlop={this.props.hitSlop}
         onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}

diff --git a/Libraries/Components/View/PlatformViewPropTypes.android.js b/Libraries/Components/View/PlatformViewPropTypes.android.js
diff --git a/...ponents/View/PlatformViewPropTypes.ios.js → .../Components/View/PlatformViewPropTypes.js b/...ponents/View/PlatformViewPropTypes.ios.js → .../Components/View/PlatformViewPropTypes.js
@@ -13,7 +13,7 @@
 const Platform = require('Platform');
 
 var TVViewPropTypes = {};
-if (Platform.isTVOS) {
+if (Platform.isTV) {
   TVViewPropTypes = require('TVViewPropTypes');
 }
 

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java
@@ -52,6 +52,15 @@ public void setAccessible(ReactViewGroup view, boolean accessible) {
     view.setFocusable(accessible);
   }
 
+  @ReactProp(name = "hasTVPreferredFocus")
+  public void setTVPreferredFocus(ReactViewGroup view, boolean hasTVPreferredFocus) {
+    if (hasTVPreferredFocus) {
+      view.setFocusable(true);
+      view.setFocusableInTouchMode(true);
+      view.requestFocus();
+    }
+  }
+
   @ReactPropGroup(names = {
       ViewProps.BORDER_RADIUS,
       ViewProps.BORDER_TOP_LEFT_RADIUS,