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