Support setting hitSlop with single value (JS) [re-land]

Summary:
JS changes to support D32138347 (a96bdb7). This was previously reverted due to missing iOS Paper support.

Changelog: [Android][Fixed] Enable hitSlop to be set using a single number.

Original commit changeset: 91cfcc86582c

Original Phabricator Diff: D32559015 (589b129)

Reviewed By: yungsters

Differential Revision: D33453327

fbshipit-source-id: d289a0a8b8208bc9c68e6ca537632b745e8196ed

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,
@@ -181,6 +181,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     delayLongPress,
     disabled,
     focusable,
+    hitSlop,
     onHoverIn,
     onHoverOut,
     onLongPress,
@@ -201,8 +202,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}

Libraries/Components/View/ViewPropTypes.js

@@ -18,7 +18,7 @@ import type {
   Layout,
   LayoutEvent,
 } from '../../Types/CoreEventTypes';
-import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
+import type {EdgeInsetsOrSizeProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {Node} from 'react';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {
@@ -481,7 +481,7 @@ export type ViewProps = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/view#hitslop
    */
-  hitSlop?: ?EdgeInsetsProp,
+  hitSlop?: ?EdgeInsetsOrSizeProp,
 
   /**
    * Controls whether the `View` can be the target of touch events.

Libraries/Pressability/PressabilityDebug.js

@@ -10,18 +10,14 @@
 
 import normalizeColor from '../StyleSheet/normalizeColor';
 import type {ColorValue} from '../StyleSheet/StyleSheet';
+import {normalizeRect, type RectOrSize} from '../StyleSheet/Rect';
 
 import View from '../Components/View/View';
 import * as React from 'react';
 
 type Props = $ReadOnly<{|
   color: ColorValue,
-  hitSlop: ?$ReadOnly<{|
-    bottom?: ?number,
-    left?: ?number,
-    right?: ?number,
-    top?: ?number,
-  |}>,
+  hitSlop: ?RectOrSize,
 |}>;
 
 /**
@@ -39,16 +35,16 @@ type Props = $ReadOnly<{|
  *   );
  *
  */
-export function PressabilityDebugView({color, hitSlop}: Props): React.Node {
+export function PressabilityDebugView(props: Props): React.Node {
   if (__DEV__) {
     if (isEnabled()) {
-      const normalizedColor = normalizeColor(color);
+      const normalizedColor = normalizeColor(props.color);
       if (typeof normalizedColor !== 'number') {
         return null;
       }
       const baseColor =
         '#' + (normalizedColor ?? 0).toString(16).padStart(8, '0');
-
+      const hitSlop = normalizeRect(props.hitSlop);
       return (
         <View
           pointerEvents="none"

Libraries/StyleSheet/EdgeInsetsPropType.js

@@ -10,6 +10,9 @@
 
 'use strict';
 
-import type {Rect} from './Rect';
+import type {Rect, RectOrSize} from './Rect';
 
+// TODO: allow all EdgeInsets-like property to be set using a single number
+// and unify EdgeInsetsProp with EdgeInsetsOrSizeProp
 export type EdgeInsetsProp = Rect;
+export type EdgeInsetsOrSizeProp = RectOrSize;