@office-iss/react-native-win32 0.68.0 → 0.69.0-preview.1

package/Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -143,6 +143,13 @@ const ActionSheetIOS = {
       successCallback,
     );
   },
+
+  dismissActionSheet: () => {
+    invariant(RCTActionSheetManager, "ActionSheetManager doesn't exist");
+    if (typeof RCTActionSheetManager.dismissActionSheet === 'function') {
+      RCTActionSheetManager.dismissActionSheet();
+    }
+  },
 };
 
 module.exports = ActionSheetIOS;

package/Libraries/ActionSheetIOS/NativeActionSheetManager.js

@@ -47,6 +47,7 @@ export interface Spec extends TurboModule {
     |}) => void,
     successCallback: (completed: boolean, activityType: ?string) => void,
   ) => void;
+  +dismissActionSheet?: () => void;
 }
 
 export default (TurboModuleRegistry.get<Spec>('ActionSheetManager'): ?Spec);

package/Libraries/Alert/Alert.win32.js

@@ -50,7 +50,7 @@ class Alert {
       message || '',
       buttons,
       options,
-      (buttonIndex) => {
+      buttonIndex => {
         if (
           buttonIndex >= 0 &&
           buttons &&

package/Libraries/Animated/AnimatedImplementation.js

@@ -91,7 +91,7 @@ const diffClamp = function (
 
 const _combineCallbacks = function (
   callback: ?EndCallback,
-  config: {...AnimationConfig, ...},
+  config: $ReadOnly<{...AnimationConfig, ...}>,
 ) {
   if (callback && config.onComplete) {
     return (...args) => {

package/Libraries/Animated/NativeAnimatedHelper.js

@@ -90,6 +90,18 @@ const API = {
       NativeAnimatedModule.createAnimatedNode(tag, config),
     );
   },
+  updateAnimatedNodeConfig: function (
+    tag: number,
+    config: AnimatedNodeConfig,
+  ): void {
+    invariant(NativeAnimatedModule, 'Native animated module is not available');
+    if (typeof NativeAnimatedModule.updateAnimatedNodeConfig === 'function') {
+      API.queueOperation(() =>
+        // $FlowIgnore[not-a-function] - checked above
+        NativeAnimatedModule.updateAnimatedNodeConfig(tag, config),
+      );
+    }
+  },
   startListeningToAnimatedNodeValue: function (tag: number) {
     invariant(NativeAnimatedModule, 'Native animated module is not available');
     API.queueOperation(() =>
@@ -222,22 +234,36 @@ const API = {
 /**
  * Styles allowed by the native animated implementation.
  *
- * In general native animated implementation should support any numeric property that doesn't need
- * to be updated through the shadow view hierarchy (all non-layout properties).
+ * In general native animated implementation should support any numeric or color property that
+ * doesn't need to be updated through the shadow view hierarchy (all non-layout properties).
  */
+const SUPPORTED_COLOR_STYLES = {
+  backgroundColor: true,
+  borderBottomColor: true,
+  borderColor: true,
+  borderEndColor: true,
+  borderLeftColor: true,
+  borderRightColor: true,
+  borderStartColor: true,
+  borderTopColor: true,
+  color: true,
+  tintColor: true,
+};
+
 const SUPPORTED_STYLES = {
-  opacity: true,
-  transform: true,
-  borderRadius: true,
+  ...SUPPORTED_COLOR_STYLES,
   borderBottomEndRadius: true,
   borderBottomLeftRadius: true,
   borderBottomRightRadius: true,
   borderBottomStartRadius: true,
+  borderRadius: true,
   borderTopEndRadius: true,
   borderTopLeftRadius: true,
   borderTopRightRadius: true,
   borderTopStartRadius: true,
   elevation: true,
+  opacity: true,
+  transform: true,
   zIndex: true,
   /* ios styles */
   shadowOpacity: true,
@@ -282,6 +308,22 @@ function addWhitelistedInterpolationParam(param: string): void {
   SUPPORTED_INTERPOLATION_PARAMS[param] = true;
 }
 
+function isSupportedColorStyleProp(prop: string): boolean {
+  return SUPPORTED_COLOR_STYLES.hasOwnProperty(prop);
+}
+
+function isSupportedStyleProp(prop: string): boolean {
+  return SUPPORTED_STYLES.hasOwnProperty(prop);
+}
+
+function isSupportedTransformProp(prop: string): boolean {
+  return SUPPORTED_TRANSFORMS.hasOwnProperty(prop);
+}
+
+function isSupportedInterpolationParam(param: string): boolean {
+  return SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(param);
+}
+
 function validateTransform(
   configs: Array<
     | {
@@ -299,7 +341,7 @@ function validateTransform(
   >,
 ): void {
   configs.forEach(config => {
-    if (!SUPPORTED_TRANSFORMS.hasOwnProperty(config.property)) {
+    if (!isSupportedTransformProp(config.property)) {
       throw new Error(
         `Property '${config.property}' is not supported by native animated module`,
       );
@@ -309,7 +351,7 @@ function validateTransform(
 
 function validateStyles(styles: {[key: string]: ?number, ...}): void {
   for (const key in styles) {
-    if (!SUPPORTED_STYLES.hasOwnProperty(key)) {
+    if (!isSupportedStyleProp(key)) {
       throw new Error(
         `Style property '${key}' is not supported by native animated module`,
       );
@@ -319,7 +361,7 @@ function validateStyles(styles: {[key: string]: ?number, ...}): void {
 
 function validateInterpolation(config: InterpolationConfigType): void {
   for (const key in config) {
-    if (!SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(key)) {
+    if (!isSupportedInterpolationParam(key)) {
       throw new Error(
         `Interpolation property '${key}' is not supported by native animated module`,
       );
@@ -342,7 +384,7 @@ function assertNativeAnimatedModule(): void {
 let _warnedMissingNativeAnimated = false;
 
 function shouldUseNativeDriver(
-  config: {...AnimationConfig, ...} | EventConfig,
+  config: $ReadOnly<{...AnimationConfig, ...}> | EventConfig,
 ): boolean {
   if (config.useNativeDriver == null) {
     console.warn(
@@ -385,6 +427,10 @@ function transformDataType(value: number | string): number | string {
 
 module.exports = {
   API,
+  isSupportedColorStyleProp,
+  isSupportedStyleProp,
+  isSupportedTransformProp,
+  isSupportedInterpolationParam,
   addWhitelistedStyleProp,
   addWhitelistedTransformProp,
   addWhitelistedInterpolationParam,

package/Libraries/Animated/NativeAnimatedModule.js

@@ -29,6 +29,7 @@ export interface Spec extends TurboModule {
   +startOperationBatch: () => void;
   +finishOperationBatch: () => void;
   +createAnimatedNode: (tag: number, config: AnimatedNodeConfig) => void;
+  +updateAnimatedNodeConfig?: (tag: number, config: AnimatedNodeConfig) => void;
   +getValue: (tag: number, saveValueCallback: SaveValueCallback) => void;
   +startListeningToAnimatedNodeValue: (tag: number) => void;
   +stopListeningToAnimatedNodeValue: (tag: number) => void;

package/Libraries/Animated/NativeAnimatedTurboModule.js

@@ -29,6 +29,7 @@ export interface Spec extends TurboModule {
   +startOperationBatch: () => void;
   +finishOperationBatch: () => void;
   +createAnimatedNode: (tag: number, config: AnimatedNodeConfig) => void;
+  +updateAnimatedNodeConfig?: (tag: number, config: AnimatedNodeConfig) => void;
   +getValue: (tag: number, saveValueCallback: SaveValueCallback) => void;
   +startListeningToAnimatedNodeValue: (tag: number) => void;
   +stopListeningToAnimatedNodeValue: (tag: number) => void;

package/Libraries/Animated/animations/TimingAnimation.js

@@ -19,10 +19,11 @@ const {shouldUseNativeDriver} = require('../NativeAnimatedHelper');
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {AnimationConfig, EndCallback} from './Animation';
+import type {RgbaValue} from '../nodes/AnimatedColor';
 
 import AnimatedColor from '../nodes/AnimatedColor';
 
-export type TimingAnimationConfig = {
+export type TimingAnimationConfig = $ReadOnly<{
   ...AnimationConfig,
   toValue:
     | number
@@ -33,27 +34,21 @@ export type TimingAnimationConfig = {
         ...
       }
     | AnimatedValueXY
-    | {
-        r: number,
-        g: number,
-        b: number,
-        a: number,
-        ...
-      }
+    | RgbaValue
     | AnimatedColor
     | AnimatedInterpolation,
   easing?: (value: number) => number,
   duration?: number,
   delay?: number,
-};
+}>;
 
-export type TimingAnimationConfigSingle = {
+export type TimingAnimationConfigSingle = $ReadOnly<{
   ...AnimationConfig,
   toValue: number | AnimatedValue | AnimatedInterpolation,
   easing?: (value: number) => number,
   duration?: number,
   delay?: number,
-};
+}>;
 
 let _easeInOut;
 function easeInOut() {

package/Libraries/Animated/createAnimatedComponent.js

@@ -24,8 +24,8 @@ const setAndForwardRef = require('../Utilities/setAndForwardRef');
 let animatedComponentNextId = 1;
 
 export type AnimatedComponentType<
-  Props: {+[string]: mixed, ...},
-  Instance,
+  -Props: {+[string]: mixed, ...},
+  +Instance = mixed,
 > = React.AbstractComponent<
   $ObjMap<
     Props &

package/Libraries/Animated/nodes/AnimatedColor.js

@@ -14,12 +14,15 @@ import AnimatedValue from './AnimatedValue';
 import AnimatedWithChildren from './AnimatedWithChildren';
 import normalizeColor from '../../StyleSheet/normalizeColor';
 import {processColorObject} from '../../StyleSheet/PlatformColorValueTypes';
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {NativeColorValue} from '../../StyleSheet/PlatformColorValueTypes';
+import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 
 type ColorListenerCallback = (value: string) => mixed;
-type RgbaValue = {
+export type RgbaValue = {
   +r: number,
   +g: number,
   +b: number,
@@ -38,26 +41,37 @@ const defaultColor: RgbaValue = {r: 0, g: 0, b: 0, a: 1.0};
 let _uniqueId = 1;
 
 /* eslint no-bitwise: 0 */
-function processColor(color?: ?ColorValue): ?(RgbaValue | NativeColorValue) {
+function processColor(
+  color?: ?(ColorValue | RgbaValue),
+): ?(RgbaValue | NativeColorValue) {
   if (color === undefined || color === null) {
     return null;
   }
 
-  let normalizedColor = normalizeColor(color);
+  if (isRgbaValue(color)) {
+    // $FlowIgnore[incompatible-cast] - Type is verified above
+    return (color: RgbaValue);
+  }
+
+  let normalizedColor: ?ProcessedColorValue = normalizeColor(
+    // $FlowIgnore[incompatible-cast] - Type is verified above
+    (color: ColorValue),
+  );
   if (normalizedColor === undefined || normalizedColor === null) {
     return null;
   }
 
   if (typeof normalizedColor === 'object') {
-    const processedColorObj = processColorObject(normalizedColor);
+    const processedColorObj: ?NativeColorValue =
+      processColorObject(normalizedColor);
     if (processedColorObj != null) {
       return processedColorObj;
     }
   } else if (typeof normalizedColor === 'number') {
-    const r = (normalizedColor & 0xff000000) >>> 24;
-    const g = (normalizedColor & 0x00ff0000) >>> 16;
-    const b = (normalizedColor & 0x0000ff00) >>> 8;
-    const a = (normalizedColor & 0x000000ff) / 255;
+    const r: number = (normalizedColor & 0xff000000) >>> 24;
+    const g: number = (normalizedColor & 0x00ff0000) >>> 16;
+    const b: number = (normalizedColor & 0x0000ff00) >>> 8;
+    const a: number = (normalizedColor & 0x000000ff) / 255;
 
     return {r, g, b, a};
   }
@@ -90,6 +104,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
   g: AnimatedValue;
   b: AnimatedValue;
   a: AnimatedValue;
+  nativeColor: ?NativeColorValue;
   _listeners: {
     [key: string]: {
       r: string,
@@ -99,13 +114,12 @@ export default class AnimatedColor extends AnimatedWithChildren {
       ...
     },
     ...
-  };
+  } = {};
 
   constructor(valueIn?: ?(RgbaValue | RgbaAnimatedValue | ColorValue)) {
     super();
     let value: RgbaValue | RgbaAnimatedValue | ColorValue =
-      valueIn || defaultColor;
-
+      valueIn ?? defaultColor;
     if (isRgbaAnimatedValue(value)) {
       // $FlowIgnore[incompatible-cast] - Type is verified above
       const rgbaAnimatedValue: RgbaAnimatedValue = (value: RgbaAnimatedValue);
@@ -114,32 +128,65 @@ export default class AnimatedColor extends AnimatedWithChildren {
       this.b = rgbaAnimatedValue.b;
       this.a = rgbaAnimatedValue.a;
     } else {
-      // Handle potential parsable string color or platform color object
-      if (!isRgbaValue(value)) {
-        // $FlowIgnore[incompatible-cast] - Type is verified via conditionals
-        value = processColor((value: ColorValue)) || {r: 0, g: 0, b: 0, a: 1.0};
-        // TODO: support platform color
+      const processedColor: RgbaValue | NativeColorValue =
+        // $FlowIgnore[incompatible-cast] - Type is verified above
+        processColor((value: ColorValue | RgbaValue)) ?? defaultColor;
+      let initColor: RgbaValue = defaultColor;
+      if (isRgbaValue(processedColor)) {
+        // $FlowIgnore[incompatible-cast] - Type is verified above
+        initColor = (processedColor: RgbaValue);
+      } else {
+        // $FlowIgnore[incompatible-cast] - Type is verified above
+        this.nativeColor = (processedColor: NativeColorValue);
       }
 
-      // $FlowIgnore[incompatible-cast] - Type is verified via conditionals
-      const rgbaValue: RgbaValue = (value: RgbaValue);
-      this.r = new AnimatedValue(rgbaValue.r);
-      this.g = new AnimatedValue(rgbaValue.g);
-      this.b = new AnimatedValue(rgbaValue.b);
-      this.a = new AnimatedValue(rgbaValue.a);
+      this.r = new AnimatedValue(initColor.r);
+      this.g = new AnimatedValue(initColor.g);
+      this.b = new AnimatedValue(initColor.b);
+      this.a = new AnimatedValue(initColor.a);
+
+      if (this.nativeColor) {
+        if (!this.__isNative) {
+          this.__makeNative();
+        }
+      }
     }
-    this._listeners = {};
   }
 
   /**
    * Directly set the value. This will stop any animations running on the value
    * and update all the bound properties.
    */
-  setValue(value: {r: number, g: number, b: number, a: number, ...}): void {
-    this.r.setValue(value.r);
-    this.g.setValue(value.g);
-    this.b.setValue(value.b);
-    this.a.setValue(value.a);
+  setValue(value: RgbaValue | ColorValue): void {
+    this.nativeColor = null;
+
+    const processedColor: RgbaValue | NativeColorValue =
+      processColor(value) ?? defaultColor;
+    if (isRgbaValue(processedColor)) {
+      // $FlowIgnore[incompatible-cast] - Type is verified above
+      const rgbaValue: RgbaValue = (processedColor: RgbaValue);
+      this.r.setValue(rgbaValue.r);
+      this.g.setValue(rgbaValue.g);
+      this.b.setValue(rgbaValue.b);
+      this.a.setValue(rgbaValue.a);
+    } else {
+      // $FlowIgnore[incompatible-cast] - Type is verified above
+      this.nativeColor = (processedColor: NativeColorValue);
+    }
+
+    if (this.nativeColor) {
+      if (!this.__isNative) {
+        this.__makeNative();
+      }
+
+      const nativeTag = this.__getNativeTag();
+      NativeAnimatedHelper.API.setWaitingForIdentifier(nativeTag.toString());
+      NativeAnimatedHelper.API.updateAnimatedNodeConfig(
+        nativeTag,
+        this.__getNativeConfig(),
+      );
+      NativeAnimatedHelper.API.unsetWaitingForIdentifier(nativeTag.toString());
+    }
   }
 
   /**
@@ -147,7 +194,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
    * via `setValue`, an animation, or `Animated.event`. Useful for compensating
    * things like the start of a pan gesture.
    */
-  setOffset(offset: {r: number, g: number, b: number, a: number, ...}): void {
+  setOffset(offset: RgbaValue): void {
     this.r.setOffset(offset.r);
     this.g.setOffset(offset.g);
     this.b.setOffset(offset.b);
@@ -263,4 +310,23 @@ export default class AnimatedColor extends AnimatedWithChildren {
     this.a.__removeChild(this);
     super.__detach();
   }
+
+  __makeNative(platformConfig: ?PlatformConfig) {
+    this.r.__makeNative(platformConfig);
+    this.g.__makeNative(platformConfig);
+    this.b.__makeNative(platformConfig);
+    this.a.__makeNative(platformConfig);
+    super.__makeNative(platformConfig);
+  }
+
+  __getNativeConfig(): {...} {
+    return {
+      type: 'color',
+      r: this.r.__getNativeTag(),
+      g: this.g.__getNativeTag(),
+      b: this.b.__getNativeTag(),
+      a: this.a.__getNativeTag(),
+      nativeColor: this.nativeColor,
+    };
+  }
 }

package/Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -23,14 +23,14 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 type ExtrapolateType = 'extend' | 'identity' | 'clamp';
 
-export type InterpolationConfigType = {
+export type InterpolationConfigType = $ReadOnly<{
   inputRange: $ReadOnlyArray<number>,
   outputRange: $ReadOnlyArray<number> | $ReadOnlyArray<string>,
   easing?: (input: number) => number,
   extrapolate?: ExtrapolateType,
   extrapolateLeft?: ExtrapolateType,
   extrapolateRight?: ExtrapolateType,
-};
+}>;
 
 const linear = (t: number) => t;
 
@@ -46,20 +46,23 @@ function createInterpolation(
   }
 
   const outputRange: Array<number> = (config.outputRange: any);
-  checkInfiniteRange('outputRange', outputRange);
 
   const inputRange = config.inputRange;
-  checkInfiniteRange('inputRange', inputRange);
-  checkValidInputRange(inputRange);
 
-  invariant(
-    inputRange.length === outputRange.length,
-    'inputRange (' +
-      inputRange.length +
-      ') and outputRange (' +
-      outputRange.length +
-      ') must have the same length',
-  );
+  if (__DEV__) {
+    checkInfiniteRange('outputRange', outputRange);
+    checkInfiniteRange('inputRange', inputRange);
+    checkValidInputRange(inputRange);
+
+    invariant(
+      inputRange.length === outputRange.length,
+      'inputRange (' +
+        inputRange.length +
+        ') and outputRange (' +
+        outputRange.length +
+        ') must have the same length',
+    );
+  }
 
   const easing = config.easing || linear;
 
@@ -276,16 +279,10 @@ function findRange(input: number, inputRange: $ReadOnlyArray<number>) {
 
 function checkValidInputRange(arr: $ReadOnlyArray<number>) {
   invariant(arr.length >= 2, 'inputRange must have at least 2 elements');
+  const message =
+    'inputRange must be monotonically non-decreasing ' + String(arr);
   for (let i = 1; i < arr.length; ++i) {
-    invariant(
-      arr[i] >= arr[i - 1],
-      /* $FlowFixMe[incompatible-type] (>=0.13.0) - In the addition expression
-       * below this comment, one or both of the operands may be something that
-       * doesn't cleanly convert to a string, like undefined, null, and object,
-       * etc. If you really mean this implicit string conversion, you can do
-       * something like String(myThing) */
-      'inputRange must be monotonically non-decreasing ' + arr,
-    );
+    invariant(arr[i] >= arr[i - 1], message);
   }
 }
 

package/Libraries/Animated/nodes/AnimatedNode.js

@@ -130,12 +130,12 @@ class AnimatedNode {
           if (data.tag !== this.__getNativeTag()) {
             return;
           }
-          this._onAnimatedValueUpdateReceived(data.value);
+          this.__onAnimatedValueUpdateReceived(data.value);
         },
       );
   }
 
-  _onAnimatedValueUpdateReceived(value: number) {
+  __onAnimatedValueUpdateReceived(value: number) {
     this.__callListeners(value);
   }
 

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -211,7 +211,7 @@ class AnimatedValue extends AnimatedWithChildren {
     }
   }
 
-  _onAnimatedValueUpdateReceived(value: number): void {
+  __onAnimatedValueUpdateReceived(value: number): void {
     this._updateValue(value, false /*flush*/);
   }
 

package/Libraries/AppState/AppState.js

@@ -154,7 +154,7 @@ class AppState {
       case 'focus':
         // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
         // $FlowIssue[incompatible-call]
-        emitter.addListener('appStateFocusChange', listener);
+        emitter.removeListener('appStateFocusChange', listener);
         return;
     }
     throw new Error('Trying to unsubscribe from unknown event: ' + type);

package/Libraries/Blob/URL.js

@@ -101,7 +101,13 @@ export class URLSearchParams {
     }
     const last = this._searchParams.length - 1;
     return this._searchParams.reduce((acc, curr, index) => {
-      return acc + curr.join('=') + (index === last ? '' : '&');
+      return (
+        acc +
+        encodeURIComponent(curr[0]) +
+        '=' +
+        encodeURIComponent(curr[1]) +
+        (index === last ? '' : '&')
+      );
     }, '');
   }
 }

package/Libraries/Components/Button.js

@@ -146,6 +146,7 @@ type ButtonProps = $ReadOnly<{|
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   accessibilityState?: ?AccessibilityState,
   accessibilityHint?: ?string,
+  accessibilityLanguage?: ?Stringish,
 |}>;
 
 /**
@@ -277,6 +278,7 @@ class Button extends React.Component<ButtonProps> {
       accessible,
       accessibilityActions,
       accessibilityHint,
+      accessibilityLanguage,
       onAccessibilityAction,
     } = this.props;
     const buttonStyles = [styles.button];
@@ -320,6 +322,7 @@ class Button extends React.Component<ButtonProps> {
         onAccessibilityAction={onAccessibilityAction}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
+        accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"
         accessibilityState={accessibilityState}
         hasTVPreferredFocus={hasTVPreferredFocus}

package/Libraries/Components/DatePickerAndroid/NativeDatePickerAndroid.js

@@ -11,6 +11,11 @@
 import type {TurboModule} from '../../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 
+/**
+ * This file backs native modules that are used internally at Meta
+ * and this JS spec was intentionally left here. In the meanwhile this
+ * file should not be deleted.
+ */
 export interface Spec extends TurboModule {
   +open: (options: Object) => Promise<Object>;
 }

package/Libraries/Components/Pressable/Pressable.js

@@ -22,7 +22,7 @@ import type {
 } from '../View/ViewAccessibility';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
-import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect';
+import {type RectOrSize} from '../../StyleSheet/Rect';
 import type {
   LayoutEvent,
   MouseEvent,
@@ -43,6 +43,7 @@ type Props = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   accessibilityElementsHidden?: ?boolean,
   accessibilityHint?: ?Stringish,
+  accessibilityLanguage?: ?Stringish,
   accessibilityIgnoresInvertColors?: ?boolean,
   accessibilityLabel?: ?Stringish,
   accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
@@ -181,6 +182,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     delayLongPress,
     disabled,
     focusable,
+    hitSlop,
     onHoverIn,
     onHoverOut,
     onLongPress,
@@ -201,8 +203,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
 
   const [pressed, setPressed] = usePressState(testOnly_pressed === true);
 
-  const hitSlop = normalizeRect(props.hitSlop);
-
   const accessibilityState =
     disabled != null
       ? {...props.accessibilityState, disabled}