react-native-popable
react-native-popable copied to clipboard
Popover misaligned when using longpress
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>
)
I'm also seeing this. It looks like the page position is only determined and set for onPress.
+1