Simple component that make your views movable.
Component is using PanResponder, so it is performance friendly :)
react-native-movable-view is proudly sponsored by
![](https://raw.githubusercontent.com/venits/native-forms/master/assets/sponsor.png)
NativeForms - Build forms, surveys and polls for React Native apps.
npm install react-native-movable-view --save
- Import:
import MovableView from 'react-native-movable-view'
- Wrap your views:
<MovableView>
{views_you_want_to_be_movable}
</MovableView>
- Specify the spawn location. Use the props X and Y to edit where the view will spawn.
<MovableView X={'75%'} Y={'20%'}>
{views_you_want_to_be_movable}
</MovableView>
- That's all. Now you can restart your app and enjoy movable views ;)
Example:
<MovableView>
<View style={{
width: 60, height: 60,
backgroundColor:'red',
borderRadius: 30 }}
/>
</MovableView>
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. |
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();
In case of any problem or more custom solution, you can email me at:
I hope you will find this module useful. Happy Coding :)