react-native-draggable
react-native-draggable copied to clipboard
Position issue: Location and Page bounds not working as expected
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:
did you get any solutions? @LiLPandemio
I have the same issue. I tried setting x and y of the item like pageX - locationX and still I get this random movement.
No solution found but creating it from 0 @Hemanthkumaran
I had this same problem and was finally able to figure it out. See my comment in this issue