react-native-movable-view

1.0.3 • Public • Published

# 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

  1. Import:
import MovableView from 'react-native-movable-view'
  1. Wrap your views:
<MovableView>
    {views_you_want_to_be_movable}
</MovableView>
  1. 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:

tomasz.przybyl.it@gmail.com

I hope you will find this module useful. Happy Coding :)

Package Sidebar

Install

npm i react-native-movable-view

Weekly Downloads

222

Version

1.0.3

License

MIT

Last publish

Collaborators

  • venits