react-native-drag-resize

React Native component for draggable and resizable manipulation.

Show Cases

Getting Started

Installation
Basic Usage
Properties
- Basic props of DragResizeBlock
- Basic props of DragResizeContainer
Run example

Installation

$ npm i react-native-drag-resize --save

Basic Usage

Install react-native-drag-resize package to project
Import module to file

import {
  DragResizeBlock,
} from 'react-native-drag-resize';

Then, use component like this:

<DragResizeBlock
  x={0}
  y={0}
>
  <View
    style={{
      width: '100%',
      height: '100%',
      backgroundColor: 'red',
    }}
  />
</DragResizeBlock>

You can watch more examples in example directory

Properties

Basic props of `DragResizeBlock`

Prop	Default	Type	Description
x	0	`number`	`x` coordinate relative of parent element.
y	0	`number`	`y` coordinate relative of parent element.
w	100	`number`	Component width in pixels.
h	100	`number`	Component height in pixels.
minW	50	`number`	Component minimal width in pixels.
minH	50	`number`	Component minimal height in pixels.
zIndex	1	`number`	Component `z` index.
axis	all	`string`	Allow axis for component manipulation.
limitation	null	`object`	Limit area for manipulation. Object format `{x: number, y: number, w: number, h: number}`. Use `DragResizeContainer` component for calculate limitation. See code in example.
isDisabled	false	`bool`	Disable component manipulation. Hide connectors.
isDraggable	true	`bool`	Allow drag component manipulation.
isResizable	true	`bool`	Allow resize component manipulation.
connectors	['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml', 'c']	`array`	Show available connectors.
onPress	-	`function`	Handle press event. Input argument `event`.
onDragStart	-	`function`	Handle drag start event. Input argument `[x, y]`.
onDrag	-	`function`	Handle drag event. Input argument `[x, y]`.
onDragEnd	-	`function`	Handle drag end event. Input argument `[x, y]`.
onResizeStart	-	`function`	Handle resize start event. Input argument `[x, y]`.
onResize	-	`function`	Handle resize event. Input argument `[x, y]`.
onResizeEnd	-	`function`	Handle resize end event. Input argument `[x, y]`.

Basic props of `DragResizeContainer`

Prop	Default	Type	Description
onInit	-	`function`	Return container parameters `{x, y, w, h}`, after component initialization. You can send this object to `limitation` property of `DragResizeBlock` component.
style	-	`style`	Custom styles.

Run example

To run example call this commands in terminal:

$ cd example
$ npm i
$ react-native run-android
$ react-native run-ios

Notice!

If your npm not support symlinks, then call this code from repository root directory:

$ cp -alf $PWD example/node_modules/
$ rm -R example/node_modules/react-native-drag-resize/example
$ cd example
$ react-native run-android
$ react-native run-ios

samridhgupta/react-native-drag-resize