react-native 0.70.4 → 0.71.0-rc.0

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;
+}

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -8,19 +8,20 @@
  * @format
  */
 
+import type {PressEvent} from '../../Types/CoreEventTypes';
+import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
+
+import View from '../../Components/View/View';
 import Pressability, {
   type PressabilityConfig,
 } from '../../Pressability/Pressability';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
-import {Commands} from 'react-native/Libraries/Components/View/ViewNativeComponent';
-import ReactNative from 'react-native/Libraries/Renderer/shims/ReactNative';
-import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';
-import Platform from '../../Utilities/Platform';
-import View from '../../Components/View/View';
+import {findHostInstance_DEPRECATED} from '../../ReactNative/RendererProxy';
 import processColor from '../../StyleSheet/processColor';
-import * as React from 'react';
+import Platform from '../../Utilities/Platform';
+import {Commands} from '../View/ViewNativeComponent';
 import invariant from 'invariant';
+import * as React from 'react';
 
 type Props = $ReadOnly<{|
   ...React.ElementConfig<TouchableWithoutFeedback>,
@@ -162,12 +163,14 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
   };
 
   _createPressabilityConfig(): PressabilityConfig {
+    const accessibilityStateDisabled =
+      this.props['aria-disabled'] ?? this.props.accessibilityState?.disabled;
     return {
       cancelable: !this.props.rejectResponderTermination,
       disabled:
         this.props.disabled != null
           ? this.props.disabled
-          : this.props.accessibilityState?.disabled,
+          : accessibilityStateDisabled,
       hitSlop: this.props.hitSlop,
       delayLongPress: this.props.delayLongPress,
       delayPressIn: this.props.delayPressIn,
@@ -204,7 +207,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
 
   _dispatchPressedStateChange(pressed: boolean): void {
     if (Platform.OS === 'android') {
-      const hostComponentRef = ReactNative.findHostInstance_DEPRECATED(this);
+      const hostComponentRef = findHostInstance_DEPRECATED(this);
       if (hostComponentRef == null) {
         console.warn(
           'Touchable: Unable to find HostComponent instance. ' +
@@ -219,7 +222,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
   _dispatchHotspotUpdate(event: PressEvent): void {
     if (Platform.OS === 'android') {
       const {locationX, locationY} = event.nativeEvent;
-      const hostComponentRef = ReactNative.findHostInstance_DEPRECATED(this);
+      const hostComponentRef = findHostInstance_DEPRECATED(this);
       if (hostComponentRef == null) {
         console.warn(
           'Touchable: Unable to find HostComponent instance. ' +
@@ -251,14 +254,40 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
     const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
       this.state.pressability.getEventHandlers();
 
-    const accessibilityState =
+    let _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,
+    };
+
+    _accessibilityState =
       this.props.disabled != null
         ? {
-            ...this.props.accessibilityState,
+            ..._accessibilityState,
             disabled: this.props.disabled,
           }
-        : this.props.accessibilityState;
+        : _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,
+    };
+
+    const accessibilityLiveRegion =
+      this.props['aria-live'] === 'off'
+        ? 'none'
+        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
 
+    const accessibilityLabel =
+      this.props['aria-label'] ?? this.props.accessibilityLabel;
     return React.cloneElement(
       element,
       {
@@ -272,16 +301,21 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         accessible: this.props.accessible !== false,
         accessibilityHint: this.props.accessibilityHint,
         accessibilityLanguage: this.props.accessibilityLanguage,
-        accessibilityLabel: this.props.accessibilityLabel,
+        accessibilityLabel: accessibilityLabel,
         accessibilityRole: this.props.accessibilityRole,
-        accessibilityState: accessibilityState,
+        accessibilityState: _accessibilityState,
         accessibilityActions: this.props.accessibilityActions,
         onAccessibilityAction: this.props.onAccessibilityAction,
-        accessibilityValue: this.props.accessibilityValue,
-        importantForAccessibility: this.props.importantForAccessibility,
-        accessibilityLiveRegion: this.props.accessibilityLiveRegion,
-        accessibilityViewIsModal: this.props.accessibilityViewIsModal,
-        accessibilityElementsHidden: this.props.accessibilityElementsHidden,
+        accessibilityValue: accessibilityValue,
+        importantForAccessibility:
+          this.props['aria-hidden'] === true
+            ? 'no-hide-descendants'
+            : this.props.importantForAccessibility,
+        accessibilityViewIsModal:
+          this.props['aria-modal'] ?? this.props.accessibilityViewIsModal,
+        accessibilityLiveRegion: accessibilityLiveRegion,
+        accessibilityElementsHidden:
+          this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden,
         hasTVPreferredFocus: this.props.hasTVPreferredFocus,
         hitSlop: this.props.hitSlop,
         focusable:

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

@@ -0,0 +1,109 @@
+/**
+ * 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 {TimerMixin} from '../../../types/private/TimerMixin';
+import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {TVParallaxProperties} from '../View/ViewPropTypes';
+import {TouchableMixin} from './Touchable';
+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;
+
+  /**
+   * *(Apple TV only)* Object with properties to control Apple TV parallax effects.
+   *
+   * enabled: If true, parallax effects are enabled.  Defaults to true.
+   * shiftDistanceX: Defaults to 2.0.
+   * shiftDistanceY: Defaults to 2.0.
+   * tiltAngle: Defaults to 0.05.
+   * magnification: Defaults to 1.0.
+   * pressMagnification: Defaults to 1.0.
+   * pressDuration: Defaults to 0.3.
+   * pressDelay: Defaults to 0.0.
+   *
+   * @platform android
+   */
+  tvParallaxProperties?: TVParallaxProperties | 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
+ */
+declare class TouchableOpacityComponent extends React.Component<TouchableOpacityProps> {}
+declare const TouchableOpacityBase: Constructor<TimerMixin> &
+  Constructor<TouchableMixin> &
+  Constructor<NativeMethods> &
+  typeof TouchableOpacityComponent;
+export class TouchableOpacity extends TouchableOpacityBase {
+  /**
+   * Animate the touchable to a new opacity.
+   */
+  setOpacityTo: (value: number) => void;
+}

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -8,15 +8,16 @@
  * @format
  */
 
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
+import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
+
+import Animated from '../../Animated/Animated';
+import Easing from '../../Animated/Easing';
 import Pressability, {
   type PressabilityConfig,
 } from '../../Pressability/Pressability';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
-import Animated from 'react-native/Libraries/Animated/Animated';
-import Easing from 'react-native/Libraries/Animated/Easing';
-import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
-import flattenStyle from 'react-native/Libraries/StyleSheet/flattenStyle';
+import flattenStyle from '../../StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
@@ -137,7 +138,10 @@ class TouchableOpacity extends React.Component<Props, State> {
   _createPressabilityConfig(): PressabilityConfig {
     return {
       cancelable: !this.props.rejectResponderTermination,
-      disabled: this.props.disabled ?? this.props.accessibilityState?.disabled,
+      disabled:
+        this.props.disabled ??
+        this.props['aria-disabled'] ??
+        this.props.accessibilityState?.disabled,
       hitSlop: this.props.hitSlop,
       delayLongPress: this.props.delayLongPress,
       delayPressIn: this.props.delayPressIn,
@@ -212,29 +216,63 @@ class TouchableOpacity extends React.Component<Props, State> {
     const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
       this.state.pressability.getEventHandlers();
 
-    const accessibilityState =
+    let _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,
+    };
+
+    _accessibilityState =
       this.props.disabled != null
         ? {
-            ...this.props.accessibilityState,
+            ..._accessibilityState,
             disabled: this.props.disabled,
           }
-        : this.props.accessibilityState;
+        : _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,
+    };
+
+    const accessibilityLiveRegion =
+      this.props['aria-live'] === 'off'
+        ? 'none'
+        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+
+    const accessibilityLabel =
+      this.props['aria-label'] ?? this.props.accessibilityLabel;
     return (
       <Animated.View
         accessible={this.props.accessible !== false}
-        accessibilityLabel={this.props.accessibilityLabel}
+        accessibilityLabel={accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
         accessibilityLanguage={this.props.accessibilityLanguage}
         accessibilityRole={this.props.accessibilityRole}
-        accessibilityState={accessibilityState}
+        accessibilityState={_accessibilityState}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
-        accessibilityValue={this.props.accessibilityValue}
-        importantForAccessibility={this.props.importantForAccessibility}
-        accessibilityLiveRegion={this.props.accessibilityLiveRegion}
-        accessibilityViewIsModal={this.props.accessibilityViewIsModal}
-        accessibilityElementsHidden={this.props.accessibilityElementsHidden}
+        accessibilityValue={accessibilityValue}
+        importantForAccessibility={
+          this.props['aria-hidden'] === true
+            ? 'no-hide-descendants'
+            : this.props.importantForAccessibility
+        }
+        accessibilityViewIsModal={
+          this.props['aria-modal'] ?? this.props.accessibilityViewIsModal
+        }
+        accessibilityLiveRegion={accessibilityLiveRegion}
+        accessibilityElementsHidden={
+          this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
+        }
         style={[this.props.style, {opacity: this.state.anim}]}
         nativeID={this.props.nativeID}
         testID={this.props.testID}

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

@@ -0,0 +1,143 @@
+/**
+ * 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 {TimerMixin} from '../../../types/private/TimerMixin';
+import {Insets} from '../../../types/public/Insets';
+import {StyleProp} from '../../StyleSheet/StyleSheet';
+import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
+import {
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+  TargetedEvent,
+} from '../../Types/CoreEventTypes';
+import {AccessibilityProps} from '../View/ViewAccessibility';
+import {TouchableMixin} from './Touchable';
+
+export interface TouchableWithoutFeedbackPropsIOS {}
+
+export interface TouchableWithoutFeedbackPropsAndroid {
+  /**
+   * If true, doesn't play a system sound on touch.
+   *
+   * @platform android
+   */
+  touchSoundDisabled?: boolean | undefined;
+}
+
+/**
+ * @see https://reactnative.dev/docs/touchablewithoutfeedback#props
+ */
+export interface TouchableWithoutFeedbackProps
+  extends TouchableWithoutFeedbackPropsIOS,
+    TouchableWithoutFeedbackPropsAndroid,
+    AccessibilityProps {
+  children?: React.ReactNode;
+
+  /**
+   * Delay in ms, from onPressIn, before onLongPress is called.
+   */
+  delayLongPress?: number | undefined;
+
+  /**
+   * Delay in ms, from the start of the touch, before onPressIn is called.
+   */
+  delayPressIn?: number | undefined;
+
+  /**
+   * Delay in ms, from the release of the touch, before onPressOut is called.
+   */
+  delayPressOut?: number | undefined;
+
+  /**
+   * If true, disable all interactions for this component.
+   */
+  disabled?: boolean | undefined;
+
+  /**
+   * This defines how far your touch can start away from the button.
+   * This is added to pressRetentionOffset when moving off of the button.
+   * NOTE The touch area never extends past the parent view bounds and
+   * the Z-index of sibling views always takes precedence if a touch hits
+   * two overlapping views.
+   */
+  hitSlop?: Insets | undefined;
+
+  /**
+   * Used to reference react managed views from native code.
+   */
+  id?: string | undefined;
+
+  /**
+   * When `accessible` is true (which is the default) this may be called when
+   * the OS-specific concept of "blur" occurs, meaning the element lost focus.
+   * Some platforms may not have the concept of blur.
+   */
+  onBlur?: ((e: NativeSyntheticEvent<TargetedEvent>) => void) | undefined;
+
+  /**
+   * When `accessible` is true (which is the default) this may be called when
+   * the OS-specific concept of "focus" occurs. Some platforms may not have
+   * the concept of focus.
+   */
+  onFocus?: ((e: NativeSyntheticEvent<TargetedEvent>) => void) | undefined;
+
+  /**
+   * Invoked on mount and layout changes with
+   * {nativeEvent: {layout: {x, y, width, height}}}
+   */
+  onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
+
+  onLongPress?: ((event: GestureResponderEvent) => void) | undefined;
+
+  /**
+   * Called when the touch is released,
+   * but not if cancelled (e.g. by a scroll that steals the responder lock).
+   */
+  onPress?: ((event: GestureResponderEvent) => void) | undefined;
+
+  onPressIn?: ((event: GestureResponderEvent) => void) | undefined;
+
+  onPressOut?: ((event: GestureResponderEvent) => void) | undefined;
+
+  /**
+   * //FIXME: not in doc but available in examples
+   */
+  style?: StyleProp<ViewStyle> | undefined;
+
+  /**
+   * When the scroll view is disabled, this defines how far your
+   * touch may move off of the button, before deactivating the button.
+   * Once deactivated, try moving it back and you'll see that the button
+   * is once again reactivated! Move it back and forth several times
+   * while the scroll view is disabled. Ensure you pass in a constant
+   * to reduce memory allocations.
+   */
+  pressRetentionOffset?: Insets | undefined;
+
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  testID?: string | undefined;
+}
+
+/**
+ * Do not use unless you have a very good reason.
+ * All the elements that respond to press should have a visual feedback when touched.
+ * This is one of the primary reason a "web" app doesn't feel "native".
+ *
+ * @see https://reactnative.dev/docs/touchablewithoutfeedback
+ */
+declare class TouchableWithoutFeedbackComponent extends React.Component<TouchableWithoutFeedbackProps> {}
+declare const TouchableWithoutFeedbackBase: Constructor<TimerMixin> &
+  Constructor<TouchableMixin> &
+  typeof TouchableWithoutFeedbackComponent;
+export class TouchableWithoutFeedback extends TouchableWithoutFeedbackBase {}