You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Check [the code for the screens](https://github.com/mxmzb/react-native-gesture-detector/tree/master/example/src/Screen) to see how they are done!
46
+
31
47
## Intro
32
48
33
-
This package originated from a real life need to detect custom gestures. The idea for implementation originated from this [stellar answer](https://stackoverflow.com/questions/20821358/gesture-detection-algorithm-based-on-discrete-points) on StackOverflow. The result is not 100% foolproof, but performant and extremely simple to use.
49
+
This package originated from a real life **need to detect custom gestures**. The idea for implementation originated from this [stellar answer](https://stackoverflow.com/questions/20821358/gesture-detection-algorithm-based-on-discrete-points) on StackOverflow. The result is not 100% foolproof, but rock solid, performant and extremely simple to use.
34
50
35
-
Because the library strongly uses React hooks, you must use at least `[email protected]`.
51
+
The package comes with another, insanely cool component `GestureRecorder`, which allows you to create gestures **on the fly**. Yep, just plug it in, paint the gesture and you will receive the coordinate data for your supercomplex, custom gesture. You can use it to just **use the data points as a predefined gesture** in your app, or **you can even let your app users create their own custom gestures**, if that fits your game plan!
52
+
53
+
Because the library significantly uses React hooks, you must use at least `[email protected]`.
|`onGestureFinish`|`(gesture) => {}`|`function`| A callback, which is called when the user finishes a gesture. Receives the gesture key of the finished gesture. |
118
155
|`onPanRelease`|`() => {}`|`function`| Callback, when the user releases the finger. Receives no arguments. |
119
156
157
+
### `GestureRecorder`
158
+
159
+
`GestureRecorder` is a render props component. The child function has the form `children({ gesture: [{ x: string, y: string }, { x: string, y: string }, ...], gestureDirectionHistory: [{ x: string, y: string }, { x: string, y: string }, ...], offset: { x: number, y: number } })`.
160
+
161
+
`gesture` is an array of coordinates. They are generated based on the `pointDistance` prop of the component.
162
+
163
+
`gestureDirectionHistory` will tell you accordingly to `gesture` which direction the gesture is moving there. This might give somewhat unreliable data currently. A direction object looks like `{ x: "left", y: "up" }`.
164
+
165
+
`offset` will artificially add an horizontal and vertical offset to the coordinates. This does not change the detection of the defined gesture at all. It's just a helper to use with the `GesturePath` component to paint the path where you actually draw. Check the [`GestureRecorder` example screen](https://github.com/mxmzb/react-native-gesture-detector/blob/master/example/src/Screen/CreateGesture.js) for more details on this.
|`pointDistance`| 20 |`number`| The minimum distance between points that you want to be recorded. So default wise, every 20px (or more, usually depending on the phone hardware and the speed of the finger moving over the display) the component will add another point to the `gesture` array |
170
+
|`onCapture`|`() => {}`|`function`| A callback, which is called every time the component is adding a coordinate to the `gesture` array |
171
+
|`onPanRelease`|`(gesture) => {}`|`function`| Callback, when the user releases the finger. Receives the fully drawn gesture in form of a coordinate array. |
172
+
120
173
### `GesturePath`
121
174
122
175
`GesturePath` is a helper component, which paints a gesture visually in a container. The container should have `position: absolute;` set in its style property. `{ x, y }` is a coordinate object. An array of coordinate objects must be passed to paint the gesture on the screen. This component should be only used in development to define and refine gestures.
0 commit comments