SteffeyDev
Popover position off when rotating while popover has accommodated for keyboard
If the popover has to shift to accommodate the keyboard, and then the screen is rotated with the popover and keyboard still open, the popover tends to get confused about where it should be. Need to investigate.
We have noticed that the popover does not readjust itself properly when the screen is rotated. The anchor point for the arrow is off and the size of the popover is not limited to the size of the screen as it should be. I've poked around a bit, but haven't been able to figure out how to fix this yet. Any help would be greatly appreciated! Thanks!
Screenshots from our app:
| Before Rotation | After Rotation |
|---|---|
 |
 |
@hannesmcman do you have your view in the popover in a ScrollView? I think it will only limit the height if it is allowed to, which is only when the first child of the popover is a scroll view.
And are you passing in the button as a view to the popover? Or as a rect?
@SteffeyDev The view inside the popover is a ScrollView, yes. And we are passing in the button as a view. We were able to resolve this issue by wrapping the Popover itself in a Viewport component, which re-renders its children upon orientation changes. If you are interested in incorporating something similar into the Popover itself, so that it works out of the box, here is the code for the Viewport and here is how we used it to wrap the Popover.
Ok, it looks like the viewport is just causing a state change on rotation. Does the popover shift at all post-rotation without the viewport? I'm trying to figure out why it works in my test app but not in your app. Are you using react-navigation?
What should happen is that the popover won't move during rotation, but after the rotation is finished you should see it shift to the new location. I'm wondering if it is just shifting to the wrong place or not shifting at all?
We are using react-navigation, but didn't follow the steps outlined here to integrate the popover component with react-navigation, as it was unnecessary for our use case. Here are some very pixelated gifs that demonstrate what we're seeing:
| With Viewport | Without Viewport |
|---|---|
 |
 |
Perfect, so it looks like the viewport is simply triggering a refresh, which triggers the popover's onLayout and moves to the new location. I just added the dimension change listener and released as 1.0.5, can you test and see if that works?
Just tested it on v1.0.5 and it didn't fix it.. 😞 Idk why the onLayout callback is not doing its job..
@hannesmcman Ok, try it now with 1.0.7! I made a number of fixes to the layout system and am hopeful that an issue I found was the one you are experiencing.
@hannesmcman I'm curious if 1.0.7 allows you to use the popover without the viewport wrapper, it would be awesome if you could test it out again when you get the chance.
@SteffeyDev Just tested v1.0.7 without the Viewport wrapper and it works like a charm! :)
Unfortunately not, the original reason for which I opened this issue is still not resolved... I need to work on the rotating while keyboard open bugs.