How can I create a drag and drop action in React native?

Question

Say I have two Views, A and B. I want to have the ability to trigger a 'dragAndDropStart' event on touching View A and then enable a drag and drop from A to B... displaying feedback to the user throughout (i.e. showing a line appearing between View A and the user's finger). On drop (releasing the drag gesture) I want to trigger another 'dragAndDropEnd' event, this time on View B.

The touchStart and touchEnd handlers are too limited as they don't appear to permit handoff of the gesture from one View to another. They also don't seem to enable the in-between 'drag' state.

The React native docs on using the gesture handlers is a little cryptic and I haven't seen any examples that demonstrate their use.

Any ideas?

Answer 1

export default class Viewport extends Component{
    constructor(props){
        super(props);

        this.state = {
            showDraggable   : true,
            dropZoneValues  : null,
            pan             : new Animated.ValueXY()
        };

        this.panResponder = PanResponder.create({
            onStartShouldSetPanResponder    : () => true,
            onPanResponderMove              : Animated.event([null,{
                dx  : this.state.pan.x,
                dy  : this.state.pan.y
            }]),
            onPanResponderRelease           : (e, gesture) => {
                if(this.isDropZone(gesture)){
                    this.setState({
                        showDraggable : false
                    });
                }else{
                    Animated.spring(
                        this.state.pan,
                        {toValue:{x:0,y:0}}
                    ).start();
                }
            }
        });
    }

    isDropZone(gesture){
        var dz = this.state.dropZoneValues;
        return gesture.moveY > dz.y && gesture.moveY < dz.y + dz.height;
    }

    setDropZoneValues(event){
        this.setState({
            dropZoneValues : event.nativeEvent.layout
        });
    }

    render(){
        return (
            <View style={styles.mainContainer}>
                <View 
                    onLayout={this.setDropZoneValues.bind(this)}
                    style={styles.dropZone}>
                    <Text style={styles.text}>Drop me here!</Text>
                </View>

                {this.renderDraggable()}
            </View>
        );
    }

    renderDraggable(){
        if(this.state.showDraggable){
            return (
                <View style={styles.draggableContainer}>
                    <Animated.View 
                        {...this.panResponder.panHandlers}
                        style={[this.state.pan.getLayout(), styles.circle]}>
                        <Text style={styles.text}>Drag me!</Text>
                    </Animated.View>
                </View>
            );
        }
    }
}

source https://moduscreate.com/blog/drag-and-drop-react-native/

https://github.com/crysfel/DragAndDrop