1.0.2 • Published 6 years ago

react-native-drag v1.0.2

Weekly downloads
4
License
MIT
Repository
github
Last release
6 years ago

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

PorpertyDescriptionTypeDefault
containerStylespecify style for the wrappernumber, object--
longPressTimeoutspecify timeout to invoke onLongPressnumber500

Callback

EventDescriptionTypeParameters
onDragStartinvoke when press infuncnone
onDragReleaseinvoke when press out and with the latest screen coordinates of the recently-moved touchfunc(lastX, lastY)
onLongPressinvoke after a specified longPressTimeoutfuncnone

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

demo