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>
    )
  }
}