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