From 5af4b0c7a6d43d11a0e24a8238c597aebf7d533d Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacper.kafara@swmansion.com>
Date: Wed, 27 Dec 2023 14:32:59 +0100
Subject: [PATCH] fix(iOS): not working hitslop for headerRight/Left views
 (#1995)

## Description

Since #1825 header config is no longer first child of a screen &
`hitTest:withEvent:` method assumed this invariant to be true.

Fixed that by using appropriate screen method instead of blind
assumption.

Fixes #1981

## Changes

* Fixed `hitTest:withEvent:` method by using `findHeaderConfig`
`RNSScreenView`'s method
* Improved `findHeaderConfig` method itself

## Test code and steps to reproduce

`Test1981`

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes
---
 FabricTestExample/App.js           |   1 +
 FabricTestExample/src/Test1981.tsx | 103 +++++++++++++++++++++++++++++
 TestsExample/App.js                |   1 +
 TestsExample/src/Test1981.tsx      | 103 +++++++++++++++++++++++++++++
 ios/RNSScreen.mm                   |   8 ++-
 ios/RNSScreenStack.mm              |   4 +-
 6 files changed, 217 insertions(+), 3 deletions(-)
 create mode 100644 FabricTestExample/src/Test1981.tsx
 create mode 100644 TestsExample/src/Test1981.tsx

diff --git a/FabricTestExample/App.js b/FabricTestExample/App.js
index 4068ef4d05..189443a165 100644
--- a/FabricTestExample/App.js
+++ b/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);
 
diff --git a/FabricTestExample/src/Test1981.tsx b/FabricTestExample/src/Test1981.tsx
new file mode 100644
index 0000000000..511c2b6a8c
--- /dev/null
+++ b/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',
+  },
+});
diff --git a/TestsExample/App.js b/TestsExample/App.js
index b8be04b2b5..8e348b1297 100644
--- a/TestsExample/App.js
+++ b/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);
 
diff --git a/TestsExample/src/Test1981.tsx b/TestsExample/src/Test1981.tsx
new file mode 100644
index 0000000000..511c2b6a8c
--- /dev/null
+++ b/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',
+  },
+});
diff --git a/ios/RNSScreen.mm b/ios/RNSScreen.mm
index 4b24cffff6..123eee6447 100644
--- a/ios/RNSScreen.mm
+++ b/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;
 }
 
diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index 6c3afe6b25..be79f080d0 100644
--- a/ios/RNSScreenStack.mm
+++ b/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) {