SteffeyDev / react-native-popover-view

A well-tested, adaptable, lightweight <Popover> component for react-native
MIT License
614 stars 92 forks source link

Incorrect popover origin when size changes during animate in #33

Open SteffeyDev opened 5 years ago

SteffeyDev commented 5 years ago

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:

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}
arunim2405 commented 3 years ago

Also facing this issue, using a flatlist of dynamic length, causes the same behavior

xpressivecode commented 1 year ago

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.