fix(iOS): prevent blocking search bar cancel button by detached header subviews (#2912)

## Description

Fixes #2899

When search bar is focused UIKit might temporarily detach our subviews
from the window.
Currently we just hit test every subview in `_reactSubviews` not taking
into account above factor,
and therefore leading to situations where search bar cancel button is
not clickable.

## Changes

We're not hit testing detached subviews now. 

## Test code and steps to reproduce

Added `Test2899` for this purpose.

1. Click on search bar to focus it,
2. click on cancel button to lose focus. 

Previously this wouldn't work. 

## Bug recording


https://github.com/user-attachments/assets/bdc22f87-ed4b-4e9b-98ef-8a5d8ad23c9f

## Checklist

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

---------

Co-authored-by: kligarski <[email protected]>

Author: kkafar

apps/src/shared/Rectangle.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ColorValue, View, ViewProps, ViewStyle } from 'react-native';
+
+export interface RectangleProps extends ViewProps {
+  color?: ColorValue,
+  width?: ViewStyle['width'],
+  height?: ViewStyle['height'],
+}
+
+export function Rectangle(props: RectangleProps) {
+  const { color, width, height, style, ...remainingProps } = props;
+  return <View style={[{ backgroundColor: color, width, height }, style]} {...remainingProps} />;
+}
+

apps/src/shared/styles.tsx

@@ -0,0 +1,7 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  flexContainer: {
+    flex: 1,
+  },
+});

apps/src/tests/Test2899.tsx

@@ -0,0 +1,35 @@
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import React from 'react';
+import { styles } from '../shared/styles';
+import { View } from 'react-native';
+import { Rectangle } from '../shared/Rectangle';
+
+const Stack = createNativeStackNavigator();
+
+function Home() {
+  return (
+    <View style={[styles.flexContainer, { backgroundColor: 'darkorange' }]} />
+  );
+}
+
+function HeaderRight() {
+  return (
+    <Rectangle width={128} height={36} color={'darkblue'} />
+  );
+}
+
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={Home} options={{
+          headerRight: HeaderRight,
+          headerSearchBarOptions: {},
+        }} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default App;

apps/src/tests/index.ts

@@ -133,6 +133,7 @@ export { default as Test2811 } from './Test2811';
 export { default as Test2819 } from './Test2819';
 export { default as Test2855 } from './Test2855';
 export { default as Test2877 } from './Test2877'; // [E2E created](iOS): issue is related to formSheet on iOS
+export { default as Test2899 } from './Test2899';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';
 export { default as TestHeader } from './TestHeader';

ios/RNSScreenStackHeaderConfig.mm

@@ -162,6 +162,13 @@ - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
 {
   for (RNSScreenStackHeaderSubview *subview in _reactSubviews) {
     if (subview.type == RNSScreenStackHeaderSubviewTypeLeft || subview.type == RNSScreenStackHeaderSubviewTypeRight) {
+      // E.g. presence of focused search bar might cause the subviews to be temporarily unmounted & we don't want
+      // them to be touch targets then, otherwise we might e.g. block cancel button.
+      // See: https://github.com/software-mansion/react-native-screens/issues/2899
+      if (subview.window == nil) {
+        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;