fix(iOS, Stack, Fabric): Pressable hitSlop in header subviews on Fabric (#3446)

## Description

Fixes Pressable `hitSlop` in header subviews on Fabric, iOS.

| before | after |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/df8823fb-efb5-4424-9cd3-8a6fff0ca088"
/> | <video
src="https://github.com/user-attachments/assets/e661f723-6129-4c05-8f09-f47e6e9a2f69"
/>

Closes
software-mansion/react-native-screens-labs#552.

## Changes

- convert hit test point from `RNSScreenStack`'s coordinates to that of
`RNSScreenStackHeaderConfig` (on Fabric, it has negative origin.y so
that ShadowTree knows about navigation bar + subviews positioning)
- fix logic in `RNSScreenStackHeaderConfig`'s hitTest:
- previous implementation would always return after checking only one
subview leading to inconsistent behavior
- change order of iteration through`HeaderSubview`'s subviews and add
early return, matching `RCTViewComponentView` implementation
- add test screen
- make `PressableWithFeedback` pass props to `Pressable` component

## Test code and steps to reproduce

Run `Test3466`.

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes

Author: kligarski

apps/src/shared/PressableWithFeedback.tsx

@@ -45,6 +45,7 @@ const PressableWithFeedback = React.forwardRef((props: PressableProps, ref: Forw
   return (
     <View ref={ref} style={[contentsStyle]}>
       <Pressable
+        {...props}
         onPressIn={onPressInCallback}
         onPress={onPressCallback}
         onPressOut={onPressOutCallback}

apps/src/tests/Test3446.tsx

@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+import PressableWithFeedback from '../shared/PressableWithFeedback';
+import { ScrollView, View } from 'react-native';
+import Colors from '../shared/styling/Colors';
+import { SettingsPicker, SettingsSwitch } from '../shared';
+
+type RouteParamList = {
+  Home: undefined;
+};
+
+type NavigationProp<ParamList extends ParamListBase> = {
+  navigation: NativeStackNavigationProp<ParamList>;
+};
+
+type StackNavigationProp = NavigationProp<RouteParamList>;
+
+const Stack = createNativeStackNavigator();
+
+interface Configuration {
+  size: 'sm' | 'md' | 'lg';
+  hidesSharedBackground: boolean;
+  hitSlop: '0' | '10' | '30';
+  pressRetentionOffset: '0' | '20' | '50';
+}
+
+function getPressableFromConfig(config: Configuration) {
+  return (
+    <PressableWithFeedback
+      key={
+        config.size +
+        '_' +
+        config.hidesSharedBackground +
+        '_' +
+        config.hitSlop +
+        '_' +
+        config.pressRetentionOffset
+      }
+      hitSlop={Number(config.hitSlop)}
+      pressRetentionOffset={Number(config.pressRetentionOffset)}>
+      <View
+        style={{
+          width: config.size === 'sm' ? 10 : config.size === 'md' ? 36 : 80,
+          height: config.size === 'sm' ? 10 : config.size === 'md' ? 36 : 40,
+        }}
+      />
+    </PressableWithFeedback>
+  );
+}
+
+function Screen({ navigation }: StackNavigationProp) {
+  const [config, setConfig] = useState<Configuration>({
+    size: 'sm',
+    hidesSharedBackground: true,
+    hitSlop: '0',
+    pressRetentionOffset: '0',
+  });
+
+  useEffect(() => {
+    navigation.setOptions({
+      unstable_headerLeftItems: () => [
+        {
+          type: 'custom',
+          element: getPressableFromConfig(config),
+          hidesSharedBackground: config.hidesSharedBackground,
+        },
+      ],
+      unstable_headerRightItems: () => [
+        {
+          type: 'custom',
+          element: getPressableFromConfig(config),
+          hidesSharedBackground: config.hidesSharedBackground,
+        },
+      ],
+    });
+  }, [config, navigation]);
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={{ padding: 16, gap: 5 }}>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100%',
+          height: 200,
+          backgroundColor: Colors.BlueLight60,
+        }}>
+        {getPressableFromConfig(config)}
+      </View>
+      <SettingsSwitch
+        label="hidesSharedBackground"
+        value={config.hidesSharedBackground}
+        onValueChange={value =>
+          setConfig({ ...config, hidesSharedBackground: value })
+        }
+      />
+      <SettingsPicker<Configuration['size']>
+        label="size"
+        value={config.size}
+        onValueChange={value =>
+          setConfig({
+            ...config,
+            size: value,
+          })
+        }
+        items={['sm', 'md', 'lg']}
+      />
+      <SettingsPicker<Configuration['hitSlop']>
+        label="hitSlop"
+        value={config.hitSlop}
+        onValueChange={value =>
+          setConfig({
+            ...config,
+            hitSlop: value,
+          })
+        }
+        items={['0', '10', '30']}
+      />
+      <SettingsPicker<Configuration['pressRetentionOffset']>
+        label="pressRetentionOffset"
+        value={config.pressRetentionOffset}
+        onValueChange={value =>
+          setConfig({
+            ...config,
+            pressRetentionOffset: value,
+          })
+        }
+        items={['0', '20', '50']}
+      />
+    </ScrollView>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Home"
+          component={Screen}
+          options={{ title: 'Test Pressables' }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

apps/src/tests/index.ts

@@ -166,6 +166,7 @@ export { default as Test3369 } from './Test3369';
 export { default as Test3379 } from './Test3379';
 export { default as Test3422 } from './Test3422';
 export { default as Test3425 } from './Test3425';
+export { default as Test3446 } from './Test3446';
 export { default as Test3450 } from './Test3450';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 // The following test was meant to demo the "go back" gesture using Reanimated

ios/RNSScreenStack.mm

@@ -1129,7 +1129,8 @@ - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
     RNSScreenView *topMostScreen = (RNSScreenView *)_reactSubviews.lastObject;
     UIView *headerConfig = topMostScreen.findHeaderConfig;
     if ([headerConfig isKindOfClass:[RNSScreenStackHeaderConfig class]]) {
-      UIView *headerHitTestResult = [headerConfig hitTest:point withEvent:event];
+      CGPoint convertedPoint = [self convertPoint:point toView:headerConfig];
+      UIView *headerHitTestResult = [headerConfig hitTest:convertedPoint withEvent:event];
       if (headerHitTestResult != nil) {
         return headerHitTestResult;
       }

ios/RNSScreenStackHeaderConfig.mm

@@ -169,19 +169,17 @@ - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
         continue;
       }
 
-      // we wrap the headerLeft/Right component in a UIBarButtonItem
-      // so we need to hit test subviews from left to right, because of the view flattening
-      UIView *headerComponent = nil;
-      for (UIView *headerComponentSubview in subview.subviews) {
+      // We wrap the headerLeft/Right component in a UIBarButtonItem
+      // so we need to hit test subviews, because of the view flattening
+      // (we match RCTViewComponentView implementation).
+      for (UIView *headerComponentSubview in [subview.subviews reverseObjectEnumerator]) {
         CGPoint convertedPoint = [self convertPoint:point toView:headerComponentSubview];
         UIView *hitTestResult = [headerComponentSubview hitTest:convertedPoint withEvent:event];
 
         if (hitTestResult != nil) {
-          headerComponent = hitTestResult;
+          return hitTestResult;
         }
       }
-
-      return headerComponent;
     }
   }
   return nil;