From 589b129581903a737a64e14eab3f2e29620831d5 Mon Sep 17 00:00:00 2001
From: Pieter De Baets <pieterdb@fb.com>
Date: Tue, 4 Jan 2022 10:38:04 -0800
Subject: [PATCH] Support setting hitSlop with single value (JS changes)

Summary:
JS changes to support D32138347 (https://github.com/facebook/react-native/commit/a96bdb7154b0d8c7f43977d8a583e8d2cbdcb795)

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

Reviewed By: yungsters

Differential Revision: D32559015

fbshipit-source-id: c0409e6e5dd95b35a2a4605b16cfb48104be2858
---
 Libraries/Components/Pressable/Pressable.js |  5 ++---
 Libraries/Components/View/ViewPropTypes.js  |  4 ++--
 Libraries/Pressability/PressabilityDebug.js | 14 +++++---------
 Libraries/StyleSheet/EdgeInsetsPropType.js  |  5 ++++-
 4 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
index 877595adcf66ec..6aca0169847022 100644
--- a/Libraries/Components/Pressable/Pressable.js
+++ b/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}
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
index eedde2ba49e1b5..285fffa54f4bbd 100644
--- a/Libraries/Components/View/ViewPropTypes.js
+++ b/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 {
@@ -474,7 +474,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.
diff --git a/Libraries/Pressability/PressabilityDebug.js b/Libraries/Pressability/PressabilityDebug.js
index 2d37a26dd91764..9c5bb0830e29de 100644
--- a/Libraries/Pressability/PressabilityDebug.js
+++ b/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"
diff --git a/Libraries/StyleSheet/EdgeInsetsPropType.js b/Libraries/StyleSheet/EdgeInsetsPropType.js
index 8f8889c443fabf..d3aef0ef75d8c3 100644
--- a/Libraries/StyleSheet/EdgeInsetsPropType.js
+++ b/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;