react-native-popover-view
react-native-popover-view copied to clipboard
Incorrect popover origin when size changes during animate in
Describe the bug If the popover size gets bigger as the view is animating in (for example, if content is loaded async and then re-rendered just before or during animation), the popover appears to be originating from a location that is below the actual fromRect.
Device/Setup Info:
- Device: iPad Pro 12.9"
- OS: iOS 12
-
react-native
version: 0.57 -
react-native-popover-view
version: 1.0.16
Screenshots See CC Orlando App - Bible Tab - Top right button
Debug Output
measureContent - Showing Popover - Animating In
getTranslateOrigin - popoverOrigin: {"x":908,"y":30}
getTranslateOrigin - popoverSize: {"width":380,"height":911}
getTranslateOrigin - anchorPoint: {"x":1296,"y":42}
getTranslateOrigin - shift: {"hoizontal":198,"vertical":-443.5}
measureContent - new requestedContentSize: {"y":0,"width":380,"x":0,"height":984} (used to be {"y":0,"width":380,"x":0,"height":911})
handleGeomChange - requestedContentSize: : {"y":0,"width":380,"x":0,"height":984}
computeGeometry - displayArea: {"x":10,"y":30,"width":1346,"height":984}
computeGeometry - fromRect: {"x":1296,"y":22,"width":70,"height":40}
computeGeometry - displayArea: {"x":10,"y":30,"width":1346,"height":984}
computeGeometry - fromRect: {"x":1296,"y":22,"width":70,"height":40}
Also facing this issue, using a flatlist of dynamic length, causes the same behavior
Having the same issue, also with a flatlist of dynamic length in tooltip mode. It's fine on ios devices, but on android the tooltip originates far below the from ref and jumps up into the correct position.
To get around this for the time being we're making use of the popoverStyle. Essentially we always show the tooltip, isVisible={true} and we control whether or not we show it via the popoverStyle:
popoverStyle={{ opacity: tip.display ? 1 : 0, backgroundColor: tip.display ? "white" : "transparent" }}
As all the internal views have pointer events disabled they don't interfere. This allows all the tooltips to load, measure the content and position themselves correctly.