fix(Android): title invisible with searchbar enabled (#2456)

## Description

This PR fixes title being invisible when searchbar is enabled.

In #2395 I
added `alignItems: 'center'` style to the header config component. It
aimed to fix iOS subviews floating mid-screen when a larger subview is
provided:

| (iOS) without `alignItems: 'center'` | (iOS) with `alignItems:
'center'`|
| --- | --- |
| ![Simulator Screenshot - iPhone 16 Pro - 2024-10-28 at 09 36
53](https://github.com/user-attachments/assets/3066b95a-4904-41e7-b8d5-b56c985cd751)
| ![Simulator Screenshot - iPhone 16 Pro - 2024-10-28 at 09 37
07](https://github.com/user-attachments/assets/673bd550-9a8b-4200-acfc-c80f1ebea0a3)
|

This change unintentionally introduced a regression on Android. When
searchabar is enabled, the `ScreenStackHeaderConfig` components height
is equal 0 and it does not 'stretch' to accomodate the native title.
Simple solution is to center align the subviews depending on the
Platform.

| (Android) with `alignItems: 'center'` | (Android) without `alignItems:
'center'` |
| --- | --- |
|
![Screenshot_1730106776](https://github.com/user-attachments/assets/e1a8f358-3560-413d-b8ea-0426cfeaefc2)
|
![Screenshot_1730106784](https://github.com/user-attachments/assets/b746bc5c-4c7f-4277-a5ec-fa291d5390d4)
|


## Changes

- updated `Test2395.tsx` repro
- center aligning items conditionally based on Platform

## 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

apps/src/tests/Test2395.tsx

@@ -1,7 +1,17 @@
 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';
+import {
+  Button,
+  FlatList,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackScreenProps,
+} from '@react-navigation/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -10,8 +20,8 @@ export default function App() {
     <NavigationContainer>
       <Stack.Navigator>
         <Stack.Screen
-          name="Title"
-          component={Screen}
+          name="First"
+          component={First}
           options={{
             headerRight: () => (
               <View
@@ -34,15 +44,22 @@ export default function App() {
             ),
           }}
         />
+        <Stack.Screen
+          name="Second"
+          component={Second}
+          options={{
+            headerSearchBarOptions: {},
+          }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function Screen() {
+function First({ navigation }: NativeStackScreenProps<ParamListBase>) {
   return (
     <FlatList
-      style={styles.container}
+      style={styles.first}
       data={Array.from({ length: 20 }).fill(0) as number[]}
       renderItem={({ index }) => (
         <Pressable
@@ -51,15 +68,35 @@ function Screen() {
           <Text style={styles.text}>List item {index + 1}</Text>
         </Pressable>
       )}
+      ListFooterComponent={() => (
+        <Button
+          title="Go to second screen"
+          onPress={() => navigation.navigate('Second')}
+        />
+      )}
     />
   );
 }
 
+function Second({ navigation }: NativeStackScreenProps<ParamListBase>) {
+  return (
+    <View style={styles.second}>
+      <Button title="Go back" onPress={navigation.goBack} />
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
-  container: {
+  first: {
     flex: 1,
     backgroundColor: 'mediumseagreen',
   },
+  second: {
+    flex: 1,
+    backgroundColor: 'slateblue',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   text: {
     fontSize: 24,
     color: 'black',

src/components/ScreenStackHeaderConfig.tsx

@@ -6,7 +6,14 @@ import {
   ScreenStackHeaderConfigProps,
   SearchBarProps,
 } from '../types';
-import { Image, ImageProps, StyleSheet, View, ViewProps } from 'react-native';
+import {
+  Image,
+  ImageProps,
+  Platform,
+  StyleSheet,
+  View,
+  ViewProps,
+} from 'react-native';
 
 // Native components
 import ScreenStackHeaderConfigNativeComponent from '../fabric/ScreenStackHeaderConfigNativeComponent';
@@ -108,6 +115,8 @@ const styles = StyleSheet.create({
     width: '100%',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center',
+    // We only want to center align the subviews on iOS.
+    // See https://github.com/software-mansion/react-native-screens/pull/2456
+    alignItems: Platform.OS === 'ios' ? 'center' : undefined,
   },
 });