react-native-gesture-handler 2.16.0 → 2.16.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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;