Search code examples
javascriptreactjsreact-nativemobile-developmentonpress

React Native On Press Not Working As Expected


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>

Solution

  • My solution was to use pageX and pageY instead of locationX and locationY. Thank you to the person who helped me.