eveningkid/react-native-popable

Popover misaligned when using longpress

Opened this issue · 1 comments

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

Simulator.Screen.Recording.-.iPhone.11.-.2021-09-16.at.23.00.21.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>
  )

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