react-native-popover-view icon indicating copy to clipboard operation
react-native-popover-view copied to clipboard

Incorrect popover origin when size changes during animate in

Open SteffeyDev opened this issue 6 years ago • 2 comments

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}

SteffeyDev avatar Jan 14 '19 04:01 SteffeyDev

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

arunim2405 avatar Nov 24 '21 15:11 arunim2405

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.

xpressivecode avatar Jun 21 '23 07:06 xpressivecode