React Native Gestures. Support: Drag, Scale and Rotate a Component.
$ npm install --save react-native-easy-gestures
$ npm install --save [email protected]
import Gestures from 'react-native-easy-gestures';
/* Simple example: */
<Gestures>
<Image
source={photo}
style={{
width: 200,
height: 300,
}}
/>
</Gestures>
/* Only drag example witn `onChange` event: */
<Gestures
rotatable={false}
scalable={false}
onChange={(event, styles) => {
console.log(styles);
}}
>
<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: 0.1,
max: 7,
}}
rotatable={false}
onEnd={(event, styles) => {
console.log(styles);
}}
>
<Image
source={photo}
style={{
width,
height,
}}
/>
</Gestures>
draggable?: boolean = true | object = { x?: boolean = true, y?: boolean = true }
rotatable?: boolean = true
scalable?: boolean = true | object = { min?: number = 0.33, max?: number = 2 }
style?: object // RN Styles
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
<Gestures
ref={(c) => { this.gestures = c; }}
onEnd={(event, styles) => {
this.gestures.reset((prevStyles) => {
console.log(prevStyles);
});
}}
$ git clone https://github.com/keske/react-native-easy-gestures.git
$ cd react-native-easy-gestures
$ npm install
$ react-native run-ios
- Rotate step, ex: every 90deg
- Guidelines and center snap