A components wrapper makes them draggable.
Install library via npm
npm install react-native-drag
To make components draggable, simply wrap them in a Draggable component.
import Draggable from 'react-native-drag';
<Draggable
setRef={this.setRef}
containerStyle={styles.draggable}
onDragStart={this.handlePressIn}
onDragRelease={this.handlePressOut}
onLongPress={this.handleLongPress}
longPressTimeout={500}
>
<View>
<Text>Hello World!</Text>
</View>
</Draggable>| Porperty | Description | Type | Default |
|---|---|---|---|
| containerStyle | specify style for the wrapper | number, object | -- |
| longPressTimeout | specify timeout to invoke onLongPress |
number | 500 |
| Event | Description | Type | Parameters |
|---|---|---|---|
| onDragStart | invoke when press in | func | none |
| onDragRelease | invoke when press out and with the latest screen coordinates of the recently-moved touch | func | (lastX, lastY) |
| onLongPress | invoke after a specified longPressTimeout |
func | none |
Use a setRef function to get the draggable component's ref.
All props send to Draggable will also send to the wrapper View component.
class Demo extends React.Component {
setRef = (r) => {
this.myDraggable = r;
console.log(this.myDraggble.props.id) // 123
}
render() {
return (
<Draggable id={123} setRef={this.setRef}>
<View />
</Draggable>
)
}
}Codes in example/Demo.js
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent