Position issue: Location and Page bounds not working as expected

[LiLPandemio]

Usage: I'm using draggable to create stickers in a story. Since I can have more than 1 sticker I putted them in an array in my state and I push stickers with a button.
Expected behavior: When you move a sticker (onDragRelease) I should take the position of the sticker and update it on the state, but I can't take the absolute position of the sticker propery, because after I release the drag, the position of the sticker changes randomly. I tried with locationX, pageX, (with Y respectively) but still doing the same.

Constructor props of the screen:

constructor(props) {
        super(props);

        const stickers = [];

        const textStickers = [];

        this.state = { textStickers };
        this.state = { stickers };
}

When I press the add button (Function to add a sticker):

let last = this.state.stickers.length;
this.setState(prevState => ({
  stickers: [...prevState.stickers, {
    id: last + 1,
    uri: "https://cataas.com/cat/says/" + last + 1,
    x: Dimensions.get('window').width / 2 - 75,     //I put the new sticker on the center X
    y: Dimensions.get('window').height / 2 - 75,   //I put the new sticker on the center Y
    size: 150
  }]
}))

And the position function:

onDragRelease={
    (bounds) => {
        console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n-----Log data: -----")
        this._changeFace
        console.log("This sticker has id: " + sticker.id)
        //Current sticker array
        var array = this.state.stickers
        //The new array
        var newArray = []
        //I use for to run the array and find the value I want to update (Based on ID)
        for (let i = 0; i < array.length; i++) {
            //If the ID is not the one on this sticker I just add it (push) with no changes
            if (array[i].id !== sticker.id) {
                newArray.push(array[i])
            } 
            else //If this is the sticker, I edit the sticker on the array with i and just add it after editin
            {
                //First add it to the new array to avoid modifying the state without setState
                newArray.push(array[i])
                /*
                ! Now make the changes. Here you see I tried the solution of 
                ! https://stackoverflow.com/questions/55529217/react-native-get-x-and-y-coordinates-of-draggable-object-using-panresponder-pan
                ! with no success, but also tried with only page, with only location and any single solution I thought could be the one.
                */
                newArray[i].x = bounds.nativeEvent.pageX - bounds.nativeEvent.locationX             //!BUG!
                newArray[i].y = bounds.nativeEvent.pageY - bounds.nativeEvent.locationY             //!BUG!
            }
        }
        //Finally I update the changes putting newArray in the state
        this.setState({
            stickers: newArray
        })
    }
}

Screen record:

[Hemanthkumaran]

did you get any solutions? @LiLPandemio

[JohnGeorgiadis]

I have the same issue. I tried setting x and y of the item like pageX - locationX and still I get this random movement.

[LiLPandemio]

No solution found but creating it from 0 @Hemanthkumaran

[Kojon74]

I had this same problem and was finally able to figure it out. See my comment in this issue