[General] Pass null hitSlop instead of coercing it to zero (#4356)

## Description

`Touchable` normalized a missing `hitSlop` into `{ top: 0, left: 0,
bottom: 0, right: 0 }`, so a button with no `hitSlop` was still
configured with an explicit — if empty — one. That forces the handler to
hit-test against a rect identical to its frame instead of keeping its
unset default, and it makes removing the prop indistinguishable from
setting it to `0`.

`hitSlop` is now passed through as `null` when unset, and every platform
treats that as "reset to the default":

- **Android** — `GestureHandler.setHitSlop` accepts `null` and restores
`DEFAULT_HIT_SLOP`; `handleHitSlopProperty` checks `config.isNull`
first. The button view manager forwards the `null` to the managed
handler instead of skipping the update entirely.
- **iOS/macOS** — an `NSNull` in the config resets `_hitSlop` to
`RNGHHitSlopEmpty`. The Fabric component view keeps skipping the key
entirely when all edges are `0`, since the generated props struct cannot
carry null (added a comment explaining why).
- **Web** — `config.hitSlop ?? undefined`, so `undefined` still means
"not part of this update" while `null` clears it.

Prop types on `GestureHandlerButton` and the web `Config` were widened
to allow `null`.

## Test plan

- Ran a `Touchable` with and without `hitSlop`, and toggling the prop
on/off at runtime, on Android, iOS and web — the touch area matches the
frame when the prop is removed.
- `yarn ts-check`, `yarn lint:js`, `yarn test`

Author: j-piasecki

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/GestureHandler.kt

@@ -197,7 +197,13 @@ open class GestureHandler {
     }
   }
 
-  fun setHitSlop(padding: Float) = setHitSlop(padding, padding, padding, padding, HIT_SLOP_NONE, HIT_SLOP_NONE)
+  fun setHitSlop(padding: Float?) {
+    if (padding == null) {
+      hitSlop = DEFAULT_HIT_SLOP
+    } else {
+      setHitSlop(padding, padding, padding, padding, HIT_SLOP_NONE, HIT_SLOP_NONE)
+    }
+  }
 
   fun setInteractionController(controller: GestureHandlerInteractionController?) {
     interactionController = controller
@@ -989,7 +995,9 @@ open class GestureHandler {
       private const val KEY_CANCELS_JS_RESPONDER = "cancelsJSResponder"
 
       private fun handleHitSlopProperty(handler: GestureHandler, config: ReadableMap) {
-        if (config.getType(KEY_HIT_SLOP) == ReadableType.Number) {
+        if (config.isNull(KEY_HIT_SLOP)) {
+          handler.setHitSlop(null)
+        } else if (config.getType(KEY_HIT_SLOP) == ReadableType.Number) {
           val hitSlop = PixelUtil.toPixelFromDIP(config.getDouble(KEY_HIT_SLOP))
           handler.setHitSlop(
             hitSlop,

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt

@@ -137,14 +137,12 @@ class RNGestureHandlerButtonViewManager :
   @ReactProp(name = "gestureHitSlop")
   override fun setGestureHitSlop(view: ButtonViewGroup, gestureHitSlop: ReadableMap?) {
     view.managedHandlerHitSlop = gestureHitSlop
-    if (gestureHitSlop != null) {
-      updateManagedHandlerConfig(
-        view,
-        Arguments.createMap().apply {
-          putMap("hitSlop", gestureHitSlop)
-        },
-      )
-    }
+    updateManagedHandlerConfig(
+      view,
+      Arguments.createMap().apply {
+        putMap("hitSlop", gestureHitSlop)
+      },
+    )
   }
 
   @ReactProp(name = "hasLongPressHandler")

packages/react-native-gesture-handler/apple/RNGestureHandler.mm

@@ -169,6 +169,8 @@ - (void)updateConfig:(NSDictionary *)config
   prop = config[@"hitSlop"];
   if ([prop isKindOfClass:[NSNumber class]]) {
     _hitSlop.left = _hitSlop.right = _hitSlop.top = _hitSlop.bottom = [prop doubleValue];
+  } else if ([prop isKindOfClass:[NSNull class]]) {
+    _hitSlop = RNGHHitSlopEmpty;
   } else if (prop != nil) {
     _hitSlop.left = _hitSlop.right = RNGH_HIT_SLOP_GET(@"horizontal");
     _hitSlop.top = _hitSlop.bottom = RNGH_HIT_SLOP_GET(@"vertical");

packages/react-native-gesture-handler/apple/RNGestureHandlerButtonComponentView.mm

@@ -273,6 +273,10 @@ - (NSDictionary *)buildManagedHandlerConfig:(const RNGestureHandlerButtonProps &
     config[@"testID"] = RCTNSStringFromString(props.gestureTestID);
   }
 
+  // `gestureHitSlop` is optional on the JS side, but the generated props struct cannot carry
+  // null — an unset (or explicitly nulled out) prop arrives zero-initialized, i.e. 0 on every
+  // edge. That is equivalent to no hit slop, so the key is left out of the config entirely
+  // and the handler keeps its unset default instead of hit-testing against an identical frame.
   if (props.gestureHitSlop.top != 0 || props.gestureHitSlop.left != 0 || props.gestureHitSlop.bottom != 0 ||
       props.gestureHitSlop.right != 0) {
     config[@"hitSlop"] = @{

packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx

@@ -33,6 +33,7 @@ export interface ButtonProps extends ViewProps, AccessibilityProps {
         bottom?: number | undefined;
         right?: number | undefined;
       }
+    | null
     | undefined;
 
   /**

packages/react-native-gesture-handler/src/components/GestureHandlerButton.web.tsx

@@ -48,6 +48,7 @@ type ButtonProps = ViewProps & {
         bottom?: number;
         right?: number;
       }
+    | null
     | undefined;
   onButtonPress?:
     | ((event: NativeSyntheticEvent<ButtonEvent>) => void)

packages/react-native-gesture-handler/src/v3/components/Touchable/Touchable.tsx

@@ -162,12 +162,12 @@ export const Touchable = (props: TouchableProps) => {
   const tvProps = getTVProps(rest);
 
   const hitSlop =
-    typeof props.hitSlop === 'number' || props.hitSlop == null
+    typeof props.hitSlop === 'number'
       ? {
-          top: props.hitSlop ?? 0,
-          left: props.hitSlop ?? 0,
-          bottom: props.hitSlop ?? 0,
-          right: props.hitSlop ?? 0,
+          top: props.hitSlop,
+          left: props.hitSlop,
+          bottom: props.hitSlop,
+          right: props.hitSlop,
         }
       : props.hitSlop;
 

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

@@ -791,8 +791,10 @@ export default abstract class GestureHandler implements IGestureHandler {
   public updateGestureConfig(config: Partial<Config>): void {
     const enabledChanged = this.maybeUpdateEnabled(config.enabled);
 
+    // An explicit `null` clears the hit slop (no expansion on any edge),
+    // `undefined` means the property was not part of this update.
     if (config.hitSlop !== undefined) {
-      this.hitSlop = config.hitSlop;
+      this.hitSlop = config.hitSlop ?? undefined;
       this.validateHitSlops();
     }
 

packages/react-native-gesture-handler/src/web/interfaces.ts

@@ -49,7 +49,7 @@ export interface Config extends Record<string, ConfigArgs> {
   simultaneousHandlers?: Handler[] | null | undefined;
   waitFor?: Handler[] | null | undefined;
   blocksHandlers?: Handler[] | null | undefined;
-  hitSlop?: HitSlop | undefined;
+  hitSlop?: HitSlop | null | undefined;
   shouldCancelWhenOutside?: boolean | undefined;
   userSelect?: UserSelect | undefined;
   activeCursor?: ActiveCursor | undefined;