react-native-drag-resize

This repo was forked from https://github.com/CaptainOmega/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 @skynetcmg47/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, w, h]. |

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