fix(Android): header config shadow node has wrong origin when translucent == true (#3239)

## Description

#2466 fixes
Pressable in screen header by shifting the HeaderConfigShadowNode
origin.y by its frame height. (more info in the pull request).
However, setting isTranslucent to true on android displays the header
over the content so we must not apply this correction.

This fixes Pressable for translucent headers on Android.

## Changes

Skip the frame corrections on Android when translucent is true. I'm not
sure that's the cleanest way to fix this issue, but i'm not familiar
enough with react-native-screens to find a better solution. Because this
is an issue I have in my production app and this is critical, I'm
pushing this fix for now.

## Test code and steps to reproduce

https://snack.expo.dev/@dernise/header-navigation-broken

(Run this on a real device by scanning the QR code in expo go, do not
use the emulator provided by appetize)

---------

Co-authored-by: Kacper Kafara <[email protected]>

Author: maxencehenneron

apps/src/tests/Test3239.tsx

@@ -0,0 +1,88 @@
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator, NativeStackNavigationProp } from '@react-navigation/native-stack';
+import React from 'react';
+import { findNodeHandle, Text, View } from 'react-native';
+import PressableWithFeedback from '../shared/PressableWithFeedback';
+
+type StackParamList = {
+  Home: undefined,
+}
+
+type RouteProps = {
+  navigation: NativeStackNavigationProp<StackParamList>;
+}
+
+const Stack = createNativeStackNavigator<StackParamList>();
+
+function HeaderTitle(): React.JSX.Element {
+  return (
+    <PressableWithFeedback
+      onLayout={event => {
+        const { x, y, width, height } = event.nativeEvent.layout;
+        console.log('Title onLayout', { x, y, width, height });
+      }}
+      onPressIn={() => {
+        console.log('Pressable onPressIn');
+      }}
+      onPress={() => console.log('Pressable onPress')}
+      onPressOut={() => console.log('Pressable onPressOut')}
+      onResponderMove={() => console.log('Pressable onResponderMove')}
+      ref={node => {
+        console.log(findNodeHandle(node));
+        node?.measure((x, y, width, height, pageX, pageY) => {
+          console.log('header component measure', { x, y, width, height, pageX, pageY });
+        });
+      }}
+    >
+      <View style={{ height: 40, justifyContent: 'center', alignItems: 'center' }}>
+        <Text style={{ alignItems: 'center' }}>Regular Pressable</Text>
+      </View>
+    </PressableWithFeedback>
+  );
+}
+
+function HeaderLeft(): React.JSX.Element {
+  return (
+    <HeaderTitle />
+  );
+}
+
+function Home(_: RouteProps): React.JSX.Element {
+  return (
+    <View style={{ flex: 1, backgroundColor: 'rgba(0, 0, 0, .8)' }}
+    >
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center',marginTop: 48 }}>
+        <PressableWithFeedback
+          onPressIn={() => console.log('Pressable onPressIn')}
+          onPress={() => console.log('Pressable onPress')}
+          onPressOut={() => console.log('Pressable onPressOut')}
+        >
+          <View style={{ height: 40, width: 200, justifyContent: 'center', alignItems: 'center' }}>
+            <Text style={{ alignItems: 'center' }}>Regular Pressable</Text>
+          </View>
+        </PressableWithFeedback>
+      </View>
+    </View>
+  );
+}
+
+function App(): React.JSX.Element {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Home"
+          component={Home}
+          options={{
+            headerTransparent: true,
+            headerTitle: HeaderTitle,
+            headerLeft: HeaderLeft,
+            headerRight: HeaderLeft,
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default App;

apps/src/tests/index.ts

@@ -149,6 +149,7 @@ export { default as Test3111 } from './Test3111';
 export { default as Test3115 } from './Test3115';
 export { default as Test3168 } from './Test3168';
 export { default as Test3173 } from './Test3173';
+export { default as Test3239 } from './Test3239';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';
 export { default as TestHeader } from './TestHeader';

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

@@ -7,6 +7,18 @@ extern const char RNSScreenStackHeaderConfigComponentName[] =
 
 void RNSScreenStackHeaderConfigShadowNode::layout(LayoutContext layoutContext) {
   YogaLayoutableShadowNode::layout(layoutContext);
+
+#if defined(ANDROID)
+  const auto &headerProps =
+      *std::static_pointer_cast<const RNSScreenStackHeaderConfigProps>(
+          this->getProps());
+  if (headerProps.translucent) {
+    // On Android, when header is translucent, the Screen is laid out underneath
+    // the native header view, therefore HeaderConfig origin already matches
+    // the toolbar & the correction is not needed.
+    return;
+  }
+#endif // ANDROID
   applyFrameCorrections();
 }