fix: HeaderConfig impacts layout of Screen's contents

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

@@ -14,7 +14,7 @@
 
 export const ScreenStackHeaderSubview: React.ComponentType<
   React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
 > = ScreenStackHeaderSubviewNativeComponent as any;
 
 export function ScreenStackHeaderConfig(
   props: ScreenStackHeaderConfigProps,
@@ -23,6 +23,7 @@
     <ScreenStackHeaderConfigNativeComponent
       {...props}
       style={styles.headerConfig}
+      pointerEvents="box-none"
     />
   );
 }
@@ -100,8 +101,11 @@
     flexShrink: 1,
   },
   headerConfig: {
-    flexDirection: 'row',
+    position: 'absolute',
+    top: '-100%',
     width: '100%',
+    flexDirection: 'row',
     justifyContent: 'space-between',
+    alignItems: 'center',
   },
 });