react-native-screens
react-native-screens copied to clipboard
Wrong layout when updating headerLeft and headerRight on new arch
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