react-native-popable icon indicating copy to clipboard operation
react-native-popable copied to clipboard

Popover misaligned when using longpress

Open raldred opened this issue 4 years ago • 1 comments
trafficstars

The popover aligns to the top left corner of the screen, instead of above the wrapped content when used with action="longpress"

Demonstration of the issue. Upon long pressing on the blue bubble with the text in, the popover with the content "Copy" appears top left of the screen under the clock

https://user-images.githubusercontent.com/37096/133691482-bafe8729-bfa7-490d-b564-1b8bd71cd91c.mp4

If I remove the action prop and just use the default single press, the popover aligns correctly above the blue text bubble

Here's a snippet

  const [ref, { hide }] = usePopable();

  const handleCopyPress = () => {
    Clipboard.setString(content);
    onCopied();
    hide();
  }

  const copyPressable = (
    <Pressable onPress={handleCopyPress}>
      <NativeText style={styles.copyText}>Copy</NativeText>
    </Pressable>
  );

  return(
    <View>
      <Popable ref={ref} content={copyPressable} action="longpress">
        {children}
      </Popable>
    </View>
  )

raldred avatar Sep 16 '21 22:09 raldred

I'm also seeing this. It looks like the page position is only determined and set for onPress.

gezquinndesign avatar Apr 17 '24 02:04 gezquinndesign

+1

shuo-hiwintech avatar Dec 16 '24 06:12 shuo-hiwintech