React native drag and drop - reactjs

Question

I'm trying to implement drag and drop in a React Native application.
Has anyone out there used this ? Somehow I'm not able to drag the text. There are not enough steps to use the npm module.
After debugging for some time I found that onLayout & onLongPress are undefined, can anyone help me on this ?

Answer 1

Assuming you're new to React Native (as am I, kind of), and you don't have an example of your code, there might be a few things going on. (and there is a high chance you already know all of these things).
Did you follow this example? Here they set onLayout and onLongPress as the props of the DraggableThing component. Next they call the component with functions (onDragItemLayout, startDragHandler) bound to these properties. These functions are supplied by importing the createDropZone, did you import everything?
If you did, importing third-party components is kind of a hassle, because most of the times you're required to do some things in xCode. Not sure if that's also the case right now, but it might be something to look into.
Also my advice would be to take a look at the module supplied in the answer above.

Answer 2

This is a simple React drag and drop.
class Square extends React.Component {
constructor() {
super();
this.state = {
posx: 10,
posy: 10,
};
this.setDrag = this.setDrag.bind(this);
this.startDrag = this.startDrag.bind(this);
this.stopDrag = this.stopDrag.bind(this);
}
componentDidMount() {
this.sq.addEventListener('mousedown', this.setDrag);
}
startDrag(e) {
this.setState({
posx: parseInt(e.clientX - this.startPosX, 10),
posy: parseInt(e.clientY - this.startPosY, 10),
});
this.startPosX = e.clientX - this.state.posx;
this.startPosY = e.clientY - this.state.posy;
}
stopDrag() {
document.documentElement.removeEventListener('mousemove', this.startDrag);
document.documentElement.removeEventListener('mouseup', this.stopDrag);
this.sq.addEventListener('mousedown', this.setDrag);
}
setDrag(e) {
this.sq.removeEventListener('mousedown', this.setDrag);
this.startPosX = e.clientX - this.state.posx;
this.startPosY = e.clientY - this.state.posy;
document.documentElement.addEventListener('mousemove', this.startDrag);
document.documentElement.addEventListener('mouseup', this.stopDrag);
}
render() {
return (
<div
className='square'
style={{
left: this.state.posx,
top: this.state.posy,
}}
ref={(sq) => { this.sq = sq; }}
>
{this.state.posx}
</div>
);
}
}
ReactDOM.render(
<Square />,
document.getElementById('app')
);
.square {
position: absolute;
width: 100px;
height: 100px;
background: #900;
border: 1px solid #333;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>