How to make draggable remember it's location in React Native

Question

I\'m learning about the animation and panresponder apis in react native. Following Animated Drag and Drop with React Native and the source

I want to extend the examp

Answer 1

Actually the only thing you need to change is the onPanResponderRelease function. What you are currently doing is applying the delta of the gesture movement to the initial position of the component. What you want to do is applying it to the position at the end of the last gesture. So you somehow need to save the offset. AnimatedValueXY.setOffset to the rescue!

onPanResponderRelease : (e, gesture) => {
    if(this.isDropZone(gesture)){
        this.setState({
            showDraggable : false
        });
    }else{
        this.state.pan.setOffset({
            x: this.state.pan.x._offset + e.dx,
            y: this.state.pan.y._offset + e.dy,
        })
        this.state.pan.setValue({x: 0, y: 0})
}

I'm using the internal _offset variable here because I could find a way to access it via the API. You can off course also just keep track of the offset manually. I didn't test this code yet, but you get the idea.