@react-native-oh/react-native-harmony 0.72.82 → 0.77.18-1

package/Libraries/Components/Touchable/{TouchableNativeFeedback.harmony.js → TouchableNativeFeedback.js}

@@ -8,22 +8,23 @@
  * @format
  */
 
-// RNOH patch: disable view flattening
+import type {PressEvent} from '../../Types/CoreEventTypes';
+import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
 
-import type { PressEvent } from "react-native/Libraries/Types/CoreEventTypes";
-import typeof TouchableWithoutFeedback from "./TouchableWithoutFeedback";
-
-import View from "react-native/Libraries/Components/View/View";
+import View from '../../Components/View/View';
 import Pressability, {
   type PressabilityConfig,
-} from "react-native/Libraries/Pressability/Pressability";
-import { PressabilityDebugView } from "react-native/Libraries/Pressability/PressabilityDebug";
-import { findHostInstance_DEPRECATED } from "react-native/Libraries/ReactNative/RendererProxy";
-import processColor from "react-native/Libraries/StyleSheet/processColor";
-import Platform from "react-native/Libraries/Utilities/Platform";
-import { Commands } from "react-native/Libraries/Components/View/ViewNativeComponent";
-import invariant from "invariant";
-import * as React from "react";
+} from '../../Pressability/Pressability';
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import {findHostInstance_DEPRECATED} from '../../ReactNative/RendererProxy';
+import processColor from '../../StyleSheet/processColor';
+import Platform from '../../Utilities/Platform';
+import {Commands} from '../View/ViewNativeComponent';
+import TouchableNativeFeedbackDelegate from './delegates/TouchableNativeFeedbackDelegate';
+import invariant from 'invariant';
+import * as React from 'react';
+
+const DELEGATE = new TouchableNativeFeedbackDelegate({});
 
 type Props = $ReadOnly<{|
   ...React.ElementConfig<TouchableWithoutFeedback>,
@@ -36,14 +37,14 @@ type Props = $ReadOnly<{|
    */
   background?: ?(
     | $ReadOnly<{|
-        type: "ThemeAttrAndroid",
+        type: 'ThemeAttrAndroid',
         attribute:
-          | "selectableItemBackground"
-          | "selectableItemBackgroundBorderless",
+          | 'selectableItemBackground'
+          | 'selectableItemBackgroundBorderless',
         rippleRadius: ?number,
       |}>
     | $ReadOnly<{|
-        type: "RippleAndroid",
+        type: 'RippleAndroid',
         color: ?number,
         borderless: boolean,
         rippleRadius: ?number,
@@ -103,12 +104,12 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
    * default background for selectable elements.
    */
   static SelectableBackground: (rippleRadius: ?number) => $ReadOnly<{|
-    attribute: "selectableItemBackground",
-    type: "ThemeAttrAndroid",
+    attribute: 'selectableItemBackground',
+    type: 'ThemeAttrAndroid',
     rippleRadius: ?number,
   |}> = (rippleRadius: ?number) => ({
-    type: "ThemeAttrAndroid",
-    attribute: "selectableItemBackground",
+    type: 'ThemeAttrAndroid',
+    attribute: 'selectableItemBackground',
     rippleRadius,
   });
 
@@ -117,12 +118,12 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
    * default background for borderless selectable elements. Requires API 21+.
    */
   static SelectableBackgroundBorderless: (rippleRadius: ?number) => $ReadOnly<{|
-    attribute: "selectableItemBackgroundBorderless",
-    type: "ThemeAttrAndroid",
+    attribute: 'selectableItemBackgroundBorderless',
+    type: 'ThemeAttrAndroid',
     rippleRadius: ?number,
   |}> = (rippleRadius: ?number) => ({
-    type: "ThemeAttrAndroid",
-    attribute: "selectableItemBackgroundBorderless",
+    type: 'ThemeAttrAndroid',
+    attribute: 'selectableItemBackgroundBorderless',
     rippleRadius,
   });
 
@@ -134,20 +135,21 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
   static Ripple: (
     color: string,
     borderless: boolean,
-    rippleRadius: ?number
+    rippleRadius: ?number,
   ) => $ReadOnly<{|
     borderless: boolean,
     color: ?number,
     rippleRadius: ?number,
-    type: "RippleAndroid",
+    type: 'RippleAndroid',
   |}> = (color: string, borderless: boolean, rippleRadius: ?number) => {
     const processedColor = processColor(color);
     invariant(
-      processedColor == null || typeof processedColor === "number",
-      "Unexpected color given for Ripple color"
+      processedColor == null || typeof processedColor === 'number',
+      'Unexpected color given for Ripple color',
     );
     return {
-      type: "RippleAndroid",
+      type: 'RippleAndroid',
+      // $FlowFixMe[incompatible-type]
       color: processedColor,
       borderless,
       rippleRadius,
@@ -158,7 +160,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
    * Whether `useForeground` is supported.
    */
   static canUseNativeForeground: () => boolean = () =>
-    Platform.OS === "android" && Platform.Version >= 23;
+    Platform.OS === 'android';
 
   state: State = {
     pressability: new Pressability(this._createPressabilityConfig()),
@@ -166,7 +168,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
 
   _createPressabilityConfig(): PressabilityConfig {
     const accessibilityStateDisabled =
-      this.props["aria-disabled"] ?? this.props.accessibilityState?.disabled;
+      this.props['aria-disabled'] ?? this.props.accessibilityState?.disabled;
     return {
       cancelable: !this.props.rejectResponderTermination,
       disabled:
@@ -182,8 +184,8 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
       android_disableSound: this.props.touchSoundDisabled,
       onLongPress: this.props.onLongPress,
       onPress: this.props.onPress,
-      onPressIn: (event) => {
-        if (Platform.OS === "android") {
+      onPressIn: event => {
+        if (Platform.OS === 'android') {
           this._dispatchHotspotUpdate(event);
           this._dispatchPressedStateChange(true);
         }
@@ -191,13 +193,13 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
           this.props.onPressIn(event);
         }
       },
-      onPressMove: (event) => {
-        if (Platform.OS === "android") {
+      onPressMove: event => {
+        if (Platform.OS === 'android') {
           this._dispatchHotspotUpdate(event);
         }
       },
-      onPressOut: (event) => {
-        if (Platform.OS === "android") {
+      onPressOut: event => {
+        if (Platform.OS === 'android') {
           this._dispatchPressedStateChange(false);
         }
         if (this.props.onPressOut != null) {
@@ -208,12 +210,12 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
   }
 
   _dispatchPressedStateChange(pressed: boolean): void {
-    if (Platform.OS === "android") {
+    if (Platform.OS === 'android') {
       const hostComponentRef = findHostInstance_DEPRECATED(this);
       if (hostComponentRef == null) {
         console.warn(
-          "Touchable: Unable to find HostComponent instance. " +
-            "Has your Touchable component been unmounted?"
+          'Touchable: Unable to find HostComponent instance. ' +
+            'Has your Touchable component been unmounted?',
         );
       } else {
         Commands.setPressed(hostComponentRef, pressed);
@@ -222,19 +224,19 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
   }
 
   _dispatchHotspotUpdate(event: PressEvent): void {
-    if (Platform.OS === "android") {
-      const { locationX, locationY } = event.nativeEvent;
+    if (Platform.OS === 'android') {
+      const {locationX, locationY} = event.nativeEvent;
       const hostComponentRef = findHostInstance_DEPRECATED(this);
       if (hostComponentRef == null) {
         console.warn(
-          "Touchable: Unable to find HostComponent instance. " +
-            "Has your Touchable component been unmounted?"
+          'Touchable: Unable to find HostComponent instance. ' +
+            'Has your Touchable component been unmounted?',
         );
       } else {
         Commands.hotspotUpdate(
           hostComponentRef,
           locationX ?? 0,
-          locationY ?? 0
+          locationY ?? 0,
         );
       }
     }
@@ -246,26 +248,26 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
     if (__DEV__) {
       if (element.type === View) {
         children.push(
-          <PressabilityDebugView color="brown" hitSlop={this.props.hitSlop} />
+          <PressabilityDebugView color="brown" hitSlop={this.props.hitSlop} />,
         );
       }
     }
 
     // BACKWARD-COMPATIBILITY: Focus and blur events were never supported before
     // adopting `Pressability`, so preserve that behavior.
-    const { onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus } =
+    const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
       this.state.pressability.getEventHandlers();
 
     let _accessibilityState = {
-      busy: this.props["aria-busy"] ?? this.props.accessibilityState?.busy,
+      busy: this.props['aria-busy'] ?? this.props.accessibilityState?.busy,
       checked:
-        this.props["aria-checked"] ?? this.props.accessibilityState?.checked,
+        this.props['aria-checked'] ?? this.props.accessibilityState?.checked,
       disabled:
-        this.props["aria-disabled"] ?? this.props.accessibilityState?.disabled,
+        this.props['aria-disabled'] ?? this.props.accessibilityState?.disabled,
       expanded:
-        this.props["aria-expanded"] ?? this.props.accessibilityState?.expanded,
+        this.props['aria-expanded'] ?? this.props.accessibilityState?.expanded,
       selected:
-        this.props["aria-selected"] ?? this.props.accessibilityState?.selected,
+        this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
     };
 
     _accessibilityState =
@@ -277,19 +279,19 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         : _accessibilityState;
 
     const accessibilityValue = {
-      max: this.props["aria-valuemax"] ?? this.props.accessibilityValue?.max,
-      min: this.props["aria-valuemin"] ?? this.props.accessibilityValue?.min,
-      now: this.props["aria-valuenow"] ?? this.props.accessibilityValue?.now,
-      text: this.props["aria-valuetext"] ?? this.props.accessibilityValue?.text,
+      max: this.props['aria-valuemax'] ?? this.props.accessibilityValue?.max,
+      min: this.props['aria-valuemin'] ?? this.props.accessibilityValue?.min,
+      now: this.props['aria-valuenow'] ?? this.props.accessibilityValue?.now,
+      text: this.props['aria-valuetext'] ?? this.props.accessibilityValue?.text,
     };
 
     const accessibilityLiveRegion =
-      this.props["aria-live"] === "off"
-        ? "none"
-        : this.props["aria-live"] ?? this.props.accessibilityLiveRegion;
+      this.props['aria-live'] === 'off'
+        ? 'none'
+        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
 
     const accessibilityLabel =
-      this.props["aria-label"] ?? this.props.accessibilityLabel;
+      this.props['aria-label'] ?? this.props.accessibilityLabel;
     return React.cloneElement(
       element,
       {
@@ -298,7 +300,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
           this.props.background === undefined
             ? TouchableNativeFeedback.SelectableBackground()
             : this.props.background,
-          this.props.useForeground === true
+          this.props.useForeground === true,
         ),
         accessible: this.props.accessible !== false,
         accessibilityHint: this.props.accessibilityHint,
@@ -310,21 +312,21 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         onAccessibilityAction: this.props.onAccessibilityAction,
         accessibilityValue: accessibilityValue,
         importantForAccessibility:
-          this.props["aria-hidden"] === true
-            ? "no-hide-descendants"
+          this.props['aria-hidden'] === true
+            ? 'no-hide-descendants'
             : this.props.importantForAccessibility,
         accessibilityViewIsModal:
-          this.props["aria-modal"] ?? this.props.accessibilityViewIsModal,
+          this.props['aria-modal'] ?? this.props.accessibilityViewIsModal,
         accessibilityLiveRegion: accessibilityLiveRegion,
         accessibilityElementsHidden:
-          this.props["aria-hidden"] ?? this.props.accessibilityElementsHidden,
+          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.nativeID,
+        nativeID: this.props.id ?? this.props.nativeID,
         nextFocusDown: this.props.nextFocusDown,
         nextFocusForward: this.props.nextFocusForward,
         nextFocusLeft: this.props.nextFocusLeft,
@@ -332,9 +334,9 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         nextFocusUp: this.props.nextFocusUp,
         onLayout: this.props.onLayout,
         testID: this.props.testID,
-        collapsable: false, // RNOH: patch
+        ...DELEGATE.getExtraProps(),
       },
-      ...children
+      ...children,
     );
   }
 
@@ -342,23 +344,27 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
+  componentDidMount(): mixed {
+    this.state.pressability.configure(this._createPressabilityConfig());
+  }
+
   componentWillUnmount(): void {
     this.state.pressability.reset();
   }
 }
 
 const getBackgroundProp =
-  Platform.OS === "android"
+  Platform.OS === 'android'
     ? /* $FlowFixMe[missing-local-annot] The type annotation(s) required by
        * Flow's LTI update could not be added via codemod */
       (background, useForeground: boolean) =>
         useForeground && TouchableNativeFeedback.canUseNativeForeground()
-          ? { nativeForegroundAndroid: background }
-          : { nativeBackgroundAndroid: background }
+          ? {nativeForegroundAndroid: background}
+          : {nativeBackgroundAndroid: background}
     : /* $FlowFixMe[missing-local-annot] The type annotation(s) required by
        * Flow's LTI update could not be added via codemod */
       (background, useForeground: boolean) => null;
 
-TouchableNativeFeedback.displayName = "TouchableNativeFeedback";
+TouchableNativeFeedback.displayName = 'TouchableNativeFeedback';
 
 module.exports = TouchableNativeFeedback;

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

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import type * as React from 'react';
+import {View} from '../../Components/View/View';
+import {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
+
+export interface TVProps {
+  /**
+   * *(Apple TV only)* TV preferred focus (see documentation for the View component).
+   *
+   * @platform ios
+   */
+  hasTVPreferredFocus?: boolean | undefined;
+
+  /**
+   * Designates the next view to receive focus when the user navigates down. See the Android documentation.
+   *
+   * @platform android
+   */
+  nextFocusDown?: number | undefined;
+
+  /**
+   * Designates the next view to receive focus when the user navigates forward. See the Android documentation.
+   *
+   * @platform android
+   */
+  nextFocusForward?: number | undefined;
+
+  /**
+   * Designates the next view to receive focus when the user navigates left. See the Android documentation.
+   *
+   * @platform android
+   */
+  nextFocusLeft?: number | undefined;
+
+  /**
+   * Designates the next view to receive focus when the user navigates right. See the Android documentation.
+   *
+   * @platform android
+   */
+  nextFocusRight?: number | undefined;
+
+  /**
+   * Designates the next view to receive focus when the user navigates up. See the Android documentation.
+   *
+   * @platform android
+   */
+  nextFocusUp?: number | undefined;
+}
+
+/**
+ * @see https://reactnative.dev/docs/touchableopacity#props
+ */
+export interface TouchableOpacityProps
+  extends TouchableWithoutFeedbackProps,
+    TVProps {
+  /**
+   * Determines what the opacity of the wrapped view should be when touch is active.
+   * Defaults to 0.2
+   */
+  activeOpacity?: number | undefined;
+}
+
+/**
+ * A wrapper for making views respond properly to touches.
+ * On press down, the opacity of the wrapped view is decreased, dimming it.
+ * This is done without actually changing the view hierarchy,
+ * and in general is easy to add to an app without weird side-effects.
+ *
+ * @see https://reactnative.dev/docs/touchableopacity
+ */
+export const TouchableOpacity: React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<TouchableOpacityProps> & React.RefAttributes<View>
+>;