React Native Easy Gestures
React Native Gestures. Support: Drag, Scale and Rotate a Component.
Instalation
RN > 0.46 👶
$ npm install --save react-native-easy-gestures
RN < 0.46 👴
$ npm install --save react-native-easy-gestures@1.0.x
Usage
; /* Simple example: */<Gestures> <Image source=photo style= width: 200 height: 300 /></Gestures> /* Only drag example witn `onChange` event: */<Gestures rotatable=false scalable=false onChange= { console; }> <Image source=photo style= width: 200 height: 300 /></Gestures> /** * Another example: * Drag only on x axis; * Scale from 0.1 to 7; * Do not rotate; * On release callback; */<Gestures draggable= y: false scalable= min: 01 max: 7 rotatable=false onEnd= { console; }> <Image source=photo style= width height /></Gestures>
Props
Behavior
draggable?: boolean = true | object = x?: boolean = true y?: boolean = true
rotatable?: boolean = true
scalable?: boolean = true | object = min?: number = 033 max?: number = 2
Styles
style?: object // RN Styles
Callbacks
onStart?event: object styles: object: void
onChange?event: object styles: object: void
onEnd?event: object styles: object: void
onMultyTouchStart?event: object styles: object: void
onMultyTouchChange?event: object styles: object: void
onMultyTouchEnd?event: object styles: object: void
onRotateStart?event: object styles: object: void
onRotateChange?event: object styles: object: void
onRotateEnd?event: object styles: object: void
onScaleStart?event: object styles: object: void
onScaleChange?event: object styles: object: void
onScaleEnd?event: object styles: object: void
How to reset styles
<Gestures ref= { thisgestures = c; } onEnd= { thisgestures; }
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