React Native Easy Gestures

React Native Gestures. Support: Drag, Scale and Rotate a Component.

!example

Instalation

$3

``
$ npm install --save react-native-easy-gestures
`

$3

`
$ npm install --save react-native-easy-gestures@1.0.x
`

Usage

`javascript
import Gestures from 'react-native-easy-gestures';

/ Simple example: /

source={photo}
style={{
width: 200,
height: 300,
}}
/>


/ Only drag example witn onChange event: /
rotatable={false}
scalable={false}
onChange={(event, styles) => {
console.log(styles);
}}
>
source={photo}
style={{
width: 200,
height: 300,
}}
/>


/**
* Another example:
* Drag only on x axis;
* Scale from 0.1 to 7;
* Do not rotate;
* On release callback;
*/
draggable={{
y: false,
}}
scalable={{
min: 0.1,
max: 7,
}}
rotatable={false}
onEnd={(event, styles) => {
console.log(styles);
}}
>
source={photo}
style={{
width,
height,
}}
/>

`

Props

$3

`javascript
draggable?: boolean = true | object = { x?: boolean = true, y?: boolean = true }
`

`javascript
rotatable?: boolean = true
`

`javascript
scalable?: boolean = true | object = { min?: number = 0.33, max?: number = 2 }
`

$3

`javascript
style?: object // RN Styles
`

$3

`javascript
onStart?(event: object, styles: object): void
`

`javascript
onChange?(event: object, styles: object): void
`

`javascript
onEnd?(event: object, styles: object): void
`

`javascript
onMultyTouchStart?(event: object, styles: object): void
`

`javascript
onMultyTouchChange?(event: object, styles: object): void
`

`javascript
onMultyTouchEnd?(event: object, styles: object): void
`

`javascript
onRotateStart?(event: object, styles: object): void
`

`javascript
onRotateChange?(event: object, styles: object): void
`

`javascript
onRotateEnd?(event: object, styles: object): void
`

`javascript
onScaleStart?(event: object, styles: object): void
`

`javascript
onScaleChange?(event: object, styles: object): void
`

`javascript
onScaleEnd?(event: object, styles: object): void
`

$3

`javascript
ref={(c) => { this.gestures = c; }}
onEnd={(event, styles) => {
this.gestures.reset((prevStyles) => {
console.log(prevStyles);
});
}}
`

Development

`
$ git clone https://github.com/keske/react-native-easy-gestures.git
$ cd react-native-easy-gestures
$ npm install
$ react-native run-ios
``

TODO

- [ ] Rotate step, ex: every 90deg
- [ ] Guidelines and center snap