Wrong layout when updating headerLeft and headerRight on new arch

[janicduplessis]

Description

When the headerLeft is removed and headerRight has updated layout at the same time in native-stack, it results in the headerRight having incorrect layout.

Workaround:

If I update them in separate ticks (using setTimeout) layout is correct.

Steps to reproduce

Using this code in FabricExample app HeaderOptions.tsx

• Go to "Header Options" example
• Click the "Header large item" button
• See that the header right item green square is off screen
• Comment out line 59 where we set headerLeft
• Click the "Header large item" button
• See that the header right item green square has now correct layout

Updating both headerLeft and headerRight (bug):

Updating only headerRight (correct)

Snack or a link to a repository

https://github.com/janicduplessis/react-native-screens/tree/%40janic/header-bug-1

Screens version

main@e5a6220

React Native version

0.74

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[alduzy]

Hi! Thanks for reporting. I'm going to take a look at it.
Wrapping the right item in a useCallback hook should do the trick until the problem's solved.
Edit: I misunderstood the issue initially, but I can see the problem now.