react-native-tvos 0.81.3-0 → 0.81.4-1

package/Libraries/Components/Button.js

@@ -63,7 +63,6 @@ export type ButtonProps = $ReadOnly<{
     @platform tv
 
     @default false
-    @deprecated Use `focusable` instead
    */
   hasTVPreferredFocus?: ?boolean,
 

package/Libraries/Components/Pressable/Pressable.d.ts

@@ -20,7 +20,7 @@ import {
 import {View} from '../View/View';
 import {AccessibilityProps} from '../View/ViewAccessibility';
 import {ViewProps} from '../View/ViewPropTypes';
-import {TVParallaxProperties} from '../../../types/index';
+import {TVParallaxProperties} from '../TV/TVParallaxProperties';
 
 export interface PressableStateCallbackType {
   readonly pressed: boolean;

package/Libraries/Components/Pressable/Pressable.js

@@ -244,7 +244,7 @@ function Pressable({
   const android_rippleConfig = useAndroidRippleForView(android_ripple, viewRef);
 
   const [pressed, setPressed] = usePressState(testOnly_pressed === true);
-  const [focused, setFocused] = usePressState(false);
+  const [focused, setFocused] = useState(false);
 
   const shouldUpdatePressed =
     typeof children === 'function' || typeof style === 'function';
@@ -280,9 +280,6 @@ function Pressable({
     accessibilityLiveRegion,
     accessibilityLabel,
     accessibilityState: _accessibilityState,
-    focusable:
-      focusable !== false && disabled !== true && ariaDisabled !== true,
-    isTVSelectable: isTVSelectable !== false && accessible !== false,
     accessibilityValue,
     hitSlop,
   };
@@ -367,6 +364,16 @@ function Pressable({
 
   const eventHandlers = usePressability(config);
 
+  const computedStyle = useMemo(() => {
+    return typeof style === 'function' ? style({pressed, focused}) : style;
+  }, [pressed, focused, style]);
+
+  const computedChildren = useMemo(() => {
+    return typeof children === 'function'
+      ? children({pressed, focused})
+      : children;
+  }, [pressed, focused, children]);
+
   return (
     <View
       {...restPropsWithDefaults}
@@ -377,16 +384,11 @@ function Pressable({
       nextFocusLeft={tagForComponentOrHandle(props.nextFocusLeft)}
       nextFocusRight={tagForComponentOrHandle(props.nextFocusRight)}
       nextFocusUp={tagForComponentOrHandle(props.nextFocusUp)}
-      isTVSelectable={
-        isTVSelectable !== false &&
-        accessible !== false &&
-        disabled !== true &&
-        ariaDisabled !== true
-      }
-      style={typeof style === 'function' ? style({pressed, focused}) : style}
+      focusable={focusable !== false && isTVSelectable !== false}
+      style={computedStyle}
       tvParallaxProperties={tvParallaxProperties}
       collapsable={false}>
-      {typeof children === 'function' ? children({pressed, focused}) : children}
+      {computedChildren}
       {__DEV__ ? <PressabilityDebugView color="red" hitSlop={hitSlop} /> : null}
     </View>
   );

package/Libraries/Components/TV/TVParallaxProperties.d.ts

@@ -0,0 +1,42 @@
+export type TVParallaxProperties = {
+  /**
+   * If true, parallax effects are enabled.  Defaults to true.
+   */
+  enabled?: boolean | undefined,
+
+  /**
+   * Defaults to 2.0.
+   */
+  shiftDistanceX?: number | undefined,
+
+  /**
+   * Defaults to 2.0.
+   */
+  shiftDistanceY?: number | undefined,
+
+  /**
+   * Defaults to 0.05.
+   */
+  tiltAngle?: number | undefined,
+
+  /**
+   * Defaults to 1.0
+   */
+  magnification?: number | undefined,
+
+  /**
+   * Defaults to 1.0
+   */
+  pressMagnification?: number | undefined,
+
+  /**
+   * Defaults to 0.3
+   */
+  pressDuration?: number | undefined,
+
+  /**
+   * @deprecated No longer used
+   */
+  pressDelay?: number | undefined,
+};
+

package/Libraries/Components/TV/TVViewPropTypes.js

@@ -53,30 +53,36 @@ export type TVParallaxPropertiesType = $ReadOnly<{|
 |}>;
 
 /**
- * Additional View properties for Apple TV
+ * These props are for both Apple TV and Android TV.
+ * TODO: update `@react-native/eslint-plugin` so that the
+ * name can be changed to TVViewProps
  */
 export type TVViewProps = $ReadOnly<{|
   /**
-   * *(Apple TV only)* When set to true, this view will be focusable
-   * and navigable using the Apple TV remote.
+   * @deprecated Replaced by `focusable`.
    *
    * @platform ios
    */
-  isTVSelectable?: boolean,
+  isTVSelectable?: ?boolean,
 
   /**
-   * *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view.
+   * Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.
    *
-   * @platform ios
    */
-  hasTVPreferredFocus?: boolean,
+  focusable?: ?boolean,
+
+  /**
+   * May be set to true to force the focus engine to move focus to this view.
+   *
+   */
+  hasTVPreferredFocus?: ?boolean,
 
   /**
    * *(Apple TV only)* Object with properties to control Apple TV parallax effects.
    *
    * @platform ios
    */
-  tvParallaxProperties?: TVParallaxPropertiesType,
+  tvParallaxProperties?: ?TVParallaxPropertiesType,
 
   /**
    * Additional properties needed for flow checks on TVFocusGuideView
@@ -87,4 +93,35 @@ export type TVViewProps = $ReadOnly<{|
   safePadding?: string | null,
   onPressIn?: (event: any) => void,
   onPressOut?: (event: any) => void,
+
+  /**
+   * TV next focus forward (see documentation for the View component).
+   *
+   * @platform android
+   */
+  nextFocusForward?: ?number,
+
+  /**
+   * TV next focus down (see documentation for the View component).
+   *
+   */
+  nextFocusDown?: ?number,
+
+  /**
+   * TV next focus left (see documentation for the View component).
+   *
+   */
+  nextFocusLeft?: ?number,
+
+  /**
+   * TV next focus right (see documentation for the View component).
+   *
+   */
+  nextFocusRight?: ?number,
+
+  /**
+   * TV next focus up (see documentation for the View component).
+   *
+   */
+  nextFocusUp?: ?number,
 |}>;

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -9,7 +9,7 @@
  */
 
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
+import type {TVViewProps} from '../TV/TVViewPropTypes';
 import type {AccessibilityState} from '../View/ViewAccessibility';
 import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
@@ -24,28 +24,6 @@ import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import * as React from 'react';
 import {cloneElement} from 'react';
 
-type AndroidProps = $ReadOnly<{
-  nextFocusDown?: ?number,
-  nextFocusForward?: ?number,
-  nextFocusLeft?: ?number,
-  nextFocusRight?: ?number,
-  nextFocusUp?: ?number,
-}>;
-
-type IOSProps = $ReadOnly<{
-  /**
-   * @deprecated Use `focusable` instead
-   */
-  hasTVPreferredFocus?: ?boolean,
-  isTVSelectable?: ?boolean,
-  tvParallaxProperties?: TVParallaxPropertiesType,
-  nextFocusDown?: ?number,
-  nextFocusForward?: ?number,
-  nextFocusLeft?: ?number,
-  nextFocusRight?: ?number,
-  nextFocusUp?: ?number,
-}>;
-
 type TouchableHighlightBaseProps = $ReadOnly<{
   /**
    * Determines what the opacity of the wrapped view should be when touch is active.
@@ -74,8 +52,7 @@ type TouchableHighlightBaseProps = $ReadOnly<{
 
 export type TouchableHighlightProps = $ReadOnly<{
   ...TouchableWithoutFeedbackProps,
-  ...AndroidProps,
-  ...IOSProps,
+  ...TVViewProps,
   ...TouchableHighlightBaseProps,
 }>;
 
@@ -374,8 +351,9 @@ class TouchableHighlightImpl extends React.Component<
         onLayout={this.props.onLayout}
         hitSlop={this.props.hitSlop}
         hasTVPreferredFocus={this.props.hasTVPreferredFocus === true}
-        isTVSelectable={
-          this.props.isTVSelectable !== false && this.props.accessible !== false
+        focusable={
+          this.props.focusable !== false &&
+          this.props.isTVSelectable !== false
         }
         tvParallaxProperties={this.props.tvParallaxProperties}
         nextFocusDown={tagForComponentOrHandle(this.props.nextFocusDown)}
@@ -383,11 +361,6 @@ class TouchableHighlightImpl extends React.Component<
         nextFocusLeft={tagForComponentOrHandle(this.props.nextFocusLeft)}
         nextFocusRight={tagForComponentOrHandle(this.props.nextFocusRight)}
         nextFocusUp={tagForComponentOrHandle(this.props.nextFocusUp)}
-        focusable={
-          this.props.focusable !== false &&
-          this.props.onPress !== undefined &&
-          !this.props.disabled
-        }
         nativeID={this.props.id ?? this.props.nativeID}
         testID={this.props.testID}
         ref={this.props.hostRef}

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -9,6 +9,7 @@
  */
 
 import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
+import type {TVViewProps} from '../TV/TVViewPropTypes';
 import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
 import View from '../../Components/View/View';
@@ -25,54 +26,9 @@ import invariant from 'invariant';
 import * as React from 'react';
 import {cloneElement} from 'react';
 
-type TouchableNativeFeedbackTVProps = {
-  /**
-   * *(Apple TV only)* TV preferred focus (see documentation for the View component).
-   *
-   * @platform ios
-   * @deprecated Use `focusable` instead
-   */
-  hasTVPreferredFocus?: ?boolean,
-
-  /**
-   * Designates the next view to receive focus when the user navigates down. See the Android documentation.
-   *
-   * @platform android
-   */
-  nextFocusDown?: ?number,
-
-  /**
-   * Designates the next view to receive focus when the user navigates forward. See the Android documentation.
-   *
-   * @platform android
-   */
-  nextFocusForward?: ?number,
-
-  /**
-   * Designates the next view to receive focus when the user navigates left. See the Android documentation.
-   *
-   * @platform android
-   */
-  nextFocusLeft?: ?number,
-
-  /**
-   * Designates the next view to receive focus when the user navigates right. See the Android documentation.
-   *
-   * @platform android
-   */
-  nextFocusRight?: ?number,
-
-  /**
-   * Designates the next view to receive focus when the user navigates up. See the Android documentation.
-   *
-   * @platform android
-   */
-  nextFocusUp?: ?number,
-};
-
 export type TouchableNativeFeedbackProps = $ReadOnly<{
   ...TouchableWithoutFeedbackProps,
-  ...TouchableNativeFeedbackTVProps,
+  ...TVViewProps,
   /**
    * Determines the type of background drawable that's going to be used to display feedback.
    * It takes an object with type property and extra data depending on the type.
@@ -367,16 +323,15 @@ class TouchableNativeFeedback extends React.Component<
           this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden,
         hasTVPreferredFocus: this.props.hasTVPreferredFocus,
         hitSlop: this.props.hitSlop,
-        focusable:
-          this.props.focusable !== false &&
-          this.props.onPress !== undefined &&
-          !this.props.disabled,
         nativeID: this.props.id ?? this.props.nativeID,
         nextFocusDown: tagForComponentOrHandle(this.props.nextFocusDown),
         nextFocusForward: tagForComponentOrHandle(this.props.nextFocusForward),
         nextFocusLeft: tagForComponentOrHandle(this.props.nextFocusLeft),
         nextFocusRight: tagForComponentOrHandle(this.props.nextFocusRight),
         nextFocusUp: tagForComponentOrHandle(this.props.nextFocusUp),
+        focusable:
+          this.props.focusable !== false &&
+          this.props.isTVSelectable !== false,
         onLayout: this.props.onLayout,
         testID: this.props.testID,
       },

package/Libraries/Components/Touchable/TouchableOpacity.d.ts

@@ -16,7 +16,6 @@ export interface TVProps {
    * *(Apple TV only)* TV preferred focus (see documentation for the View component).
    *
    * @platform ios
-   * @deprecated Use `focusable` instead
    */
   hasTVPreferredFocus?: boolean | undefined;
 

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -9,7 +9,7 @@
  */
 
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
+import type {TVViewProps} from '../TV/TVViewPropTypes';
 import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
 import Animated from '../../Animated/Animated';
@@ -23,53 +23,6 @@ import Platform from '../../Utilities/Platform';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import * as React from 'react';
 
-export type TouchableOpacityTVProps = $ReadOnly<{
-  /**
-   * *(Apple TV only)* TV preferred focus (see documentation for the View component).
-   *
-   * @platform ios
-   * @deprecated Use `focusable` instead
-   */
-  hasTVPreferredFocus?: ?boolean,
-  isTVSelectable?: ?boolean,
-  tvParallaxProperties?: TVParallaxPropertiesType,
-
-  /**
-   * Designates the next view to receive focus when the user navigates down. See the Android documentation.
-   *
-   * @platform android
-   */
-  nextFocusDown?: ?number,
-
-  /**
-   * Designates the next view to receive focus when the user navigates forward. See the Android documentation.
-   *
-   * @platform android
-   */
-  nextFocusForward?: ?number,
-
-  /**
-   * Designates the next view to receive focus when the user navigates left. See the Android documentation.
-   *
-   * @platform android
-   */
-  nextFocusLeft?: ?number,
-
-  /**
-   * Designates the next view to receive focus when the user navigates right. See the Android documentation.
-   *
-   * @platform android
-   */
-  nextFocusRight?: ?number,
-
-  /**
-   * Designates the next view to receive focus when the user navigates up. See the Android documentation.
-   *
-   * @platform android
-   */
-  nextFocusUp?: ?number,
-}>;
-
 type TouchableOpacityBaseProps = $ReadOnly<{
   /**
    * Determines what the opacity of the wrapped view should be when touch is active.
@@ -83,7 +36,7 @@ type TouchableOpacityBaseProps = $ReadOnly<{
 
 export type TouchableOpacityProps = $ReadOnly<{
   ...TouchableWithoutFeedbackProps,
-  ...TouchableOpacityTVProps,
+  ...TVViewProps,
   ...TouchableOpacityBaseProps,
 }>;
 
@@ -339,16 +292,12 @@ class TouchableOpacity extends React.Component<
         nextFocusRight={tagForComponentOrHandle(this.props.nextFocusRight)}
         nextFocusUp={tagForComponentOrHandle(this.props.nextFocusUp)}
         hasTVPreferredFocus={this.props.hasTVPreferredFocus === true}
-        isTVSelectable={
-          this.props.isTVSelectable !== false && this.props.accessible !== false
-        }
-        tvParallaxProperties={this.props.tvParallaxProperties}
-        hitSlop={this.props.hitSlop}
         focusable={
           this.props.focusable !== false &&
-          this.props.onPress !== undefined &&
-          !this.props.disabled
+          this.props.isTVSelectable !== false
         }
+        tvParallaxProperties={this.props.tvParallaxProperties}
+        hitSlop={this.props.hitSlop}
         // $FlowFixMe[prop-missing]
         ref={this.props.hostRef}
         {...eventHandlers}>

package/Libraries/Components/View/View.js

@@ -8,10 +8,12 @@
  * @format
  */
 
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ViewProps} from './ViewPropTypes';
 
 import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import TextAncestorContext from '../../Text/TextAncestorContext';
+import Platform from '../../Utilities/Platform';
 import useMergeRefs from '../../Utilities/useMergeRefs';
 import ViewNativeComponent from './ViewNativeComponent';
 import {Commands} from './ViewNativeComponent';
@@ -62,6 +64,8 @@ component View(
     const {
       accessibilityState,
       accessibilityValue,
+      isTVSelectable,
+      focusable,
       'aria-busy': ariaBusy,
       'aria-checked': ariaChecked,
       'aria-disabled': ariaDisabled,
@@ -144,6 +148,14 @@ component View(
       };
     }
 
+    if (Platform.OS === 'ios') {
+      processedProps.isTVSelectable = focusable ?? isTVSelectable ?? false;
+      delete processedProps.focusable;
+    } else {
+      processedProps.focusable = focusable ?? false;
+      delete processedProps.isTVSelectable;
+    }
+
     actualView =
       ref == null ? (
         <ViewNativeComponent {...processedProps} />
@@ -211,6 +223,13 @@ component View(
           }
         : undefined;
 
+    const modifiedIsTVSelectable = Platform.OS === 'ios' ?
+                                     (focusable ?? isTVSelectable ?? false) :
+                                     undefined;
+    const modifiedFocusable = Platform.OS === 'android' ?
+                                (focusable ?? false) :
+                                undefined;
+    
     actualView = (
       <ViewNativeComponent
         {...otherProps}
@@ -218,7 +237,8 @@ component View(
           ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
         }
         accessibilityLabel={ariaLabel ?? accessibilityLabel}
-        focusable={tabIndex !== undefined ? !tabIndex : focusable}
+        focusable={tabIndex !== undefined ? !tabIndex : modifiedFocusable}
+        isTVSelectable={tabIndex !== undefined ? !tabIndex : modifiedIsTVSelectable}
         accessibilityState={_accessibilityState}
         accessibilityElementsHidden={ariaHidden ?? accessibilityElementsHidden}
         accessibilityLabelledBy={_accessibilityLabelledBy}

package/Libraries/Components/View/ViewPropTypes.d.ts

@@ -26,56 +26,92 @@ import {Touchable} from '../Touchable/Touchable';
 import {AccessibilityProps} from './ViewAccessibility';
 import type {BubblingEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
 
-/**
- * @deprecated These properties are not implemented natively.
- */
-export interface TVViewPropsIOS {
+export type TVParallaxProperties = {
+  /**
+   * If true, parallax effects are enabled.  Defaults to true.
+   */
+  enabled?: boolean | undefined;
+
+  /**
+   * Defaults to 2.0.
+   */
+  shiftDistanceX?: number | undefined;
+
+  /**
+   * Defaults to 2.0.
+   */
+  shiftDistanceY?: number | undefined;
+
+  /**
+   * Defaults to 0.05.
+   */
+  tiltAngle?: number | undefined;
+
+  /**
+   * Defaults to 1.0
+   */
+  magnification?: number | undefined;
+
+  /**
+   * Defaults to 1.0
+   */
+  pressMagnification?: number | undefined;
+
+  /**
+   * Defaults to 0.3
+   */
+  pressDuration?: number | undefined;
+
   /**
-   * *(Apple TV only)* When set to true, this view will be focusable
-   * and navigable using the Apple TV remote.
+   * @deprecated No longer used
+   */
+  pressDelay?: number | undefined;
+};
+
+export interface TVViewProps {
+  /**
+   * Callback that is called when the view is blurred.
    *
-   * @platform ios
+   * Note: This will only be called if the view is focusable.
    */
-  isTVSelectable?: boolean | undefined;
+  onBlur?: ((e: BlurEvent) => void) | null | undefined;
 
   /**
-   * *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view.
+   * Callback that is called when the view is focused.
    *
-   * @platform ios
-   * @deprecated Use `focusable` instead
+   * Note: This will only be called if the view is focusable.
    */
-  hasTVPreferredFocus?: boolean | undefined;
+  onFocus?: ((e: FocusEvent) => void) | null | undefined;
 
   /**
-   * *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus.  Defaults to 2.0.
+   * @deprecated Replaced by `focusable`.
    *
    * @platform ios
    */
-  tvParallaxShiftDistanceX?: number | undefined;
+  isTVSelectable?: boolean | undefined;
 
   /**
-   * *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus.  Defaults to 2.0.
+   * *(Apple TV and Android TV)* May be set to true to force the Apple TV focus engine to move focus to this view.
    *
    * @platform ios
    */
-  tvParallaxShiftDistanceY?: number | undefined;
+  hasTVPreferredFocus?: boolean | undefined;
 
   /**
-   * *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus.  Defaults to 0.05.
+   * Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.
    *
-   * @platform ios
    */
-  tvParallaxTiltAngle?: number | undefined;
+  focusable?: boolean | undefined;
 
   /**
-   * *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus.  Defaults to 1.0.
+   * *(Apple TV only)* Object with properties to control Apple TV parallax effects.
    *
    * @platform ios
    */
-  tvParallaxMagnification?: number | undefined;
+  tvParallaxProperties?: TVParallaxProperties | undefined;
 }
 
-export interface ViewPropsIOS extends TVViewPropsIOS {
+export interface ViewPropsIOS {
   /**
    * Whether this view should be rendered as a bitmap before compositing.
    *
@@ -90,20 +126,6 @@ export interface ViewPropsIOS extends TVViewPropsIOS {
 }
 
 export interface ViewPropsAndroid {
-  /**
-   * Callback that is called when the view is blurred.
-   *
-   * Note: This will only be called if the view is focusable.
-   */
-  onBlur?: ((e: BlurEvent) => void) | null | undefined;
-
-  /**
-   * Callback that is called when the view is focused.
-   *
-   * Note: This will only be called if the view is focusable.
-   */
-  onFocus?: ((e: FocusEvent) => void) | null | undefined;
-
   /**
    * Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.
    *
@@ -113,11 +135,6 @@ export interface ViewPropsAndroid {
    */
   renderToHardwareTextureAndroid?: boolean | undefined;
 
-  /**
-   * Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.
-   */
-  focusable?: boolean | undefined;
-
   /**
    * Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.
    * See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
@@ -136,6 +153,7 @@ export interface ViewPropsAndroid {
 export interface ViewProps
   extends ViewPropsAndroid,
     ViewPropsIOS,
+    TVViewProps,
     GestureResponderHandlers,
     Touchable,
     PointerEvents,