Support setting hitSlop with single value (JS changes)

Summary: JS changes to support D32138347 (a96bdb7) Changelog: [Android][Fixed] Enable hitSlop to be set using a single number. Reviewed By: yungsters Differential Revision: D32559015 fbshipit-source-id: c0409e6e5dd95b35a2a4605b16cfb48104be2858
facebook · Jan 4, 2022 · 589b129 · 589b129
1 parent c68c47d
commit 589b129
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;