keske / React Native Easy Gestures
Licence: mit
React Native Gestures. Support: Drag, Scale and Rotate a Component.
Stars: ✭ 153
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Easy Gestures
Igrphototweaks
Drag, Rotate, Scale and Crop
Stars: ✭ 212 (+38.56%)
Mutual labels: scale, drag, rotation
vue-avatar-editor
Avatar editor for Vue.js. Demo on : https://fpluquet.github.io/vue-avatar-editor/
Stars: ✭ 85 (-44.44%)
Mutual labels: scale, rotation
React Use Gesture
👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.
Stars: ✭ 5,704 (+3628.1%)
Mutual labels: gestures, drag
use-gesture
👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.
Stars: ✭ 6,624 (+4229.41%)
Mutual labels: drag, gestures
Reframe.js
🖼 Reframe unresponsive elements responsively.
Stars: ✭ 1,622 (+960.13%)
Mutual labels: scale
Displace
Minimal javascript library for creating movable DOM elements
Stars: ✭ 127 (-16.99%)
Mutual labels: drag
Fullrecyclerview
This is a compilation of different kinds and actions in recyclerView
Stars: ✭ 127 (-16.99%)
Mutual labels: drag
Redfish Ansible Module
Ansible modules for Out-Of-Band Controllers using Redfish APIs
Stars: ✭ 139 (-9.15%)
Mutual labels: scale
React Dragline
🐼Guide lines and magnetic adsorption to better align draggable elements in React.
Stars: ✭ 134 (-12.42%)
Mutual labels: drag
Angular Tree Dnd
Display tree table (or list) & event Drap & Drop (allow drag multi tree-table include all type: table, ol, ul) by AngularJS
Stars: ✭ 146 (-4.58%)
Mutual labels: drag
Jpeg Autorotate
Node module to rotate JPEG images based on EXIF orientation.
Stars: ✭ 127 (-16.99%)
Mutual labels: rotation
Neural Tools
Tools made for usage alongside artistic style transfer projects
Stars: ✭ 150 (-1.96%)
Mutual labels: scale
Dnd Kit
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
Stars: ✭ 3,456 (+2158.82%)
Mutual labels: drag
Caddy Gen
Automated Caddy reverse proxy for docker containers
Stars: ✭ 139 (-9.15%)
Mutual labels: scale
React Cursor Position
A React component that decorates its children with mouse and touch coordinates relative to itself.
Stars: ✭ 136 (-11.11%)
Mutual labels: drag
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 [email protected]
Usage
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>
Props
Behavior
draggable?: boolean = true | object = { x?: boolean = true, y?: boolean = true }
rotatable?: boolean = true
scalable?: boolean = true | object = { min?: number = 0.33, 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={(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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].