Skip to content

Commit f64e319

Browse files
committed
Review 1
1 parent bb13f99 commit f64e319

3 files changed

Lines changed: 11 additions & 47 deletions

File tree

packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx

Lines changed: 2 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import CollapsibleCode from '@site/src/components/CollapsibleCode';
1010

1111
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).
1212

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+
1315
## Callbacks flow
1416

1517
### GestureEvent callbacks
@@ -177,41 +179,3 @@ export enum PointerType {
177179
`}/>
178180

179181
`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-
const gesture = useTapGesture({
187-
onBegin: () => {
188-
console.log(_WORKLET);
189-
},
190-
})
191-
```
192-
193-
And here is one that won't:
194-
195-
```jsx
196-
const callback = () => {
197-
console.log(_WORKLET);
198-
};
199-
200-
const gesture = 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:
206-
207-
```jsx
208-
const callback = () => {
209-
// highlight-next-line
210-
"worklet";
211-
console.log(_WORKLET);
212-
};
213-
214-
const gesture = useTapGesture({
215-
onBegin: callback,
216-
})
217-
```

packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ Triggers [`onActivate`](/docs/fundamentals/callbacks-events#onactivate) callback
149149
deactivate: (handlerTag: number) => void;
150150
```
151151

152-
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`.
153153

154154
### fail
155155

packages/docs-gesture-handler/docs/under-the-hood/state.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ At any given time, each handler instance has an assigned state that can change w
99

1010
States manage the internal recognition process. You can hook into these transitions using specific gesture callbacks.
1111

12-
| State | Description | Callback |
13-
| :----------------- | :--------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------- |
14-
| **`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) |
12+
| State | Description | Callback |
13+
| :----------------- | :--------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------- |
14+
| **`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

Comments
 (0)