You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx
+2-38Lines changed: 2 additions & 38 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,6 +10,8 @@ import CollapsibleCode from '@site/src/components/CollapsibleCode';
10
10
11
11
At any given time, each handler instance has an assigned [state](/docs/under-the-hood/state) that can change when new touch events occur or can be forced to change by the touch system in certain circumstances. You can hook into state transitions using specific [gesture callbacks](#callbacks).
12
12
13
+
When `Reanimated` is installed, all callbacks are automatically workletized. For more details, refer to the [Integration with Reanimated](/docs/fundamentals/reanimated-interactions#automatic-workletization-of-gesture-callbacks) section.
14
+
13
15
## Callbacks flow
14
16
15
17
### GestureEvent callbacks
@@ -177,41 +179,3 @@ export enum PointerType {
177
179
`}/>
178
180
179
181
`TouchEvent` carries information about raw touch events, like touching the screen or moving the finger.
180
-
181
-
## Automatic [workletization](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary/#to-workletize) of gesture callbacks
182
-
183
-
[Worklets' Babel plugin](https://docs.swmansion.com/react-native-worklets/docs/worklets-babel-plugin/about) is setup in a way that automatically marks callbacks passed to gestures in the configuration chain as worklets. This means that you don't need to add a `'worklet';` directive at the beginning of the functions. Here is an example that will be automatically workletized:
184
-
185
-
```jsx
186
-
constgesture=useTapGesture({
187
-
onBegin: () => {
188
-
console.log(_WORKLET);
189
-
},
190
-
})
191
-
```
192
-
193
-
And here is one that won't:
194
-
195
-
```jsx
196
-
constcallback= () => {
197
-
console.log(_WORKLET);
198
-
};
199
-
200
-
constgesture=useTapGesture({
201
-
onBegin: callback,
202
-
})
203
-
```
204
-
205
-
In the above case, you should add a [`"worklet";`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary/#worklet) directive at the beginning of the callbacks, like so:
Triggers first [`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate), then [`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize)callbacks on gesture with specified `handlerTag`.
152
+
If the gesture had activated, it triggers the [`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate) callback. It also triggers the [`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize)callback on gesture with the specified `handlerTag`.
|**`UNDETERMINED`**| The default initial state of every handler. | — |
15
-
|**`BEGAN`**| The handler has started receiving touch data but hasn't yet met the activation criteria. |[`onBegin`](/docs/fundamentals/callbacks-events#onbegin)|
16
-
|**`ACTIVE`**| The gesture is recognized and activation criteria are met. |[`onActivate`](/docs/fundamentals/callbacks-events#onactivate) / [`onUpdate`](/docs/fundamentals/callbacks-events#onupdate)|
17
-
|**`END`**| The user successfully completed the gesture. |[`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate)|
18
-
|**`FAILED`**| The handler failed to recognize the gesture. |[`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize)|
19
-
|**`CANCELLED`**| The system interrupted the gesture. |[`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize)|
|**`UNDETERMINED`**| The default initial state of every handler. | — |
15
+
|**`BEGAN`**| The handler has started receiving touch data but hasn't yet met the activation criteria. |[`onBegin`](/docs/fundamentals/callbacks-events#onbegin)|
16
+
|**`ACTIVE`**| The gesture is recognized and activation criteria are met. |[`onActivate`](/docs/fundamentals/callbacks-events#onactivate) / [`onUpdate`](/docs/fundamentals/callbacks-events#onupdate)|
17
+
|**`END`**| The user successfully completed the gesture. |[`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate)|
18
+
|**`FAILED`**| The handler failed to recognize the gesture. |([`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate)) [`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize)|
19
+
|**`CANCELLED`**| The system interrupted the gesture. |([`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate)) [`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize)|
0 commit comments