diff --git a/packages/native-stack/src/types.tsx b/packages/native-stack/src/types.tsx
index bb7bb6fa..fcbf48e8 100644
--- a/packages/native-stack/src/types.tsx
+++ b/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
diff --git a/packages/native-stack/src/views/HeaderConfig.tsx b/packages/native-stack/src/views/HeaderConfig.tsx
index 5201328f..51dbd53f 100644
--- a/packages/native-stack/src/views/HeaderConfig.tsx
+++ b/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({
{headerLeftElement}
- {typeof headerTitle === 'function' ? (
- headerTitleElement
- ) : (
- {titleText}
- )}
+ {headerTitleAlign !== 'center' ? (
+ typeof headerTitle === 'function' ? (
+ headerTitleElement
+ ) : (
+ {titleText}
+ )
+ ) : null}
) : null}
+ {headerTitleAlign === 'center' ? (
+
+ {typeof headerTitle === 'function' ? (
+ headerTitleElement
+ ) : (
+ {titleText}
+ )}
+
+ ) : null}
>
)}
{headerBackImageSource !== undefined ? (
-
+
) : null}
{headerRightElement != null ? (
diff --git a/packages/native-stack/src/views/NativeStackView.tsx b/packages/native-stack/src/views/NativeStackView.tsx
index a890da2b..191245f3 100644
--- a/packages/native-stack/src/views/NativeStackView.tsx
+++ b/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