From f72524e7f36db33d574e9a970342b3ed72dd3499 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Thu, 26 Feb 2026 15:26:08 +0100 Subject: [PATCH 1/4] Revert "Export new `createNativeWrapper` (#3971)" This reverts commit bdf353db24013d30e2b4baa5ab0dd17556c015de. --- .../docs/components/create-native-wrapper.mdx | 154 ------------------ .../docs/guides/upgrading-to-3.mdx | 13 +- .../react-native-gesture-handler/src/index.ts | 2 +- .../src/v3/index.ts | 2 - skills/gesture-handler-3-migration/SKILL.md | 13 -- 5 files changed, 4 insertions(+), 180 deletions(-) delete mode 100644 packages/docs-gesture-handler/docs/components/create-native-wrapper.mdx diff --git a/packages/docs-gesture-handler/docs/components/create-native-wrapper.mdx b/packages/docs-gesture-handler/docs/components/create-native-wrapper.mdx deleted file mode 100644 index 30dbc80aee..0000000000 --- a/packages/docs-gesture-handler/docs/components/create-native-wrapper.mdx +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: create-native-wrapper -title: createNativeWrapper -sidebar_label: createNativeWrapper ---- - -`createNativeWrapper` is a function that lets you wrap components which are not provided by Gesture Handler with a [`Native gesture`](/docs/gestures/use-native-gesture), allowing them to participate in the gesture recognition process. - -```tsx -import { Switch } from 'react-native'; -import { createNativeWrapper } from 'react-native-gesture-handler'; - -const RNGHSwitch = createNativeWrapper(Switch); -``` - -Full example can be seen in the [Example section](#example) below. - -This function can be useful when you want some third-party components to participate in gesture recognition process. - -## createNativeWrapper - -```ts -function createNativeWrapper

( - Component: React.ComponentType

, - config: Readonly = {}, - detectorType: GestureDetectorType = GestureDetectorType.Native, -): React.FC

-``` - -[`config`](#config) and [`detectorType`](#detectortype) parameters are optional. Their default values are described in their respective sections below. - -This function returns original component wrapped with a specified [`GestureDetector`](/docs/fundamentals/gesture-detectors) that has a [`Native gesture`](/docs/gestures/use-native-gesture) attached to it: - -```tsx - - - -``` - -### Component - -Component to be wrapped with `Native gesture`. It can be any React component, including those from third-party libraries. - -### config - -Configuration for the `Native gesture` that will be attached to the wrapped component. For more details on available options, see the `Native gesture` [configuration](/docs/gestures/use-native-gesture#config) documentation. Defaults to an empty object. - -### detectorType - -```ts -enum GestureDetectorType { - Native, - Virtual, - Intercepting, -} -``` - -Type of the gesture detector that will be used to recognize the `Native gesture`. For more details on available options, see the [Gesture Detectors](/docs/fundamentals/gesture-detectors) documentation. Defaults to `GestureDetectorType.Native` (which is just [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector)). - -## onGestureUpdate_CAN_CAUSE_INFINITE_RERENDER - -:::danger -This callback may lead to infinite re-renders if not used carefully. -::: - -```ts -onGestureUpdate_CAN_CAUSE_INFINITE_RERENDER?: (gesture: NativeGesture) => void; -``` - -Components wrapped with `createNativeWrapper` receive an additional prop named `onGestureUpdate_CAN_CAUSE_INFINITE_RERENDER`. This callback is triggered on every update of the `Native gesture` associated with the wrapped component, providing access to the underlying gesture. This can be helpful when setting up [relations](/docs/fundamentals/gesture-composition) with other gestures. - - -To prevent infinite re-renders, ensure you are not updating the component with the same gesture repeatedly, e.g.: - -```tsx -const WrappedComponent = createNativeWrapper(Component); - -const ParentComponent = () => { - const [nativeGesture, setNativeGesture] = useState( - null - ); - - const onGestureUpdate = (gesture: NativeGesture) => { - if (!nativeGesture || nativeGesture.handlerTag !== gesture.handlerTag) { - setNativeGesture(gesture); - ... - } - }; -}; - -; -``` - -You can also check example usage in our [`ScrollView` component](https://github.com/software-mansion/react-native-gesture-handler/blob/18af65aa7d1d425cecbdba3224271246ea739132/packages/react-native-gesture-handler/src/v3/components/GestureComponents.tsx#L80). - -## Components wrapped using createNativeWrapper - -Gesture Handler reexports some of the React Native components that are already wrapped using `createNativeWrapper`. These include: - -- `Switch` -- `TextInput` -- `ScrollView` -- `FlatList` -- `RefreshControl` - -[Buttons](/docs/components/buttons) are also wrapped using `createNativeWrapper` by default. - -## Example - -This example only demonstrates the usage of `createNativeWrapper`. `Switch` component from Gesture Handler comes wrapped with `createNativeWrapper` by default. - -```tsx -import { useState } from 'react'; -import { Switch } from 'react-native'; -import { - GestureDetector, - GestureHandlerRootView, - useTapGesture, - createNativeWrapper, -} from 'react-native-gesture-handler'; - -const RNGHSwitch = createNativeWrapper(Switch); - -export default function App() { - const [isEnabled, setIsEnabled] = useState(false); - - const tap1 = useTapGesture({ - onDeactivate: () => { - console.log('Tapped!'); - }, - }); - - const tap2 = useTapGesture({ - onDeactivate: () => { - console.log('Tapped!'); - }, - }); - - return ( - - - - - - - - - ); -} -``` -In this scenario, the `Switch` from React Native cannot be toggled on because the `tap1` gesture intercepts it. However, when wrapped with `createNativeWrapper`, the `RNGHSwitch` becomes capable of participating in the gesture recognition process. This setup allows the switch to be toggled on while still enabling `tap2` to recognize taps on it. \ No newline at end of file diff --git a/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx b/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx index dddb349192..132354d963 100644 --- a/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx +++ b/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx @@ -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. -### 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`. diff --git a/packages/react-native-gesture-handler/src/index.ts b/packages/react-native-gesture-handler/src/index.ts index 45c7453f56..1e987c178d 100644 --- a/packages/react-native-gesture-handler/src/index.ts +++ b/packages/react-native-gesture-handler/src/index.ts @@ -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'; export type { NativeViewGestureHandlerProps } from './handlers/NativeViewGestureHandler'; export { GestureDetector as LegacyGestureDetector } from './handlers/gestures/GestureDetector'; export { GestureObjects as Gesture } from './handlers/gestures/gestureObjects'; diff --git a/packages/react-native-gesture-handler/src/v3/index.ts b/packages/react-native-gesture-handler/src/v3/index.ts index 350755ff4b..3c720e10dd 100644 --- a/packages/react-native-gesture-handler/src/v3/index.ts +++ b/packages/react-native-gesture-handler/src/v3/index.ts @@ -83,5 +83,3 @@ export { export type { ComposedGesture } from './types'; export { GestureStateManager } from './gestureStateManager'; - -export { default as createNativeWrapper } from './createNativeWrapper'; diff --git a/skills/gesture-handler-3-migration/SKILL.md b/skills/gesture-handler-3-migration/SKILL.md index 437f797b97..e41f5ab583 100644 --- a/skills/gesture-handler-3-migration/SKILL.md +++ b/skills/gesture-handler-3-migration/SKILL.md @@ -35,7 +35,6 @@ 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` @@ -43,7 +42,6 @@ In Gesture Handler 3 some of the callbacks were renamed, namely: 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` @@ -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` @@ -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`) @@ -88,7 +83,6 @@ 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()` @@ -96,7 +90,6 @@ All relations from the old API and their counterparts in the new one: #### Cross components relations properties Properties used to define cross-components interactions were renamed: - - `.simultaneousWithExternalGesture` -> `simultaneousWith:` - `.requireExternalGestureToFail` -> `requireToFail:` - `.blocksExternalGesture` -> `block:` @@ -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`. From aa95b97ca60a30dd35d4059c42b745702abedab4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Fri, 27 Feb 2026 09:49:41 +0100 Subject: [PATCH 2/4] Export with legacy prefix --- .../src/legacy/basic/pagerAndDrawer/index.android.tsx | 4 ++-- apps/common-app/src/legacy/release_tests/combo/index.tsx | 4 ++-- .../docs-gesture-handler/docs/guides/upgrading-to-3.mdx | 4 ++++ packages/react-native-gesture-handler/src/index.ts | 2 +- skills/gesture-handler-3-migration/SKILL.md | 9 +++++++++ 5 files changed, 18 insertions(+), 5 deletions(-) diff --git a/apps/common-app/src/legacy/basic/pagerAndDrawer/index.android.tsx b/apps/common-app/src/legacy/basic/pagerAndDrawer/index.android.tsx index 39fa22d0e5..7fe929ffa0 100644 --- a/apps/common-app/src/legacy/basic/pagerAndDrawer/index.android.tsx +++ b/apps/common-app/src/legacy/basic/pagerAndDrawer/index.android.tsx @@ -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, }); diff --git a/apps/common-app/src/legacy/release_tests/combo/index.tsx b/apps/common-app/src/legacy/release_tests/combo/index.tsx index b7e4981e4d..7c888b62f9 100644 --- a/apps/common-app/src/legacy/release_tests/combo/index.tsx +++ b/apps/common-app/src/legacy/release_tests/combo/index.tsx @@ -16,7 +16,7 @@ import { TapGestureHandler, TextInput, RectButton, - createNativeWrapper, + legacy_createNativeWrapper, TapGestureHandlerStateChangeEvent, } from 'react-native-gesture-handler'; import Slider from '@react-native-community/slider'; @@ -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, diff --git a/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx b/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx index 132354d963..715ceeb976 100644 --- a/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx +++ b/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx @@ -281,6 +281,10 @@ Other components have also been internally rewritten using the new hook API but +### createNativeWrapper + +`createNativeWrapper` is now exported as `legacy_createNativeWrapper`. + ## 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`. diff --git a/packages/react-native-gesture-handler/src/index.ts b/packages/react-native-gesture-handler/src/index.ts index 1e987c178d..45c7453f56 100644 --- a/packages/react-native-gesture-handler/src/index.ts +++ b/packages/react-native-gesture-handler/src/index.ts @@ -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 createNativeWrapper } from './handlers/createNativeWrapper'; +export { default as legacy_createNativeWrapper } from './handlers/createNativeWrapper'; export type { NativeViewGestureHandlerProps } from './handlers/NativeViewGestureHandler'; export { GestureDetector as LegacyGestureDetector } from './handlers/gestures/GestureDetector'; export { GestureObjects as Gesture } from './handlers/gestures/gestureObjects'; diff --git a/skills/gesture-handler-3-migration/SKILL.md b/skills/gesture-handler-3-migration/SKILL.md index e41f5ab583..888238fe2e 100644 --- a/skills/gesture-handler-3-migration/SKILL.md +++ b/skills/gesture-handler-3-migration/SKILL.md @@ -35,6 +35,7 @@ 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` @@ -42,6 +43,7 @@ In Gesture Handler 3 some of the callbacks were renamed, namely: 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` @@ -53,6 +55,7 @@ All callbacks of a gesture are now using the same type: - `useManualGesture()` -> `ManualGestureEvent` The exception to this is touch events: + - `onTouchesDown` - `onTouchesUp` - `onTouchesMove` @@ -65,12 +68,14 @@ 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`) @@ -83,6 +88,7 @@ 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()` @@ -90,6 +96,7 @@ All relations from the old API and their counterparts in the new one: #### Cross components relations properties Properties used to define cross-components interactions were renamed: + - `.simultaneousWithExternalGesture` -> `simultaneousWith:` - `.requireExternalGestureToFail` -> `requireToFail:` - `.blocksExternalGesture` -> `block:` @@ -164,6 +171,8 @@ 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`. +Rename all instances of createNativeWrapper to legacy_createNativeWrapper. This includes both the import statements and the function calls. + ### 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`. From ca857a7ed3b83ca229a6aeb8d5f1f7a8d179eebf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Mon, 2 Mar 2026 11:38:41 +0100 Subject: [PATCH 3/4] deprecate createNAtiveWrapper --- .../src/handlers/createNativeWrapper.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-native-gesture-handler/src/handlers/createNativeWrapper.tsx b/packages/react-native-gesture-handler/src/handlers/createNativeWrapper.tsx index 4693d03ea2..2562e458cd 100644 --- a/packages/react-native-gesture-handler/src/handlers/createNativeWrapper.tsx +++ b/packages/react-native-gesture-handler/src/handlers/createNativeWrapper.tsx @@ -20,6 +20,9 @@ const NATIVE_WRAPPER_PROPS_FILTER = [ 'onGestureHandlerStateChange', ] as const; +/** + * @deprecated `createNativeWrapper` is deprecated and will be removed in favor of using `GestureDetector` with `Native` gesture directly. + */ export default function createNativeWrapper

( Component: React.ComponentType

, config: Readonly = {} From 2c6a3c937408962f77736b4bbf369eecf0698b8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Mon, 2 Mar 2026 11:51:16 +0100 Subject: [PATCH 4/4] Update docs --- packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx b/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx index 715ceeb976..e5b0812531 100644 --- a/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx +++ b/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx @@ -283,7 +283,7 @@ Other components have also been internally rewritten using the new hook API but ### createNativeWrapper -`createNativeWrapper` is now exported as `legacy_createNativeWrapper`. +`createNativeWrapper` is deprecated and it is now exported as `legacy_createNativeWrapper`. ## Replaced types