# 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:
- 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= console > ... </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= thismove = ref> ... </MovableView>
Having this reference you can change disabled status like this:
thismove;
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 :)