fix: HeaderConfig impacts layout of Screen's contents (#2395)

## Description

This PR fixes headerConfig's incorrect layout with custom subviews after
recent changes in
#2325.

> [!note]
@kkafar: 
Previously, before #2325, all children of the headerConfig component
have been positioned absolutely, thus the headerConfig was always of
height 0, not impacting layout of other components. After #2325,
headerConfig's children are positioned using flexbox. This implies that
it has no longer height of 0, thus it impacts the layout of other other
elements, in particular `ScreenContentWrapper`, which is offset by the
height of the highest header config subview.
>
> The initial idea to solve this was to set `height: 0; overflow:
visible`, however, for some yet unknown reason the subviews become
invisible with such styles set of headerConfig. Note that if you set the
`height: 1` it works as expected.
>
> Due to above hindrance we decided to position the headerConfig
approximately at the position of native header, by setting `top: -100%`.
To prevent the headerConfig from blocking gestures we set
`pointerEvents: 'box-none'`.
>
> In the end I want to note, that it would be best if we came out with
solution that excludes headerConfig from layout as it was before #2325.

## Changes

- added `Test2395.tsx` repro
- adjusted headerConfig's styles


## Screenshots / GIFs

### Before
![Screenshot 2024-10-09 at 12 48
32](https://github.com/user-attachments/assets/532fbce1-27cf-4eeb-9b56-1eb3a9e9fd6f)


### After
![Screenshot 2024-10-09 at 12 47
57](https://github.com/user-attachments/assets/a45b6677-9663-4145-8a0a-ff9bbdf22f89)


## Test code and steps to reproduce

- use `Test2395.tsx` repro

## Checklist

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

---------

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

apps/src/tests/Test2395.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Title"
+          component={Screen}
+          options={{
+            headerRight: () => (
+              <View
+                style={{
+                  backgroundColor: 'lightblue',
+                  padding: 3,
+                  height: 200,
+                }}>
+                <Text>Right</Text>
+              </View>
+            ),
+            headerLeft: () => (
+              <View
+                style={{
+                  backgroundColor: 'goldenrod',
+                  padding: 8,
+                }}>
+                <Text>Left</Text>
+              </View>
+            ),
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+function Screen() {
+  return (
+    <FlatList
+      style={styles.container}
+      data={Array.from({ length: 20 }).fill(0) as number[]}
+      renderItem={({ index }) => (
+        <Pressable
+          key={index}
+          style={({ pressed }) => (pressed ? styles.pressed : undefined)}>
+          <Text style={styles.text}>List item {index + 1}</Text>
+        </Pressable>
+      )}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'mediumseagreen',
+  },
+  text: {
+    fontSize: 24,
+    color: 'black',
+    padding: 10,
+  },
+  pressed: {
+    backgroundColor: 'seagreen',
+  },
+});

apps/src/tests/index.ts

@@ -112,6 +112,7 @@ export { default as Test2271 } from './Test2271';
 export { default as Test2282 } from './Test2282';
 export { default as Test2317 } from './Test2317';
 export { default as Test2332 } from './Test2332';
+export { default as Test2395 } from './Test2395';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestHeader } from './TestHeader';
 export { default as TestHeaderTitle } from './TestHeaderTitle';

src/components/ScreenStackHeaderConfig.tsx

@@ -23,6 +23,7 @@ export function ScreenStackHeaderConfig(
     <ScreenStackHeaderConfigNativeComponent
       {...props}
       style={styles.headerConfig}
+      pointerEvents="box-none"
     />
   );
 }
@@ -100,8 +101,11 @@ const styles = StyleSheet.create({
     flexShrink: 1,
   },
   headerConfig: {
-    flexDirection: 'row',
+    position: 'absolute',
+    top: '-100%',
     width: '100%',
+    flexDirection: 'row',
     justifyContent: 'space-between',
+    alignItems: 'center',
   },
 });