Export new createNativeWrapper

packages/docs-gesture-handler/docs/components/create-native-wrapper.mdx

@@ -0,0 +1,154 @@
+---
+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<P>(
+  Component: React.ComponentType<P>,
+  config: Readonly<NativeWrapperProperties> = {},
+  detectorType: GestureDetectorType = GestureDetectorType.Native,
+): React.FC<P & NativeWrapperProperties>
+```
+
+[`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
+<DetectorComponent gesture={native}>
+    <Component {...childProps} />
+</DetectorComponent>
+```
+
+### 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<NativeGesture | null>(
+    null
+  );
+
+  const onGestureUpdate = (gesture: NativeGesture) => {
+    if (!nativeGesture || nativeGesture.handlerTag !== gesture.handlerTag) {
+      setNativeGesture(gesture);
+      ...
+    }
+  };
+};
+
+<WrappedComponent
+  ...
+  onGestureUpdate_CAN_CAUSE_INFINITE_RERENDER={onGestureUpdate}
+/>;
+```
+
+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 (
+    <GestureHandlerRootView style={{ flex: 1, paddingTop: 100 }}>
+      <GestureDetector gesture={tap1}>
+        <Switch value={isEnabled} onValueChange={setIsEnabled} />
+      </GestureDetector>
+      <GestureDetector gesture={tap2}>
+        <RNGHSwitch value={isEnabled} onValueChange={setIsEnabled} />
+      </GestureDetector>
+    </GestureHandlerRootView>
+  );
+}
+```
+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.

packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx

@@ -3,11 +3,10 @@ id: upgrading-to-3
 title: Upgrading to the new API introduced in Gesture Handler 3
 ---
 
-## Migrating gestures
-
-
 import CodeComparison from '@site/src/components/CodeComparison';
 
+## Migrating gestures
+
 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
@@ -280,6 +279,14 @@ 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`.

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';

packages/react-native-gesture-handler/src/v3/index.ts

@@ -74,3 +74,5 @@ export {
 export type { ComposedGesture } from './types';
 
 export { GestureStateManager } from './gestureStateManager';
+
+export { default as createNativeWrapper } from './createNativeWrapper';

skills/gesture-handler-3-migration/SKILL.md

@@ -35,13 +35,15 @@ 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`
@@ -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,13 +88,15 @@ 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:`
@@ -162,6 +169,12 @@ 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`.