react-native-tvos 0.81.4-0 → 0.82.0-0

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/TextInput/TextInput.flow.js

@@ -18,6 +18,7 @@ import type {
 } from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
+import ReactNativeElement from '../../../src/private/webapis/dom/nodes/ReactNativeElement';
 import {type ColorValue, type TextStyleProp} from '../../StyleSheet/StyleSheet';
 import * as React from 'react';
 
@@ -1037,13 +1038,19 @@ export type TextInputProps = $ReadOnly<{
   ...TextInputBaseProps,
 }>;
 
-export interface TextInputInstance extends HostInstance {
-  +clear: () => void;
-  +isFocused: () => boolean;
-  +getNativeRef: () => ?HostInstance;
-  +setSelection: (start: number, end: number) => void;
+/**
+ * TextInput monkey-patches the native element instance with these methods.
+ * It isn't technically a class but this is the most elegant way to type it.
+ */
+declare class _TextInputInstance extends ReactNativeElement {
+  clear(): void;
+  isFocused(): boolean;
+  getNativeRef(): ?ReactNativeElement;
+  setSelection(start: number, end: number): void;
 }
 
+export type TextInputInstance = _TextInputInstance;
+
 /**
  * A foundational component for inputting text into the app via a
  * keyboard. Props provide configurability for several features, such as

package/Libraries/Components/TextInput/TextInput.js

@@ -488,7 +488,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
     [mostRecentEventCount, viewCommands],
   );
 
-  // $FlowExpectedError[incompatible-call]
+  // $FlowExpectedError[incompatible-type]
   const ref = useMergeRefs<HostInstance>(setLocalRef, props.forwardedRef);
 
   const _onChange = (event: TextInputChangeEvent) => {
@@ -648,7 +648,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
     if (typeof flattenedStyle?.fontWeight === 'number') {
       overrides = overrides || ({}: {...TextStyleInternal});
       overrides.fontWeight =
-        // $FlowFixMe[incompatible-cast]
+        // $FlowFixMe[incompatible-type]
         (flattenedStyle.fontWeight.toString(): TextStyleInternal['fontWeight']);
     }
 
@@ -685,6 +685,9 @@ function InternalTextInput(props: TextInputProps): React.Node {
       );
     }
 
+    const _accessibilityElementsHidden =
+      props['aria-hidden'] ?? props.accessibilityElementsHidden;
+
     textInput = (
       <RCTTextInputView
         // Figure out imperative + forward refs.
@@ -694,6 +697,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
         acceptDragAndDropTypes={props.experimental_acceptDragAndDropTypes}
         accessibilityLabel={_accessibilityLabel}
         accessibilityState={_accessibilityState}
+        accessibilityElementsHidden={_accessibilityElementsHidden}
         accessible={accessible}
         submitBehavior={submitBehavior}
         caretHidden={caretHidden}
@@ -722,6 +726,10 @@ function InternalTextInput(props: TextInputProps): React.Node {
     const autoCapitalize = props.autoCapitalize || 'sentences';
     const _accessibilityLabelledBy =
       props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy;
+    const _importantForAccessibility =
+      props['aria-hidden'] === true
+        ? ('no-hide-descendants' as const)
+        : undefined;
     const placeholder = props.placeholder ?? '';
     let children = props.children;
     const childCount = React.Children.count(children);
@@ -767,6 +775,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
         children={children}
         disableFullscreenUI={props.disableFullscreenUI}
         focusable={tabIndex !== undefined ? !tabIndex : focusable}
+        importantForAccessibility={_importantForAccessibility}
         mostRecentEventCount={mostRecentEventCount}
         nativeID={id ?? props.nativeID}
         numberOfLines={props.rows ?? props.numberOfLines}
@@ -776,7 +785,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
         /* $FlowFixMe[prop-missing] the types for AndroidTextInput don't match
          * up exactly with the props for TextInput. This will need to get fixed
          */
-        /* $FlowFixMe[incompatible-type-arg] the types for AndroidTextInput
+        /* $FlowFixMe[incompatible-type] the types for AndroidTextInput
          * don't match up exactly with the props for TextInput. This will need
          * to get fixed */
         onScroll={_onScroll}
@@ -928,8 +937,8 @@ const TextInput: component(
         Platform.OS === 'android'
           ? // $FlowFixMe[invalid-computed-prop]
             // $FlowFixMe[prop-missing]
-            autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
-            autoComplete
+            (autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
+            autoComplete)
           : undefined
       }
       textContentType={

package/Libraries/Components/TextInput/TextInputState.js

@@ -88,7 +88,7 @@ function focusTextInput(textField: ?HostInstance) {
   if (textField != null) {
     const fieldCanBeFocused =
       currentlyFocusedInputRef !== textField &&
-      // $FlowFixMe - `currentProps` is missing in `NativeMethods`
+      // $FlowFixMe[prop-missing] - `currentProps` is missing in `NativeMethods`
       textField.currentProps?.editable !== false;
 
     if (!fieldCanBeFocused) {

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -138,7 +138,7 @@ class TouchableBounce extends React.Component<
     const accessibilityLiveRegion =
       this.props['aria-live'] === 'off'
         ? 'none'
-        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+        : (this.props['aria-live'] ?? this.props.accessibilityLiveRegion);
     const _accessibilityState = {
       busy: this.props['aria-busy'] ?? this.props.accessibilityState?.busy,
       checked:

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,
 }>;
 
@@ -340,7 +317,7 @@ class TouchableHighlightImpl extends React.Component<
     const accessibilityLiveRegion =
       this.props['aria-live'] === 'off'
         ? 'none'
-        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+        : (this.props['aria-live'] ?? this.props.accessibilityLiveRegion);
 
     const accessibilityLabel =
       this.props['aria-label'] ?? this.props.accessibilityLabel;
@@ -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.
@@ -333,7 +289,7 @@ class TouchableNativeFeedback extends React.Component<
     const accessibilityLiveRegion =
       this.props['aria-live'] === 'off'
         ? 'none'
-        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+        : (this.props['aria-live'] ?? this.props.accessibilityLiveRegion);
 
     const accessibilityLabel =
       this.props['aria-label'] ?? this.props.accessibilityLabel;
@@ -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,
 }>;
 
@@ -301,7 +254,7 @@ class TouchableOpacity extends React.Component<
     const accessibilityLiveRegion =
       this.props['aria-live'] === 'off'
         ? 'none'
-        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+        : (this.props['aria-live'] ?? this.props.accessibilityLiveRegion);
 
     const accessibilityLabel =
       this.props['aria-label'] ?? this.props.accessibilityLabel;
@@ -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/Touchable/TouchableWithoutFeedback.js

@@ -193,7 +193,7 @@ export default function TouchableWithoutFeedback(
       disabled:
         disabled !== null
           ? disabled
-          : ariaDisabled ?? accessibilityState?.disabled,
+          : (ariaDisabled ?? accessibilityState?.disabled),
       hitSlop: hitSlop,
       delayLongPress: delayLongPress,
       delayPressIn: delayPressIn,
@@ -276,7 +276,7 @@ export default function TouchableWithoutFeedback(
         ? 'no-hide-descendants'
         : props.importantForAccessibility,
     accessibilityLiveRegion:
-      ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion,
+      ariaLive === 'off' ? 'none' : (ariaLive ?? props.accessibilityLiveRegion),
     nativeID: props.id ?? props.nativeID,
   };
 
@@ -286,6 +286,6 @@ export default function TouchableWithoutFeedback(
     }
   }
 
-  // $FlowFixMe[incompatible-call]
+  // $FlowFixMe[incompatible-type]
   return cloneElement(element, elementProps, ...children);
 }