headerRight randomly position the component incorrectly

I was testing the createNativeStackNavigation and ended up having this random issue where the component rendered by headerRight is being positioned incorrectly sometimes. There’s nothing special in my code, I am just rendering a <Button> from react-native.

Here’s the source code: https://github.com/lnmunhoz/react-native-experiments/blob/master/react-navigation-examples/examples/NativeNavigation.tsx.

Update

The issue also happens when the headerLargeTitle is false.

[markmssd]

I have a workaround if it’s a blocker for anyone here https://github.com/react-navigation/react-navigation/issues/6746#issuecomment-583897436:

As a workaround I show the Icon after a few ms:

const [shouldRenderIcon, setShouldRenderIcon] = useState(false)

useEffect(() => {
const nbr = setTimeout(() => setShouldRenderIcon(true), 200)
return () => clearTimeout(nbr)
}, [])

return shouldRenderIcon ? <MyIcon /> : null

[jadar]

It seems there’s been a bit of a regression here. I am seeing the header title being randomly positioned to the right when using NativeStack from react-navigation. Opening the view debugger in Xcode shows the width as 0, which would explain why it’s “to the right”, it’s centered with the width being 0 and shows the overflow.

$  grep react-native-screens package.json     
    "react-native-screens": "^3.13.1",
$  grep react-native package.json 
...
    "react-native": "0.67.4",
...
$  grep react-navigation package.json
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/elements": "^1.3.3",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.1",