Header right elements disappear on rotate #528
Comments
|
Same here. |
WoLewicki
added
Bug
|
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. |
|
You can try the solution mentioned in #322 and see if it fixes the issue in your case. |
|
Thanks, I will attempt this workaround also |
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 |
|
I will close it to keep the discussion about the issue in one place. Please see #432 for more information. |
|
Can you check if #644 fixes your issue and do not introduce any new bugs? |
|
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. |
|
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: |
Adds ensureHeaderButtonsVisible method in RNScreens.m References issues software-mansion#432 and software-mansion#528.
) This addresses bugs like software-mansion#528 where header content gets incorrectly positioned on initial load or after rotation. I was experiencing these issues in my current app, and when I looked at the XCode view debugger I could see that RNSScreenStackHeaderConfig.subviews were having their .frame.origin.x property set to a non-zero value that moved them out of place. I'm fairly new to React Native and very new to this codebase, so I haven't totally got to the bottom of what's happening here. My guess/theory is that RN layout code is setting the position of these views as if they're part of of the regular view hierarchy, even though they're meant to be managed by a UINavigationBar. Rather than trying to fix this at a deeper level and risk introducing side effects, I've added this small workaround.
|
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 🎉 |
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.
The text was updated successfully, but these errors were encountered: