How to set headertitle center in android like ios?

[phalera]

Does it have any props to control header title align , I want to set headertitle center in android like ios~~~

[phalera]

native stack

[kacperkapusciak]

Hi @booyeu,
There isn't a property to directly control title alignment but you could use headerCenter property to provide your own title in the center of the header and style it to your needs:

headerCenter: () => <Text>Title</Text>

https://github.com/software-mansion/react-native-screens/tree/master/native-stack#headercenter

[burakgormek]

@kacperkapusciak Looks like react-navigation v6 native-stack headerCenter options removed. Will it be removed from RNS too?

[kacperkapusciak]

@burakgormek in v6 headerCenter was renamed to headerTitle - https://reactnavigation.org/docs/native-stack-navigator#headertitle.

[burakgormek]

Hmm 🤔 I think these are different options 😅
I can't align title to center with headerTitle options on android. It works for ios but not for android. headerTitle sets the title to left-aligned on android, center-aligned on ios.

[bviebahn]

Same here. I'm trying to set a custom component as the headerTitle, but I can't figure out how to style it to center it. Nothing seems to work. Any suggestions?

[kacperkapusciak]

@burakgormek, @bviebahn
You guys were right. A new prop headerTitleAlign was now added to accommodate the lack of headerCenter
https://github.com/react-navigation/react-navigation/blob/main/packages/native-stack/src/types.tsx#L268