@codebet/react-native-draggable NPM

react-native-draggable

Draggable item for react-native!

How to use

return (
    <View >
        <Draggable renderSize={56} renderColor='black' offsetX={-100} offsetY={-200} pressDrag={()=>alert('touched!!')} tolerance={5} />
            <ChildCompoent />
        <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

DEMO2

Props spec & Example

Properties

Prop	Type	Example	Default	Description
tolerance	number	{25}	{0}	Distance component can move and also trigger click
offsetX	number	{0}	{100}	offsetX with center
offsetY	number	{100}	{100}	offsetY with center
x	number	{0}	---	position x
y	number	{0}	---	position y
z	number	{0}	---	position z
reverse	bool	{true}	{true}	reverse flag

Events

Event	Type	Description
pressDrag	func	onPress event
pressDragRelease	func	release drag event
longPressDrag	func	long press event
pressInDrag	func	in press event
pressOutDrag	func	out press event

Methods

Method	params	Description
reversePosition	---	manually reset Draggable to start position

What's 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.

react-native draggable drag drop

prop-types

@infinitebrahmanuniverse/nolb-_codeb @everything-registry/sub-chunk-183

1.0.15

5 years ago

1.0.14

5 years ago