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/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..e5b0812531 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. ( Component: React.ComponentType

, config: Readonly = {} 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..888238fe2e 100644 --- a/skills/gesture-handler-3-migration/SKILL.md +++ b/skills/gesture-handler-3-migration/SKILL.md @@ -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