fix(iOS): not working hitslop for headerRight/Left views

FabricTestExample/App.js

@@ -90,6 +90,7 @@ import Test1802 from './src/Test1802';
 import Test1829 from './src/Test1829';
 import Test1844 from './src/Test1844';
 import Test1864 from './src/Test1864';
+import Test1981 from './src/Test1981';
 
 enableFreeze(true);
 

FabricTestExample/src/Test1981.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { NavigationContainer, NavigationContext, ParamListBase } from '@react-navigation/native';
+import { createNativeStackNavigator, NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { View, StyleSheet, Button, Pressable, Text } from 'react-native';
+
+type NavProp = {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+};
+
+const Stack = createNativeStackNavigator();
+
+function FirstScreen({ navigation }: NavProp) {
+  const navigateToSecond = () => {
+    navigation.navigate('Second');
+  };
+  return (
+    <View style={[styles.redbox, styles.centeredView]}>
+      <Button title="Navigate to Second" onPress={navigateToSecond} />
+      <PressableWithHitSlop />
+    </View>
+  );
+}
+
+function SecondScreen({ navigation }: NavProp) {
+  const navigateToFirst = () => {
+    navigation.navigate('First');
+  };
+
+  return (
+    <View style={[styles.greenbox, styles.centeredView]}>
+      <Button title="Navigate to First" onPress={navigateToFirst} />
+    </View>
+  );
+}
+
+function HeaderLeft() {
+  const onPressCallback = () => {
+    console.log('HeaderLeft onPressCallback invoked');
+  };
+
+  return (
+    <Pressable style={[styles.bluebox]} hitSlop={12} onPress={onPressCallback}>
+      <Text style={{ color: 'white' }}>Press me</Text>
+    </Pressable>
+  );
+}
+
+function PressableWithHitSlop() {
+  const onPressCallback = () => {
+    console.log('PressableWithHitSlop onPressCallback invoked');
+  };
+
+  return (
+    <View
+      style={{
+        padding: 12,
+        margin: -12,
+        backgroundColor: 'yellow',
+      }}>
+      <Pressable
+        style={[styles.greenbox]}
+        hitSlop={12}
+        onPress={onPressCallback}>
+        <Text style={{ color: 'white' }}>Press me</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="First"
+          component={FirstScreen}
+          options={{
+            headerLeft: () => HeaderLeft(),
+            headerRight: () => PressableWithHitSlop(),
+          }}
+        />
+        <Stack.Screen name="Second" component={SecondScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  redbox: {
+    backgroundColor: 'red',
+  },
+  greenbox: {
+    backgroundColor: 'green',
+  },
+  bluebox: {
+    backgroundColor: 'blue',
+  },
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

TestsExample/App.js

@@ -93,6 +93,7 @@ import Test1802 from './src/Test1802';
 import Test1844 from './src/Test1844';
 import Test1864 from './src/Test1864';
 import Test1829 from './src/Test1829';
+import Test1981 from './src/Test1981';
 
 enableFreeze(true);
 

TestsExample/src/Test1981.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { NavigationContainer, NavigationContext, ParamListBase } from '@react-navigation/native';
+import { createNativeStackNavigator, NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { View, StyleSheet, Button, Pressable, Text } from 'react-native';
+
+type NavProp = {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+};
+
+const Stack = createNativeStackNavigator();
+
+function FirstScreen({ navigation }: NavProp) {
+  const navigateToSecond = () => {
+    navigation.navigate('Second');
+  };
+  return (
+    <View style={[styles.redbox, styles.centeredView]}>
+      <Button title="Navigate to Second" onPress={navigateToSecond} />
+      <PressableWithHitSlop />
+    </View>
+  );
+}
+
+function SecondScreen({ navigation }: NavProp) {
+  const navigateToFirst = () => {
+    navigation.navigate('First');
+  };
+
+  return (
+    <View style={[styles.greenbox, styles.centeredView]}>
+      <Button title="Navigate to First" onPress={navigateToFirst} />
+    </View>
+  );
+}
+
+function HeaderLeft() {
+  const onPressCallback = () => {
+    console.log('HeaderLeft onPressCallback invoked');
+  };
+
+  return (
+    <Pressable style={[styles.bluebox]} hitSlop={12} onPress={onPressCallback}>
+      <Text style={{ color: 'white' }}>Press me</Text>
+    </Pressable>
+  );
+}
+
+function PressableWithHitSlop() {
+  const onPressCallback = () => {
+    console.log('PressableWithHitSlop onPressCallback invoked');
+  };
+
+  return (
+    <View
+      style={{
+        padding: 12,
+        margin: -12,
+        backgroundColor: 'yellow',
+      }}>
+      <Pressable
+        style={[styles.greenbox]}
+        hitSlop={12}
+        onPress={onPressCallback}>
+        <Text style={{ color: 'white' }}>Press me</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="First"
+          component={FirstScreen}
+          options={{
+            headerLeft: () => HeaderLeft(),
+            headerRight: () => PressableWithHitSlop(),
+          }}
+        />
+        <Stack.Screen name="Second" component={SecondScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  redbox: {
+    backgroundColor: 'red',
+  },
+  greenbox: {
+    backgroundColor: 'green',
+  },
+  bluebox: {
+    backgroundColor: 'blue',
+  },
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

ios/RNSScreen.mm

@@ -560,13 +560,19 @@ - (void)presentationControllerDidDismiss:(UIPresentationController *)presentatio
   }
 }
 
-- (RNSScreenStackHeaderConfig *_Nullable)findHeaderConfig
+- (nullable RNSScreenStackHeaderConfig *)findHeaderConfig
 {
+  // Fast path
+  if ([self.reactSubviews.lastObject isKindOfClass:RNSScreenStackHeaderConfig.class]) {
+    return (RNSScreenStackHeaderConfig *)self.reactSubviews.lastObject;
+  }
+
   for (UIView *view in self.reactSubviews) {
     if ([view isKindOfClass:RNSScreenStackHeaderConfig.class]) {
       return (RNSScreenStackHeaderConfig *)view;
     }
   }
+
   return nil;
 }
 

ios/RNSScreenStack.mm

@@ -908,8 +908,8 @@ - (BOOL)isInGestureResponseDistance:(UIGestureRecognizer *)gestureRecognizer top
 - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
 {
   if (CGRectContainsPoint(_controller.navigationBar.frame, point)) {
-    // headerConfig should be the first subview of the topmost screen
-    UIView *headerConfig = [[_reactSubviews.lastObject reactSubviews] firstObject];
+    RNSScreenView *topMostScreen = (RNSScreenView *)_reactSubviews.lastObject;
+    UIView *headerConfig = topMostScreen.findHeaderConfig;
     if ([headerConfig isKindOfClass:[RNSScreenStackHeaderConfig class]]) {
       UIView *headerHitTestResult = [headerConfig hitTest:point withEvent:event];
       if (headerHitTestResult != nil) {