1.0.2 • Published 7 years ago
react-native-drag v1.0.2
React Native Drag
A components wrapper makes them draggable.
Usage
Install library via npm
npm install react-native-dragTo 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>API
Properties
| Porperty | Description | Type | Default |
|---|---|---|---|
| containerStyle | specify style for the wrapper | number, object | -- |
| longPressTimeout | specify timeout to invoke onLongPress | number | 500 |
Callback
| 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 |
Get Component Reference
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>
)
}
}Demo
Codes in example/Demo.js
