react-native-tvos 0.82.0-0rc3 → 0.82.0-0rc5

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -18,7 +18,6 @@ import type {AnimatedNodeConfig} from './AnimatedNode';
 import type AnimatedTracking from './AnimatedTracking';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
-import InteractionManager from '../../Interaction/InteractionManager';
 import AnimatedInterpolation from './AnimatedInterpolation';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
@@ -312,10 +311,6 @@ export default class AnimatedValue extends AnimatedWithChildren {
    * See https://reactnative.dev/docs/animatedvalue#animate
    */
   animate(animation: Animation, callback: ?EndCallback): void {
-    let handle = null;
-    if (animation.__isInteraction) {
-      handle = InteractionManager.createInteractionHandle();
-    }
     const previousAnimation = this._animation;
     this._animation && this._animation.stop();
     this._animation = animation;
@@ -328,9 +323,6 @@ export default class AnimatedValue extends AnimatedWithChildren {
       },
       result => {
         this._animation = null;
-        if (handle !== null) {
-          InteractionManager.clearInteractionHandle(handle);
-        }
         callback && callback(result);
       },
       previousAnimation,

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

@@ -251,7 +251,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';
@@ -287,9 +287,6 @@ function Pressable({
     accessibilityLiveRegion,
     accessibilityLabel,
     accessibilityState: _accessibilityState,
-    focusable:
-      focusable !== false && disabled !== true && ariaDisabled !== true,
-    isTVSelectable: isTVSelectable !== false && accessible !== false,
     accessibilityValue,
     hitSlop,
   };
@@ -376,6 +373,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}
@@ -386,16 +393,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/Switch/Switch.js

@@ -264,7 +264,7 @@ const Switch: component(
       disabled,
       onTintColor: trackColorForTrue,
       style: StyleSheet.compose(
-        {height: 31, width: 51},
+        {alignSelf: 'flex-start' as const},
         StyleSheet.compose(
           style,
           ios_backgroundColor == null

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,25 +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<{
-  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.
@@ -71,8 +52,7 @@ type TouchableHighlightBaseProps = $ReadOnly<{
 
 export type TouchableHighlightProps = $ReadOnly<{
   ...TouchableWithoutFeedbackProps,
-  ...AndroidProps,
-  ...IOSProps,
+  ...TVViewProps,
   ...TouchableHighlightBaseProps,
 }>;
 
@@ -371,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)}
@@ -380,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,53 +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
-   */
-  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.
@@ -366,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.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,52 +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
-   */
-  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.
@@ -82,7 +36,7 @@ type TouchableOpacityBaseProps = $ReadOnly<{
 
 export type TouchableOpacityProps = $ReadOnly<{
   ...TouchableWithoutFeedbackProps,
-  ...TouchableOpacityTVProps,
+  ...TVViewProps,
   ...TouchableOpacityBaseProps,
 }>;
 
@@ -338,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,9 +8,11 @@
  * @format
  */
 
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ViewProps} from './ViewPropTypes';
 
 import TextAncestorContext from '../../Text/TextAncestorContext';
+import Platform from '../../Utilities/Platform';
 import useMergeRefs from '../../Utilities/useMergeRefs';
 import ViewNativeComponent from './ViewNativeComponent';
 import {Commands} from './ViewNativeComponent';
@@ -59,6 +61,8 @@ component View(
   const {
     accessibilityState,
     accessibilityValue,
+    isTVSelectable,
+    focusable,
     'aria-busy': ariaBusy,
     'aria-checked': ariaChecked,
     'aria-disabled': ariaDisabled,
@@ -141,6 +145,14 @@ component View(
     };
   }
 
+  if (Platform.OS === 'ios') {
+    processedProps.isTVSelectable = focusable ?? isTVSelectable ?? false;
+    delete processedProps.focusable;
+  } else {
+    processedProps.focusable = focusable ?? false;
+    delete processedProps.isTVSelectable;
+  }
+
   const actualView =
     ref == null ? (
       <ViewNativeComponent {...processedProps} />

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

@@ -26,52 +26,92 @@ import {Touchable} from '../Touchable/Touchable';
 import {AccessibilityProps} from './ViewAccessibility';
 import type {BubblingEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
 
-export interface TVViewPropsIOS {
+export type TVParallaxProperties = {
   /**
-   * *(Apple TV only)* When set to true, this view will be focusable
-   * and navigable using the Apple TV remote.
+   * 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;
+};
+
+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 and Android TV)* 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
+   * 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.
    *
@@ -86,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.
    *
@@ -109,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
@@ -132,6 +153,7 @@ export interface ViewPropsAndroid {
 export interface ViewProps
   extends ViewPropsAndroid,
     ViewPropsIOS,
+    TVViewProps,
     GestureResponderHandlers,
     Touchable,
     PointerEvents,