React Native Drag

A components wrapper makes them draggable.

Usage

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>

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