/react-native-drag-resize

React Native component for draggable and resizable manipulation.

Primary LanguageJavaScript

react-native-drag-resize

React Native component for draggable and resizable manipulation.

Show Cases

demo.gif

Getting Started

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