Drag And Drop Library For React Native

Category: Others , React Native | December 2, 2017
Author: tongyy
Views Total: 692
Official Page: Go to website
Last Update: December 2, 2017
License: MIT

A React Native library which helps you create draggable elements on the mobile app.

Installation:

# NPM
$ npm install react-native-draggable--save

Usage:

Import the component.

import Draggable from 'react-native-draggable';

The example app (Android).

export default class DraggableDemo extends Component {
  render() {
    return (
      <View >
        <Draggable/>
        <Draggable reverse={false} renderColor='red' offsetX={0} offsetY={0} renderText='B'/>
        <Draggable renderSize={56} renderColor='black' offsetX={-100} offsetY={-200} renderText='A' pressDrag={()=>alert('touched!!')}/> 
      </View>
    );
  }
}

AppRegistry.registerComponent('DraggableDemo', () => DraggableDemo);

Props.

{
  renderText:React.PropTypes.string,
  renderShape:React.PropTypes.string,
  renderSize:React.PropTypes.number,
  imageSource:React.PropTypes.number,
  offsetX:React.PropTypes.number,
  offsetY:React.PropTypes.number,
  renderCorlor:React.PropTypes.string,
  reverse:React.PropTypes.bool,
  pressDrag:React.PropTypes.func,
  pressDragRelease:React.PropTypes.func,
  longPressDrag:React.PropTypes.func,
  pressInDrag:React.PropTypes.func,
  pressOutDrag:React.PropTypes.func
}

Preview:

react-native-draggable