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.
- package/README.md +1 -0
- package/lib/commonjs/handlers/PanGestureHandler.js.map +1 -1
- package/lib/commonjs/handlers/createHandler.js +9 -3
- package/lib/commonjs/handlers/createHandler.js.map +1 -1
- package/lib/commonjs/handlers/gestures/GestureDetector.js +15 -0
- package/lib/commonjs/handlers/gestures/GestureDetector.js.map +1 -1
- package/lib/commonjs/handlers/gestures/flingGesture.js +13 -0
- package/lib/commonjs/handlers/gestures/flingGesture.js.map +1 -1
- package/lib/commonjs/handlers/gestures/forceTouchGesture.js +17 -0
- package/lib/commonjs/handlers/gestures/forceTouchGesture.js.map +1 -1
- package/lib/commonjs/handlers/gestures/gesture.js +135 -0
- package/lib/commonjs/handlers/gestures/gesture.js.map +1 -1
- package/lib/commonjs/handlers/gestures/gestureObjects.js +66 -0
- package/lib/commonjs/handlers/gestures/gestureObjects.js.map +1 -1
- package/lib/commonjs/handlers/gestures/gestureStateManager.web.js +1 -1
- package/lib/commonjs/handlers/gestures/gestureStateManager.web.js.map +1 -1
- package/lib/commonjs/handlers/gestures/hoverGesture.js +1 -1
- package/lib/commonjs/handlers/gestures/hoverGesture.js.map +1 -1
- package/lib/commonjs/handlers/gestures/longPressGesture.js +12 -0
- package/lib/commonjs/handlers/gestures/longPressGesture.js.map +1 -1
- package/lib/commonjs/handlers/gestures/nativeGesture.js +10 -0
- package/lib/commonjs/handlers/gestures/nativeGesture.js.map +1 -1
- package/lib/commonjs/handlers/gestures/panGesture.js +76 -0
- package/lib/commonjs/handlers/gestures/panGesture.js.map +1 -1
- package/lib/commonjs/handlers/gestures/tapGesture.js +42 -0
- package/lib/commonjs/handlers/gestures/tapGesture.js.map +1 -1
- package/lib/commonjs/utils.js +5 -1
- package/lib/commonjs/utils.js.map +1 -1
- package/lib/commonjs/web/handlers/GestureHandler.js +7 -7
- package/lib/commonjs/web/handlers/GestureHandler.js.map +1 -1
- package/lib/commonjs/web/handlers/PanGestureHandler.js +3 -1
- package/lib/commonjs/web/handlers/PanGestureHandler.js.map +1 -1
- package/lib/commonjs/web/interfaces.js.map +1 -1
- package/lib/module/handlers/PanGestureHandler.js.map +1 -1
- package/lib/module/handlers/createHandler.js +9 -3
- package/lib/module/handlers/createHandler.js.map +1 -1
- package/lib/module/handlers/gestures/GestureDetector.js +15 -0
- package/lib/module/handlers/gestures/GestureDetector.js.map +1 -1
- package/lib/module/handlers/gestures/flingGesture.js +13 -0
- package/lib/module/handlers/gestures/flingGesture.js.map +1 -1
- package/lib/module/handlers/gestures/forceTouchGesture.js +17 -0
- package/lib/module/handlers/gestures/forceTouchGesture.js.map +1 -1
- package/lib/module/handlers/gestures/gesture.js +135 -0
- package/lib/module/handlers/gestures/gesture.js.map +1 -1
- package/lib/module/handlers/gestures/gestureObjects.js +67 -0
- package/lib/module/handlers/gestures/gestureObjects.js.map +1 -1
- package/lib/module/handlers/gestures/gestureStateManager.web.js +1 -1
- package/lib/module/handlers/gestures/gestureStateManager.web.js.map +1 -1
- package/lib/module/handlers/gestures/hoverGesture.js +1 -1
- package/lib/module/handlers/gestures/hoverGesture.js.map +1 -1
- package/lib/module/handlers/gestures/longPressGesture.js +12 -0
- package/lib/module/handlers/gestures/longPressGesture.js.map +1 -1
- package/lib/module/handlers/gestures/nativeGesture.js +10 -0
- package/lib/module/handlers/gestures/nativeGesture.js.map +1 -1
- package/lib/module/handlers/gestures/panGesture.js +76 -0
- package/lib/module/handlers/gestures/panGesture.js.map +1 -1
- package/lib/module/handlers/gestures/tapGesture.js +42 -0
- package/lib/module/handlers/gestures/tapGesture.js.map +1 -1
- package/lib/module/utils.js +5 -1
- package/lib/module/utils.js.map +1 -1
- package/lib/module/web/handlers/GestureHandler.js +7 -7
- package/lib/module/web/handlers/GestureHandler.js.map +1 -1
- package/lib/module/web/handlers/PanGestureHandler.js +3 -1
- package/lib/module/web/handlers/PanGestureHandler.js.map +1 -1
- package/lib/module/web/interfaces.js.map +1 -1
- package/lib/typescript/handlers/PanGestureHandler.d.ts +4 -4
- package/lib/typescript/handlers/gestures/GestureDetector.d.ts +36 -0
- package/lib/typescript/handlers/gestures/flingGesture.d.ts +11 -0
- package/lib/typescript/handlers/gestures/forceTouchGesture.d.ts +14 -0
- package/lib/typescript/handlers/gestures/gesture.d.ts +113 -0
- package/lib/typescript/handlers/gestures/gestureObjects.d.ts +57 -0
- package/lib/typescript/handlers/gestures/hoverGesture.d.ts +1 -1
- package/lib/typescript/handlers/gestures/longPressGesture.d.ts +10 -0
- package/lib/typescript/handlers/gestures/nativeGesture.d.ts +8 -0
- package/lib/typescript/handlers/gestures/panGesture.d.ts +67 -4
- package/lib/typescript/handlers/gestures/tapGesture.d.ts +35 -0
- package/lib/typescript/web/handlers/GestureHandler.d.ts +2 -2
- package/lib/typescript/web/handlers/IGestureHandler.d.ts +1 -1
- package/lib/typescript/web/interfaces.d.ts +1 -0
- package/package.json +3 -2
- package/src/handlers/PanGestureHandler.ts +8 -4
- package/src/handlers/createHandler.tsx +14 -10
- package/src/handlers/gestures/GestureDetector.tsx +38 -0
- package/src/handlers/gestures/flingGesture.ts +11 -0
- package/src/handlers/gestures/forceTouchGesture.ts +14 -0
- package/src/handlers/gestures/gesture.ts +113 -0
- package/src/handlers/gestures/gestureObjects.ts +57 -0
- package/src/handlers/gestures/gestureStateManager.web.ts +1 -1
- package/src/handlers/gestures/hoverGesture.ts +1 -1
- package/src/handlers/gestures/longPressGesture.ts +10 -0
- package/src/handlers/gestures/nativeGesture.ts +8 -0
- package/src/handlers/gestures/panGesture.ts +75 -4
- package/src/handlers/gestures/tapGesture.ts +35 -0
- package/src/utils.ts +9 -2
- package/src/web/handlers/GestureHandler.ts +9 -9
- package/src/web/handlers/IGestureHandler.ts +1 -1
- package/src/web/handlers/PanGestureHandler.ts +4 -0
- 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
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
|
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(
|
|
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.
|
|
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?:
|
|
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?:
|
|
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
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
(
|
|
348
|
-
'
|
|
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;
|