fix(iOS): pressables in header not working when hosting screen has modal presentation (#2915)

## Description

Fixes #2842

`RNSModalScreen` sends non-zero contentOffsetY to its shadow node. This
is wrong, because its content in HostTree is not offset by any means, as
there is no associated navigation bar. I do not know, why we do sent
non-zero header height there. I guess that this case was overlooked in
#2028.

Above behaviour leads to discrepancies between HostTree & ShadowTree
positions of descendant views, causing problems with pressables.

## Changes

<!--
Please describe things you've changed here, make a **high level**
overview, if change is simple you can omit this section.

For example:

- Updated `about.md` docs

-->

<!--

## Screenshots / GIFs

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

### Before

### After

-->

## Test code and steps to reproduce

<!--
Please include code that can be used to test this change and short
description how this example should work.
This snippet should be as minimal as possible and ready to be pasted
into editor (don't exclude exports or remove "not important" parts of
reproduction example)
-->

Added `Test2915` to test exactly this case.

## Checklist

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

Author: kkafar

FabricExample/e2e/issuesTests/Test2842.e2e.ts

@@ -0,0 +1,55 @@
+import { device, expect, element, by } from 'detox';
+import { describeIfiOS } from '../e2e-utils';
+
+describeIfiOS('Test2842 - pressables in modal', () => {
+  beforeAll(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('Test2842 should exist', async () => {
+    await waitFor(element(by.id('root-screen-tests-Test2842')))
+      .toBeVisible()
+      .whileElement(by.id('root-screen-examples-scrollview'))
+      .scroll(600, 'down', NaN, 0.85);
+
+    await expect(element(by.id('root-screen-tests-Test2842'))).toBeVisible();
+    await element(by.id('root-screen-tests-Test2842')).tap();
+  });
+
+  it('Modal should open', async () => {
+    const openModalButtonElement = element(by.id('home-button-open-modal'));
+    await expect(openModalButtonElement).toExist();
+    await openModalButtonElement.tap();
+
+    // Verify that the modal has opened by checking that the "close" button is visible
+    const closeModalButtonElement = element(by.id('modal-button-close'));
+    await expect(closeModalButtonElement).toBeVisible();
+  });
+
+  it('HeaderRight subview should be visible', async () => {
+    const headerRightElement = element(by.id('subview-headerright'));
+    await expect(headerRightElement).toBeVisible(100);
+  });
+
+  it('HeaderRight should be pressable', async () => {
+    const headerRightElement = element(by.id('subview-headerright'));
+    await headerRightElement.tap();
+
+    // These are rendered under the modal, therefore they are not visible at the first glance.
+    await expect(element(by.text('1. onPressIn'))).toExist();
+    await expect(element(by.text('2. onPress'))).toExist();
+    await expect(element(by.text('3. onPressOut'))).toExist();
+  });
+
+  it('HeaderRight should not lose focus on swipe', async () => {
+    const headerRightElement = element(by.id('subview-headerright'));
+
+    await headerRightElement.swipe('right', 'slow', 0.15, 0.1, 0.5);
+
+    // If the element has lost focus, it wouldn't fire onPress.
+    // Note that when swiping the event order is different - but this is RN behaviour.
+    await expect(element(by.text('4. onPressIn'))).toExist();
+    await expect(element(by.text('5. onPressOut'))).toExist();
+    await expect(element(by.text('6. onPress'))).toExist();
+  });
+});

apps/src/tests/Test2842.tsx

@@ -0,0 +1,75 @@
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { NativeStackNavigationProp, createNativeStackNavigator } from '@react-navigation/native-stack';
+import React from 'react';
+import { styles } from '../shared/styles';
+import { Button, Text, View } from 'react-native';
+import { Rectangle } from '../shared/Rectangle';
+import PressableWithFeedback from '../shared/PressableWithFeedback';
+import { ToastProvider, useToast } from '../shared';
+
+interface StackParamList extends ParamListBase {
+  Home: undefined;
+  Modal: undefined;
+}
+
+interface StackNavigationProps {
+  navigation: NativeStackNavigationProp<StackParamList>;
+}
+
+const Stack = createNativeStackNavigator<StackParamList>();
+
+function Home({ navigation }: StackNavigationProps) {
+  return (
+    <View style={[styles.flexContainer, { backgroundColor: 'darkorange' }]}>
+      <Text>Home</Text>
+      <Button title="Open modal" onPress={() => navigation.navigate('Modal')} testID="home-button-open-modal" />
+    </View>
+  );
+}
+
+function Modal({ navigation }: StackNavigationProps) {
+  return (
+    <View style={[styles.flexContainer, { backgroundColor: 'lightblue' }]}>
+      <Text>Modal</Text>
+      <Button title="Close modal" onPress={() => navigation.pop()} testID="modal-button-close" />
+    </View>
+  );
+}
+
+function HeaderRight() {
+  const toast = useToast();
+
+  return (
+    <PressableWithFeedback
+      onPress={() => {
+        toast.push({ backgroundColor: 'blue', message: 'onPress' });
+      }}
+      onPressIn={() => {
+        toast.push({ backgroundColor: 'blue', message: 'onPressIn' });
+      }}
+      onPressOut={() => {
+        toast.push({ backgroundColor: 'blue', message: 'onPressOut' });
+      }}
+    >
+      <Rectangle width={128} height={36} color={'lightgreen'} style={{ borderRadius: 16 }} testID="subview-headerright" />
+    </PressableWithFeedback>
+  );
+}
+
+function App() {
+  return (
+    <ToastProvider>
+      <NavigationContainer>
+        <Stack.Navigator>
+          <Stack.Screen name="Home" component={Home} />
+          <Stack.Screen name="Modal" component={Modal} options={{
+            presentation: 'modal',
+            headerRight: HeaderRight,
+          }} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </ToastProvider>
+  );
+}
+
+export default App;

apps/src/tests/index.ts

@@ -131,6 +131,7 @@ export { default as Test2789 } from './Test2789';
 export { default as Test2809 } from './Test2809';
 export { default as Test2811 } from './Test2811';
 export { default as Test2819 } from './Test2819';
+export { default as Test2842 } from './Test2842'; // [E2E created](iOS): issue is related to iOS
 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 Test2895 } from './Test2895';

ios/RNSScreen.mm

@@ -1,5 +1,6 @@
 #import <UIKit/UIKit.h>
 
+#import "RNSModalScreen.h"
 #import "RNSScreen.h"
 #import "RNSScreenContainer.h"
 #import "RNSScreenContentWrapper.h"
@@ -154,12 +155,14 @@ - (void)updateBounds
   if (_state != nullptr) {
     RNSScreenStackHeaderConfig *config = [self findHeaderConfig];
 
-    // in large title, ScrollView handles the offset of content so we cannot set it here also
-    // TODO: Why is it assumed in comment above, that large title uses scrollview here? What if only SafeAreaView is
+    // * in large title, ScrollView handles the offset of content so we cannot set it here also
+    // * TODO: Why is it assumed in comment above, that large title uses scrollview here? What if only SafeAreaView is
     // used?
-    // When config.translucent == true, we currently use `edgesForExtendedLayout` and the screen is laid out under the
+    // * When config.translucent == true, we currently use `edgesForExtendedLayout` and the screen is laid out under the
     // navigation bar, therefore there is no need to set content offset in shadow tree.
-    const CGFloat effectiveContentOffsetY = config.largeTitle || config.translucent
+    // * When this view is the modal root controller (presented in separate view hierarchy) it does not have navigation
+    // bar! We send non-zero size to JS, for some reason. TODO: this needs to be investigated.
+    const CGFloat effectiveContentOffsetY = config.largeTitle || config.translucent || self.isPresentedAsNativeModal
         ? 0
         : [_controller calculateHeaderHeightIsModal:self.isPresentedAsNativeModal];