https://github.com/keske/react-native-easy-gestures
React Native Gestures. Support: Drag, Scale and Rotate a Component.
https://github.com/keske/react-native-easy-gestures
drag gestures react-native rotation scale
Last synced: about 1 year ago
JSON representation
React Native Gestures. Support: Drag, Scale and Rotate a Component.
- Host: GitHub
- URL: https://github.com/keske/react-native-easy-gestures
- Owner: keske
- License: mit
- Created: 2017-04-19T13:20:12.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T03:18:21.000Z (over 3 years ago)
- Last Synced: 2024-04-14T21:47:28.616Z (about 2 years ago)
- Topics: drag, gestures, react-native, rotation, scale
- Language: JavaScript
- Size: 5.06 MB
- Stars: 172
- Watchers: 8
- Forks: 62
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```javascript
import Gestures from 'react-native-easy-gestures';
/* Simple example: */
/* Only drag example witn `onChange` event: */
{
console.log(styles);
}}
>
/**
* Another example:
* Drag only on x axis;
* Scale from 0.1 to 7;
* Do not rotate;
* On release callback;
*/
{
console.log(styles);
}}
>
```
## Props
### Behavior
```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 }
```
### Styles
```javascript
style?: object // RN Styles
```
### Callbacks
```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
```
### How to reset styles
```javascript
{ 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