I'm trying to put an image on that press location when I click somewhere, but I'm running into an error. When I click an already existing sticker, it gets the coordinates of the on press relative to the sticker, so if I clicked on the top left of my already existing sticker, it would just be in the top left of the screen. why is this happening? Here is my code
<TouchableOpacity
activeOpacity={1}
onPress={(event: GestureResponderEvent) => {
const { locationX: x, locationY: y } = event.nativeEvent;
setStickers(stickers.concat({ x, y }));
console.log("X: " + x);
console.log("Y: " + y);
}}
style={styles.imageButton}>
<Image style={styles.fullImage} source={{ uri }} />
{stickers.map((sticker, index) => {
return (
<Image
source={stickerImage}
style={{
width: 100,
height: 100,
position: "absolute",
top: sticker.y,
left: sticker.x,
}}
key={index}
/>
);
})}
</TouchableOpacity>
My solution was to use pageX and pageY instead of locationX and locationY. Thank you to the person who helped me.