feat: add headerTitleAlign prop in native stack. closes #9829

packages/native-stack/src/types.tsx

@@ -259,6 +259,13 @@ export type NativeStackNavigationOptions = {
          */
         tintColor?: string;
       }) => React.ReactNode);
+  /**
+   * How to align the the header title.
+   * Defaults to `left` on platforms other than iOS.
+   *
+   * Not supported on iOS. It's always `center` on iOS and cannot be changed.
+   */
+  headerTitleAlign?: 'left' | 'center';
   /**
    * Style object for header title. Supported properties:
    * - fontFamily

packages/native-stack/src/views/HeaderConfig.tsx

@@ -38,6 +38,7 @@ export default function HeaderConfig({
   headerBlurEffect,
   headerTintColor,
   headerTitle,
+  headerTitleAlign,
   headerTitleStyle,
   headerTransparent,
   route,
@@ -151,21 +152,29 @@ export default function HeaderConfig({
             <ScreenStackHeaderLeftView>
               <View style={styles.row}>
                 {headerLeftElement}
-                {typeof headerTitle === 'function' ? (
-                  headerTitleElement
-                ) : (
-                  <HeaderTitle tintColor={tintColor}>{titleText}</HeaderTitle>
-                )}
+                {headerTitleAlign !== 'center' ? (
+                  typeof headerTitle === 'function' ? (
+                    headerTitleElement
+                  ) : (
+                    <HeaderTitle tintColor={tintColor}>{titleText}</HeaderTitle>
+                  )
+                ) : null}
               </View>
             </ScreenStackHeaderLeftView>
           ) : null}
+          {headerTitleAlign === 'center' ? (
+            <ScreenStackHeaderCenterView>
+              {typeof headerTitle === 'function' ? (
+                headerTitleElement
+              ) : (
+                <HeaderTitle tintColor={tintColor}>{titleText}</HeaderTitle>
+              )}
+            </ScreenStackHeaderCenterView>
+          ) : null}
         </>
       )}
       {headerBackImageSource !== undefined ? (
-        <ScreenStackHeaderBackButtonImage
-          key="backImage"
-          source={headerBackImageSource}
-        />
+        <ScreenStackHeaderBackButtonImage source={headerBackImageSource} />
       ) : null}
       {headerRightElement != null ? (
         <ScreenStackHeaderRightView>

packages/native-stack/src/views/NativeStackView.tsx

@@ -46,6 +46,7 @@ export default function NativeStackView({ state, descriptors }: Props) {
             headerLeft,
             headerRight,
             headerTitle,
+            headerTitleAlign,
             headerTitleStyle,
             headerStyle,
             headerShadowVisible,
@@ -117,6 +118,7 @@ export default function NativeStackView({ state, descriptors }: Props) {
                             headerTitle({ children, tintColor })
                         : headerTitle
                     }
+                    headerTitleAlign={headerTitleAlign}
                     headerTitleStyle={headerTitleStyle}
                     headerStyle={[
                       headerTransparent