React-native-screens: Header right elements disappear on rotate

[JackMoseley2001]

Hello,

I've noticed that any elements placed inside header right (both using navigation.setOptions and view the Stack.Screen options) show when the stack is initially shown, but then if the device is rotated they disappear until the view is next reloaded.

This is only happening when the stack is created using createNativeStackNavigator and not when using React Navigation's createStackNavigator.

Anyone else encountering this? Any help would be appreciated.

[leoz]

Same here.

[WoLewicki]

The bug is most probably the same as #432, but we can keep this one open too. And it only happens on iOS right?

[JackMoseley2001]

The bug is most probably the same as #432, but we can keep this one open too. And it only happens on iOS right?

Thank you. I have only been able to test it on iOS so far, will have the chance to test it on an Android simulator today and will update once I have done so.

I saw on the post linked there was mention to expo - if linked, it’s worth noting that this issue I’m encountering is occurring in a bare react native project.

[WoLewicki]

You can try the solution mentioned in #322 and see if it fixes the issue in your case.

[JackMoseley2001]

Thanks, I will attempt this workaround also

[JackMoseley2001]

You can try the solution mentioned in #322 and see if it fixes the issue in your case.

I've attempted this solution, it works some of the time, but to get somewhat reliable results I needed to increase the delay time, resulting in the buttons appearing after some time. I did continue to find that the button would disappear though - going from portrait to landscape worked, but then it failed to show when going from landscape to portrait again

[WoLewicki]

I will close it to keep the discussion about the issue in one place. Please see #432 for more information.

[WoLewicki]

Can you check if #644 fixes your issue and do not introduce any new bugs?

[JackMoseley2001]

Thank you for taking time to have a look at this problem.

I have installed and tested the pull request regarding this, but am still experiencing that the icon will disappear on rotate. I have tried it by setting the right icon within the screen itself using props, and within the stack navigator screen.

I have since reporting this issue moved away from using React Native for the meantime and therefore hope that anyone within issue #432 may be able to help more.

[zibs]

Copy pasting my comment from #432 by request.

Hey @WoLewicki thanks for the follow up. Can you check out this updated gif and see if you have any insights? I've integrated the workaround you proposed in #644 into my repo, and it seems to partly fix one issue, but the not issue I'm hunting down in particular:

You can see in this gif that it works fine now while rotating on screen 1, but you if go to screen 2, rotate there, and then come back to screen1 (happens at the end of the gif), the header button is gone again.

Like I said, the repo is updated if you want to run it, and it's applying your patch when built.

Here's a MVCE (minimally viable complete example) of the issue:
Repo

[WoLewicki]

Can you check if #902 fixes all of the scenarios? If so, I think we will merge it or something very similar as the solution to the problem :tada: