From a14db839e023c15d6a72475260b2beb567a43b2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Wed, 4 Feb 2026 14:12:53 +0100 Subject: [PATCH 01/54] Fix edit link --- packages/docs-gesture-handler/docusaurus.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs-gesture-handler/docusaurus.config.js b/packages/docs-gesture-handler/docusaurus.config.js index 9521346f34..4ed1b1fe08 100644 --- a/packages/docs-gesture-handler/docusaurus.config.js +++ b/packages/docs-gesture-handler/docusaurus.config.js @@ -42,7 +42,7 @@ const config = { sidebarPath: require.resolve('./sidebars.js'), sidebarCollapsible: false, editUrl: - 'https://github.com/software-mansion/react-native-gesture-handler/edit/main/docs', + 'https://github.com/software-mansion/react-native-gesture-handler/edit/main/packages/docs-gesture-handler/', lastVersion: 'current', // <- this makes 2.x docs as default versions: { current: { From 9e1f534ff7c36593086dd91e2658c9683a33636d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Wed, 4 Feb 2026 14:13:36 +0100 Subject: [PATCH 02/54] introduction --- .../docs/fundamentals/introduction.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/docs-gesture-handler/docs/fundamentals/introduction.md b/packages/docs-gesture-handler/docs/fundamentals/introduction.md index 2faf7e2eac..34f8707495 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/introduction.md +++ b/packages/docs-gesture-handler/docs/fundamentals/introduction.md @@ -10,9 +10,9 @@ Gesture Handler provides a declarative API exposing the native platform's touch The main benefits of using React Native Gesture Handler are: -- A way to use a platform's native touch handling system for recognizing gestures (like pinch, rotation, pan and a few others). -- The ability to define relations between gestures to ensure gestures, and possibly native components, will not conflict with each other. -- Mechanisms to use touchable components that run in native thread and follow platform default behavior; e.g. in the event they are in a scrollable component, turning into pressed state is slightly delayed to prevent it from highlighting when you fling. +- A way to use a platform's native touch handling system for recognizing gestures (like [pinch](/docs/gestures/use-pinch-gesture), [rotation](/docs/gestures/use-rotation-gesture), [pan](/docs/gestures/use-pan-gesture) and a few others). +- The ability to define [relations between gestures](/docs/fundamentals/gesture-composition) to ensure gestures, and possibly native components, will not conflict with each other. +- Mechanisms for components that run in native thread and follow platform default behavior, such as delaying the transition to a pressed state within scrollable components to prevent highlighting during a quick scroll or fling. - Close integration with [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/) to process touch events on the UI thread. - Support for different input devices like touch screens, pens and mice. - Ability to include any native component into the Gesture Handler's touch system, making it work alongside your gestures. @@ -46,7 +46,7 @@ All PRs are welcome, but talk to us before you start working on something big. The easiest way to get started with contributing code is by: - Reviewing the list of [open issues](https://github.com/software-mansion/react-native-gesture-handler/issues) and trying to solve the one that seem approachable to you. -- Updating the [documentation](https://github.com/software-mansion/react-native-gesture-handler/blob/main/docs) whenever you see some information is unclear, missing or out of date. +- Updating the [documentation](https://github.com/software-mansion/react-native-gesture-handler/tree/main/packages/docs-gesture-handler) whenever you see some information is unclear, missing or out of date. Code is only one way how you can contribute. You may want to consider [replying on issues](https://github.com/software-mansion/react-native-gesture-handler/issues) if you know how to help. From 54889bb7c939cfedfb39f8008a83ec5eb142172f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Wed, 4 Feb 2026 14:44:33 +0100 Subject: [PATCH 03/54] installation --- .../docs/fundamentals/installation.mdx | 38 +++++++++++++------ .../docs-gesture-handler/docusaurus.config.js | 2 +- 2 files changed, 28 insertions(+), 12 deletions(-) diff --git a/packages/docs-gesture-handler/docs/fundamentals/installation.mdx b/packages/docs-gesture-handler/docs/fundamentals/installation.mdx index 97d884fede..20b471aab3 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/installation.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/installation.mdx @@ -11,11 +11,17 @@ import { GestureHandlerCompatibility } from '../../components/Compatibility'; ## Requirements +### Compatibility with React Native versions + `react-native-gesture-handler` supports the three latest minor releases of `react-native`. -In order to fully utilize the [touch events](/docs/gestures/touch-events/) you also need to use `react-native-reanimated` 2.3.0 or newer. +### Running gestures on the UI thread + +In order to run gestures on the UI thread, you also have to install [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/) along with [`react-native-worklets`](https://docs.swmansion.com/react-native-worklets/). + +## Setup Setting up `react-native-gesture-handler` is pretty straightforward: @@ -52,17 +58,22 @@ export default function App() { ); } ``` +Keep `GestureHandlerRootView` as close to the actual root of the app as possible. It's the entry point for all gestures and all [gesture relations](/docs/fundamentals/gesture-composition). The gestures won't be recognized outside of the root view, and relations only work between gestures mounted under the same root view. -If you don't provide anything to the `styles` prop, it will default to `flex: 1`. If you want to customize the styling of the root view, don't forget to also include `flex: 1` in the custom style, otherwise your app won't render anything. Keep `GestureHandlerRootView` as close to the actual root of the app as possible. It's the entry point for all gestures and all gesture relations. The gestures won't be recognized outside of the root view, and relations only work between gestures mounted under the same root view. +If you don't provide anything to the `styles` prop, it will default to `flex: 1`. If you want to customize the styling of the root view, don't forget to also include `flex: 1` in the custom style, otherwise your app won't render anything. If you're unsure if one of your dependencies already renders `GestureHandlerRootView` on its own, don't worry and add one at the root anyway. In case of nested root views, Gesture Handler will only use the top-most one and ignore the nested ones. -:::tip -If you're using gesture handler in your component library, you may want to wrap your library's code in the `GestureHandlerRootView` component. This will avoid extra configuration for the user. +:::note +Remember that you need to wrap each screen that you use in your app with `GestureHandlerRootView` as with native navigation libraries each screen maps to a separate root view. It will not be enough to wrap the main screen only. ::: -:::tip +#### Using `GestureHandlerRootView` with third party libraries + If you're having trouble with gestures not working when inside a component provided by a third-party library, even though you've wrapped the entry point with ``, you can try adding another `` closer to the place the gestures are defined. This way, you can prevent Android from canceling relevant gestures when one of the native views tries to grab lock for delivering touch events. + +:::tip +If you're using Gesture Handler in your component library, you may want to wrap your library's code in the `GestureHandlerRootView` component. This will avoid extra configuration for the user. ::: ### 3. Platform specific setup @@ -77,7 +88,7 @@ npx expo prebuild #### Android -Setting up Gesture Handler on Android doesn't require any more steps. Keep in mind that if you want to use gestures in Modals you need to wrap Modal's content with `GestureHandlerRootView`: +Setting up Gesture Handler on Android doesn't require any more steps. Keep in mind that if you want to use gestures in [Modals](https://reactnative.dev/docs/modal) you need to wrap Modal's content with `GestureHandlerRootView`: ```jsx import { Modal } from 'react-native'; @@ -92,8 +103,6 @@ export function CustomModal({ children, ...rest }) { } ``` -##### Kotlin - Gesture Handler on Android is implemented in Kotlin. If you need to set a specific Kotlin version to be used by the library, set the `kotlinVersion` ext property in `android/build.gradle` file and RNGH will use that version: ```groovy @@ -109,7 +118,15 @@ buildscript { While developing for iOS, make sure to install [pods](https://cocoapods.org/) first before running the app: ```bash -cd ios && pod install && cd .. +cd ios && bundle install && bundle exec pod install && cd .. +``` + +#### macOS + +While developing for macOS, make sure to install [pods](https://cocoapods.org/) first before running the app: + +```bash +cd macos && bundle install && bundle exec pod install && cd .. ``` #### Web @@ -125,6 +142,7 @@ import { Navigation } from 'react-native-navigation'; import FirstTabScreen from './FirstTabScreen'; import SecondTabScreen from './SecondTabScreen'; import PushedScreen from './PushedScreen'; + // register all screens of the app (including internal ones) export function registerScreens() { Navigation.registerComponent( @@ -164,5 +182,3 @@ export function registerScreens() { ``` You can check out [this example project](https://github.com/henrikra/nativeNavigationGestureHandler) to see this kind of set up in action. - -Remember that you need to wrap each screen that you use in your app with `GestureHandlerRootView` as with native navigation libraries each screen maps to a separate root view. It will not be enough to wrap the main screen only. diff --git a/packages/docs-gesture-handler/docusaurus.config.js b/packages/docs-gesture-handler/docusaurus.config.js index 4ed1b1fe08..827f54825b 100644 --- a/packages/docs-gesture-handler/docusaurus.config.js +++ b/packages/docs-gesture-handler/docusaurus.config.js @@ -113,7 +113,7 @@ const config = { 'All trademarks and copyrights belong to their respective owners.', }, prism: { - additionalLanguages: ['bash'], + additionalLanguages: ['bash', 'groovy'], theme: lightCodeTheme, darkTheme: darkCodeTheme, }, From 3e82cf8b5326e7943d12e05c138bbdbd58e59963 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Wed, 4 Feb 2026 15:01:08 +0100 Subject: [PATCH 04/54] Gesture detector --- .../docs/fundamentals/gesture-detector.mdx | 41 ++++++++----------- 1 file changed, 16 insertions(+), 25 deletions(-) diff --git a/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx b/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx index 4756567ec6..0944958593 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx @@ -10,7 +10,7 @@ import CollapsibleCode from '@site/src/components/CollapsibleCode'; ## Gesture Detector -The `GestureDetector` is a key component of `react-native-gesture-handler`. It supports gestures created either using the hooks API or the builder pattern. Additionally, it allows for the recognition of multiple gestures through [gesture composition](/docs/fundamentals/gesture-composition). `GestureDetector` interacts closely with [`Reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/). For more details, refer to the [Integration with Reanimated](/docs/fundamentals/reanimated-interactions) section. +The `GestureDetector` is a key component of `react-native-gesture-handler`. It supports gestures created either using the hook API or the builder pattern. Additionally, it allows for the recognition of multiple gestures through [gesture composition](/docs/fundamentals/gesture-composition). `GestureDetector` interacts closely with [`Reanimated`](https://docs.swmansion.com/react-native-reanimated/). For more details, refer to the [Integration with Reanimated](/docs/fundamentals/reanimated-interactions) section. When using hook API, you can also integrate it directly with the [Animated API](https://reactnative.dev/docs/animated). More on that can be found in [Integreation with Animated](/docs/fundamentals/animated-interactions) section. @@ -64,15 +64,15 @@ Here are some of the most common use cases for virtual gesture detectors. #### SVG -You can combine `VirtualGestureDetector` with `react-native-svg` to add gesture handling to individual SVG elements. +You can combine `VirtualGestureDetector` with [`react-native-svg`](https://github.com/software-mansion/react-native-svg) to add gesture handling to individual `SVG` elements. - // highlight-next-line - - - // highlight-next-line - - {}} - /> - // highlight-next-line - - - - // highlight-next-line + + + {}} + /> + + ); @@ -124,9 +118,6 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, - box: { - backgroundColor: '#b58df1', - }, }); `}/> @@ -210,7 +201,7 @@ This parameter allows to specify which `userSelect` property should be applied t ### touchAction (Web only) ```ts -userSelect: TouchAction; +touchAction: TouchAction; ``` This parameter allows to specify which `touchAction` property should be applied to underlying view. Supports all CSS [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action) values. Default value is set to `"none"`. From e00562164faba0e601eae7b5542121b37eca3159 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Wed, 4 Feb 2026 15:08:36 +0100 Subject: [PATCH 05/54] Reanimated interactions --- .../docs/fundamentals/reanimated-interactions.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx b/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx index b8f590d2eb..df2d223211 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx @@ -7,7 +7,7 @@ sidebar_position: 4 import CollapsibleCode from '@site/src/components/CollapsibleCode'; -`GestureDetector` will decide whether to use [Reanimated](https://docs.swmansion.com/react-native-reanimated/) to process provided gestures based on their configuration. If any of the callbacks is a [worklet](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary/#worklet) and Reanimated is not explicitly [turned off](#disabling-reanimated), tools provided by the Reanimated will be utilized, bringing the ability to handle gestures synchronously on the main thread. +[`GestureDetector`](/docs/fundamentals/gesture-detectors) will decide whether to use [Reanimated](https://docs.swmansion.com/react-native-reanimated/) to process provided gestures based on their configuration. If any of the callbacks is a [worklet](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary/#worklet) and Reanimated is not explicitly [turned off](#disabling-reanimated), tools provided by the Reanimated will be utilized, bringing the ability to handle gestures synchronously on the main thread. ## Automatic [workletization](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary/#to-workletize) of gesture callbacks @@ -119,11 +119,11 @@ export default function App() { ## Disabling Reanimated -Gestures created with the hook API have `Reanimated` integration enabled by default, meaning all callbacks are executed on the UI thread. There are two methods available to disable this behavior for a specific gesture. +Gestures created with the hook API have Reanimated integration enabled by default, meaning all callbacks are executed on the UI thread. There are two methods available to disable this behavior for a specific gesture. ### disableReanimated -When `disableReanimated` is set to `true` in the gesture configuration, `Reanimated` integration will be completely turned off for that gesture throughout its entire lifecycle. This setting eliminates all interaction points with `Reanimated`, thereby reducing any potential overhead. Default value for this property is `false`. +When `disableReanimated` is set to `true` in the gesture configuration, Reanimated integration will be completely turned off for that gesture throughout its entire lifecycle. This setting eliminates all interaction points with Reanimated, thereby reducing any potential overhead. Default value for this property is `false`. This property cannot be changed dynamically during the gesture's lifecycle. From 90b1aa4379d39dd3fad492ea905eb93769baf7be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Wed, 4 Feb 2026 15:11:48 +0100 Subject: [PATCH 06/54] Animated interactions --- .../docs/fundamentals/animated-interactions.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx b/packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx index 1ecae5e69f..bca2e3e4a6 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx @@ -7,12 +7,12 @@ sidebar_position: 5 import CollapsibleCode from '@site/src/components/CollapsibleCode'; -Using hook API allows for smooth integration with the [Animated API](https://reactnative.dev/docs/animated) by allowing for passing an `Animated.event` as the argument to the `onUpdate` callback. The event mapping of `Animated.event` depends on the `useNativeDriver` property. +Using hook API allows for smooth integration with the [Animated API](https://reactnative.dev/docs/animated) by allowing for passing an `Animated.event` as the argument to the [`onUpdate`](/docs/fundamentals/callbacks-events#onupdate) callback. The event mapping of `Animated.event` depends on the [`useNativeDriver`](https://reactnative.dev/docs/animated#using-the-native-driver) property. When using Animated API, remember to set `useAnimated` property to `true`. :::danger Mixing Reanimated and Animated -It is not possible to mix `Reanimated` and `Animated` within any of the [gesture detectors](/docs/fundamentals/gesture-detectors). +It is not possible to mix Reanimated and Animated within any of the [gesture detectors](/docs/fundamentals/gesture-detectors). ::: Date: Thu, 5 Feb 2026 09:41:05 +0100 Subject: [PATCH 07/54] Composition --- .../fundamentals/_examples/simultaneous.tsx | 95 ++++++++ ...composition.md => gesture-composition.mdx} | 202 ++++++------------ 2 files changed, 163 insertions(+), 134 deletions(-) create mode 100644 packages/docs-gesture-handler/docs/fundamentals/_examples/simultaneous.tsx rename packages/docs-gesture-handler/docs/fundamentals/{gesture-composition.md => gesture-composition.mdx} (80%) diff --git a/packages/docs-gesture-handler/docs/fundamentals/_examples/simultaneous.tsx b/packages/docs-gesture-handler/docs/fundamentals/_examples/simultaneous.tsx new file mode 100644 index 0000000000..a6e0452ba7 --- /dev/null +++ b/packages/docs-gesture-handler/docs/fundamentals/_examples/simultaneous.tsx @@ -0,0 +1,95 @@ +import { StyleSheet } from 'react-native'; +import { + GestureDetector, + GestureHandlerRootView, + usePanGesture, + usePinchGesture, + useRotationGesture, + useSimultaneousGestures, +} from 'react-native-gesture-handler'; +import Animated, { + useSharedValue, + useAnimatedStyle, +} from 'react-native-reanimated'; + +export default function App() { + const offset = useSharedValue({ x: 0, y: 0 }); + const start = useSharedValue({ x: 0, y: 0 }); + + const scale = useSharedValue(1); + const savedScale = useSharedValue(1); + const rotation = useSharedValue(0); + const savedRotation = useSharedValue(0); + + const animatedStyles = useAnimatedStyle(() => { + return { + transform: [ + { translateX: offset.value.x }, + { translateY: offset.value.y }, + { scale: scale.value }, + { rotateZ: `${rotation.value}rad` }, + ], + }; + }); + + const dragGesture = usePanGesture({ + averageTouches: true, + onUpdate: (e) => { + offset.value = { + x: e.translationX + start.value.x, + y: e.translationY + start.value.y, + }; + }, + onDeactivate: () => { + start.value = { + x: offset.value.x, + y: offset.value.y, + }; + }, + }); + + const zoomGesture = usePinchGesture({ + onUpdate: (e) => { + scale.value = savedScale.value * e.scale; + }, + onDeactivate: () => { + savedScale.value = scale.value; + }, + }); + + const rotationGesture = useRotationGesture({ + onUpdate: (e) => { + rotation.value = savedRotation.value + e.rotation; + }, + onDeactivate: () => { + savedRotation.value = rotation.value; + }, + }); + + const composedGesture = useSimultaneousGestures( + dragGesture, + zoomGesture, + rotationGesture + ); + + return ( + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'space-around', + }, + box: { + width: 100, + height: 100, + backgroundColor: 'blue', + }, +}); diff --git a/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.md b/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx similarity index 80% rename from packages/docs-gesture-handler/docs/fundamentals/gesture-composition.md rename to packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx index 6463507f1a..8af6c51262 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.md +++ b/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx @@ -5,6 +5,9 @@ sidebar_label: Gesture composition & interactions sidebar_position: 6 --- +import CollapsibleCode from '@site/src/components/CollapsibleCode'; +import simultaneous from '!!raw-loader!.//\_examples/simultaneous'; + RNGH3 simplifies gesture interaction through dedicated composition hooks and configuration properties. To choose the right approach, simply ask: Are all the gestures attached to the same component? - If yes: Use composition hooks. These allow you to bundle multiple gestures—including previously composed ones—into a single object for a GestureDetector. @@ -19,7 +22,11 @@ Only one of the provided gestures can become active at the same time. The first For example, lets say that you have a component that you want to make draggable but you also want to show additional options on long press. Presumably you would not want the component to move after the long press activates. You can accomplish this using `useCompetingGestures`: -```js + ### useSimultaneousGestures @@ -78,103 +85,13 @@ For example, if you want to make a gallery app, you might want user to be able t > Note: the `useSharedValue` and `useAnimatedStyle` are part of [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/). -```js -import { StyleSheet } from 'react-native'; -import { - GestureDetector, - GestureHandlerRootView, - usePanGesture, - usePinchGesture, - useRotationGesture, - useSimultaneousGestures, -} from 'react-native-gesture-handler'; -import Animated, { - useSharedValue, - useAnimatedStyle, -} from 'react-native-reanimated'; - -export default function App() { - const offset = useSharedValue({ x: 0, y: 0 }); - const start = useSharedValue({ x: 0, y: 0 }); - - const scale = useSharedValue(1); - const savedScale = useSharedValue(1); - const rotation = useSharedValue(0); - const savedRotation = useSharedValue(0); - - const animatedStyles = useAnimatedStyle(() => { - return { - transform: [ - { translateX: offset.value.x }, - { translateY: offset.value.y }, - { scale: scale.value }, - { rotateZ: `${rotation.value}rad` }, - ], - }; - }); - - const dragGesture = usePanGesture({ - averageTouches: true, - onUpdate: (e) => { - offset.value = { - x: e.translationX + start.value.x, - y: e.translationY + start.value.y, - }; - }, - onDeactivate: () => { - start.value = { - x: offset.value.x, - y: offset.value.y, - }; - }, - }); - - const zoomGesture = usePinchGesture({ - onUpdate: (e) => { - scale.value = savedScale.value * e.scale; - }, - onDeactivate: () => { - savedScale.value = scale.value; - }, - }); - - const rotationGesture = useRotationGesture({ - onUpdate: (e) => { - rotation.value = savedRotation.value + e.rotation; - }, - onDeactivate: () => { - savedRotation.value = rotation.value; - }, - }); - - const composedGesture = useSimultaneousGestures( - dragGesture, - zoomGesture, - rotationGesture - ); +{/* We load from source because example contains string interpolation `${}` */} - return ( - - - - - - ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - alignItems: 'center', - justifyContent: 'space-around', - }, - box: { - width: 100, - height: 100, - backgroundColor: 'blue', - }, -}); -``` + ### useExclusiveGestures @@ -182,7 +99,11 @@ Only one of the provided gestures can become active. Priority is determined by t For example, if you want to make a component that responds to single tap as well as to a double tap, you can accomplish that using `useExclusiveGestures`: -```js + + ## Cross-component interactions @@ -242,7 +164,11 @@ const styles = StyleSheet.create({ For example, you may want to have two nested components, both of them can be tapped by the user to trigger different actions: outer view requires one tap, but the inner one requires 2 taps. If you don't want the first tap on the inner view to activate the outer handler, you must make the outer gesture wait until the inner one fails: -```jsx + { @@ -301,13 +227,17 @@ const styles = StyleSheet.create({ alignSelf: 'center', }, }); -``` +`}/> ### block `block` works similarly to `requireToFail` but the direction of the relation is reversed - instead of being one-to-many relation, it's many-to-one. It's especially useful for making lists where the `ScrollView` component needs to wait for every gesture underneath it. All that's required to do is to pass a ref, for example: -```jsx +( - null - ); - - return ( - - { - if (!scrollGesture || scrollGesture.tag !== gesture.tag) { - setScrollGesture(gesture); - } - }}> - {ITEMS.map((item) => ( - - ))} - - - ); -} - type ItemProps = { backgroundColor: string; scrollGesture: NativeGesture | null; @@ -395,6 +299,32 @@ function Item({ backgroundColor, scrollGesture }: ItemProps) { ); } +export default function App() { + const [scrollGesture, setScrollGesture] = useState( + null + ); + + return ( + + { + if (!scrollGesture || scrollGesture.tag !== gesture.tag) { + setScrollGesture(gesture); + } + }}> + {ITEMS.map((item) => ( + + ))} + + + ); +} + const styles = StyleSheet.create({ container: { flex: 1, @@ -404,13 +334,17 @@ const styles = StyleSheet.create({ aspectRatio: 1, }, }); -``` +`}/> ### simultaneousWith `simultaneousWith` allows gestures across different components to be recognized simultaneously. For example, you may want to have two nested views, both with tap gesture attached. Both of them require one tap, but tapping the inner one should also activate the gesture attached to the outer view: -```jsx + { if (success) { @@ -468,4 +402,4 @@ const styles = StyleSheet.create({ alignSelf: 'center', }, }); -``` +`}/> From b2f97c52ada380bc565969497296053be8d3ab15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Thu, 5 Feb 2026 10:17:17 +0100 Subject: [PATCH 08/54] State manager --- .../docs-gesture-handler/docs/fundamentals/state-manager.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx b/packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx index fb31dc06db..a7151c087b 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx @@ -7,7 +7,7 @@ sidebar_position: 6 import CollapsibleCode from '@site/src/components/CollapsibleCode'; -RNGH3 allows to manually control gestures lifecycle by using `GestureStateManager`. +RNGH3 allows to manually control [gestures lifecycle](/docs/under-the-hood/state) by using `GestureStateManager`. ## State management From 8cb20ab4a697524cdae3f236f4b8dec12482293e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Thu, 5 Feb 2026 10:27:23 +0100 Subject: [PATCH 09/54] Callbacks --- .../docs/fundamentals/callbacks-events.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx b/packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx index 4c6b121b9b..bf0fb759be 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx @@ -8,9 +8,9 @@ sidebar_position: 7 import { GestureEventFlowChart, TouchEventFlowChart } from '@site/src/examples/CallbacksFlowCharts' import CollapsibleCode from '@site/src/components/CollapsibleCode'; -At any given time, each handler instance has an assigned [state](/docs/under-the-hood/state) that can change when new touch events occur or can be forced to change by the touch system in certain circumstances. You can hook into state transitions using specific [gesture callbacks](#callbacks). +At any given time, each handler instance has an assigned [state](/docs/under-the-hood/state) that can change when new touch events occur or can be forced to change by the touch system under certain circumstances. You can hook into state transitions using specific [gesture callbacks](#callbacks). -When `Reanimated` is installed, all callbacks are automatically workletized. For more details, refer to the [Integration with Reanimated](/docs/fundamentals/reanimated-interactions#automatic-workletization-of-gesture-callbacks) section. +When Reanimated is installed, all callbacks are automatically workletized. For more details, refer to the [Integration with Reanimated](/docs/fundamentals/reanimated-interactions#automatic-workletization-of-gesture-callbacks) section. ## Callbacks flow From 8f442f1a65fe1c8b545a9dafc396539935734317 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Thu, 5 Feb 2026 10:27:42 +0100 Subject: [PATCH 10/54] Quickstart --- packages/docs-gesture-handler/docs/guides/quickstart/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/index.md b/packages/docs-gesture-handler/docs/guides/quickstart/index.md index cbfa9bbbd2..bbc96e1017 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/index.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/index.md @@ -23,7 +23,7 @@ To see the new API in action, let's build a simple app where you can drag a ball
- Next, define the `SharedValues` to track the ball's position and create the animated styles required to position the ball on the screen: + Next, define the `SharedValues` to track the ball's position and create the animated styles required to position the ball on the screen:
From 12abfebc7c974b33e144c66c545dd4a8bc2471b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Thu, 5 Feb 2026 10:33:44 +0100 Subject: [PATCH 11/54] Troubleshooting --- ...troubleshooting.md => troubleshooting.mdx} | 81 +++++++++++-------- 1 file changed, 47 insertions(+), 34 deletions(-) rename packages/docs-gesture-handler/docs/guides/{troubleshooting.md => troubleshooting.mdx} (54%) diff --git a/packages/docs-gesture-handler/docs/guides/troubleshooting.md b/packages/docs-gesture-handler/docs/guides/troubleshooting.mdx similarity index 54% rename from packages/docs-gesture-handler/docs/guides/troubleshooting.md rename to packages/docs-gesture-handler/docs/guides/troubleshooting.mdx index 4ceeb8e0f2..0a37da0478 100644 --- a/packages/docs-gesture-handler/docs/guides/troubleshooting.md +++ b/packages/docs-gesture-handler/docs/guides/troubleshooting.mdx @@ -4,6 +4,9 @@ title: Troubleshooting sidebar_position: 3 --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + ## Troubleshooting Thanks for giving this library a try! We are sorry that you might have encountered issues though. Here is how you can seek help: @@ -11,15 +14,12 @@ Thanks for giving this library a try! We are sorry that you might have encounter 1. Search over the [issues on Github](https://github.com/software-mansion/react-native-gesture-handler/issues). There is a chance someone had this problem in the past and it has been resolved! 2. When sure your problem hasn't been reported or was reported but the proposed solution doesn't work for you please follow [our issue reporting guidelines](#reporting-issues). 3. You can try seeking help on [Software Mansion Discord](https://discord.com/invite/VemJ4df8Yr). -4. If you feel like reading the source code I highly recommend it, as this is by far the best resource and gives you the most up to date insights into how the library works and what might be causing the bug. +4. If you feel like reading the source code we highly recommend it, as this is by far the best resource and gives you the most up to date insights into how the library works and what might be causing the bug. 5. If you managed to find the solution consider [contributing](/docs/#contributing) a fix or update our documentation to make this information easier to find for the others in the future. ## Reporting issues -This library is maintained by a very small team. -Please be mindful of that when reporting issue and when it happens that we can't get back to you as soon as you might expect. -We would love to fix all the problems as soon as possible, but often our time is constraint with other issues/features or projects. -To make it easier for us to understand your issue and to be able to approach it sooner you can help by: +This library is maintained by a very small team. Please keep this in mind when reporting issues, as we may not be able to respond as quickly as you might expect. We strive to address all problems as soon as possible, but our time is often constrained by other issues, features, or projects. To help us understand and address your issue more promptly, you can assist by: - Making sure the issue description is complete. Please include all the details about your environment (library version, RN version, device OS etc). - It is the best to provide an example app that reproduces the issue you are having. Put it up on [gist](https://gist.github.com/), [snack](https://snack.expo.io) or create a repo on Github – it doesn't matter as long as we can easily pull it in, run and see the issue. @@ -32,44 +32,57 @@ To make it easier for us to understand your issue and to be able to approach it - Changing `enabled` prop during a gesture has no effect, only when a gesture starts (that is a finger touches the screen) the `enabled` prop is taken into consideration to decide whether to extract (or not) the gesture and provide it with stream of events to analyze. - `Native` gesture may not conform to the standard state flow due to platform specific workarounds to incorporate native views into RNGH. -- Keep in mind that `Touchables` from RNGH are rendering two additional views that may need to be styled separately to achieve desired effect (`style` and `containerStyle` props). -- In order for the gesture composition to work, all composed gestures must be attached to the same `GestureHandlerRootView`. +- Keep in mind that [`Touchables`](/docs/components/touchables) from RNGH are rendering two additional views that may need to be styled separately to achieve desired effect (`style` and `containerStyle` props). +- In order for the [gesture composition](/docs/fundamentals/gesture-composition) to work, all composed gestures must be attached to the same `GestureHandlerRootView`. + +## Multiple instances of Gesture Handler were detected + +This error usually happens when in your project there exists more than one instance of Gesture Handler. It can occur when some of your dependencies have installed Gesture Handler inside their own `node_modules` instead of using it as a peer dependency. In this case two different versions of Gesture Handler JS module try to install the same Native Module. -### Multiple instances of Gesture Handler were detected +You can resolve this problem manually by modifying your `package.json` file. This will depend on the package manager you are using. -This error usually happens when in your project there exists more than one instance of Gesture Handler. It can occur when some of your dependencies have installed Gesture Handler inside their own `node_modules` instead of using it as a peer dependency. In this case two different versions of Gesture Handler JS module try to install the same Native Module. You can resolve this problem manually by modifying your `package.json` file. -You can check which libraries are using Gesture Handler, for example, with the command: + + + You can check which libraries are using Gesture Handler with the command: + + ```bash + npm ls react-native-gesture-handler + ``` -```bash -npm ls react-native-gesture-handler -yarn why react-native-gesture-handler -``` + Add [`overrides`](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) property. -If you use `yarn` you should add [`resolution` property](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/). + ```json + "overrides": { + "react-native-gesture-handler": + } + ``` -```json -"resolutions": { - "react-native-gesture-handler": -} -``` + After that you need to run your package manager again: -If you use `npm` you should add [`overrides` property](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides). + ```bash + npm install + ``` + + + You can check which libraries are using Gesture Handler with the command: -```json -"overrides": { - "react-native-gesture-handler": -} -``` + ```bash + yarn why react-native-gesture-handler + ``` -After that you need to run your package manager again + Add [`resolutions`](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/) property. -```bash -yarn -``` + ```json + "resolutions": { + "react-native-gesture-handler": + } + ``` -or + After that you need to run your package manager again: -```bash -npm install -``` + ```bash + yarn + ``` + + From 1094f929e9cdbe3dd53ec20b6f6700907b4202ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Fri, 6 Feb 2026 11:35:34 +0100 Subject: [PATCH 12/54] Testing --- .../docs/guides/testing.md | 107 ++++++++---------- 1 file changed, 50 insertions(+), 57 deletions(-) diff --git a/packages/docs-gesture-handler/docs/guides/testing.md b/packages/docs-gesture-handler/docs/guides/testing.md index 9153c9842c..3f2c6428ca 100644 --- a/packages/docs-gesture-handler/docs/guides/testing.md +++ b/packages/docs-gesture-handler/docs/guides/testing.md @@ -23,40 +23,31 @@ Example: ## Testing Gestures' and Gesture handlers' callbacks -RNGH provides an API for triggering selected handlers: +RNGH provides APIs, specifically [`fireGestureHandler`](#firegesturehandler) and [`getByGestureTestId`](#getbygesturetestid), to trigger selected handlers. -- [`fireGestureHandler(gestureOrHandler, eventList)`](/docs/guides/testing#firegesturehandlergestureorhandler-eventlist) -- [`getByGestureTestId(testID)`](/docs/guides/testing#getbygesturetestidtestid) +### fireGestureHandler -## fireGestureHandler(gestureOrHandler, eventList) +```ts +fireGestureHandler: (componentOrGesture, eventList) => void; +``` Simulates one event stream (i.e. event sequence starting with `BEGIN` state and ending with one of `END`/`FAIL`/`CANCEL` states), calling appropriate callbacks associated with given gesture handler. -### Arguments - -#### `gestureOrHandler` - -Represents either: - -1. Gesture handler component found by Jest queries (e.g. `getByTestId`) -2. Gesture found by [`getByGestureTestId()`](/docs/guides/testing#getbygesturetestidtestid) - -#### `eventList` +- `componentOrGesture` - Either Gesture Handler component found by `Jest` queries (e.g. `getByTestId`) or Gesture found by [`getByGestureTestId()`](#getbygesturetestidtestid) -Event data passed to appropriate callback. RNGH fills event list if required -data is missing using these rules: +- `eventList` - Event data passed to appropriate callback. RNGH fills event list if required + data is missing using these rules: + - `oldState` is filled using state of the previous event. `BEGIN` events use + `UNDETERMINED` value as previous event. + - Events after first `ACTIVE` state can omit `state` field. + - Handler specific data is filled (e.g. `numberOfTouches`, `x` fields) with + defaults. + - Missing `BEGIN` and `END` events are added with data copied from first and last + passed event, respectively. + - If first event don't have `state` field, the `ACTIVE` state is assumed. -1. `oldState` is filled using state of the previous event. `BEGIN` events use - `UNDETERMINED` value as previous event. -2. Events after first `ACTIVE` state can omit `state` field. -3. Handler specific data is filled (e.g. `numberOfTouches`, `x` fields) with - defaults. -4. Missing `BEGIN` and `END` events are added with data copied from first and last - passed event, respectively. -5. If first event don't have `state` field, the `ACTIVE` state is assumed. - -Some examples: +Some `eventList` examples: ```jsx const oldStateFilled = [ @@ -86,44 +77,46 @@ const implicitBeginAndEnd = [ const allImplicits = []; // 3 events, one BEGIN, one ACTIVE, one END with defaults. ``` -### Example - -Extracted from RNGH tests, check `Events.test.tsx` for full implementation. +### getByGestureTestId ```tsx -it('sends events with additional data to handlers', () => { - const panHandlers = mockedEventHandlers(); - render(); - fireGestureHandler(getByGestureTestId('pan'), [ - { state: State.BEGAN, translationX: 0 }, - { state: State.ACTIVE, translationX: 10 }, - { translationX: 20 }, - { translationX: 20 }, - { state: State.END, translationX: 30 }, - ]); - - expect(panHandlers.active).toHaveBeenCalledTimes(3); - expect(panHandlers.active).toHaveBeenLastCalledWith( - expect.objectContaining({ translationX: 20 }) - ); -}); +getByGestureTestId: (testID: string) => Gesture; ``` -## getByGestureTestId(testID) - -Returns opaque data type associated with gesture. Gesture is found via `testID` attribute in rendered -components (see [`testID`](/docs/gestures/use-pan-gesture#testid)). - -### Arguments +Returns opaque data type associated with gesture. Gesture is found via [`testID`](/docs/gestures/use-pan-gesture#testid) attribute in rendered +components. -#### `testID` +- `testID` - String identifying gesture. -String identifying gesture. +:::warning +`testID` must be unique among components rendered in test. +::: -### Notes +## Example -`testID` must be unique among components rendered in test. +Extracted from RNGH tests, check [`api_v3.test.tsx`](https://github.com/software-mansion/react-native-gesture-handler/blob/main/packages/react-native-gesture-handler/src/__tests__/api_v3.test.tsx) for full implementation. -### Example +```tsx +test('Pan gesture', () => { + const onBegin = jest.fn(); + const onStart = jest.fn(); + + const panGesture = renderHook(() => + usePanGesture({ + disableReanimated: true, + onBegin: (e) => onBegin(e), + onActivate: (e) => onStart(e), + }) + ).result.current; + + fireGestureHandler(panGesture, [ + { oldState: State.UNDETERMINED, state: State.BEGAN }, + { oldState: State.BEGAN, state: State.ACTIVE }, + { oldState: State.ACTIVE, state: State.ACTIVE }, + { oldState: State.ACTIVE, state: State.END }, + ]); -See above example for `fireGestureHandler`. + expect(onBegin).toHaveBeenCalledTimes(1); + expect(onStart).toHaveBeenCalledTimes(1); +}); +``` From d91e0973303dbd7717706dfb4dc83de1e737c112 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Fri, 6 Feb 2026 12:31:40 +0100 Subject: [PATCH 13/54] Fix callbacks flow chart --- .../src/examples/CallbacksFlowCharts/GestureEventChart.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/docs-gesture-handler/src/examples/CallbacksFlowCharts/GestureEventChart.jsx b/packages/docs-gesture-handler/src/examples/CallbacksFlowCharts/GestureEventChart.jsx index 6e601c0d5e..2dfa8e4bb3 100644 --- a/packages/docs-gesture-handler/src/examples/CallbacksFlowCharts/GestureEventChart.jsx +++ b/packages/docs-gesture-handler/src/examples/CallbacksFlowCharts/GestureEventChart.jsx @@ -35,10 +35,8 @@ const edges = new DataSet([ { from: 1, to: 5, arrows: 'to' }, { from: 2, to: 3, arrows: 'to' }, { from: 2, to: 4, arrows: 'to' }, - { from: 2, to: 5, arrows: 'to' }, { from: 3, to: 3, arrows: 'to' }, { from: 3, to: 4, arrows: 'to' }, - { from: 3, to: 5, arrows: 'to' }, { from: 4, to: 5, arrows: 'to' }, ]); From c503ea1e49425f78cfb78c77e5b4fb3eb7e09a2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Fri, 6 Feb 2026 14:07:24 +0100 Subject: [PATCH 14/54] Pan --- ...ture-config.md => base-gesture-config.mdx} | 13 ++++-- ...nt-data.md => base-gesture-event-data.mdx} | 13 ++++-- .../docs/gestures/use-fling-gesture.mdx | 4 +- .../docs/gestures/use-hover-gesture.mdx | 4 +- .../docs/gestures/use-long-press-gesture.mdx | 4 +- .../docs/gestures/use-manual-gesture.mdx | 4 +- .../docs/gestures/use-native-gesture.mdx | 4 +- .../docs/gestures/use-pan-gesture.mdx | 43 ++++++++++++------- .../docs/gestures/use-pinch-gesture.mdx | 4 +- .../docs/gestures/use-rotation-gesture.mdx | 4 +- .../docs/gestures/use-tap-gesture.mdx | 4 +- .../src/components/CollapsibleCode/index.tsx | 10 +++-- 12 files changed, 68 insertions(+), 43 deletions(-) rename packages/docs-gesture-handler/docs/gestures/_shared/{base-gesture-config.md => base-gesture-config.mdx} (96%) rename packages/docs-gesture-handler/docs/gestures/_shared/{base-gesture-event-data.md => base-gesture-event-data.mdx} (56%) diff --git a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.md b/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx similarity index 96% rename from packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.md rename to packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx index 4c541a815c..e390d382e7 100644 --- a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.md +++ b/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx @@ -1,3 +1,5 @@ +import CollapsibleCode from '@site/src/components/CollapsibleCode'; + ### enabled ```ts @@ -21,11 +23,14 @@ Most handlers' `shouldCancelWhenOutside` property defaults to `false` except for ### hitSlop -```ts +; -``` -```ts type HitSlop = | number | null @@ -40,7 +45,7 @@ type HitSlop = | Record<'width' | 'right', number> | Record<'height' | 'top', number> | Record<'height' | 'bottom', number>; -``` +`}/> This parameter enables control over what part of the connected view area can be used to begin recognizing the gesture. When a negative number is provided the bounds of the view will reduce the area by the given number of points in each of the sides evenly. diff --git a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-event-data.md b/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-event-data.mdx similarity index 56% rename from packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-event-data.md rename to packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-event-data.mdx index 8b4266ecf9..8ed3c77583 100644 --- a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-event-data.md +++ b/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-event-data.mdx @@ -1,3 +1,5 @@ +import CollapsibleCode from '@site/src/components/CollapsibleCode'; + ### numberOfPointers ```ts @@ -8,11 +10,14 @@ Represents the number of pointers (fingers) currently placed on the screen. ### pointerType -```ts + Indicates the type of pointer device in use. diff --git a/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx index 4aa6c21118..8ad391a70c 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx @@ -25,8 +25,8 @@ import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestur /> -import BaseEventData from './\_shared/base-gesture-event-data.md'; -import BaseGestureConfig from './\_shared/base-gesture-config.md'; +import BaseEventData from './\_shared/base-gesture-event-data.mdx'; +import BaseGestureConfig from './\_shared/base-gesture-config.mdx'; import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx'; import SharedValueInfo from './\_shared/shared-value-info.md'; diff --git a/packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx index 31f9a5a89b..00e220659e 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx @@ -25,8 +25,8 @@ import HoverGestureBasicSrc from '!!raw-loader!@site/static/examples/HoverGestur /> -import BaseEventData from './\_shared/base-gesture-event-data.md'; -import BaseGestureConfig from './\_shared/base-gesture-config.md'; +import BaseEventData from './\_shared/base-gesture-event-data.mdx'; +import BaseGestureConfig from './\_shared/base-gesture-config.mdx'; import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx'; import BaseContinuousGestureCallbacks from './\_shared/base-continuous-gesture-callbacks.mdx'; import SharedValueInfo from './\_shared/shared-value-info.md'; diff --git a/packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx index 811b2dd365..f070269052 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx @@ -25,8 +25,8 @@ import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPre /> -import BaseEventData from './\_shared/base-gesture-event-data.md'; -import BaseGestureConfig from './\_shared/base-gesture-config.md'; +import BaseEventData from './\_shared/base-gesture-event-data.mdx'; +import BaseGestureConfig from './\_shared/base-gesture-config.mdx'; import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx'; import SharedValueInfo from './\_shared/shared-value-info.md'; diff --git a/packages/docs-gesture-handler/docs/gestures/use-manual-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-manual-gesture.mdx index 84e779cea1..c903b2a279 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-manual-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-manual-gesture.mdx @@ -5,8 +5,8 @@ sidebar_label: Manual gesture sidebar_position: 9 --- -import BaseEventData from './\_shared/base-gesture-event-data.md'; -import BaseGestureConfig from './\_shared/base-gesture-config.md'; +import BaseEventData from './\_shared/base-gesture-event-data.mdx'; +import BaseGestureConfig from './\_shared/base-gesture-config.mdx'; import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx'; import BaseContinuousGestureCallbacks from './\_shared/base-continuous-gesture-callbacks.mdx'; import SharedValueInfo from './\_shared/shared-value-info.md'; diff --git a/packages/docs-gesture-handler/docs/gestures/use-native-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-native-gesture.mdx index 73f525c703..c4161ef7bc 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-native-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-native-gesture.mdx @@ -5,8 +5,8 @@ sidebar_label: Native gesture sidebar_position: 8 --- -import BaseEventData from './\_shared/base-gesture-event-data.md'; -import BaseGestureConfig from './\_shared/base-gesture-config.md'; +import BaseEventData from './\_shared/base-gesture-event-data.mdx'; +import BaseGestureConfig from './\_shared/base-gesture-config.mdx'; import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx'; import BaseContinuousGestureCallbacks from './\_shared/base-continuous-gesture-callbacks.mdx'; import SharedValueInfo from './\_shared/shared-value-info.md'; diff --git a/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx index c58c470323..fda93c5ec3 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx @@ -12,13 +12,15 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; import PanGestureBasic from '@site/static/examples/PanGestureBasic'; import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasicSrc'; -import BaseEventData from './\_shared/base-gesture-event-data.md'; -import BaseGestureConfig from './\_shared/base-gesture-config.md'; +import BaseEventData from './\_shared/base-gesture-event-data.mdx'; +import BaseGestureConfig from './\_shared/base-gesture-config.mdx'; import BaseContinuousGestureConfig from './\_shared/base-continuous-gesture-config.md'; import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx'; import BaseContinuousGestureCallbacks from './\_shared/base-continuous-gesture-callbacks.mdx'; import SharedValueInfo from './\_shared/shared-value-info.md'; +import CollapsibleCode from '@site/src/components/CollapsibleCode'; +
-import BaseEventData from './\_shared/base-gesture-event-data.md'; -import BaseGestureConfig from './\_shared/base-gesture-config.md'; +import BaseEventData from './\_shared/base-gesture-event-data.mdx'; +import BaseGestureConfig from './\_shared/base-gesture-config.mdx'; import BaseContinuousGestureConfig from './\_shared/base-continuous-gesture-config.md'; import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx'; import BaseContinuousGestureCallbacks from './\_shared/base-continuous-gesture-callbacks.mdx'; diff --git a/packages/docs-gesture-handler/docs/gestures/use-rotation-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-rotation-gesture.mdx index 6f74aabf3c..ed1b81f764 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-rotation-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-rotation-gesture.mdx @@ -25,8 +25,8 @@ import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/Rotation />
-import BaseEventData from './\_shared/base-gesture-event-data.md'; -import BaseGestureConfig from './\_shared/base-gesture-config.md'; +import BaseEventData from './\_shared/base-gesture-event-data.mdx'; +import BaseGestureConfig from './\_shared/base-gesture-config.mdx'; import BaseContinuousGestureConfig from './\_shared/base-continuous-gesture-config.md'; import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx'; import BaseContinuousGestureCallbacks from './\_shared/base-continuous-gesture-callbacks.mdx'; diff --git a/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx index 25acce6956..7c043eae0a 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx @@ -25,8 +25,8 @@ import TapGestureBasicSrc from '!!raw-loader!@site/static/examples/TapGestureBas /> -import BaseEventData from './\_shared/base-gesture-event-data.md'; -import BaseGestureConfig from './\_shared/base-gesture-config.md'; +import BaseEventData from './\_shared/base-gesture-event-data.mdx'; +import BaseGestureConfig from './\_shared/base-gesture-config.mdx'; import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx'; import SharedValueInfo from './\_shared/shared-value-info.md'; diff --git a/packages/docs-gesture-handler/src/components/CollapsibleCode/index.tsx b/packages/docs-gesture-handler/src/components/CollapsibleCode/index.tsx index 8f78e2540b..94a65ad0d4 100644 --- a/packages/docs-gesture-handler/src/components/CollapsibleCode/index.tsx +++ b/packages/docs-gesture-handler/src/components/CollapsibleCode/index.tsx @@ -10,6 +10,7 @@ interface Props { label: string; expandedLabel: string; lineBounds: number[]; + collapsed?: boolean; } export default function CollapsibleCode({ @@ -17,8 +18,9 @@ export default function CollapsibleCode({ label, expandedLabel, lineBounds, + collapsed = true, }: Props) { - const [collapsed, setCollapsed] = useState(true); + const [isCollapsed, setIsCollapsed] = useState(collapsed); const code = useFormattedCode(src); if (!lineBounds) { @@ -35,11 +37,11 @@ export default function CollapsibleCode({ setCollapsed(!collapsed)} + collapsed={isCollapsed} + onCollapse={() => setIsCollapsed(!isCollapsed)} className={styles.collapseButton} /> - {collapsed ? linesToShow : code} + {isCollapsed ? linesToShow : code} ); } From 31a8db39c2f35d3ab99934a875cae61eb916a9bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Fri, 6 Feb 2026 14:16:50 +0100 Subject: [PATCH 15/54] Tap --- .../docs/gestures/use-tap-gesture.mdx | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx index 7c043eae0a..5b266e84cf 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx @@ -30,14 +30,16 @@ import BaseGestureConfig from './\_shared/base-gesture-config.mdx'; import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx'; import SharedValueInfo from './\_shared/shared-value-info.md'; -A discrete gesture that recognizes one or many taps. +import CollapsibleCode from '@site/src/components/CollapsibleCode'; + +A discrete gesture that recognizes taps. Tap gestures detect one or more fingers briefly touching the screen. The pointers involved in these gestures must not move significantly from their initial touch positions. This can be changed via configuration. The required number of taps and allowed distance from initial position may be configured. For example, you might configure tap gesture recognizers to detect single taps, double taps, or triple taps. -In order for a gesture to activate, specified gesture requirements such as minPointers, numberOfTaps, maxDistance, maxDuration, and maxDelay (explained below) must be met. Immediately after the gesture activates, it will end. +In order for a gesture to activate, specified gesture requirements such as [`minPointers`](#minpointers), [`numberOfTaps`](#numberoftaps), [`maxDistance`](#maxdistance), [`maxDuration`](#maxduration), and [`maxDelay`](#maxdelay) must be met.