Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

This file was deleted.

13 changes: 3 additions & 10 deletions packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ id: upgrading-to-3
title: Upgrading to the new API introduced in Gesture Handler 3
---

import CodeComparison from '@site/src/components/CodeComparison';

## Migrating gestures


import CodeComparison from '@site/src/components/CodeComparison';

The most important change brought by the Gesture Handler 3 is the new hook API. Migration is pretty straightforward. Instead of calling builder methods, everything is passed as a configuration object.

<CodeComparison
Expand Down Expand Up @@ -280,14 +281,6 @@ Other components have also been internally rewritten using the new hook API but

</details>

### createNativeWrapper

`createNativeWrapper` has been rewritten using the new hook API and exported under the original name. The old implementation is still available as `legacy_createNativeWrapper`. It also accepts new optional parameter - `detectorType`, which allows you to specify the type of the [gesture detector](/docs/fundamentals/gesture-detectors) that will be used internally. By default it uses `GestureDetector`.

While new `createNativeWrapper` should work out of the box, keep in mind that it wraps your component with `GestureDetector`, which in Gesture Handler 3 is a host component. This affects view hierarchy, so depending on your use case, you might want to use [`VirtualGestureDetector`](/docs/fundamentals/gesture-detectors#virtualgesturedetector) instead. To do that, simply pass the desired detector type as the second parameter of `createNativeWrapper`.

More on `createNativeWrapper` can be in the [dedicated section](/docs/components/create-native-wrapper) of the documentation.

## Replaced types

Most of the types, like `TapGesture`, are still present in Gesture Handler 3. However, they are now used in new hook API. Types for old API now have `Legacy` prefix, e.g. `TapGesture` becomes `LegacyTapGesture`.
Expand Down
2 changes: 1 addition & 1 deletion packages/react-native-gesture-handler/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export { PanGestureHandler } from './handlers/PanGestureHandler';
export { PinchGestureHandler } from './handlers/PinchGestureHandler';
export { RotationGestureHandler } from './handlers/RotationGestureHandler';
export { FlingGestureHandler } from './handlers/FlingGestureHandler';
export { default as legacy_createNativeWrapper } from './handlers/createNativeWrapper';
export { default as createNativeWrapper } from './handlers/createNativeWrapper';
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even though we're still in beta, I can see the reason why we would want to keep legacy prefix here. WDYT @j-piasecki @akwasniewski?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fine by me, we should mention that in the migration guide and llm skill

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aa95b97, let me know what you think.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you see any reason agains deprecating it?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, deprecated in ca857a7.

Though this is how it looks like in vsc:

image

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've also added it to docs: 2c6a3c9

export type { NativeViewGestureHandlerProps } from './handlers/NativeViewGestureHandler';
export { GestureDetector as LegacyGestureDetector } from './handlers/gestures/GestureDetector';
export { GestureObjects as Gesture } from './handlers/gestures/gestureObjects';
Expand Down
2 changes: 0 additions & 2 deletions packages/react-native-gesture-handler/src/v3/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,5 +83,3 @@ export {
export type { ComposedGesture } from './types';

export { GestureStateManager } from './gestureStateManager';

export { default as createNativeWrapper } from './createNativeWrapper';
13 changes: 0 additions & 13 deletions skills/gesture-handler-3-migration/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,13 @@ The exception to thait is `Gesture.ForceTouch` which DOES NOT have a counterpart
#### Callback changes

In Gesture Handler 3 some of the callbacks were renamed, namely:

- `onStart` -> `onActivate`
- `onEnd` -> `onDeactivate`
- `onTouchesCancelled` -> `onTouchesCancel`

In the hooks API `onChange` is no longer available. Instead the `*change*` properties were moved to the event available inside `onUpdate`.

All callbacks of a gesture are now using the same type:

- `usePanGesture()` -> `PanGestureEvent`
- `useTapGesture()` -> `TapGestureEvent`
- `useLongPressGesture()` -> `LongPressGestureEvent`
Expand All @@ -55,7 +53,6 @@ All callbacks of a gesture are now using the same type:
- `useManualGesture()` -> `ManualGestureEvent`

The exception to this is touch events:

- `onTouchesDown`
- `onTouchesUp`
- `onTouchesMove`
Expand All @@ -68,14 +65,12 @@ Where each callback receives `GestureTouchEvent` regardless of the hook used.
In Gesture Handler 3, `stateManager` is no longer passed to `TouchEvent` callbacks. Instead, you should use the global `GestureStateManager`.

`GestureStateManager` provides methods for imperative state management:

- .begin(handlerTag: number)
- .activate(handlerTag: number)
- .deactivate(handlerTag: number) (.end() in the old API)
- .fail(handlerTag: number)

`handlerTag` can be obtained in two ways:

1. From the gesture object returned by the hook (`gesture.handlerTag`)
2. From the event inside callback (`event.handlerTag`)

Expand All @@ -88,15 +83,13 @@ Callback definitions CANNOT reference the gesture that's being defined. In this
`Gesture.Simultaneous(gesture1, gesture2);` becomes `useSimultaneousGestures(pan1, pan2);`

All relations from the old API and their counterparts in the new one:

- `Gesture.Race()` -> `useCompetingGestures()`
- `Gesture.Simultaneous()` -> `useSimultaneousGestures()`
- `Gesture.Exclusive()` -> `useExclusiveGestures()`

#### Cross components relations properties

Properties used to define cross-components interactions were renamed:

- `.simultaneousWithExternalGesture` -> `simultaneousWith:`
- `.requireExternalGestureToFail` -> `requireToFail:`
- `.blocksExternalGesture` -> `block:`
Expand Down Expand Up @@ -171,12 +164,6 @@ The implementation of buttons has been updated, resolving most button-related is

Other components have also been internally rewritten using the new hook API but are exported under their original names, so no changes are necessary on your part. However, if you need to use the previous implementation for any reason, the legacy components are also available and are prefixed with `Legacy`, e.g., `ScrollView` is now available as `LegacyScrollView`.

`createNativeWrapper` has been rewritten using the new hook API and exported under the original name. The old implementation is still available as `legacy_createNativeWrapper`. It also accepts new optional parameter - `detectorType`, which allows you to specify the type of the gesture detector that will be used internally. By default it uses `GestureDetector`.

While new `createNativeWrapper` should work out of the box, keep in mind that it wraps your component with `GestureDetector`, which in Gesture Handler 3 is a host component. This affects view hierarchy, so depending on use case, you might want to use `VirtualGestureDetector` instead.

Before changing, ask user about their intention - if they prefer to keep legacy version, change it to `legacy_createNativeWrapper`. If not, keep `createNativeWrapper`, then notify user that in case of problems with view hierarchy they should wrap the relevant subtree with `InterceptingGestureDetector` and pass `GestureDetectorType.Virtual` as the `detectorType` argument in `createNativeWrapper`.

### Replaced types

Most of the types used in the builder API, like `TapGesture`, are still present in Gesture Handler 3. However, they are now used in new hook API. Types for builder API now have `Legacy` prefix, e.g. `TapGesture` becomes `LegacyTapGesture`.
Loading