fix(iOS,Fabric): TouchableOpacity does not work on screens with headerTranslucent: true on notchless iOS devices with older OS versions (#2858)

## Description

Fixes #2855

The issue is obvious, I'm staggered that we have not caught it much
earlier.
When `headerconfig.translucent == true` we lay out the `RNSScreenView`
underneath the navigation bar & keep sending non-zero content offset to
screen shadow node.

## Changes

Now, when `headerconfig.translucent == true` we send `contentOffsetY ==
0`.

## Test code and steps to reproduce

Added `Test2855`. Also should be reproducible on `Test2466` when you set
`headerTranslucent: true` on the screen with pressables.

## Checklist

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

---------

Co-authored-by: kligarski <63918941+kligarski@users.noreply.github.com>

Author: kkafar

apps/src/tests/Test2855.tsx

@@ -0,0 +1,83 @@
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import React, { useState } from 'react';
+import { Button, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+function ProfileScreen() {
+  const navigation = useNavigation();
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(prevCount => prevCount + 1);
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile Screen</Text>
+      <Button title="goto Home" onPress={() => navigation.navigate('Home')} />
+      <View style={styles.countContainer}>
+        <Text>Count: {count}</Text>
+      </View>
+      <TouchableOpacity style={styles.button} onPress={onPress}>
+        <Text>Press Here</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+function HomeScreen() {
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(prevCount => prevCount + 1);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.countContainer}>
+        <Text>Count: {count}</Text>
+      </View>
+      <TouchableOpacity style={styles.button} onPress={onPress}>
+        <Text>Press Here</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+});
+
+const Stack = createNativeStackNavigator();
+
+function RootStack() {
+  return (
+    <Stack.Navigator initialRouteName="Profile">
+      <Stack.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{
+          headerTransparent: true,
+          headerShadowVisible: false,
+        }}
+      />
+      <Stack.Screen name="Profile" component={ProfileScreen} />
+    </Stack.Navigator>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <RootStack />
+    </NavigationContainer>
+  );
+}

apps/src/tests/index.ts

@@ -129,6 +129,7 @@ export { default as Test2767 } from './Test2767';
 export { default as Test2789 } from './Test2789';
 export { default as Test2811 } from './Test2811';
 export { default as Test2819 } from './Test2819';
+export { default as Test2855 } from './Test2855';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';
 export { default as TestHeader } from './TestHeader';

common/cpp/react/renderer/components/rnscreens/RNSScreenShadowNode.cpp

@@ -11,8 +11,7 @@ extern const char RNSScreenComponentName[] = "RNSScreen";
 Point RNSScreenShadowNode::getContentOriginOffset(
     bool /*includeTransform*/) const {
   auto stateData = getStateData();
-  auto contentOffset = stateData.contentOffset;
-  return {contentOffset.x, contentOffset.y};
+  return stateData.contentOffset;
 }
 
 std::optional<std::reference_wrapper<const ShadowNode::Shared>>

ios/RNSScreen.mm

@@ -151,12 +151,20 @@ - (void)updateBounds
 #ifdef RCT_NEW_ARCH_ENABLED
   if (_state != nullptr) {
     RNSScreenStackHeaderConfig *config = [self findHeaderConfig];
-    // in large title, ScrollView handles the offset of content so we cannot set it here also.
-    CGFloat headerHeight =
-        config.largeTitle ? 0 : [_controller calculateHeaderHeightIsModal:self.isPresentedAsNativeModal];
-    auto newState =
-        react::RNSScreenState{RCTSizeFromCGSize(self.bounds.size), RCTPointFromCGPoint(CGPointMake(0, headerHeight))};
+
+    // 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
+    // navigation bar, therefore there is no need to set content offset in shadow tree.
+    const CGFloat effectiveContentOffsetY = config.largeTitle || config.translucent
+        ? 0
+        : [_controller calculateHeaderHeightIsModal:self.isPresentedAsNativeModal];
+
+    auto newState = react::RNSScreenState{RCTSizeFromCGSize(self.bounds.size), {0, effectiveContentOffsetY}};
     _state->updateState(std::move(newState));
+
+    // TODO: Requesting layout on every layout is wrong. We should look for a way to get rid of this.
     UINavigationController *navctr = _controller.navigationController;
     [navctr.view setNeedsLayout];
   }

ios/RNSScreenStackHeaderConfig.mm

@@ -603,7 +603,7 @@ + (void)updateViewController:(UIViewController *)vc
   BOOL shouldHide = config == nil || !config.shouldHeaderBeVisible;
 
   if (!shouldHide && !config.translucent) {
-    // when nav bar is not translucent we chage edgesForExtendedLayout to avoid system laying out
+    // when nav bar is not translucent we change edgesForExtendedLayout to avoid system laying out
     // the screen underneath navigation controllers
     vc.edgesForExtendedLayout = UIRectEdgeNone;
   } else {