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

}

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

[trajano]

@tboba I get it on the preview build on a real device when I build it on EAS at least on my app, but not on the above sample.
Your note about it being the first time is correct.

[fredrikburmester]

I'm also getting this issue on Expo Router ~3.4.7 (SDK 50.0.0). It went away for me when moving more logic about the header into the layout instead of setting it on mount in the useEffect hook. Like this:

// app/(app)/_layout.tsx
<Stack.Screen
    name="settings"
    options={{
    ...
    title: "",
    headerLeft: () => (
        <View>
            ...
        </View>
        ),
    }}
/>

// app/(app)/settings.tsx
useEffect(() => {
    navigation.setOptions({
      headerRight: () => <HeaderRight onPress={() => saveMutation.mutate()} loading={saveMutation.isLoading} />,
    });
  }, [saveMutation]);

Might work for some of you!

[alduzy]

I was unable to reproduce the issue with the latest version, tried with Expo Go, Expo prebuild, Bare RN. If the problem still persists with the latest version please attach a working repro.

[elliottkember]

We're still getting this on v3.34.0 unfortunately. The behaviour has changed slightly – we're now getting this positioning in a react-navigation drawer header. It happens consistently now, rather than randomly.

We're also getting this strange "back" button positioning – this isn't a custom back button but rather a regular back button provided by react-navigation.

This only happens in a route defined at the root of the navigator, above the tab navigator. It's something to do with not specifying headerTitle in the header stack. I've been trying to make a repo that reproduces this behaviour, but haven't nailed down exactly what just yet.

It may have something to do with our usage of navigation.setOptions – we use this a little too liberally in our codebase to set navigation options as it's nice to have navigation options defined with the component's contents. We'll refactor that and see whether the behaviour improves.

We do use a stack navigator in a drawer – if I initialize that stack with an initial state, the header button is reliably in the wrong place. If I navigate to page 2 with a timeout, it renders in the right place. So something is up with the layout calculation on mount in a drawer. An edge case, but maybe it will help make this headerRight positioning more robust.

Still no repro repository, I'm afraid, but if we're able to tame this behaviour I'll update this comment.

[alduzy]

@elliottkember Thanks for the message. Having a working example from you would be ideal.

[thomasttvo]

One of the cases I can see is using setOptions to change the headerTitle and headerRight at the same time

useEffect(() => {
	navigation.setOptions({
      headerTitleAlign: 'center',
      title: x ? '123123' : '1',
      headerRight: x
        ? () => <HeaderRight />
        : undefined,
	})
}, [navigation, x])

When x changes from false to true, the headerRight is shown, but misaligned.
It also happens when you remove the back button. I guess basically anything that involves changing the layout while putting on a new header right.

If <HeaderRight> has an internal setTimeout that delays its rendering by a little maybe 100ms, then it's no longer misaligned.
This is v3.34.0

[thomasttvo]

I found out that the project that @elliottkember and I work on has a default headerRight: () => <View/> on the stack navigator's screen options. Removing that and the problem never comes back.

In fact the empty view wasn't the problem per se, it's the fact that the View expands while, at the same time, the title changes (or back button disappearing). In our case it was going from 0x0 to 20x20, but if you go from 20x20 to 30x20, the same issue happens

useTimeout(() => setX(true), 2000)
useEffect(() => {
	navigation.setOptions({
      headerTitleAlign: 'center',
	  headerBackVisible: !x,
      title: x ? '123123' : '1',
      headerRight: x
        ? () => <View style={{backgroundColor:'green', width: 20, height: 20}} />
        : () => <View style={{backgroundColor:'green', width: 1, height: 1}} />,
	})
}, [navigation, x])

[alduzy]

@thomasttvo Thanks for the repro! I can confirm it's reproducible on both paper and fabric arch.

[js-ojha]

Setting the headerTitle in InteractionManager worked for me.

useLayoutEffect(() => {
InteractionManager.runAfterInteractions(() => {
navigation.setOptions({
headerShown: true,
// eslint-disable-next-line react/no-unstable-nested-components
headerTitle: () => (
),
});
});
}, [dependency_A]);