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

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -0,0 +1,222 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
+import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
+
+import Animated from '../../Animated/Animated';
+import Pressability, {
+  type PressabilityConfig,
+} from '../../Pressability/Pressability';
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import Platform from '../../Utilities/Platform';
+import * as React from 'react';
+
+type Props = $ReadOnly<{|
+  ...React.ElementConfig<TouchableWithoutFeedback>,
+
+  onPressAnimationComplete?: ?() => void,
+  onPressWithCompletion?: ?(callback: () => void) => void,
+  releaseBounciness?: ?number,
+  releaseVelocity?: ?number,
+  style?: ?ViewStyleProp,
+
+  hostRef: React.RefSetter<React.ElementRef<typeof Animated.View>>,
+|}>;
+
+type State = $ReadOnly<{|
+  pressability: Pressability,
+  scale: Animated.Value,
+|}>;
+
+class TouchableBounce extends React.Component<Props, State> {
+  state: State = {
+    pressability: new Pressability(this._createPressabilityConfig()),
+    scale: new Animated.Value(1),
+  };
+
+  _createPressabilityConfig(): PressabilityConfig {
+    return {
+      cancelable: !this.props.rejectResponderTermination,
+      disabled: this.props.disabled,
+      hitSlop: this.props.hitSlop,
+      delayLongPress: this.props.delayLongPress,
+      delayPressIn: this.props.delayPressIn,
+      delayPressOut: this.props.delayPressOut,
+      minPressDuration: 0,
+      pressRectOffset: this.props.pressRetentionOffset,
+      android_disableSound: this.props.touchSoundDisabled,
+      onBlur: event => {
+        if (Platform.isTV) {
+          this._bounceTo(1, 0.4, 0);
+        }
+        if (this.props.onBlur != null) {
+          this.props.onBlur(event);
+        }
+      },
+      onFocus: event => {
+        if (Platform.isTV) {
+          this._bounceTo(0.93, 0.1, 0);
+        }
+        if (this.props.onFocus != null) {
+          this.props.onFocus(event);
+        }
+      },
+      onLongPress: this.props.onLongPress,
+      onPress: event => {
+        const {onPressAnimationComplete, onPressWithCompletion} = this.props;
+        const releaseBounciness = this.props.releaseBounciness ?? 10;
+        const releaseVelocity = this.props.releaseVelocity ?? 10;
+
+        if (onPressWithCompletion != null) {
+          onPressWithCompletion(() => {
+            this.state.scale.setValue(0.93);
+            this._bounceTo(
+              1,
+              releaseVelocity,
+              releaseBounciness,
+              onPressAnimationComplete,
+            );
+          });
+          return;
+        }
+
+        this._bounceTo(
+          1,
+          releaseVelocity,
+          releaseBounciness,
+          onPressAnimationComplete,
+        );
+        if (this.props.onPress != null) {
+          this.props.onPress(event);
+        }
+      },
+      onPressIn: event => {
+        this._bounceTo(0.93, 0.1, 0);
+        if (this.props.onPressIn != null) {
+          this.props.onPressIn(event);
+        }
+      },
+      onPressOut: event => {
+        this._bounceTo(1, 0.4, 0);
+        if (this.props.onPressOut != null) {
+          this.props.onPressOut(event);
+        }
+      },
+    };
+  }
+
+  _bounceTo(
+    toValue: number,
+    velocity: number,
+    bounciness: number,
+    callback?: ?() => void,
+  ) {
+    Animated.spring(this.state.scale, {
+      toValue,
+      velocity,
+      bounciness,
+      useNativeDriver: true,
+    }).start(callback);
+  }
+
+  render(): React.Node {
+    // BACKWARD-COMPATIBILITY: Focus and blur events were never supported before
+    // adopting `Pressability`, so preserve that behavior.
+    const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
+      this.state.pressability.getEventHandlers();
+    const accessibilityLiveRegion =
+      this.props['aria-live'] === 'off'
+        ? 'none'
+        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+    const _accessibilityState = {
+      busy: this.props['aria-busy'] ?? this.props.accessibilityState?.busy,
+      checked:
+        this.props['aria-checked'] ?? this.props.accessibilityState?.checked,
+      disabled:
+        this.props['aria-disabled'] ?? this.props.accessibilityState?.disabled,
+      expanded:
+        this.props['aria-expanded'] ?? this.props.accessibilityState?.expanded,
+      selected:
+        this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
+    };
+
+    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,
+    };
+
+    const accessibilityLabel =
+      this.props['aria-label'] ?? this.props.accessibilityLabel;
+    return (
+      <Animated.View
+        style={[{transform: [{scale: this.state.scale}]}, this.props.style]}
+        accessible={this.props.accessible !== false}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={this.props.accessibilityHint}
+        accessibilityLanguage={this.props.accessibilityLanguage}
+        accessibilityRole={this.props.accessibilityRole}
+        accessibilityState={_accessibilityState}
+        accessibilityActions={this.props.accessibilityActions}
+        onAccessibilityAction={this.props.onAccessibilityAction}
+        accessibilityValue={accessibilityValue}
+        accessibilityLiveRegion={accessibilityLiveRegion}
+        importantForAccessibility={
+          this.props['aria-hidden'] === true
+            ? 'no-hide-descendants'
+            : this.props.importantForAccessibility
+        }
+        accessibilityViewIsModal={
+          this.props['aria-modal'] ?? this.props.accessibilityViewIsModal
+        }
+        accessibilityElementsHidden={
+          this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
+        }
+        nativeID={this.props.id ?? this.props.nativeID}
+        testID={this.props.testID}
+        hitSlop={this.props.hitSlop}
+        focusable={
+          this.props.focusable !== false &&
+          this.props.onPress !== undefined &&
+          !this.props.disabled
+        }
+        // $FlowFixMe[prop-missing]
+        ref={this.props.hostRef}
+        {...eventHandlersWithoutBlurAndFocus}>
+        {this.props.children}
+        {__DEV__ ? (
+          <PressabilityDebugView color="orange" hitSlop={this.props.hitSlop} />
+        ) : null}
+      </Animated.View>
+    );
+  }
+
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    this.state.pressability.configure(this._createPressabilityConfig());
+  }
+
+  componentDidMount(): mixed {
+    this.state.pressability.configure(this._createPressabilityConfig());
+  }
+
+  componentWillUnmount(): void {
+    this.state.pressability.reset();
+    this.state.scale.resetAnimation();
+  }
+}
+
+module.exports = (React.forwardRef((props, hostRef) => (
+  <TouchableBounce {...props} hostRef={hostRef} />
+)): component(
+  ref: React.RefSetter<mixed>,
+  ...props: $ReadOnly<$Diff<Props, {|hostRef: mixed|}>>
+));

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

@@ -0,0 +1,62 @@
+/**
+ * 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 {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
+import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
+import {View} from '../../Components/View/View';
+import {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
+
+/**
+ * @see https://reactnative.dev/docs/touchablehighlight#props
+ */
+export interface TouchableHighlightProps extends TouchableWithoutFeedbackProps {
+  /**
+   * Determines what the opacity of the wrapped view should be when touch is active.
+   */
+  activeOpacity?: number | undefined;
+
+  /**
+   *
+   * Called immediately after the underlay is hidden
+   */
+  onHideUnderlay?: (() => void) | undefined;
+
+  /**
+   * Called immediately after the underlay is shown
+   */
+  onShowUnderlay?: (() => void) | undefined;
+
+  /**
+   * @see https://reactnative.dev/docs/view#style
+   */
+  style?: StyleProp<ViewStyle> | undefined;
+
+  /**
+   * The color of the underlay that will show through when the touch is active.
+   */
+  underlayColor?: ColorValue | undefined;
+}
+
+/**
+ * A wrapper for making views respond properly to touches.
+ * On press down, the opacity of the wrapped view is decreased,
+ * which allows the underlay color to show through, darkening or tinting the view.
+ * The underlay comes from adding a view to the view hierarchy,
+ * which can sometimes cause unwanted visual artifacts if not used correctly,
+ * for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
+ *
+ * NOTE: TouchableHighlight supports only one child
+ * If you wish to have several child components, wrap them in a View.
+ *
+ * @see https://reactnative.dev/docs/touchablehighlight
+ */
+export const TouchableHighlight: React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<TouchableHighlightProps> & React.RefAttributes<View>
+>;

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

@@ -8,21 +8,20 @@
  * @format
  */
 
-// RNOH patch: disable view flattening
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
 
-import type { ColorValue } from "react-native/Libraries/StyleSheet/StyleSheet";
-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 StyleSheet, {
-  type ViewStyleProp,
-} from "react-native/Libraries/StyleSheet/StyleSheet";
-import Platform from "react-native/Libraries/Utilities/Platform";
-import * as React from "react";
+} from '../../Pressability/Pressability';
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
+import Platform from '../../Utilities/Platform';
+import TouchableHighlightDelegate from './delegates/TouchableHighlightDelegate';
+import * as React from 'react';
+
+const DELEGATE = new TouchableHighlightDelegate({});
 
 type AndroidProps = $ReadOnly<{|
   nextFocusDown?: ?number,
@@ -48,7 +47,7 @@ type Props = $ReadOnly<{|
   onHideUnderlay?: ?() => void,
   testOnly_pressed?: ?boolean,
 
-  hostRef: React.Ref<typeof View>,
+  hostRef: React.RefSetter<React.ElementRef<typeof View>>,
 |}>;
 
 type ExtraStyles = $ReadOnly<{|
@@ -181,7 +180,7 @@ class TouchableHighlight extends React.Component<Props, State> {
       minPressDuration: 0,
       pressRectOffset: this.props.pressRetentionOffset,
       android_disableSound: this.props.touchSoundDisabled,
-      onBlur: (event) => {
+      onBlur: event => {
         if (Platform.isTV) {
           this._hideUnderlay();
         }
@@ -189,7 +188,7 @@ class TouchableHighlight extends React.Component<Props, State> {
           this.props.onBlur(event);
         }
       },
-      onFocus: (event) => {
+      onFocus: event => {
         if (Platform.isTV) {
           this._showUnderlay();
         }
@@ -198,7 +197,7 @@ class TouchableHighlight extends React.Component<Props, State> {
         }
       },
       onLongPress: this.props.onLongPress,
-      onPress: (event) => {
+      onPress: event => {
         if (this._hideTimeout != null) {
           clearTimeout(this._hideTimeout);
         }
@@ -212,7 +211,7 @@ class TouchableHighlight extends React.Component<Props, State> {
           this.props.onPress(event);
         }
       },
-      onPressIn: (event) => {
+      onPressIn: event => {
         if (this._hideTimeout != null) {
           clearTimeout(this._hideTimeout);
           this._hideTimeout = null;
@@ -222,7 +221,7 @@ class TouchableHighlight extends React.Component<Props, State> {
           this.props.onPressIn(event);
         }
       },
-      onPressOut: (event) => {
+      onPressOut: event => {
         if (this._hideTimeout == null) {
           this._hideUnderlay();
         }
@@ -235,11 +234,11 @@ class TouchableHighlight extends React.Component<Props, State> {
 
   _createExtraStyles(): ExtraStyles {
     return {
-      child: { opacity: this.props.activeOpacity ?? 0.85 },
+      child: {opacity: this.props.activeOpacity ?? 0.85},
       underlay: {
         backgroundColor:
           this.props.underlayColor === undefined
-            ? "black"
+            ? 'black'
             : this.props.underlayColor,
       },
     };
@@ -249,7 +248,7 @@ class TouchableHighlight extends React.Component<Props, State> {
     if (!this._isMounted || !this._hasPressHandler()) {
       return;
     }
-    this.setState({ extraStyles: this._createExtraStyles() });
+    this.setState({extraStyles: this._createExtraStyles()});
     if (this.props.onShowUnderlay != null) {
       this.props.onShowUnderlay();
     }
@@ -264,7 +263,7 @@ class TouchableHighlight extends React.Component<Props, State> {
       return;
     }
     if (this._hasPressHandler()) {
-      this.setState({ extraStyles: null });
+      this.setState({extraStyles: null});
       if (this.props.onHideUnderlay != null) {
         this.props.onHideUnderlay();
       }
@@ -285,7 +284,7 @@ class TouchableHighlight extends React.Component<Props, State> {
 
     // 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();
 
     const accessibilityState =
@@ -297,19 +296,19 @@ class TouchableHighlight extends React.Component<Props, State> {
         : this.props.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 (
       <View
         accessible={this.props.accessible !== false}
@@ -322,20 +321,20 @@ class TouchableHighlight extends React.Component<Props, State> {
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
         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
         }
         style={StyleSheet.compose(
           this.props.style,
-          this.state.extraStyles?.underlay
+          this.state.extraStyles?.underlay,
         )}
         onLayout={this.props.onLayout}
         hitSlop={this.props.hitSlop}
@@ -346,18 +345,20 @@ class TouchableHighlight extends React.Component<Props, State> {
         nextFocusRight={this.props.nextFocusRight}
         nextFocusUp={this.props.nextFocusUp}
         focusable={
-          this.props.focusable !== false && this.props.onPress !== undefined
+          this.props.focusable !== false &&
+          this.props.onPress !== undefined &&
+          !this.props.disabled
         }
-        nativeID={this.props.nativeID}
+        nativeID={this.props.id ?? this.props.nativeID}
         testID={this.props.testID}
         ref={this.props.hostRef}
         {...eventHandlersWithoutBlurAndFocus}
-        collapsable={false} // RNOH: patch
-      >
+        {...DELEGATE.getExtraContainerProps()}
+        >
         {React.cloneElement(child, {
           style: StyleSheet.compose(
             child.props.style,
-            this.state.extraStyles?.child
+            this.state.extraStyles?.child,
           ),
         })}
         {__DEV__ ? (
@@ -369,6 +370,7 @@ class TouchableHighlight extends React.Component<Props, State> {
 
   componentDidMount(): void {
     this._isMounted = true;
+    this.state.pressability.configure(this._createPressabilityConfig());
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
@@ -384,13 +386,13 @@ class TouchableHighlight extends React.Component<Props, State> {
   }
 }
 
-const Touchable = (React.forwardRef((props, hostRef) => (
+const Touchable: component(
+  ref: React.RefSetter<React.ElementRef<typeof View>>,
+  ...props: $ReadOnly<$Diff<Props, {|+hostRef: mixed|}>>
+) = React.forwardRef((props, hostRef) => (
   <TouchableHighlight {...props} hostRef={hostRef} />
-)): React.AbstractComponent<
-  $ReadOnly<$Diff<Props, {| hostRef: React.Ref<typeof View> |}>>,
-  React.ElementRef<typeof View>
->);
+));
 
-Touchable.displayName = "TouchableHighlight";
+Touchable.displayName = 'TouchableHighlight';
 
 module.exports = Touchable;

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

@@ -0,0 +1,114 @@
+/**
+ * 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 {Constructor} from '../../../types/private/Utilities';
+import {ColorValue} from '../../StyleSheet/StyleSheet';
+import {TouchableMixin} from './Touchable';
+
+import type {TVProps} from './TouchableOpacity';
+import {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
+
+interface BaseBackgroundPropType {
+  type: string;
+  rippleRadius?: number | null | undefined;
+}
+
+interface RippleBackgroundPropType extends BaseBackgroundPropType {
+  type: 'RippleAndroid';
+  borderless: boolean;
+  color?: number | null | undefined;
+}
+
+interface ThemeAttributeBackgroundPropType extends BaseBackgroundPropType {
+  type: 'ThemeAttrAndroid';
+  attribute: string;
+}
+
+type BackgroundPropType =
+  | RippleBackgroundPropType
+  | ThemeAttributeBackgroundPropType;
+
+/**
+ * @see https://reactnative.dev/docs/touchablenativefeedback#props
+ */
+export interface TouchableNativeFeedbackProps
+  extends TouchableWithoutFeedbackProps,
+    TVProps {
+  /**
+   * 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.
+   * It's recommended to use one of the following static methods to generate that dictionary:
+   *      1) TouchableNativeFeedback.SelectableBackground() - will create object that represents android theme's
+   *         default background for selectable elements (?android:attr/selectableItemBackground)
+   *      2) TouchableNativeFeedback.SelectableBackgroundBorderless() - will create object that represent android
+   *         theme's default background for borderless selectable elements
+   *         (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+
+   *      3) TouchableNativeFeedback.Ripple(color, borderless) - will create object that represents ripple drawable
+   *         with specified color (as a string). If property borderless evaluates to true the ripple will render
+   *         outside of the view bounds (see native actionbar buttons as an example of that behavior). This background
+   *         type is available on Android API level 21+
+   */
+  background?: BackgroundPropType | undefined;
+  useForeground?: boolean | undefined;
+}
+
+/**
+ * A wrapper for making views respond properly to touches (Android only).
+ * On Android this component uses native state drawable to display touch feedback.
+ * At the moment it only supports having a single View instance as a child node,
+ * as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
+ *
+ * Background drawable of native feedback touchable can be customized with background property.
+ *
+ * @see https://reactnative.dev/docs/touchablenativefeedback#content
+ */
+declare class TouchableNativeFeedbackComponent extends React.Component<TouchableNativeFeedbackProps> {}
+declare const TouchableNativeFeedbackBase: Constructor<TouchableMixin> &
+  typeof TouchableNativeFeedbackComponent;
+export class TouchableNativeFeedback extends TouchableNativeFeedbackBase {
+  /**
+   * Creates an object that represents android theme's default background for
+   * selectable elements (?android:attr/selectableItemBackground).
+   *
+   * @param rippleRadius The radius of ripple effect
+   */
+  static SelectableBackground(
+    rippleRadius?: number | null,
+  ): ThemeAttributeBackgroundPropType;
+
+  /**
+   * Creates an object that represent android theme's default background for borderless
+   * selectable elements (?android:attr/selectableItemBackgroundBorderless).
+   * Available on android API level 21+.
+   *
+   * @param rippleRadius The radius of ripple effect
+   */
+  static SelectableBackgroundBorderless(
+    rippleRadius?: number | null,
+  ): ThemeAttributeBackgroundPropType;
+
+  /**
+   * Creates an object that represents ripple drawable with specified color (as a
+   * string). If property `borderless` evaluates to true the ripple will
+   * render outside of the view bounds (see native actionbar buttons as an
+   * example of that behavior). This background type is available on Android
+   * API level 21+.
+   *
+   * @param color The ripple color
+   * @param borderless If the ripple can render outside it's bounds
+   * @param rippleRadius The radius of ripple effect
+   */
+  static Ripple(
+    color: ColorValue,
+    borderless: boolean,
+    rippleRadius?: number | null,
+  ): RippleBackgroundPropType;
+  static canUseNativeForeground(): boolean;
+}