Native Stack custom headerTitle doesn't support dynamic width content

[santhosh-umapathi-wikifolio]

Description

Current behavior

The headerTitle component starts with a placeholder title (in this case just a dash):

And when the actual title loads asynchronously, the width stays the same as when it only had the dash, cutting of the complete tilte (in this case the text "Header Title"):

This happens when using either react native 0.77 or 0.78.

I'm only using a simple text as a custom headerTitle, but in my actual app I use a more complex header title structure with a title and a subtitle that has content which is loaded asynchronously and depends on a global context so it can't be solved by just using the children param received by the headerTitle.

Expected behavior

I'd expect that the width of the headerTitle is recalculated based on the component's width.

The title should go from the placeholder value ("-")

To the new title loaded asynchronously ("Header Title") and let all the content be visible:

I can fix this by passing the `Header` component from the `elements` library to the `header` option for the stack or for the screen, but it's no longer native and it has different styles like adding a bottom border, when the native one just has a bottom shadow.

Steps to reproduce

Open a Nested screen within stack navigator for the first time with Customer headerTitle

Snack or a link to a repository

https://github.com/DGVIP/react-navigation-header-title-issue

Screens version

4.10.0

React Native version

0.78.1

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

Fabric (New Architecture)

Build type

None

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Description section.

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[kkafar]

Hey @santhosh-umapathi-wikifolio do you happen do know whether this is a regression introduced in 4.10.0 or does it also happen on earlier versions of the library.

• I do not see images you posted, it looks like this on my end:

[santhosh-umapathi-wikifolio]

[santhosh-umapathi-wikifolio]

It was happening on previous versions as well. After upgrading React native to 0.78.1 and new arch enabled, also updating react-native-screens, this regression got introduced on iOS.

Note: if i close the screen and re-open the same screen, the layout is correct

[santhosh-umapathi-wikifolio]

Here is the video clip:

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-03-28.at.13.52.24.mp4

[rdtf1230]

I have the same problem. Is there a solution?

[santhosh-umapathi-wikifolio]

I have provided a temp solution on this comment -> react-navigation/react-navigation#12502 (comment)

[santhosh-umapathi-wikifolio]

Solution was to load the headerTitle component with useLayoutEffect after the actual text for title is ready

[rdtf1230]

It helped me a lot.
However, my app needs to dynamically assign titles in so many places
that it's a lot of work XD

[rdtf1230]

@kkafar For reference, I'm using 0.77.1 and react-native-screens is 4.9.0 and I'm having the same issue on android (don't know about ios as I don't have it)

[maciekstosio]

It should be fixed by #2845