react-native-gesture-handler 2.16.0 → 2.16.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (98) hide show
  1. package/README.md +1 -0
  2. package/lib/commonjs/handlers/PanGestureHandler.js.map +1 -1
  3. package/lib/commonjs/handlers/createHandler.js +9 -3
  4. package/lib/commonjs/handlers/createHandler.js.map +1 -1
  5. package/lib/commonjs/handlers/gestures/GestureDetector.js +15 -0
  6. package/lib/commonjs/handlers/gestures/GestureDetector.js.map +1 -1
  7. package/lib/commonjs/handlers/gestures/flingGesture.js +13 -0
  8. package/lib/commonjs/handlers/gestures/flingGesture.js.map +1 -1
  9. package/lib/commonjs/handlers/gestures/forceTouchGesture.js +17 -0
  10. package/lib/commonjs/handlers/gestures/forceTouchGesture.js.map +1 -1
  11. package/lib/commonjs/handlers/gestures/gesture.js +135 -0
  12. package/lib/commonjs/handlers/gestures/gesture.js.map +1 -1
  13. package/lib/commonjs/handlers/gestures/gestureObjects.js +66 -0
  14. package/lib/commonjs/handlers/gestures/gestureObjects.js.map +1 -1
  15. package/lib/commonjs/handlers/gestures/gestureStateManager.web.js +1 -1
  16. package/lib/commonjs/handlers/gestures/gestureStateManager.web.js.map +1 -1
  17. package/lib/commonjs/handlers/gestures/hoverGesture.js +1 -1
  18. package/lib/commonjs/handlers/gestures/hoverGesture.js.map +1 -1
  19. package/lib/commonjs/handlers/gestures/longPressGesture.js +12 -0
  20. package/lib/commonjs/handlers/gestures/longPressGesture.js.map +1 -1
  21. package/lib/commonjs/handlers/gestures/nativeGesture.js +10 -0
  22. package/lib/commonjs/handlers/gestures/nativeGesture.js.map +1 -1
  23. package/lib/commonjs/handlers/gestures/panGesture.js +76 -0
  24. package/lib/commonjs/handlers/gestures/panGesture.js.map +1 -1
  25. package/lib/commonjs/handlers/gestures/tapGesture.js +42 -0
  26. package/lib/commonjs/handlers/gestures/tapGesture.js.map +1 -1
  27. package/lib/commonjs/utils.js +5 -1
  28. package/lib/commonjs/utils.js.map +1 -1
  29. package/lib/commonjs/web/handlers/GestureHandler.js +7 -7
  30. package/lib/commonjs/web/handlers/GestureHandler.js.map +1 -1
  31. package/lib/commonjs/web/handlers/PanGestureHandler.js +3 -1
  32. package/lib/commonjs/web/handlers/PanGestureHandler.js.map +1 -1
  33. package/lib/commonjs/web/interfaces.js.map +1 -1
  34. package/lib/module/handlers/PanGestureHandler.js.map +1 -1
  35. package/lib/module/handlers/createHandler.js +9 -3
  36. package/lib/module/handlers/createHandler.js.map +1 -1
  37. package/lib/module/handlers/gestures/GestureDetector.js +15 -0
  38. package/lib/module/handlers/gestures/GestureDetector.js.map +1 -1
  39. package/lib/module/handlers/gestures/flingGesture.js +13 -0
  40. package/lib/module/handlers/gestures/flingGesture.js.map +1 -1
  41. package/lib/module/handlers/gestures/forceTouchGesture.js +17 -0
  42. package/lib/module/handlers/gestures/forceTouchGesture.js.map +1 -1
  43. package/lib/module/handlers/gestures/gesture.js +135 -0
  44. package/lib/module/handlers/gestures/gesture.js.map +1 -1
  45. package/lib/module/handlers/gestures/gestureObjects.js +67 -0
  46. package/lib/module/handlers/gestures/gestureObjects.js.map +1 -1
  47. package/lib/module/handlers/gestures/gestureStateManager.web.js +1 -1
  48. package/lib/module/handlers/gestures/gestureStateManager.web.js.map +1 -1
  49. package/lib/module/handlers/gestures/hoverGesture.js +1 -1
  50. package/lib/module/handlers/gestures/hoverGesture.js.map +1 -1
  51. package/lib/module/handlers/gestures/longPressGesture.js +12 -0
  52. package/lib/module/handlers/gestures/longPressGesture.js.map +1 -1
  53. package/lib/module/handlers/gestures/nativeGesture.js +10 -0
  54. package/lib/module/handlers/gestures/nativeGesture.js.map +1 -1
  55. package/lib/module/handlers/gestures/panGesture.js +76 -0
  56. package/lib/module/handlers/gestures/panGesture.js.map +1 -1
  57. package/lib/module/handlers/gestures/tapGesture.js +42 -0
  58. package/lib/module/handlers/gestures/tapGesture.js.map +1 -1
  59. package/lib/module/utils.js +5 -1
  60. package/lib/module/utils.js.map +1 -1
  61. package/lib/module/web/handlers/GestureHandler.js +7 -7
  62. package/lib/module/web/handlers/GestureHandler.js.map +1 -1
  63. package/lib/module/web/handlers/PanGestureHandler.js +3 -1
  64. package/lib/module/web/handlers/PanGestureHandler.js.map +1 -1
  65. package/lib/module/web/interfaces.js.map +1 -1
  66. package/lib/typescript/handlers/PanGestureHandler.d.ts +4 -4
  67. package/lib/typescript/handlers/gestures/GestureDetector.d.ts +36 -0
  68. package/lib/typescript/handlers/gestures/flingGesture.d.ts +11 -0
  69. package/lib/typescript/handlers/gestures/forceTouchGesture.d.ts +14 -0
  70. package/lib/typescript/handlers/gestures/gesture.d.ts +113 -0
  71. package/lib/typescript/handlers/gestures/gestureObjects.d.ts +57 -0
  72. package/lib/typescript/handlers/gestures/hoverGesture.d.ts +1 -1
  73. package/lib/typescript/handlers/gestures/longPressGesture.d.ts +10 -0
  74. package/lib/typescript/handlers/gestures/nativeGesture.d.ts +8 -0
  75. package/lib/typescript/handlers/gestures/panGesture.d.ts +67 -4
  76. package/lib/typescript/handlers/gestures/tapGesture.d.ts +35 -0
  77. package/lib/typescript/web/handlers/GestureHandler.d.ts +2 -2
  78. package/lib/typescript/web/handlers/IGestureHandler.d.ts +1 -1
  79. package/lib/typescript/web/interfaces.d.ts +1 -0
  80. package/package.json +3 -2
  81. package/src/handlers/PanGestureHandler.ts +8 -4
  82. package/src/handlers/createHandler.tsx +14 -10
  83. package/src/handlers/gestures/GestureDetector.tsx +38 -0
  84. package/src/handlers/gestures/flingGesture.ts +11 -0
  85. package/src/handlers/gestures/forceTouchGesture.ts +14 -0
  86. package/src/handlers/gestures/gesture.ts +113 -0
  87. package/src/handlers/gestures/gestureObjects.ts +57 -0
  88. package/src/handlers/gestures/gestureStateManager.web.ts +1 -1
  89. package/src/handlers/gestures/hoverGesture.ts +1 -1
  90. package/src/handlers/gestures/longPressGesture.ts +10 -0
  91. package/src/handlers/gestures/nativeGesture.ts +8 -0
  92. package/src/handlers/gestures/panGesture.ts +75 -4
  93. package/src/handlers/gestures/tapGesture.ts +35 -0
  94. package/src/utils.ts +9 -2
  95. package/src/web/handlers/GestureHandler.ts +9 -9
  96. package/src/web/handlers/IGestureHandler.ts +1 -1
  97. package/src/web/handlers/PanGestureHandler.ts +4 -0
  98. package/src/web/interfaces.ts +1 -0
@@ -77,26 +77,125 @@ export declare abstract class BaseGesture<EventPayloadT extends Record<string, u
77
77
  handlers: HandlerCallbacks<EventPayloadT>;
78
78
  constructor();
79
79
  private addDependency;
80
+ /**
81
+ * Sets a `ref` to the gesture object, allowing for interoperability with the old API.
82
+ * @param ref
83
+ */
80
84
  withRef(ref: React.MutableRefObject<GestureType | undefined>): this;
81
85
  protected isWorklet(callback: Function): boolean;
86
+ /**
87
+ * Set the callback that is being called when given gesture handler starts receiving touches.
88
+ * At the moment of this callback the handler is in `BEGAN` state and we don't know yet if it will recognize the gesture at all.
89
+ * @param callback
90
+ */
82
91
  onBegin(callback: (event: GestureStateChangeEvent<EventPayloadT>) => void): this;
92
+ /**
93
+ * Set the callback that is being called when the gesture is recognized by the handler and it transitions to the `ACTIVE` state.
94
+ * @param callback
95
+ */
83
96
  onStart(callback: (event: GestureStateChangeEvent<EventPayloadT>) => void): this;
97
+ /**
98
+ * Set the callback that is being called when the gesture that was recognized by the handler finishes and handler reaches `END` state.
99
+ * It will be called only if the handler was previously in the `ACTIVE` state.
100
+ * @param callback
101
+ */
84
102
  onEnd(callback: (event: GestureStateChangeEvent<EventPayloadT>, success: boolean) => void): this;
103
+ /**
104
+ * Set the callback that is being called when the handler finalizes handling gesture - the gesture was recognized and has finished or it failed to recognize.
105
+ * @param callback
106
+ */
85
107
  onFinalize(callback: (event: GestureStateChangeEvent<EventPayloadT>, success: boolean) => void): this;
108
+ /**
109
+ * Set the `onTouchesDown` callback which is called every time a pointer is placed on the screen.
110
+ * @param callback
111
+ */
86
112
  onTouchesDown(callback: TouchEventHandlerType): this;
113
+ /**
114
+ * Set the `onTouchesMove` callback which is called every time a pointer is moved on the screen.
115
+ * @param callback
116
+ */
87
117
  onTouchesMove(callback: TouchEventHandlerType): this;
118
+ /**
119
+ * Set the `onTouchesUp` callback which is called every time a pointer is lifted from the screen.
120
+ * @param callback
121
+ */
88
122
  onTouchesUp(callback: TouchEventHandlerType): this;
123
+ /**
124
+ * Set the `onTouchesCancelled` callback which is called every time a pointer stops being tracked, for example when the gesture finishes.
125
+ * @param callback
126
+ */
89
127
  onTouchesCancelled(callback: TouchEventHandlerType): this;
128
+ /**
129
+ * Indicates whether the given handler should be analyzing stream of touch events or not.
130
+ * @param enabled
131
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#enabledvalue-boolean
132
+ */
90
133
  enabled(enabled: boolean): this;
134
+ /**
135
+ * When true the handler will cancel or fail recognition (depending on its current state) whenever the finger leaves the area of the connected view.
136
+ * @param value
137
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#shouldcancelwhenoutsidevalue-boolean
138
+ */
91
139
  shouldCancelWhenOutside(value: boolean): this;
140
+ /**
141
+ * This parameter enables control over what part of the connected view area can be used to begin recognizing the gesture.
142
+ * When a negative number is provided the bounds of the view will reduce the area by the given number of points in each of the sides evenly.
143
+ * @param hitSlop
144
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#hitslopsettings
145
+ */
92
146
  hitSlop(hitSlop: HitSlop): this;
147
+ /**
148
+ * #### Web only
149
+ * This parameter allows to specify which `cursor` should be used when gesture activates.
150
+ * Supports all CSS cursor values (e.g. `"grab"`, `"zoom-in"`). Default value is set to `"auto"`.
151
+ * @param activeCursor
152
+ */
93
153
  activeCursor(activeCursor: ActiveCursor): this;
154
+ /**
155
+ * #### Web & Android only
156
+ * Allows users to choose which mouse button should handler respond to.
157
+ * Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`.
158
+ * Default value is set to `MouseButton.LEFT`.
159
+ * @param mouseButton
160
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#mousebuttonvalue-mousebutton-web--android-only
161
+ */
94
162
  mouseButton(mouseButton: MouseButton): this;
163
+ /**
164
+ * When `react-native-reanimated` is installed, the callbacks passed to the gestures are automatically workletized and run on the UI thread when called.
165
+ * This option allows for changing this behavior: when `true`, all the callbacks will be run on the JS thread instead of the UI thread, regardless of whether they are worklets or not.
166
+ * Defaults to `false`.
167
+ * @param runOnJS
168
+ */
95
169
  runOnJS(runOnJS: boolean): this;
170
+ /**
171
+ * Allows gestures across different components to be recognized simultaneously.
172
+ * @param gestures
173
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneouswithexternalgesture
174
+ */
96
175
  simultaneousWithExternalGesture(...gestures: Exclude<GestureRef, number>[]): this;
176
+ /**
177
+ * Allows to delay activation of the handler until all handlers passed as arguments to this method fail (or don't begin at all).
178
+ * @param gestures
179
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#requireexternalgesturetofail
180
+ */
97
181
  requireExternalGestureToFail(...gestures: Exclude<GestureRef, number>[]): this;
182
+ /**
183
+ * Works similarily to `requireExternalGestureToFail` but the direction of the relation is reversed - instead of being one-to-many relation, it's many-to-one.
184
+ * @param gestures
185
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#blocksexternalgesture
186
+ */
98
187
  blocksExternalGesture(...gestures: Exclude<GestureRef, number>[]): this;
188
+ /**
189
+ * Sets a `testID` property for gesture object, allowing for querying for it in tests.
190
+ * @param id
191
+ */
99
192
  withTestId(id: string): this;
193
+ /**
194
+ * #### iOS only
195
+ * When `true`, the handler will cancel touches for native UI components (`UIButton`, `UISwitch`, etc) it's attached to when it becomes `ACTIVE`.
196
+ * Default value is `true`.
197
+ * @param value
198
+ */
100
199
  cancelsTouchesInView(value: boolean): this;
101
200
  initialize(): void;
102
201
  toGestureArray(): GestureType[];
@@ -104,8 +203,22 @@ export declare abstract class BaseGesture<EventPayloadT extends Record<string, u
104
203
  get shouldUseReanimated(): boolean;
105
204
  }
106
205
  export declare abstract class ContinousBaseGesture<EventPayloadT extends Record<string, unknown>, EventChangePayloadT extends Record<string, unknown>> extends BaseGesture<EventPayloadT> {
206
+ /**
207
+ * Set the callback that is being called every time the gesture receives an update while it's active.
208
+ * @param callback
209
+ */
107
210
  onUpdate(callback: (event: GestureUpdateEvent<EventPayloadT>) => void): this;
211
+ /**
212
+ * Set the callback that is being called every time the gesture receives an update while it's active.
213
+ * This callback will receive information about change in value in relation to the last received event.
214
+ * @param callback
215
+ */
108
216
  onChange(callback: (event: GestureUpdateEvent<EventPayloadT & EventChangePayloadT>) => void): this;
217
+ /**
218
+ * When `true` the handler will not activate by itself even if its activation criteria are met.
219
+ * Instead you can manipulate its state using state manager.
220
+ * @param manualActivation
221
+ */
109
222
  manualActivation(manualActivation: boolean): this;
110
223
  }
111
224
  export {};
@@ -10,24 +10,80 @@ import { TapGesture } from './tapGesture';
10
10
  import { NativeGesture } from './nativeGesture';
11
11
  import { ManualGesture } from './manualGesture';
12
12
  import { HoverGesture } from './hoverGesture';
13
+ /**
14
+ * `Gesture` is the object that allows you to create and compose gestures.
15
+ *
16
+ * ### Remarks
17
+ * - Consider wrapping your gesture configurations with `useMemo`, as it will reduce the amount of work Gesture Handler has to do under the hood when updating gestures.
18
+ *
19
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture
20
+ */
13
21
  export declare const GestureObjects: {
22
+ /**
23
+ * A discrete gesture that recognizes one or many taps.
24
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture
25
+ */
14
26
  Tap: () => TapGesture;
27
+ /**
28
+ * A continuous gesture that can recognize a panning (dragging) gesture and track its movement.
29
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture
30
+ */
15
31
  Pan: () => PanGesture;
32
+ /**
33
+ * A continuous gesture that recognizes pinch gesture. It allows for tracking the distance between two fingers and use that information to scale or zoom your content.
34
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pinch-gesture
35
+ */
16
36
  Pinch: () => PinchGesture;
37
+ /**
38
+ * A continuous gesture that can recognize rotation and track its movement.
39
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/rotation-gesture
40
+ */
17
41
  Rotation: () => RotationGesture;
42
+ /**
43
+ * A discrete gesture that activates when the movement is sufficiently fast.
44
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/fling-gesture
45
+ */
18
46
  Fling: () => FlingGesture;
47
+ /**
48
+ * A discrete gesture that activates when the corresponding view is pressed for a sufficiently long time.
49
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/long-press-gesture
50
+ */
19
51
  LongPress: () => LongPressGesture;
52
+ /**
53
+ * #### iOS only
54
+ * A continuous gesture that recognizes force of a touch. It allows for tracking pressure of touch on some iOS devices.
55
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/force-touch-gesture
56
+ */
20
57
  ForceTouch: () => ForceTouchGesture;
58
+ /**
59
+ * A gesture that allows other touch handling components to participate in RNGH's gesture system.
60
+ * When used, the other component should be the direct child of a `GestureDetector`.
61
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/native-gesture
62
+ */
21
63
  Native: () => NativeGesture;
64
+ /**
65
+ * A plain gesture that has no specific activation criteria nor event data set.
66
+ * Its state has to be controlled manually using a state manager.
67
+ * It will not fail when all the pointers are lifted from the screen.
68
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/manual-gesture
69
+ */
22
70
  Manual: () => ManualGesture;
71
+ /**
72
+ * A continuous gesture that can recognize hovering above the view it's attached to.
73
+ * The hover effect may be activated by moving a mouse or a stylus over the view.
74
+ *
75
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/hover-gesture
76
+ */
23
77
  Hover: () => HoverGesture;
24
78
  /**
25
79
  * Builds a composed gesture consisting of gestures provided as parameters.
26
80
  * The first one that becomes active cancels the rest of gestures.
81
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#race
27
82
  */
28
83
  Race: (...gestures: Gesture[]) => ComposedGesture;
29
84
  /**
30
85
  * Builds a composed gesture that allows all base gestures to run simultaneously.
86
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneous
31
87
  */
32
88
  Simultaneous(...gestures: Gesture[]): SimultaneousGesture;
33
89
  /**
@@ -36,6 +92,7 @@ export declare const GestureObjects: {
36
92
  * than the second one, second one has higher priority than the third one, and so on.
37
93
  * For example, to make a gesture that recognizes both single and double tap you need
38
94
  * to call Exclusive(doubleTap, singleTap).
95
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#exclusive
39
96
  */
40
97
  Exclusive(...gestures: Gesture[]): ExclusiveGesture;
41
98
  };
@@ -23,8 +23,8 @@ export declare class HoverGesture extends ContinousBaseGesture<HoverGestureHandl
23
23
  config: BaseGestureConfig & HoverGestureConfig;
24
24
  constructor();
25
25
  /**
26
+ * #### iOS only
26
27
  * Sets the visual hover effect.
27
- * iOS only
28
28
  */
29
29
  effect(effect: HoverEffect): this;
30
30
  onChange(callback: (event: GestureUpdateEvent<HoverGestureHandlerEventPayload & HoverGestureChangeEventPayload>) => void): this;
@@ -3,7 +3,17 @@ import { LongPressGestureConfig, LongPressGestureHandlerEventPayload } from '../
3
3
  export declare class LongPressGesture extends BaseGesture<LongPressGestureHandlerEventPayload> {
4
4
  config: BaseGestureConfig & LongPressGestureConfig;
5
5
  constructor();
6
+ /**
7
+ * Minimum time, expressed in milliseconds, that a finger must remain pressed on the corresponding view.
8
+ * The default value is 500.
9
+ * @param duration
10
+ */
6
11
  minDuration(duration: number): this;
12
+ /**
13
+ * Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a long press gesture.
14
+ * @param distance
15
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/long-press-gesture#maxdistancevalue-number
16
+ */
7
17
  maxDistance(distance: number): this;
8
18
  }
9
19
  export type LongPressGestureType = InstanceType<typeof LongPressGesture>;
@@ -3,7 +3,15 @@ import { NativeViewGestureConfig, NativeViewGestureHandlerPayload } from '../Nat
3
3
  export declare class NativeGesture extends BaseGesture<NativeViewGestureHandlerPayload> {
4
4
  config: BaseGestureConfig & NativeViewGestureConfig;
5
5
  constructor();
6
+ /**
7
+ * When true, underlying handler will activate unconditionally when in `BEGAN` or `UNDETERMINED` state.
8
+ * @param value
9
+ */
6
10
  shouldActivateOnStart(value: boolean): this;
11
+ /**
12
+ * When true, cancels all other gesture handlers when this `NativeViewGestureHandler` receives an `ACTIVE` state event.
13
+ * @param value
14
+ */
7
15
  disallowInterruption(value: boolean): this;
8
16
  }
9
17
  export type NativeGestureType = InstanceType<typeof NativeGesture>;
@@ -8,18 +8,81 @@ export type PanGestureChangeEventPayload = {
8
8
  export declare class PanGesture extends ContinousBaseGesture<PanGestureHandlerEventPayload, PanGestureChangeEventPayload> {
9
9
  config: BaseGestureConfig & PanGestureConfig;
10
10
  constructor();
11
- activeOffsetY(offset: number | number[]): this;
12
- activeOffsetX(offset: number | number[]): this;
13
- failOffsetY(offset: number | number[]): this;
14
- failOffsetX(offset: number | number[]): this;
11
+ /**
12
+ * Range along Y axis (in points) where fingers travels without activation of gesture.
13
+ * @param offset
14
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#activeoffsetyvalue-number--number
15
+ */
16
+ activeOffsetY(offset: number | [activeOffsetYStart: number, activeOffsetYEnd: number]): this;
17
+ /**
18
+ * Range along X axis (in points) where fingers travels without activation of gesture.
19
+ * @param offset
20
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#activeoffsetxvalue-number--number
21
+ */
22
+ activeOffsetX(offset: number | [activeOffsetXStart: number, activeOffsetXEnd: number]): this;
23
+ /**
24
+ * When the finger moves outside this range (in points) along Y axis and gesture hasn't yet activated it will fail recognizing the gesture.
25
+ * @param offset
26
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#failoffsetyvalue-number--number
27
+ */
28
+ failOffsetY(offset: number | [failOffsetYStart: number, failOffsetYEnd: number]): this;
29
+ /**
30
+ * When the finger moves outside this range (in points) along X axis and gesture hasn't yet activated it will fail recognizing the gesture.
31
+ * @param offset
32
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#failoffsetxvalue-number--number
33
+ */
34
+ failOffsetX(offset: number | [failOffsetXStart: number, failOffsetXEnd: number]): this;
35
+ /**
36
+ * A number of fingers that is required to be placed before gesture can activate. Should be a higher or equal to 0 integer.
37
+ * @param minPointers
38
+ */
15
39
  minPointers(minPointers: number): this;
40
+ /**
41
+ * When the given number of fingers is placed on the screen and gesture hasn't yet activated it will fail recognizing the gesture.
42
+ * Should be a higher or equal to 0 integer.
43
+ * @param maxPointers
44
+ */
16
45
  maxPointers(maxPointers: number): this;
46
+ /**
47
+ * Minimum distance the finger (or multiple finger) need to travel before the gesture activates.
48
+ * Expressed in points.
49
+ * @param distance
50
+ */
17
51
  minDistance(distance: number): this;
52
+ /**
53
+ * Minimum velocity the finger has to reach in order to activate handler.
54
+ * @param velocity
55
+ */
18
56
  minVelocity(velocity: number): this;
57
+ /**
58
+ * Minimum velocity along X axis the finger has to reach in order to activate handler.
59
+ * @param velocity
60
+ */
19
61
  minVelocityX(velocity: number): this;
62
+ /**
63
+ * Minimum velocity along Y axis the finger has to reach in order to activate handler.
64
+ * @param velocity
65
+ */
20
66
  minVelocityY(velocity: number): this;
67
+ /**
68
+ * #### Android only
69
+ * Android, by default, will calculate translation values based on the position of the leading pointer (the first one that was placed on the screen).
70
+ * This modifier allows that behavior to be changed to the one that is default on iOS - the averaged position of all active pointers will be used to calculate the translation values.
71
+ * @param value
72
+ */
21
73
  averageTouches(value: boolean): this;
74
+ /**
75
+ * #### iOS only
76
+ * Enables two-finger gestures on supported devices, for example iPads with trackpads.
77
+ * @param value
78
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture/#enabletrackpadtwofingergesturevalue-boolean-ios-only
79
+ */
22
80
  enableTrackpadTwoFingerGesture(value: boolean): this;
81
+ /**
82
+ * Duration in milliseconds of the LongPress gesture before Pan is allowed to activate.
83
+ * @param duration
84
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture/#activateafterlongpressduration-number
85
+ */
23
86
  activateAfterLongPress(duration: number): this;
24
87
  onChange(callback: (event: GestureUpdateEvent<PanGestureHandlerEventPayload & PanGestureChangeEventPayload>) => void): this;
25
88
  }
@@ -3,12 +3,47 @@ import { TapGestureConfig, TapGestureHandlerEventPayload } from '../TapGestureHa
3
3
  export declare class TapGesture extends BaseGesture<TapGestureHandlerEventPayload> {
4
4
  config: BaseGestureConfig & TapGestureConfig;
5
5
  constructor();
6
+ /**
7
+ * Minimum number of pointers (fingers) required to be placed before the gesture activates.
8
+ * Should be a positive integer. The default value is 1.
9
+ * @param minPointers
10
+ */
6
11
  minPointers(minPointers: number): this;
12
+ /**
13
+ * Number of tap gestures required to activate the gesture.
14
+ * The default value is 1.
15
+ * @param count
16
+ */
7
17
  numberOfTaps(count: number): this;
18
+ /**
19
+ * Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a tap gesture.
20
+ * @param maxDist
21
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture#maxdistancevalue-number
22
+ */
8
23
  maxDistance(maxDist: number): this;
24
+ /**
25
+ * Maximum time, expressed in milliseconds, that defines how fast a finger must be released after a touch.
26
+ * The default value is 500.
27
+ * @param duration
28
+ */
9
29
  maxDuration(duration: number): this;
30
+ /**
31
+ * Maximum time, expressed in milliseconds, that can pass before the next tap — if many taps are required.
32
+ * The default value is 500.
33
+ * @param delay
34
+ */
10
35
  maxDelay(delay: number): this;
36
+ /**
37
+ * Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the X axis during a tap gesture.
38
+ * @param delta
39
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture#maxdeltaxvalue-number
40
+ */
11
41
  maxDeltaX(delta: number): this;
42
+ /**
43
+ * Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the Y axis during a tap gesture.
44
+ * @param delta
45
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture#maxdeltayvalue-number
46
+ */
12
47
  maxDeltaY(delta: number): this;
13
48
  }
14
49
  export type TapGestureType = InstanceType<typeof TapGesture>;
@@ -9,7 +9,7 @@ import { PointerType } from '../../PointerType';
9
9
  export default abstract class GestureHandler implements IGestureHandler {
10
10
  private lastSentState;
11
11
  protected currentState: State;
12
- protected shouldCancellWhenOutside: boolean;
12
+ protected shouldCancelWhenOutside: boolean;
13
13
  protected hasCustomActivationCriteria: boolean;
14
14
  protected enabled: boolean;
15
15
  private viewRef;
@@ -41,7 +41,7 @@ export default abstract class GestureHandler implements IGestureHandler {
41
41
  * @param {boolean} sendIfDisabled - Used when handler becomes disabled. With this flag orchestrator will be forced to send cancel event
42
42
  */
43
43
  cancel(sendIfDisabled?: boolean): void;
44
- activate(_force?: boolean): void;
44
+ activate(force?: boolean): void;
45
45
  end(): void;
46
46
  isAwaiting(): boolean;
47
47
  setAwaiting(value: boolean): void;
@@ -16,7 +16,7 @@ export default interface IGestureHandler {
16
16
  getTracker: () => PointerTracker;
17
17
  getTrackedPointersID: () => number[];
18
18
  begin: () => void;
19
- activate: () => void;
19
+ activate: (force: boolean) => void;
20
20
  end: () => void;
21
21
  fail: () => void;
22
22
  cancel: () => void;
@@ -28,6 +28,7 @@ export interface Config extends Record<string, ConfigArgs> {
28
28
  mouseButton?: MouseButton;
29
29
  enableContextMenu?: boolean;
30
30
  touchAction?: TouchAction;
31
+ manualActivation?: boolean;
31
32
  activateAfterLongPress?: number;
32
33
  failOffsetXStart?: number;
33
34
  failOffsetYStart?: number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-gesture-handler",
3
- "version": "2.16.0",
3
+ "version": "2.16.2",
4
4
  "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
5
5
  "scripts": {
6
6
  "prepare": "bob build && husky install",
@@ -152,5 +152,6 @@
152
152
  "android": {
153
153
  "javaPackageName": "com.swmansion.gesturehandler"
154
154
  }
155
- }
155
+ },
156
+ "packageManager": "yarn@1.22.22"
156
157
  }
@@ -150,7 +150,9 @@ export interface PanGestureHandlerProps
150
150
  * to 0. If only one number `p` is given a range of `(-inf, p)` will be used
151
151
  * if `p` is higher or equal to 0 and `(-p, inf)` otherwise.
152
152
  */
153
- activeOffsetY?: number | number[];
153
+ activeOffsetY?:
154
+ | number
155
+ | [activeOffsetYStart: number, activeOffsetYEnd: number];
154
156
 
155
157
  /**
156
158
  * Range along X axis (in points) where fingers travels without activation of
@@ -160,7 +162,9 @@ export interface PanGestureHandlerProps
160
162
  * to 0. If only one number `p` is given a range of `(-inf, p)` will be used
161
163
  * if `p` is higher or equal to 0 and `(-p, inf)` otherwise.
162
164
  */
163
- activeOffsetX?: number | number[];
165
+ activeOffsetX?:
166
+ | number
167
+ | [activeOffsetXStart: number, activeOffsetXEnd: number];
164
168
 
165
169
  /**
166
170
  * When the finger moves outside this range (in points) along Y axis and
@@ -170,7 +174,7 @@ export interface PanGestureHandlerProps
170
174
  * to 0. If only one number `p` is given a range of `(-inf, p)` will be used
171
175
  * if `p` is higher or equal to 0 and `(-p, inf)` otherwise.
172
176
  */
173
- failOffsetY?: number | number[];
177
+ failOffsetY?: number | [failOffsetYStart: number, failOffsetYEnd: number];
174
178
 
175
179
  /**
176
180
  * When the finger moves outside this range (in points) along X axis and
@@ -180,7 +184,7 @@ export interface PanGestureHandlerProps
180
184
  * to 0. If only one number `p` is given a range of `(-inf, p)` will be used
181
185
  * if `p` is higher or equal to 0 and `(-p, inf)` otherwise.
182
186
  */
183
- failOffsetX?: number | number[];
187
+ failOffsetX?: number | [failOffsetXStart: number, failOffsetXEnd: number];
184
188
  }
185
189
 
186
190
  export const panHandlerName = 'PanGestureHandler';
@@ -341,18 +341,22 @@ export default function createHandler<
341
341
  });
342
342
 
343
343
  const actionType = (() => {
344
- if (
345
- (this.props?.onGestureEvent &&
346
- 'current' in this.props.onGestureEvent) ||
347
- (this.props?.onHandlerStateChange &&
348
- 'current' in this.props.onHandlerStateChange)
349
- ) {
344
+ const onGestureEvent = this.props?.onGestureEvent;
345
+ const isGestureHandlerWorklet =
346
+ onGestureEvent &&
347
+ ('current' in onGestureEvent ||
348
+ 'workletEventHandler' in onGestureEvent);
349
+ const onHandlerStateChange = this.props?.onHandlerStateChange;
350
+ const isStateChangeHandlerWorklet =
351
+ onHandlerStateChange &&
352
+ ('current' in onHandlerStateChange ||
353
+ 'workletEventHandler' in onHandlerStateChange);
354
+ const isReanimatedHandler =
355
+ isGestureHandlerWorklet || isStateChangeHandlerWorklet;
356
+ if (isReanimatedHandler) {
350
357
  // Reanimated worklet
351
358
  return ActionType.REANIMATED_WORKLET;
352
- } else if (
353
- this.props?.onGestureEvent &&
354
- '__isNative' in this.props.onGestureEvent
355
- ) {
359
+ } else if (onGestureEvent && '__isNative' in onGestureEvent) {
356
360
  // Animated.event with useNativeDriver: true
357
361
  return ActionType.NATIVE_ANIMATED_EVENT;
358
362
  } else {
@@ -625,10 +625,32 @@ const applyTouchActionProp = (
625
625
  };
626
626
 
627
627
  interface GestureDetectorProps {
628
+ /**
629
+ * A gesture object containing the configuration and callbacks.
630
+ * Can be any of:
631
+ * - base gestures (`Tap`, `Pan`, ...)
632
+ * - `ComposedGesture` (`Race`, `Simultaneous`, `Exclusive`)
633
+ */
628
634
  gesture: ComposedGesture | GestureType;
629
635
  children?: React.ReactNode;
636
+
637
+ /**
638
+ * #### Web only
639
+ * This parameter allows to specify which `userSelect` property should be applied to underlying view.
640
+ * Possible values are `"none" | "auto" | "text"`. Default value is set to `"none"`.
641
+ */
630
642
  userSelect?: UserSelect;
643
+ /**
644
+ * #### Web only
645
+ * Specifies whether context menu should be enabled after clicking on underlying view with right mouse button.
646
+ * Default value is set to `false`.
647
+ */
631
648
  enableContextMenu?: boolean;
649
+ /**
650
+ * #### Web only
651
+ * This parameter allows to specify which `touchAction` property should be applied to underlying view.
652
+ * Supports all CSS touch-action values (e.g. `"none"`, `"pan-y"`). Default value is set to `"none"`.
653
+ */
632
654
  touchAction?: TouchAction;
633
655
  }
634
656
  interface GestureDetectorState {
@@ -637,6 +659,22 @@ interface GestureDetectorState {
637
659
  previousViewTag: number;
638
660
  forceReattach: boolean;
639
661
  }
662
+
663
+ /**
664
+ * `GestureDetector` is responsible for creating and updating native gesture handlers based on the config of provided gesture.
665
+ *
666
+ * ### Props
667
+ * - `gesture`
668
+ * - `userSelect` (**Web only**)
669
+ * - `enableContextMenu` (**Web only**)
670
+ * - `touchAction` (**Web only**)
671
+ *
672
+ * ### Remarks
673
+ * - Gesture Detector will use first native view in its subtree to recognize gestures, however if this view is used only to group its children it may get automatically collapsed.
674
+ * - Using the same instance of a gesture across multiple Gesture Detectors is not possible.
675
+ *
676
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture-detector
677
+ */
640
678
  export const GestureDetector = (props: GestureDetectorProps) => {
641
679
  const rootViewContext = useContext(GestureHandlerRootViewContext);
642
680
  if (__DEV__ && !rootViewContext && !isJestEnv() && Platform.OS !== 'web') {
@@ -13,11 +13,22 @@ export class FlingGesture extends BaseGesture<FlingGestureHandlerEventPayload> {
13
13
  this.handlerName = 'FlingGestureHandler';
14
14
  }
15
15
 
16
+ /**
17
+ * Determine exact number of points required to handle the fling gesture.
18
+ * @param pointers
19
+ */
16
20
  numberOfPointers(pointers: number) {
17
21
  this.config.numberOfPointers = pointers;
18
22
  return this;
19
23
  }
20
24
 
25
+ /**
26
+ * Expressed allowed direction of movement.
27
+ * Expected values are exported as constants in the Directions object.
28
+ * Arguments can be combined using `|` operator. Default value is set to `MouseButton.LEFT`.
29
+ * @param direction
30
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/fling-gesture/#directionvalue-directions
31
+ */
21
32
  direction(direction: number) {
22
33
  this.config.direction = direction;
23
34
  return this;
@@ -40,16 +40,30 @@ export class ForceTouchGesture extends ContinousBaseGesture<
40
40
  this.handlerName = 'ForceTouchGestureHandler';
41
41
  }
42
42
 
43
+ /**
44
+ * A minimal pressure that is required before gesture can activate.
45
+ * Should be a value from range [0.0, 1.0]. Default is 0.2.
46
+ * @param force
47
+ */
43
48
  minForce(force: number) {
44
49
  this.config.minForce = force;
45
50
  return this;
46
51
  }
47
52
 
53
+ /**
54
+ * A maximal pressure that could be applied for gesture.
55
+ * If the pressure is greater, gesture fails. Should be a value from range [0.0, 1.0].
56
+ * @param force
57
+ */
48
58
  maxForce(force: number) {
49
59
  this.config.maxForce = force;
50
60
  return this;
51
61
  }
52
62
 
63
+ /**
64
+ * Value defining if haptic feedback has to be performed on activation.
65
+ * @param value
66
+ */
53
67
  feedbackOnActivation(value: boolean) {
54
68
  this.config.feedbackOnActivation = value;
55
69
  return this;