react-native-movable-view
v1.0.3
Published
Performance friendly movable component for React Native.
Downloads
463
Maintainers
Readme
React Native Movable View
Simple component that make your views movable.
It is using PanResponder so it is performance friendly :)
Installation
npm install react-native-movable-view --save
Demo
Usage
- Import:
import MovableView from 'react-native-movable-view'
- Wrap your views:
<MovableView>
{views_you_want_to_be_movable}
</MovableView>
- That's all. Now you can restart your app and enjoy movable view ;)
Example:
<MovableView>
<View style={{
width: 60, height: 60,
backgroundColor:'red',
borderRadius: 30 }}
/>
</MovableView>
Callbacks
MovableView contains 3 basic callbacks so you can have move control about what is happening.
Example of getting x and y coordinates of our view:
<MovableView
onMove={ values => console.warn(values) } >
...
</MovableView>
Table of all available callbacks:
|Name|Note| |---|---| | onDragStart | Executed when user starts dragging object around | | onDragEnd | Executed when user stops dragging. | | onMove | Executed when user is dragging view. Returns current position of view. |
Advanced Usage #1
You can control if the view can be movable using disabled prop.
Example (this will make view unmovable):
<MovableView disabled={true}>
...
</MovableView>
Default value is false.
You can change disabled status any time using changeDisableStatus() method.
For this first of all you need to create reference to your MovableView:
Example:
<MovableView ref={ref => this.move = ref}>
...
</MovableView>
Having this reference you can change disabled status like this:
this.move.changeDisableStatus();
Support
In case of any problem or more custom solution you can email me at:
I hope you will find this module useful. Happy Coding :)