headerRight randomly position the component incorrectly

[lnmunhoz]

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.

[WoLewicki]

I cannot repro your issue either on a simulator or physical device. Upgrade packages to the newest version. Is the issue still present then? If so, please try to write which steps to take for the issue to occur.

[lnmunhoz]

Yes, I just tried again and the issue is still present. I did a fresh install and the issue persisted. Have you tried the repo I've sent?

The steps are simple:

• Clone the repo
• cd repo/react-navigation-examples
• yarn && yarn start
• And then open in iOS simulator

To create the stack I am using createNativeStackNavigator from react-native-screens/native-stack.

I created a snack to reproduce but also not being able to make it happen there:

• https://snack.expo.io/@lnmunhoz/react-navigation-v5-native-screen-bug

The thing is, I am using a stack created by createNativeStackNavigator inside a stack from createStackNavigator.

I wanted to have parts of my app using the native stack for more simple screens where I don't need to manipulate the header too much, and others the js based stack so I can migrate incrementally.

Is that an issue or should work fine?

[WoLewicki]

I cloned your project and also made a bare react-native project. The issue exists only while opening it through Expo Client. This means that the version of RNScreens in the current Expo Client is having the bug since it has RNScreens in version 2.0.0-alpha.12. Can you repro it that way to prove if it is right?

[WoLewicki]

@lnmunhoz can I close it then? Is your issue solved?

[lnmunhoz]

Let me try to reproduce one more time so we can figure out why it was happening.

I will update here in a couple hours.

[Deepp0925]

This is happens in bare RN project as well, so I doubt it has anything to do with Expo

[WoLewicki]

@Deepp0925 does it happen with the newest RNScreens version: 2.4.0?

[Deepp0925]

Yes sir

[markmssd]

I have a workaround if it's a blocker for anyone here react-navigation/react-navigation#6746 (comment):

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

[lucasmotta]

I can also confirm that this bug still happens on react-native-screens@2.40 and react-native@0.62.

[lucasmotta]

Hey @WoLewicki, do you want me to setup a sample project, showing this issue? Here's some screenshots demonstrating the problem:

This first one, is just adding a 44x44 Touchable button as the headerRight - you can see it's quite far to the left.

If I inspect the element, you can see it's 44x44:

If I add a marginRight: -20, it does "fix" the alignment, but not the issue itself.

Now if I inspect the element, you can see it's only 24px wide, so almost half of the button is cropped and not easy to tap.

It feels like this extra 20px on the right side added by the native wrapper is causing the problem - if that space would be removed entirely the problem would be solved. The back button works this way if you inspect it:

[sbeigel]

Using a custom compontent in headerCenter is affected by the same bug/problem...