Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import ViewPagerAndroid from '@react-native-community/viewpager';
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {
createNativeWrapper,
legacy_createNativeWrapper,
LegacyDrawerLayoutAndroid,
} from 'react-native-gesture-handler';

const WrappedViewPagerAndroid = createNativeWrapper(ViewPagerAndroid, {
const WrappedViewPagerAndroid = legacy_createNativeWrapper(ViewPagerAndroid, {
disallowInterruption: true,
});

Expand Down
4 changes: 2 additions & 2 deletions apps/common-app/src/legacy/release_tests/combo/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
TapGestureHandler,
TextInput,
RectButton,
createNativeWrapper,
legacy_createNativeWrapper,
TapGestureHandlerStateChangeEvent,
} from 'react-native-gesture-handler';
import Slider from '@react-native-community/slider';
Expand All @@ -30,7 +30,7 @@ import { PressBox } from '../../basic/multitap';
import { LoremIpsum } from '../../../common';
import { InfoButton } from './InfoButton';

const WrappedSlider = createNativeWrapper(Slider, {
const WrappedSlider = legacy_createNativeWrapper(Slider, {
shouldCancelWhenOutside: false,
shouldActivateOnStart: true,
disallowInterruption: true,
Expand Down

This file was deleted.

11 changes: 4 additions & 7 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 @@ -282,11 +283,7 @@ Other components have also been internally rewritten using the new hook API but

### 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.
`createNativeWrapper` is now exported as `legacy_createNativeWrapper`.

## Replaced types

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';
6 changes: 1 addition & 5 deletions skills/gesture-handler-3-migration/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -171,11 +171,7 @@ 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`.
Rename all instances of createNativeWrapper to legacy_createNativeWrapper. This includes both the import statements and the function calls.

### Replaced types

Expand Down
Loading