├── LICENSE
├── README.md
├── SimpleGesture.js
└── package.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Christopher
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-native-simple-gesture
 2 | Wrapper for React Native gestureState that provides information about the type of gesture using a simple plain english API
 3 | 
 4 | ## Install
 5 | 
 6 | `npm install react-native-simple-gesture --save`
 7 | 
 8 | ## Write Code
 9 | 
10 | ```
11 | import React from 'react-native';
12 | import SimpleGesture from 'react-native-simple-gesture';
13 | let { PanResponder, View, Text } = React;
14 | 
15 | class SuperAwesomeComponent extends React.Component {
16 | 
17 |   componentWillMount() {
18 |     this._panResponder = PanResponder.create({
19 |       // Only respond to movements if the gesture is a swipe up
20 |       onMoveShouldSetPanResponder: (e, gs) => {
21 |         let sgs = new SimpleGesture(e,gs);
22 |         return sgs.isSwipeUp();
23 |       }
24 |     });
25 |   }
26 | 
27 |   render() {
28 |     return(
29 |       <View { ...this._panResponder.panHandlers }>
30 |         <Text>I'm gonna respond to swipes that go up</Text>
31 |       </View>
32 |     )
33 |   }
34 | 
35 | }
36 | ```
37 | 
38 | ## What You Can Do
39 | 
40 | ### Relative Gesture Distance
41 | 
42 | Get the gesture distance relative to device screen size
43 | 
44 | ```
45 | let sgs = new SimpleGesture(e, gs);
46 | console.log('Swiped ', sgs.relativeGestureDistance.x*100, '% of the screen horizontally');
47 | console.log('Swiped ', sgs.relativeGestureDistance.y*100, '% of the screen vertically');
48 | ```
49 | 
50 | So far I've only written swipe tests. Gestures beyond swipes are next.
51 | 
52 | ### Vertical Gesture Tests
53 | 
54 | * isVertical()
55 | * isSimpleSwipeUp()
56 | * isSwipeUp()
57 | * isLongSwipeUp()
58 | * isFastSwipeUp()
59 | * isMovingUp()
60 | * isSimpleSwipeDown()
61 | * isSwipeDown()
62 | * isLongSwipeDown()
63 | * isFastSwipeDown()
64 | * isMovingDown()
65 | 
66 | ### Horizontal Gesture Tests
67 | 
68 | * isHorizontal()
69 | * isSimpleSwipeLeft()
70 | * isSwipeLeft()
71 | * isLongSwipeLeft()
72 | * isFastSwipeLeft()
73 | * isMovingLeft()
74 | * isSimpleSwipeRight()
75 | * isSwipeRight()
76 | * isLongSwipeRight()
77 | * isFastSwipeRight()
78 | * isMovingRight()
79 | 


--------------------------------------------------------------------------------
/SimpleGesture.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | import { Dimensions } from 'react-native';
  4 | 
  5 | const FAST = 1;
  6 | const LONG = 0.5;
  7 | const MOVING = 0.2;
  8 | 
  9 | class SimpleGesture {
 10 | 
 11 |   constructor(e, gs) {
 12 |     let relativeGestureDistance = {
 13 |       x: gs.dx / Dimensions.get('window').width,
 14 |       y: gs.dy / Dimensions.get('window').height
 15 |     };
 16 |     Object.assign(this, gs, { relativeGestureDistance });
 17 |   }
 18 | 
 19 |   isVertical() {
 20 |     // Is the vertical offset higher than the horizontal offset?
 21 |     return !!(Math.abs(this.dy) > Math.abs(this.dx));
 22 |   }
 23 | 
 24 |   isHorizontal() {
 25 |     // Is the horizontal offset higher than the vertical offset?
 26 |     return !!!(this.isVertical());
 27 |   }
 28 | 
 29 |   // Swipe Up Gestures
 30 | 
 31 |   isSimpleSwipeUp() {
 32 |     // IF:
 33 |     // (
 34 |     //   The user swiped up a significant percent of the screen height
 35 |     //   OR
 36 |     //   Swiped up in a quick motion
 37 |     // )
 38 |     // AND
 39 |     // Didn't change their mind and start swiping down at the end
 40 |     // THEN:
 41 |     // Sure, let's call that a swipe up.
 42 |     return !!(
 43 |       (this.isLongSwipeUp() || this.isFastSwipeUp())
 44 |       && !this.isMovingDown()
 45 |     );
 46 |   }
 47 | 
 48 |   isSwipeUp() {
 49 |     if(!this.isVertical()) return false;
 50 |     return !!(this.dy < 0);
 51 |   }
 52 | 
 53 |   isLongSwipeUp() {
 54 |     return !!(this.relativeGestureDistance.y < -LONG);
 55 |   }
 56 | 
 57 |   isFastSwipeUp() {
 58 |     return !!(this.vy < -FAST);
 59 |   }
 60 | 
 61 |   isMovingUp() {
 62 |     return !!(this.vy < -MOVING);
 63 |   }
 64 | 
 65 |   // Swipe Down Gestures
 66 | 
 67 |   isSimpleSwipeDown() {
 68 |     // IF:
 69 |     // (
 70 |     //   The user swiped down a significant percent of the screen height
 71 |     //   OR
 72 |     //   Swiped down in a quick motion
 73 |     // )
 74 |     // AND
 75 |     // Didn't change their mind and start swiping up at the end
 76 |     // THEN:
 77 |     // Sure, let's call that a swipe down.
 78 |     return !!(
 79 |       (this.isLongSwipeDown() || this.isFastSwipeDown())
 80 |       && !this.isMovingUp()
 81 |     );
 82 |   }
 83 | 
 84 | 
 85 |   isSwipeDown() {
 86 |     if(!this.isVertical()) return false;
 87 |     return !!(this.dy > 0);
 88 |   }
 89 | 
 90 |   isLongSwipeDown() {
 91 |     return !!(this.relativeGestureDistance.y > LONG);
 92 |   }
 93 | 
 94 |   isFastSwipeDown() {
 95 |     return !!(this.vy > FAST);
 96 |   }
 97 | 
 98 |   isMovingDown() {
 99 |     return !!(this.vy > MOVING);
100 |   }
101 | 
102 |   // Swipe Left Gestures
103 | 
104 |   isSimpleSwipeLeft() {
105 |     return !!(
106 |       (this.isLongSwipeLeft() || this.isFastSwipeLeft())
107 |       && !this.isMovingRight()
108 |     );
109 |   }
110 | 
111 |   isSwipeLeft() {
112 |     if(!this.isHorizontal()) return false;
113 |     return !!(this.dx < 0);
114 |   }
115 | 
116 |   isLongSwipeLeft() {
117 |     return !!(this.relativeGestureDistance.x < -LONG);
118 |   }
119 | 
120 |   isFastSwipeLeft() {
121 |     return !!(this.vx < -FAST);
122 |   }
123 | 
124 |   isMovingLeft() {
125 |     return !!(this.vx < -MOVING);
126 |   }
127 | 
128 |   // Swipe Right Gestures
129 | 
130 |   isSimpleSwipeRight() {
131 |     return !!(
132 |       (this.isLongSwipeRight() || this.isFastSwipeRight())
133 |       && !this.isMovingLeft()
134 |     );
135 |   }
136 | 
137 |   isSwipeRight() {
138 |     if(!this.isHorizontal()) return false;
139 |     return !!(this.dx > 0);
140 |   }
141 | 
142 |   isLongSwipeRight() {
143 |     return !!(this.relativeGestureDistance.x > LONG);
144 |   }
145 | 
146 |   isFastSwipeRight() {
147 |     return !!(this.vx > FAST);
148 |   }
149 | 
150 |   isMovingRight() {
151 |     return !!(this.vx > MOVING);
152 |   }
153 | 
154 | }
155 | 
156 | export default SimpleGesture;
157 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-simple-gesture",
 3 |   "version": "0.0.2",
 4 |   "description": "Wrapper for React Native gestureState that provides information about the type of gesture using a simple plain english API",
 5 |   "main": "SimpleGesture.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+ssh://git@github.com/christopherabouabdo/react-native-simple-gesture.git"
12 |   },
13 |   "keywords": [
14 |     "react-native",
15 |     "gesture"
16 |   ],
17 |   "author": "christopherabouabdo",
18 |   "license": "MIT",
19 |   "bugs": {
20 |     "url": "https://github.com/christopherabouabdo/react-native-simple-gesture/issues"
21 |   },
22 |   "homepage": "https://github.com/christopherabouabdo/react-native-simple-gesture#readme"
23 | }
24 | 


--------------------------------------------------------------------------------