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 (