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 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

[lucasmotta]

I can also confirm that this bug still happens on [email protected] and [email protected].

[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...

[WoLewicki]

@osdnk

[FrankFundel]

same for me

[FrankFundel]

This happens almost everytime I start the app, this really should be fixed.

[WoLewicki]

I believe it is the same issue as #322. Can you try the workaround submitted there and see if it works correctly?

[AlexSmirnov9107]

same for me

[SmirnovM91]

same for me too

[immortalx]

This is happening to me also with headerCenter and headerRight only in iOS, my custom component is wrongly positioned. It only displays correctly when the default back button is present.

[zyofeng]

Same problem Im having

const Stack = createNativeStackNavigator(); const AccountsScreen = () => { return <Stack.Navigator screenOptions={(props) => ({ headerRight: () => <HeaderRight {...props} />,
})}> <Stack.Screen name="Balances" component={Balances} /> ...

interface Props { navigation?: NavigationContainerRef; } export const HeaderRight = (props: Props) => { const dispatch = useDispatch(); const {navigation} = props; return <TouchableOpacity onPress={() => dispatch(lock())}> <Text style={{color: 'red'}}>test</Text> </TouchableOpacity> }

Sometimes the Text gets pushed off screen in ios, RN .62 with latest React Navigation.

[ortigozamatias]

Same here using Expo SDK v38, which relies on ~2.9.0.

[FrankFundel]

+1

[kyle-ssg]

Closed https://github.com/software-mansion/react-native-screens/issues/571 for this as seems to be related. I shouldn't be the one to dictate priority but this seems really important, it's really not ideal to have production apps experience this.

Also I have a feeling mentioning expo is not relevant, I experience this consistently without.

[WoLewicki]

Can you check if #600 resolves the issue and if it does not introduce other unwanted behaviors?

[WoLewicki]

#600 should be ready now. Can you check if it does not destroy any of your behavior? @kyle-ssg @lnmunhoz

[spencercarli]

@WoLewicki I've been testing #600 in my app (where I could occasionally reproduce the issue) and haven't seen it since I installed your PR. Haven't seen any sort of regression either.

So, from my perspective, it looks good!

[WoLewicki]

@FrankFundel can you check if #613 resolves your problem introduced in #600? Also, @spencercarli can you check if it does not destroy the good behavior of #600? @kyle-ssg @lnmunhoz @matt-oakes can you check if #600 + #613 resolve the bugs you discovered?

[kyle-ssg]

This has been on my todo for a few days, I'll prioritise testing this in the evening @WoLewicki, thanks for letting me know again.

[FrankFundel]

@WoLewicki this does not fix my problem :(

[WoLewicki]

@FrankFundel can you provide a repo/snack that shows the problem then?