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.
- 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;
|