getsweeply / react-native-draggable

Draggable Item

react-native-draggable

Draggable item for react-native!

npm install react-native-draggable --save
import Draggable from 'react-native-draggable';

How to use

return (
    <View >
        <Draggable renderSize={56} renderColor='black' offsetX={-100} offsetY={-200} renderText='A' pressDrag={()=>alert('touched!!')}/> 
        <Draggable reverse={false} renderColor='red' renderShape='square' offsetX={0} offsetY={0} renderText='B'/>
        <Draggable/>
    </View>
);

Demo

in my project =>

return (
    <View style={{backgroundColor: 'blue', flex: 0.5}} >
        <Draggable renderShape='image' imageSource={this.state.source} renderSize={80} 
            offsetX={0} offsetY={0}
            pressDragRelease={this._changeFace}
            longPressDrag={()=>console.log('long press')}
            pressDrag={()=>console.log('press drag')}
            pressInDrag={()=>console.log('in press')}
            pressOutDrag={()=>console.log('out press')}
        />  
    </View>
);  

Event Demo

Props spec & Example

Shape & Location

• renderText:React.PropTypes.string => text of draggable item {'ABC'}
• renderShape:React.PropTypes.string => shape type, 'circle' 'square' 'image'
• imageSource:React.PropTypes.source => require('./img/xxx.png')
• renderSize:React.PropTypes.number =>draggable size {36}
• offsetX:React.PropTypes.number => offsetX with center {0}
• offsetY:React.PropTypes.number => offsetY with center {100}
• renderCorlor:React.PropTypes.string => Colors
• reverse:React.PropTypes.bool => reverse to initial position {true}

Event

• pressDrag:React.PropTypes.func => onPress event
• pressDragRelease:React.PropTypes.func,=> release drag event
• longPressDrag:React.PropTypes.func,=> long press event
• pressInDrag:React.PropTypes.func,=> in press event
• pressOutDrag:React.PropTypes.func=> out press event

What's the next?

This Draggable is used to be a Draggable Button in my project. Let me know if you have any idea or demand, let's discuss and develop it.