From 57365942b3a954d736bfeeee220f86b62bb83e03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Kie=C5=82b?=
 <mateuszkielb@Mateusz-Kiebs-MacBook-Pro.local>
Date: Tue, 14 Apr 2026 13:13:29 +0200
Subject: [PATCH 01/15] updated pan gesture view and pan gesture example to use
 v3 api

---
 packages/docs-gesture-handler/babel.config.js |   2 +-
 .../docs/gestures/use-pan-gesture.mdx         |  11 -
 packages/docs-gesture-handler/package.json    |  10 +-
 .../static/examples/PanGestureBasic.js        |  21 +-
 .../static/examples/PanGestureBasicSrc.js     |  58 ++-
 packages/docs-gesture-handler/yarn.lock       | 387 ++++++++----------
 6 files changed, 223 insertions(+), 266 deletions(-)

diff --git a/packages/docs-gesture-handler/babel.config.js b/packages/docs-gesture-handler/babel.config.js
index 8c33f03ed2..74f6a15685 100644
--- a/packages/docs-gesture-handler/babel.config.js
+++ b/packages/docs-gesture-handler/babel.config.js
@@ -1,4 +1,4 @@
 module.exports = {
   presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
-  plugins: ['react-native-reanimated/plugin'],
+  plugins: ['react-native-worklets/plugin'],
 };
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 3ed5fd7dc4..ce265fbb6f 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx
@@ -21,11 +21,6 @@ import SharedValueInfo from './\_shared/shared-value-info.md';
 import MouseButtonProp from './\_shared/mouse-button.mdx';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/pan.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<PanGestureBasic/>}
     src={PanGestureBasicSrc}
@@ -41,12 +36,6 @@ Configurations such as a minimum initial distance, specific vertical or horizont
 
 Gesture callback can be used for continuous tracking of the pan gesture. It provides information about the gesture such as its XY translation from the starting point as well as its instantaneous velocity.
 
-  <div className={appearOnMobile} style={{ display: 'flex', margin: '16px 0', justifyContent: 'center' }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/pan.mp4")} type="video/mp4"/>
-    </video>
-  </div>
-
 ## Example
 
 <CollapsibleCode
diff --git a/packages/docs-gesture-handler/package.json b/packages/docs-gesture-handler/package.json
index aa15a70254..80309a13de 100644
--- a/packages/docs-gesture-handler/package.json
+++ b/packages/docs-gesture-handler/package.json
@@ -47,10 +47,10 @@
     "react-dom": "19.1.1",
     "react-draggable": "^4.4.5",
     "react-native": "0.83.0",
-    "react-native-gesture-handler": "^2.24.0",
-    "react-native-reanimated": "4.0.0-nightly-20250325-d67e51599",
-    "react-native-web": "^0.18.12",
-    "react-native-worklets": "^0.1.0",
+    "react-native-gesture-handler": "3.0.0-beta.2",
+    "react-native-reanimated": "4.3.0",
+    "react-native-web": "0.21.2",
+    "react-native-worklets": "0.8.1",
     "source-map": "^0.7.4",
     "source-map-loader": "^4.0.1",
     "usehooks-ts": "^2.9.1",
@@ -86,4 +86,4 @@
     "webpackbar": "^7.0.0"
   },
   "packageManager": "yarn@1.22.22"
-}
+}
\ No newline at end of file
diff --git a/packages/docs-gesture-handler/static/examples/PanGestureBasic.js b/packages/docs-gesture-handler/static/examples/PanGestureBasic.js
index 2d2c7b74eb..fa044c518b 100644
--- a/packages/docs-gesture-handler/static/examples/PanGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/PanGestureBasic.js
@@ -4,9 +4,9 @@ import Animated, {
   useAnimatedStyle,
 } from 'react-native-reanimated';
 import {
-  Gesture,
   GestureDetector,
   GestureHandlerRootView,
+  usePanGesture,
 } from 'react-native-gesture-handler';
 import { StyleSheet, View } from 'react-native';
 
@@ -38,7 +38,7 @@ export default function App() {
 
     containerRef.current.measureInWindow((x, y, width, height) => {
       maxTranslateX.value = width / 2 - 50;
-      maxTranslateY.value = height / 2 - 50;
+      maxTranslateY.value = height / 2;
     });
   };
 
@@ -56,14 +56,14 @@ export default function App() {
     };
   }, []);
 
-  const pan = Gesture.Pan()
-    .minDistance(1)
-    .onBegin(() => {
+  const pan = usePanGesture({
+    minDistance: 1,
+    onBegin: () => {
       grabbing.value = true;
       prevTranslationX.value = translationX.value;
       prevTranslationY.value = translationY.value;
-    })
-    .onUpdate((event) => {
+    },
+    onUpdate: (event) => {
       translationX.value = clamp(
         prevTranslationX.value + event.translationX,
         -maxTranslateX.value,
@@ -74,10 +74,11 @@ export default function App() {
         -maxTranslateY.value,
         maxTranslateY.value
       );
-    })
-    .onFinalize(() => {
+    },
+    onFinalize: () => {
       grabbing.value = false;
-    });
+    },
+  });
 
   return (
     <GestureHandlerRootView>
diff --git a/packages/docs-gesture-handler/static/examples/PanGestureBasicSrc.js b/packages/docs-gesture-handler/static/examples/PanGestureBasicSrc.js
index 9331b2eabe..975d2c6d52 100644
--- a/packages/docs-gesture-handler/static/examples/PanGestureBasicSrc.js
+++ b/packages/docs-gesture-handler/static/examples/PanGestureBasicSrc.js
@@ -4,59 +4,52 @@ import Animated, {
   useAnimatedStyle,
 } from 'react-native-reanimated';
 import {
-  Gesture,
   GestureDetector,
   GestureHandlerRootView,
+  usePanGesture,
 } from 'react-native-gesture-handler';
-import { StyleSheet, Dimensions } from 'react-native';
-
-function clamp(val, min, max) {
-  return Math.min(Math.max(val, min), max);
-}
-
-const { width, height } = Dimensions.get('screen');
+import { StyleSheet, View } from 'react-native';
 
 export default function App() {
   const translationX = useSharedValue(0);
   const translationY = useSharedValue(0);
   const prevTranslationX = useSharedValue(0);
   const prevTranslationY = useSharedValue(0);
+  const grabbing = useSharedValue(false);
+
+  const containerRef = React.useRef(null);
 
   const animatedStyles = useAnimatedStyle(() => ({
     transform: [
       { translateX: translationX.value },
       { translateY: translationY.value },
     ],
+    cursor: grabbing.value ? 'grabbing' : 'grab',
   }));
 
-  const pan = Gesture.Pan()
-    .minDistance(1)
-    .onStart(() => {
+  const pan = usePanGesture({
+    minDistance: 1,
+    onBegin: () => {
+      grabbing.value = true;
       prevTranslationX.value = translationX.value;
       prevTranslationY.value = translationY.value;
-    })
-    .onUpdate((event) => {
-      const maxTranslateX = width / 2 - 50;
-      const maxTranslateY = height / 2 - 50;
-
-      translationX.value = clamp(
-        prevTranslationX.value + event.translationX,
-        -maxTranslateX,
-        maxTranslateX
-      );
-      translationY.value = clamp(
-        prevTranslationY.value + event.translationY,
-        -maxTranslateY,
-        maxTranslateY
-      );
-    })
-    .runOnJS(true);
+    },
+    onUpdate: (event) => {
+      prevTranslationX.value + event.translationX;
+      prevTranslationY.value + event.translationY;
+    },
+    onFinalize: () => {
+      grabbing.value = false;
+    },
+  });
 
   return (
-    <GestureHandlerRootView style={styles.container}>
-      <GestureDetector gesture={pan}>
-        <Animated.View style={[animatedStyles, styles.box]}></Animated.View>
-      </GestureDetector>
+    <GestureHandlerRootView>
+      <View ref={containerRef} style={styles.container}>
+        <GestureDetector gesture={pan}>
+          <Animated.View style={[animatedStyles, styles.box]}></Animated.View>
+        </GestureDetector>
+      </View>
     </GestureHandlerRootView>
   );
 }
@@ -66,6 +59,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    aspectRatio: 3,
   },
   box: {
     width: 100,
diff --git a/packages/docs-gesture-handler/yarn.lock b/packages/docs-gesture-handler/yarn.lock
index dbb144a6d4..bf8e69d241 100644
--- a/packages/docs-gesture-handler/yarn.lock
+++ b/packages/docs-gesture-handler/yarn.lock
@@ -663,7 +663,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-arrow-functions@^7.0.0", "@babel/plugin-transform-arrow-functions@^7.0.0-0", "@babel/plugin-transform-arrow-functions@^7.27.1":
+"@babel/plugin-transform-arrow-functions@^7.0.0", "@babel/plugin-transform-arrow-functions@^7.27.1":
   version "7.27.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.27.1.tgz#6e2061067ba3ab0266d834a9f94811196f2aba9a"
   integrity sha512-8Z4TGic6xW70FKThA5HYEKKyBpOOsucTOD1DjU3fZxDg+K3zBJcXMFnt/4yQiZnf5+MiOMSXQ9PaEK/Ilh1DeA==
@@ -702,7 +702,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.28.6"
 
-"@babel/plugin-transform-class-properties@^7.0.0-0", "@babel/plugin-transform-class-properties@^7.28.6":
+"@babel/plugin-transform-class-properties@^7.27.1", "@babel/plugin-transform-class-properties@^7.28.6":
   version "7.28.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.28.6.tgz#d274a4478b6e782d9ea987fda09bdb6d28d66b72"
   integrity sha512-dY2wS3I2G7D697VHndN91TJr8/AAfXQNt5ynCTI/MpxMsSzHp+52uNivYT5wCPax3whc47DR8Ba7cmlQMg24bw==
@@ -718,7 +718,7 @@
     "@babel/helper-create-class-features-plugin" "^7.28.6"
     "@babel/helper-plugin-utils" "^7.28.6"
 
-"@babel/plugin-transform-classes@^7.0.0", "@babel/plugin-transform-classes@^7.0.0-0", "@babel/plugin-transform-classes@^7.28.6":
+"@babel/plugin-transform-classes@^7.0.0", "@babel/plugin-transform-classes@^7.28.4", "@babel/plugin-transform-classes@^7.28.6":
   version "7.28.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.28.6.tgz#8f6fb79ba3703978e701ce2a97e373aae7dda4b7"
   integrity sha512-EF5KONAqC5zAqT783iMGuM2ZtmEBy+mJMOKl2BCvPZ2lVrwvXnB6o+OBWCS+CoeCCpVRF2sA2RBKUxvT8tQT5Q==
@@ -900,7 +900,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.27.1"
 
-"@babel/plugin-transform-nullish-coalescing-operator@^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator@^7.28.6":
+"@babel/plugin-transform-nullish-coalescing-operator@^7.27.1", "@babel/plugin-transform-nullish-coalescing-operator@^7.28.6":
   version "7.28.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.28.6.tgz#9bc62096e90ab7a887f3ca9c469f6adec5679757"
   integrity sha512-3wKbRgmzYbw24mDJXT7N+ADXw8BC/imU9yo9c9X9NKaLF1fW+e5H1U5QjMUBe4Qo4Ox/o++IyUkl1sVCLgevKg==
@@ -940,7 +940,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.28.6"
 
-"@babel/plugin-transform-optional-chaining@^7.0.0-0", "@babel/plugin-transform-optional-chaining@^7.27.1", "@babel/plugin-transform-optional-chaining@^7.28.6":
+"@babel/plugin-transform-optional-chaining@^7.27.1", "@babel/plugin-transform-optional-chaining@^7.28.6":
   version "7.28.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.28.6.tgz#926cf150bd421fc8362753e911b4a1b1ce4356cd"
   integrity sha512-A4zobikRGJTsX9uqVFdafzGkqD30t26ck2LmOzAuLL8b2x6k3TIqRiT2xVvA9fNmFeTX484VpsdgmKNA0bS23w==
@@ -1067,7 +1067,7 @@
     babel-plugin-polyfill-regenerator "^0.6.5"
     semver "^6.3.1"
 
-"@babel/plugin-transform-shorthand-properties@^7.0.0", "@babel/plugin-transform-shorthand-properties@^7.0.0-0", "@babel/plugin-transform-shorthand-properties@^7.27.1":
+"@babel/plugin-transform-shorthand-properties@^7.0.0", "@babel/plugin-transform-shorthand-properties@^7.27.1":
   version "7.27.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.27.1.tgz#532abdacdec87bfee1e0ef8e2fcdee543fe32b90"
   integrity sha512-N/wH1vcn4oYawbJ13Y/FxcQrWk63jhfNa7jef0ih7PHSIHX2LB7GWE1rkPrOnka9kwMxb6hMl19p7lidA+EHmQ==
@@ -1089,7 +1089,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.27.1"
 
-"@babel/plugin-transform-template-literals@^7.0.0-0", "@babel/plugin-transform-template-literals@^7.27.1":
+"@babel/plugin-transform-template-literals@^7.27.1":
   version "7.27.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.27.1.tgz#1a0eb35d8bb3e6efc06c9fd40eb0bcef548328b8"
   integrity sha512-fBJKiV7F2DxZUkg5EtHKXQdbsbURW3DZKQUWphDum0uRP6eHGGa/He9mc0mypL680pb+e/lDIthRohlv8NCHkg==
@@ -1129,7 +1129,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.28.5"
     "@babel/helper-plugin-utils" "^7.28.6"
 
-"@babel/plugin-transform-unicode-regex@^7.0.0", "@babel/plugin-transform-unicode-regex@^7.0.0-0", "@babel/plugin-transform-unicode-regex@^7.27.1":
+"@babel/plugin-transform-unicode-regex@^7.0.0", "@babel/plugin-transform-unicode-regex@^7.27.1":
   version "7.27.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.27.1.tgz#25948f5c395db15f609028e370667ed8bae9af97"
   integrity sha512-xvINq24TRojDuyt6JGtHmkVkrfVV3FPT16uytxImLeBZqW3/H52yN+kM1MGuyPkIQxrzKwPHs5U/MP3qKyzkGw==
@@ -1242,7 +1242,7 @@
     "@babel/plugin-transform-react-jsx-development" "^7.27.1"
     "@babel/plugin-transform-react-pure-annotations" "^7.27.1"
 
-"@babel/preset-typescript@^7.16.7", "@babel/preset-typescript@^7.21.0", "@babel/preset-typescript@^7.25.9":
+"@babel/preset-typescript@^7.21.0", "@babel/preset-typescript@^7.25.9", "@babel/preset-typescript@^7.27.1":
   version "7.28.5"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.28.5.tgz#540359efa3028236958466342967522fd8f2a60c"
   integrity sha512-+bQy5WOI2V6LJZpPVxY+yp66XdZ2yifu0Mc1aP5CQKgjn4QM5IN2i5fAZ4xKop47pr8rpVhiAeu+nDQa12C8+g==
@@ -2213,13 +2213,6 @@
     utility-types "^3.10.0"
     webpack "^5.88.1"
 
-"@egjs/hammerjs@^2.0.17":
-  version "2.0.17"
-  resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
-  integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
-  dependencies:
-    "@types/hammerjs" "^2.0.36"
-
 "@emotion/babel-plugin@^11.13.5":
   version "11.13.5"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz#eab8d65dbded74e0ecfd28dc218e75607c4e7bc0"
@@ -3189,6 +3182,11 @@
   resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.83.0.tgz#3aeb8967552b95400ee6ae1d95f4d11f289e409b"
   integrity sha512-DG1ELOqQ6RS82R1zEUGTWa/pfSPOf+vwAnQB7Ao1vRuhW/xdd2OPQJyqx5a5QWMYpGrlkCb7ERxEVX6p2QODCA==
 
+"@react-native/normalize-colors@^0.74.1":
+  version "0.74.89"
+  resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.74.89.tgz#b8ac17d1bbccd3ef9a1f921665d04d42cff85976"
+  integrity sha512-qoMMXddVKVhZ8PA1AbUCk83trpd6N+1nF2A6k1i6LsQObyS92fELuk8kU/lQs6M7BsMHwqyLCpQJ1uFgNvIQXg==
+
 "@react-native/virtualized-lists@0.83.0":
   version "0.83.0"
   resolved "https://registry.yarnpkg.com/@react-native/virtualized-lists/-/virtualized-lists-0.83.0.tgz#f65f70d9a5fe744aeb3c9ea6b8c21b39cf849716"
@@ -3558,11 +3556,6 @@
   resolved "https://registry.yarnpkg.com/@types/gtag.js/-/gtag.js-0.0.12.tgz#095122edca896689bdfcdd73b057e23064d23572"
   integrity sha512-YQV9bUsemkzG81Ea295/nF/5GijnD2Af7QhEofh7xu+kvCN6RdodgNwwGWXB5GMI3NoyvQo0odNctoH/qLMIpg==
 
-"@types/hammerjs@^2.0.36":
-  version "2.0.46"
-  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.46.tgz#381daaca1360ff8a7c8dff63f32e69745b9fb1e1"
-  integrity sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==
-
 "@types/hast@^2.0.0":
   version "2.3.10"
   resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.10.tgz#5c9d9e0b304bbb8879b857225c5ebab2d81d7643"
@@ -3732,13 +3725,6 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
-"@types/react-test-renderer@^19.1.0":
-  version "19.1.0"
-  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-19.1.0.tgz#1d0af8f2e1b5931e245b8b5b234d1502b854dc10"
-  integrity sha512-XD0WZrHqjNrxA/MaR9O22w/RNidWR9YZmBdRGI7wcnWGrv/3dA8wKCJ8m63Sn+tLJhcjmuhOi629N66W6kgWzQ==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-transition-group@^4.4.12":
   version "4.4.12"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.12.tgz#b5d76568485b02a307238270bfe96cb51ee2a044"
@@ -4241,12 +4227,12 @@ astring@^1.8.0:
   integrity sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==
 
 autoprefixer@^10.4.19, autoprefixer@^10.4.23:
-  version "10.4.27"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.27.tgz#51ea301a5c3c5f8642f8e564759c4f573be486f2"
-  integrity sha512-NP9APE+tO+LuJGn7/9+cohklunJsXWiaWEfV3si4Gi/XHDwVNgkwr1J3RQYFIvPy76GmJ9/bW8vyoU1LcxwKHA==
+  version "10.5.0"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.5.0.tgz#33d87e443430f020a0f85319d6ff1593cb291be9"
+  integrity sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==
   dependencies:
-    browserslist "^4.28.1"
-    caniuse-lite "^1.0.30001774"
+    browserslist "^4.28.2"
+    caniuse-lite "^1.0.30001787"
     fraction.js "^5.3.4"
     picocolors "^1.1.1"
     postcss-value-parser "^4.2.0"
@@ -4992,7 +4978,7 @@ braces@^3.0.3, braces@~3.0.2:
   dependencies:
     fill-range "^7.1.1"
 
-browserslist@^4.0.0, browserslist@^4.23.0, browserslist@^4.24.0, browserslist@^4.28.1:
+browserslist@^4.0.0, browserslist@^4.23.0, browserslist@^4.24.0, browserslist@^4.28.1, browserslist@^4.28.2:
   version "4.28.2"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.28.2.tgz#f50b65362ef48974ca9f50b3680566d786b811d2"
   integrity sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==
@@ -5124,10 +5110,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001774, caniuse-lite@^1.0.30001782:
-  version "1.0.30001787"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001787.tgz#fd25c5e42e2d35df5c75eddda00d15d9c0c68f81"
-  integrity sha512-mNcrMN9KeI68u7muanUpEejSLghOKlVhRqS/Za2IeyGllJ9I9otGpR9g3nsw7n4W378TE/LyIteA0+/FOZm4Kg==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001782, caniuse-lite@^1.0.30001787:
+  version "1.0.30001788"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001788.tgz#31e97d1bfec332b3f2d7eea7781460c97629b3bf"
+  integrity sha512-6q8HFp+lOQtcf7wBK+uEenxymVWkGKkjFpCvw5W25cmMwEDU45p1xQFBQv8JDlMMry7eNxyBaR+qxgmTUZkIRQ==
 
 ccount@^2.0.0:
   version "2.0.1"
@@ -5582,14 +5568,6 @@ cosmiconfig@^8.1.3, cosmiconfig@^8.3.5:
     parse-json "^5.2.0"
     path-type "^4.0.0"
 
-create-react-class@^15.7.0:
-  version "15.7.0"
-  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
-  integrity sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==
-  dependencies:
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 cross-fetch@^3.1.5:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.2.0.tgz#34e9192f53bc757d6614304d9e5e6fb4edb782e3"
@@ -6091,9 +6069,9 @@ ee-first@1.1.1:
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
 electron-to-chromium@^1.5.328:
-  version "1.5.335"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.335.tgz#0b957cea44ef86795c227c616d16b4803d119daa"
-  integrity sha512-q9n5T4BR4Xwa2cwbrwcsDJtHD/enpQ5S1xF1IAtdqf5AAgqDFmR/aakqH3ChFdqd/QXJhS3rnnXFtexU7rax6Q==
+  version "1.5.336"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.336.tgz#d7c25c0827b8c5e2885b2c91ac6cdcf3e5a1386e"
+  integrity sha512-AbH9q9J455r/nLmdNZes0G0ZKcRX73FicwowalLs6ijwOmCJSRRrLX63lcAlzy9ux3dWK1w1+1nsBJEWN11hcQ==
 
 emoji-regex@^10.2.1:
   version "10.6.0"
@@ -6580,11 +6558,6 @@ fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
-fast-loops@^1.1.3:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.4.tgz#61bc77d518c0af5073a638c6d9d5c7683f069ce2"
-  integrity sha512-8dbd3XWoKCTms18ize6JmQF1SFnnfj5s0B7rRry22EofgMu7B6LKHVh+XfFqFGsqnbH54xgeO83PzpKI+ODhlg==
-
 fast-uri@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.1.0.tgz#66eecff6c764c0df9b762e62ca7edcfb53b4edfa"
@@ -7199,10 +7172,10 @@ hermes-estree@0.32.0:
   resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.32.0.tgz#bb7da6613ab8e67e334a1854ea1e209f487d307b"
   integrity sha512-KWn3BqnlDOl97Xe1Yviur6NbgIZ+IP+UVSpshlZWkq+EtoHg6/cwiDj/osP9PCEgFE15KBm1O55JRwbMEm5ejQ==
 
-hermes-estree@0.33.3:
-  version "0.33.3"
-  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.33.3.tgz#6d6b593d4b471119772c82bdb0212dfadabb6f17"
-  integrity sha512-6kzYZHCk8Fy1Uc+t3HGYyJn3OL4aeqKLTyina4UFtWl8I0kSL7OmKThaiX+Uh2f8nGw3mo4Ifxg0M5Zk3/Oeqg==
+hermes-estree@0.35.0:
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.35.0.tgz#767cce0b14a68b4bc06cd5db7efe889f6188c565"
+  integrity sha512-xVx5Opwy8Oo1I5yGpVRhCvWL/iV3M+ylksSKVNlxxD90cpDpR/AR1jLYqK8HWihm065a6UI3HeyAmYzwS8NOOg==
 
 hermes-parser@0.32.0:
   version "0.32.0"
@@ -7211,12 +7184,12 @@ hermes-parser@0.32.0:
   dependencies:
     hermes-estree "0.32.0"
 
-hermes-parser@0.33.3:
-  version "0.33.3"
-  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.33.3.tgz#da50ababb7a5ab636d339e7b2f6e3848e217e09d"
-  integrity sha512-Yg3HgaG4CqgyowtYjX/FsnPAuZdHOqSMtnbpylbptsQ9nwwSKsy6uRWcGO5RK0EqiX12q8HvDWKgeAVajRO5DA==
+hermes-parser@0.35.0:
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.35.0.tgz#7625ec2f34ab897c2a17a7bea9788d136d5fd8c9"
+  integrity sha512-9JLjeHxBx8T4CAsydZR49PNZUaix+WpQJwu9p2010lu+7Kwl6D/7wYFFJxoz+aXkaaClp9Zfg6W6/zVlSJORaA==
   dependencies:
-    hermes-estree "0.33.3"
+    hermes-estree "0.35.0"
 
 hex-rgb@^4.1.0:
   version "4.3.0"
@@ -7235,7 +7208,7 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7522,13 +7495,12 @@ inline-style-parser@0.2.7:
   resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.2.7.tgz#b1fc68bfc0313b8685745e4464e37f9376b9c909"
   integrity sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==
 
-inline-style-prefixer@^6.0.1:
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz#4290ed453ab0e4441583284ad86e41ad88384f44"
-  integrity sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==
+inline-style-prefixer@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz#9310f3cfa2c6f3901d1480f373981c02691781e8"
+  integrity sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==
   dependencies:
     css-in-js-utils "^3.1.0"
-    fast-loops "^1.1.3"
 
 interpret@^3.1.1:
   version "3.1.1"
@@ -8582,6 +8554,11 @@ memoize-one@^5.0.0:
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
 
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
 merge-descriptors@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
@@ -8602,60 +8579,61 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
-metro-babel-transformer@0.83.5:
-  version "0.83.5"
-  resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.83.5.tgz#91f3fa269171ad5189ebba625f1f0aa124ce06ea"
-  integrity sha512-d9FfmgUEVejTiSb7bkQeLRGl6aeno2UpuPm3bo3rCYwxewj03ymvOn8s8vnS4fBqAPQ+cE9iQM40wh7nGXR+eA==
+metro-babel-transformer@0.83.6:
+  version "0.83.6"
+  resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.83.6.tgz#0cf874436382ffe61c7f11ed816da859bb1fcdbd"
+  integrity sha512-1AnuazBpzY3meRMr04WUw14kRBkV0W3Ez+AA75FAeNpRyWNN5S3M3PHLUbZw7IXq7ZeOzceyRsHStaFrnWd+8w==
   dependencies:
     "@babel/core" "^7.25.2"
     flow-enums-runtime "^0.0.6"
-    hermes-parser "0.33.3"
+    hermes-parser "0.35.0"
+    metro-cache-key "0.83.6"
     nullthrows "^1.1.1"
 
-metro-cache-key@0.83.5:
-  version "0.83.5"
-  resolved "https://registry.yarnpkg.com/metro-cache-key/-/metro-cache-key-0.83.5.tgz#96896a1768f0494a375e1d5957b7ad487e508a4c"
-  integrity sha512-Ycl8PBajB7bhbAI7Rt0xEyiF8oJ0RWX8EKkolV1KfCUlC++V/GStMSGpPLwnnBZXZWkCC5edBPzv1Hz1Yi0Euw==
+metro-cache-key@0.83.6:
+  version "0.83.6"
+  resolved "https://registry.yarnpkg.com/metro-cache-key/-/metro-cache-key-0.83.6.tgz#293ccb950b588efafd84dc57dee7a15d6a4a40e2"
+  integrity sha512-5gdK4PVpgNOHi7xCGrgesNP1AuOA2TiPqpcirGXZi4RLLzX1VMowpkgTVtBfpQQCqWoosQF9yrSo9/KDQg1eBg==
   dependencies:
     flow-enums-runtime "^0.0.6"
 
-metro-cache@0.83.5:
-  version "0.83.5"
-  resolved "https://registry.yarnpkg.com/metro-cache/-/metro-cache-0.83.5.tgz#5675f4ad56905aa78fff3dec1b6bf213e0b6c86d"
-  integrity sha512-oH+s4U+IfZyg8J42bne2Skc90rcuESIYf86dYittcdWQtPfcaFXWpByPyTuWk3rR1Zz3Eh5HOrcVImfEhhJLng==
+metro-cache@0.83.6:
+  version "0.83.6"
+  resolved "https://registry.yarnpkg.com/metro-cache/-/metro-cache-0.83.6.tgz#aadaef9bfd87559e4264b2b05c06c597bb2ddae4"
+  integrity sha512-DpvZE32feNkqfZkI4Fic7YI/Kw8QP9wdl1rC4YKPrA77wQbI9vXbxjmfkCT/EGwBTFOPKqvIXo+H3BNe93YyiQ==
   dependencies:
     exponential-backoff "^3.1.1"
     flow-enums-runtime "^0.0.6"
     https-proxy-agent "^7.0.5"
-    metro-core "0.83.5"
+    metro-core "0.83.6"
 
-metro-config@0.83.5, metro-config@^0.83.3:
-  version "0.83.5"
-  resolved "https://registry.yarnpkg.com/metro-config/-/metro-config-0.83.5.tgz#a3dd20fc5d5582aa4ad3704678e52abcf4d46b2b"
-  integrity sha512-JQ/PAASXH7yczgV6OCUSRhZYME+NU8NYjI2RcaG5ga4QfQ3T/XdiLzpSb3awWZYlDCcQb36l4Vl7i0Zw7/Tf9w==
+metro-config@0.83.6, metro-config@^0.83.3:
+  version "0.83.6"
+  resolved "https://registry.yarnpkg.com/metro-config/-/metro-config-0.83.6.tgz#74ddbbb6f34b8103b37140f8de1d34068a4122ef"
+  integrity sha512-G5622400uNtnAMlppEA5zkFAZltEf7DSGhOu09BkisCxOlVMWfdosD/oPyh4f2YVQsc1MBYyp4w6OzbExTYarg==
   dependencies:
     connect "^3.6.5"
     flow-enums-runtime "^0.0.6"
     jest-validate "^29.7.0"
-    metro "0.83.5"
-    metro-cache "0.83.5"
-    metro-core "0.83.5"
-    metro-runtime "0.83.5"
+    metro "0.83.6"
+    metro-cache "0.83.6"
+    metro-core "0.83.6"
+    metro-runtime "0.83.6"
     yaml "^2.6.1"
 
-metro-core@0.83.5, metro-core@^0.83.3:
-  version "0.83.5"
-  resolved "https://registry.yarnpkg.com/metro-core/-/metro-core-0.83.5.tgz#1592033633034feb5d368d22bf18e38052146970"
-  integrity sha512-YcVcLCrf0ed4mdLa82Qob0VxYqfhmlRxUS8+TO4gosZo/gLwSvtdeOjc/Vt0pe/lvMNrBap9LlmvZM8FIsMgJQ==
+metro-core@0.83.6, metro-core@^0.83.3:
+  version "0.83.6"
+  resolved "https://registry.yarnpkg.com/metro-core/-/metro-core-0.83.6.tgz#60fbd0abcc0e313161b94869b3bb0b9622de4acc"
+  integrity sha512-l+yQ2fuIgR//wszUlMrrAa9+Z+kbKazd0QOh0VQY7jC4ghb7yZBBSla/UMYRBZZ6fPg9IM+wD3+h+37a5f9etw==
   dependencies:
     flow-enums-runtime "^0.0.6"
     lodash.throttle "^4.1.1"
-    metro-resolver "0.83.5"
+    metro-resolver "0.83.6"
 
-metro-file-map@0.83.5:
-  version "0.83.5"
-  resolved "https://registry.yarnpkg.com/metro-file-map/-/metro-file-map-0.83.5.tgz#394aa61d54b3822f10e68c18cbd1318f18865d20"
-  integrity sha512-ZEt8s3a1cnYbn40nyCD+CsZdYSlwtFh2kFym4lo+uvfM+UMMH+r/BsrC6rbNClSrt+B7rU9T+Te/sh/NL8ZZKQ==
+metro-file-map@0.83.6:
+  version "0.83.6"
+  resolved "https://registry.yarnpkg.com/metro-file-map/-/metro-file-map-0.83.6.tgz#9f79308e73ffca6340eb7c2ca2a74db9fef822d1"
+  integrity sha512-Jg3oN604C7GWbQwFAUXt8KsbMXeKfsxbZ5HFy4XFM3ggTS+ja9QgUmq9B613kgXv3G4M6rwiI6cvh9TRly4x3w==
   dependencies:
     debug "^4.4.0"
     fb-watchman "^2.0.0"
@@ -8667,10 +8645,10 @@ metro-file-map@0.83.5:
     nullthrows "^1.1.1"
     walker "^1.0.7"
 
-metro-minify-terser@0.83.5:
-  version "0.83.5"
-  resolved "https://registry.yarnpkg.com/metro-minify-terser/-/metro-minify-terser-0.83.5.tgz#ee43a11a9d3442760781434c599d45eb1274e6fd"
-  integrity sha512-Toe4Md1wS1PBqbvB0cFxBzKEVyyuYTUb0sgifAZh/mSvLH84qA1NAWik9sISWatzvfWf3rOGoUoO5E3f193a3Q==
+metro-minify-terser@0.83.6:
+  version "0.83.6"
+  resolved "https://registry.yarnpkg.com/metro-minify-terser/-/metro-minify-terser-0.83.6.tgz#994697c91c0bea86201509d15d8b204b6d210e59"
+  integrity sha512-Vx3/Ne9Q+EIEDLfKzZUOtn/rxSNa/QjlYxc42nvK4Mg8mB6XUgd3LXX5ZZVq7lzQgehgEqLrbgShJPGfeF8PnQ==
   dependencies:
     flow-enums-runtime "^0.0.6"
     terser "^5.15.0"
@@ -8720,52 +8698,52 @@ metro-react-native-babel-preset@0.76.8:
     babel-plugin-transform-flow-enums "^0.0.2"
     react-refresh "^0.4.0"
 
-metro-resolver@0.83.5:
-  version "0.83.5"
-  resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.83.5.tgz#72340ca8071941eafe92ff2dcb8e33c581870ef7"
-  integrity sha512-7p3GtzVUpbAweJeCcUJihJeOQl1bDuimO5ueo1K0BUpUtR41q5EilbQ3klt16UTPPMpA+tISWBtsrqU556mY1A==
+metro-resolver@0.83.6:
+  version "0.83.6"
+  resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.83.6.tgz#4e0a975b76474cd1a51d62ff426ea372e8d7777d"
+  integrity sha512-lAwR/FsT1uJ5iCt4AIsN3boKfJ88aN8bjvDT5FwBS0tKeKw4/sbdSTWlFxc7W/MUTN5RekJ3nQkJRIWsvs28tA==
   dependencies:
     flow-enums-runtime "^0.0.6"
 
-metro-runtime@0.83.5, metro-runtime@^0.83.3:
-  version "0.83.5"
-  resolved "https://registry.yarnpkg.com/metro-runtime/-/metro-runtime-0.83.5.tgz#52c1edafc6cc82e57729cc9c21700ab1e53a1777"
-  integrity sha512-f+b3ue9AWTVlZe2Xrki6TAoFtKIqw30jwfk7GQ1rDUBQaE0ZQ+NkiMEtb9uwH7uAjJ87U7Tdx1Jg1OJqUfEVlA==
+metro-runtime@0.83.6, metro-runtime@^0.83.3:
+  version "0.83.6"
+  resolved "https://registry.yarnpkg.com/metro-runtime/-/metro-runtime-0.83.6.tgz#77eec399263a4be97c2c3938cfd0f84c584821c9"
+  integrity sha512-WQPua1G2VgYbwRn6vSKxOhTX7CFbSf/JdUu6Nd8bZnPXckOf7HQ2y51NXNQHoEsiuawathrkzL8pBhv+zgZFmg==
   dependencies:
     "@babel/runtime" "^7.25.0"
     flow-enums-runtime "^0.0.6"
 
-metro-source-map@0.83.5, metro-source-map@^0.83.3:
-  version "0.83.5"
-  resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.83.5.tgz#384f311f83fa2bf51cbec08d77210aa951bf9ee3"
-  integrity sha512-VT9bb2KO2/4tWY9Z2yeZqTUao7CicKAOps9LUg2aQzsz+04QyuXL3qgf1cLUVRjA/D6G5u1RJAlN1w9VNHtODQ==
+metro-source-map@0.83.6, metro-source-map@^0.83.3:
+  version "0.83.6"
+  resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.83.6.tgz#65465faaf98664e1e5f2719db00c354a4d67697e"
+  integrity sha512-AqJbOMMpeyyM4iNI91pchqDIszzNuuHApEhg6OABqZ+9mjLEqzcIEQ/fboZ7x74fNU5DBd2K36FdUQYPqlGClA==
   dependencies:
     "@babel/traverse" "^7.29.0"
     "@babel/types" "^7.29.0"
     flow-enums-runtime "^0.0.6"
     invariant "^2.2.4"
-    metro-symbolicate "0.83.5"
+    metro-symbolicate "0.83.6"
     nullthrows "^1.1.1"
-    ob1 "0.83.5"
+    ob1 "0.83.6"
     source-map "^0.5.6"
     vlq "^1.0.0"
 
-metro-symbolicate@0.83.5:
-  version "0.83.5"
-  resolved "https://registry.yarnpkg.com/metro-symbolicate/-/metro-symbolicate-0.83.5.tgz#62167db423be6c68b4b9f39935c9cb7330cc9526"
-  integrity sha512-EMIkrjNRz/hF+p0RDdxoE60+dkaTLPN3vaaGkFmX5lvFdO6HPfHA/Ywznzkev+za0VhPQ5KSdz49/MALBRteHA==
+metro-symbolicate@0.83.6:
+  version "0.83.6"
+  resolved "https://registry.yarnpkg.com/metro-symbolicate/-/metro-symbolicate-0.83.6.tgz#8c16c187ac92cd4dc7e381ec7a482b110484ba18"
+  integrity sha512-4nvkmv9T7ozhprlPwk/+xm0SVPsxly5kYyMHdNaOlFemFz4df9BanvD46Ac6OISu/4Idinzfk2KVb++6OfzPAQ==
   dependencies:
     flow-enums-runtime "^0.0.6"
     invariant "^2.2.4"
-    metro-source-map "0.83.5"
+    metro-source-map "0.83.6"
     nullthrows "^1.1.1"
     source-map "^0.5.6"
     vlq "^1.0.0"
 
-metro-transform-plugins@0.83.5:
-  version "0.83.5"
-  resolved "https://registry.yarnpkg.com/metro-transform-plugins/-/metro-transform-plugins-0.83.5.tgz#ba21c6a5fa9bf6c5c2c222e2c8e7a668ffb3d341"
-  integrity sha512-KxYKzZL+lt3Os5H2nx7YkbkWVduLZL5kPrE/Yq+Prm/DE1VLhpfnO6HtPs8vimYFKOa58ncl60GpoX0h7Wm0Vw==
+metro-transform-plugins@0.83.6:
+  version "0.83.6"
+  resolved "https://registry.yarnpkg.com/metro-transform-plugins/-/metro-transform-plugins-0.83.6.tgz#ce7a3d835fde900198dd311b3c40b9e50f64c8c6"
+  integrity sha512-V+zoY2Ul0v0BW6IokJkTud3raXmDdbdwkUQ/5eiSoy0jKuKMhrDjdH+H5buCS5iiJdNbykOn69Eip+Sqymkodg==
   dependencies:
     "@babel/core" "^7.25.2"
     "@babel/generator" "^7.29.1"
@@ -8774,29 +8752,29 @@ metro-transform-plugins@0.83.5:
     flow-enums-runtime "^0.0.6"
     nullthrows "^1.1.1"
 
-metro-transform-worker@0.83.5:
-  version "0.83.5"
-  resolved "https://registry.yarnpkg.com/metro-transform-worker/-/metro-transform-worker-0.83.5.tgz#8616b54282e727027fdb5c475aade719394a8e8a"
-  integrity sha512-8N4pjkNXc6ytlP9oAM6MwqkvUepNSW39LKYl9NjUMpRDazBQ7oBpQDc8Sz4aI8jnH6AGhF7s1m/ayxkN1t04yA==
+metro-transform-worker@0.83.6:
+  version "0.83.6"
+  resolved "https://registry.yarnpkg.com/metro-transform-worker/-/metro-transform-worker-0.83.6.tgz#4428abd954c2661658633dd613fb5a733cde338d"
+  integrity sha512-G5kDJ/P0ZTIf57t3iyAd5qIXbj2Wb1j7WtIDh82uTFQHe2Mq2SO9aXG9j1wI+kxZlIe58Z22XEXIKMl89z0ibQ==
   dependencies:
     "@babel/core" "^7.25.2"
     "@babel/generator" "^7.29.1"
     "@babel/parser" "^7.29.0"
     "@babel/types" "^7.29.0"
     flow-enums-runtime "^0.0.6"
-    metro "0.83.5"
-    metro-babel-transformer "0.83.5"
-    metro-cache "0.83.5"
-    metro-cache-key "0.83.5"
-    metro-minify-terser "0.83.5"
-    metro-source-map "0.83.5"
-    metro-transform-plugins "0.83.5"
+    metro "0.83.6"
+    metro-babel-transformer "0.83.6"
+    metro-cache "0.83.6"
+    metro-cache-key "0.83.6"
+    metro-minify-terser "0.83.6"
+    metro-source-map "0.83.6"
+    metro-transform-plugins "0.83.6"
     nullthrows "^1.1.1"
 
-metro@0.83.5, metro@^0.83.3:
-  version "0.83.5"
-  resolved "https://registry.yarnpkg.com/metro/-/metro-0.83.5.tgz#f5441075d5211c980ac8c79109e9e6fa2df68924"
-  integrity sha512-BgsXevY1MBac/3ZYv/RfNFf/4iuW9X7f4H8ZNkiH+r667HD9sVujxcmu4jvEzGCAm4/WyKdZCuyhAcyhTHOucQ==
+metro@0.83.6, metro@^0.83.3:
+  version "0.83.6"
+  resolved "https://registry.yarnpkg.com/metro/-/metro-0.83.6.tgz#1b42929143729d854c25a40f0568f955ba70895e"
+  integrity sha512-pbdndsAZ2F/ceopDdhVbttpa/hfLzXPJ/husc+QvQ33R0D9UXJKzTn5+OzOXx4bpQNtAKF2bY88cCI3Zl44xDQ==
   dependencies:
     "@babel/code-frame" "^7.29.0"
     "@babel/core" "^7.25.2"
@@ -8813,24 +8791,24 @@ metro@0.83.5, metro@^0.83.3:
     error-stack-parser "^2.0.6"
     flow-enums-runtime "^0.0.6"
     graceful-fs "^4.2.4"
-    hermes-parser "0.33.3"
+    hermes-parser "0.35.0"
     image-size "^1.0.2"
     invariant "^2.2.4"
     jest-worker "^29.7.0"
     jsc-safe-url "^0.2.2"
     lodash.throttle "^4.1.1"
-    metro-babel-transformer "0.83.5"
-    metro-cache "0.83.5"
-    metro-cache-key "0.83.5"
-    metro-config "0.83.5"
-    metro-core "0.83.5"
-    metro-file-map "0.83.5"
-    metro-resolver "0.83.5"
-    metro-runtime "0.83.5"
-    metro-source-map "0.83.5"
-    metro-symbolicate "0.83.5"
-    metro-transform-plugins "0.83.5"
-    metro-transform-worker "0.83.5"
+    metro-babel-transformer "0.83.6"
+    metro-cache "0.83.6"
+    metro-cache-key "0.83.6"
+    metro-config "0.83.6"
+    metro-core "0.83.6"
+    metro-file-map "0.83.6"
+    metro-resolver "0.83.6"
+    metro-runtime "0.83.6"
+    metro-source-map "0.83.6"
+    metro-symbolicate "0.83.6"
+    metro-transform-plugins "0.83.6"
+    metro-transform-worker "0.83.6"
     mime-types "^3.0.1"
     nullthrows "^1.1.1"
     serialize-error "^2.1.0"
@@ -9752,11 +9730,6 @@ nopt@^7.0.0:
   dependencies:
     abbrev "^2.0.0"
 
-normalize-css-color@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/normalize-css-color/-/normalize-css-color-1.0.2.tgz#02991e97cccec6623fe573afbbf0de6a1f3e9f8d"
-  integrity sha512-jPJ/V7Cp1UytdidsPqviKEElFQJs22hUUgK5BOPHTwOonNCk7/2qOxhhqzEajmFrWJowADFfOFh1V+aWkRfy+w==
-
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -9804,10 +9777,10 @@ nullthrows@^1.1.1:
   resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
   integrity sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==
 
-ob1@0.83.5:
-  version "0.83.5"
-  resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.83.5.tgz#f9c289d759142b76577948eea7fd1f07d36f825f"
-  integrity sha512-vNKPYC8L5ycVANANpF/S+WZHpfnRWKx/F3AYP4QMn6ZJTh+l2HOrId0clNkEmua58NB9vmI9Qh7YOoV/4folYg==
+ob1@0.83.6:
+  version "0.83.6"
+  resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.83.6.tgz#7506c02651efe4c6d3ab19884fe3d91a56fca555"
+  integrity sha512-m/xZYkwcjo6UqLMrUICEB3iHk7Bjt3RSR7KXMi6Y1MO/kGkPhoRmfUDF6KAan3rLAZ7ABRqnQyKUTwaqZgUV4w==
   dependencies:
     flow-enums-runtime "^0.0.6"
 
@@ -11084,56 +11057,56 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@types/react" "*"
 
-react-native-gesture-handler@^2.24.0:
-  version "2.31.1"
-  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.31.1.tgz#0881209146ad272350f86277eccf189e5b44353f"
-  integrity sha512-wQDlECdEzHhYKTnQXFnSqWUtJ5TS3MGQi7EWvQczTnEVKfk6XVSBecnpWAoI/CqlYQ7IWMJEyutY6BxwEBoxeg==
+react-native-gesture-handler@3.0.0-beta.2:
+  version "3.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-3.0.0-beta.2.tgz#aa92e7bda4e437d2ec032d467828099bf4e38152"
+  integrity sha512-naMQknkhjjpDhouEE62qbH6sKTTs2+B1Or01QcpAaF+TAk7PSb6bxcsv4zBiLhoqY0iwH4No6Ib4W3nbdFPtEw==
   dependencies:
-    "@egjs/hammerjs" "^2.0.17"
-    "@types/react-test-renderer" "^19.1.0"
-    hoist-non-react-statics "^3.3.0"
     invariant "^2.2.4"
 
-react-native-is-edge-to-edge@1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.1.6.tgz#69ec13f70d76e9245e275eed4140d0873a78f902"
-  integrity sha512-1pHnFTlBahins6UAajXUqeCOHew9l9C2C8tErnpGC3IyLJzvxD+TpYAixnCbrVS52f7+NvMttbiSI290XfwN0w==
-
-react-native-reanimated@4.0.0-nightly-20250325-d67e51599:
-  version "4.0.0-nightly-20250325-d67e51599"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-4.0.0-nightly-20250325-d67e51599.tgz#12f654bb39ed4ad74a79da4d1b406f6c56fb8f4d"
-  integrity sha512-2tY4E9E+PK2B+C5t1wmE8RffeBcwMYjzRPkRKz8veFZQ5Jy872VbgzyBkbtpnxPg2q6K1V6bfxwLGXFQ7l4oXw==
-  dependencies:
-    "@babel/plugin-transform-arrow-functions" "^7.0.0-0"
-    "@babel/plugin-transform-class-properties" "^7.0.0-0"
-    "@babel/plugin-transform-classes" "^7.0.0-0"
-    "@babel/plugin-transform-nullish-coalescing-operator" "^7.0.0-0"
-    "@babel/plugin-transform-optional-chaining" "^7.0.0-0"
-    "@babel/plugin-transform-shorthand-properties" "^7.0.0-0"
-    "@babel/plugin-transform-template-literals" "^7.0.0-0"
-    "@babel/plugin-transform-unicode-regex" "^7.0.0-0"
-    "@babel/preset-typescript" "^7.16.7"
-    convert-source-map "^2.0.0"
-    invariant "^2.2.4"
-    react-native-is-edge-to-edge "1.1.6"
+react-native-is-edge-to-edge@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.3.1.tgz#feb9a6a8faf0874298947edd556e5af22044e139"
+  integrity sha512-NIXU/iT5+ORyCc7p0z2nnlkouYKX425vuU1OEm6bMMtWWR9yvb+Xg5AZmImTKoF9abxCPqrKC3rOZsKzUYgYZA==
 
-react-native-web@^0.18.12:
-  version "0.18.12"
-  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.18.12.tgz#d4bb3a783ece2514ba0508d7805b09c0a98f5a8e"
-  integrity sha512-fboP7yqobJ8InSr4fP+bQ3scOtSQtUoPcR+HWasH8b/fk/RO+mWcJs/8n+lewy9WTZc2D68ha7VwRDviUshEWA==
+react-native-reanimated@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-4.3.0.tgz#e5284cebb85bed12d672134b39d0a1370460ae50"
+  integrity sha512-HOTTPdKtddXTOsmQxDASXEwLS3lqEHrKERD3XOgzSqWJ7L3x81Pnx7mTcKx1FKdkgomMug/XSmm1C6Z7GIowxA==
+  dependencies:
+    react-native-is-edge-to-edge "^1.3.1"
+    semver "^7.7.3"
+
+react-native-web@0.21.2:
+  version "0.21.2"
+  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.21.2.tgz#0f6983dfea600d9cc1c66fda87ff9ca585eaa647"
+  integrity sha512-SO2t9/17zM4iEnFvlu2DA9jqNbzNhoUP+AItkoCOyFmDMOhUnBBznBDCYN92fGdfAkfQlWzPoez6+zLxFNsZEg==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    create-react-class "^15.7.0"
+    "@react-native/normalize-colors" "^0.74.1"
     fbjs "^3.0.4"
-    inline-style-prefixer "^6.0.1"
-    normalize-css-color "^1.0.2"
+    inline-style-prefixer "^7.0.1"
+    memoize-one "^6.0.0"
+    nullthrows "^1.1.1"
     postcss-value-parser "^4.2.0"
-    styleq "^0.1.2"
+    styleq "^0.1.3"
 
-react-native-worklets@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/react-native-worklets/-/react-native-worklets-0.1.0.tgz#bb39986ce2e5228d37dd1acd79d330b6d56f55bb"
-  integrity sha512-+SlJfWlclW8T2W9l5q9EuDhurHk6OKc3892yQNrNgeJr7vBEYdHEpjyHsQR4nnpfSt13nzB5OZrL4OAD1sQnWw==
+react-native-worklets@0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/react-native-worklets/-/react-native-worklets-0.8.1.tgz#bc7744eea950dc1ebdea6429f55aada2422d9862"
+  integrity sha512-oWP/lStsAHU6oYCaWDXrda/wOHVdhusQJz1e6x9gPnXdFf4ndNDAOtWCmk2zGrAnlapfyA3rM6PCQq94mPg9cw==
+  dependencies:
+    "@babel/plugin-transform-arrow-functions" "^7.27.1"
+    "@babel/plugin-transform-class-properties" "^7.27.1"
+    "@babel/plugin-transform-classes" "^7.28.4"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.27.1"
+    "@babel/plugin-transform-optional-chaining" "^7.27.1"
+    "@babel/plugin-transform-shorthand-properties" "^7.27.1"
+    "@babel/plugin-transform-template-literals" "^7.27.1"
+    "@babel/plugin-transform-unicode-regex" "^7.27.1"
+    "@babel/preset-typescript" "^7.27.1"
+    convert-source-map "^2.0.0"
+    semver "^7.7.3"
 
 react-native@0.83.0:
   version "0.83.0"
@@ -11775,7 +11748,7 @@ semver@^6.3.0, semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.1.3, semver@^7.3.5, semver@^7.3.7, semver@^7.5.4:
+semver@^7.1.3, semver@^7.3.5, semver@^7.3.7, semver@^7.5.4, semver@^7.7.3:
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.4.tgz#28464e36060e991fa7a11d0279d2d3f3b57a7e8a"
   integrity sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==
@@ -12252,7 +12225,7 @@ stylehacks@^6.1.1:
     browserslist "^4.23.0"
     postcss-selector-parser "^6.0.16"
 
-styleq@^0.1.2:
+styleq@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/styleq/-/styleq-0.1.3.tgz#8efb2892debd51ce7b31dc09c227ad920decab71"
   integrity sha512-3ZUifmCDCQanjeej1f6kyl/BeP/Vae5EYkQ9iJfUm/QwZvlgnZzyflqAsAWYURdtea8Vkvswu2GrC57h3qffcA==

From f2017886d5360fe3d2ee6fe5bbb7706d5afcbd00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Kie=C5=82b?=
 <mateuszkielb@Mateusz-Kiebs-MacBook-Pro.local>
Date: Tue, 14 Apr 2026 13:34:11 +0200
Subject: [PATCH 02/15] removed videos and migarted examples in all gesture
 pages

---
 .../docs/gestures/use-fling-gesture.mdx       | 15 +--------------
 .../docs/gestures/use-hover-gesture.mdx       | 15 +--------------
 .../docs/gestures/use-long-press-gesture.mdx  | 15 +--------------
 .../docs/gestures/use-pinch-gesture.mdx       | 15 +--------------
 .../docs/gestures/use-rotation-gesture.mdx    | 15 +--------------
 .../docs/gestures/use-tap-gesture.mdx         | 11 -----------
 .../static/examples/FlingGestureBasic.js      | 15 ++++++++-------
 .../static/examples/FlingGestureBasicSrc.js   | 17 +++++++++--------
 .../static/examples/HoverGestureBasic.js      | 17 +++++++++--------
 .../static/examples/LongPressGestureBasic.js  | 17 +++++++++--------
 .../static/examples/PinchGestureBasic.js      | 19 ++++++++++---------
 .../static/examples/PinchGestureBasicSrc.js   | 15 ++++++++-------
 .../static/examples/RotationGestureBasic.js   | 19 ++++++++++---------
 .../examples/RotationGestureBasicSrc.js       | 13 +++++++------
 .../static/examples/TapGestureBasic.js        | 17 ++++++++++-------
 15 files changed, 85 insertions(+), 150 deletions(-)

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 55a9b2a7de..7c5b496593 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx
@@ -5,9 +5,7 @@ sidebar_label: Fling gesture
 sidebar_position: 6
 ---
 
-import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import { webContainer } from '@site/src/utils/getGestureStyles';
 
 import FlingGestureBasic from '@site/static/examples/FlingGestureBasic';
 import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc';
@@ -16,11 +14,6 @@ import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestur
 import MouseButtonProp from './\_shared/mouse-button.mdx';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/fling.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<FlingGestureBasic/>}
     src={FlingGestureBasicSrc}
@@ -37,12 +30,6 @@ The gesture that tracks quick, sufficiently long movement in specified [directio
 When the gesture gets activated it will end when the finger is released.
 The gesture will fail if the finger is lifted before the gesture could activate.
 
-  <div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/fling.mp4")} type="video/mp4"/>
-    </video>
-  </div>
-
 ## Example
 
 <CollapsibleCode
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 f9e8a44bbb..8e85bd6178 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx
@@ -5,19 +5,12 @@ sidebar_label: Hover gesture
 sidebar_position: 7
 ---
 
-import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import { webContainer } from '@site/src/utils/getGestureStyles';
 
 import HoverGestureBasic from '@site/static/examples/HoverGestureBasic';
 import HoverGestureBasicSrc from '!!raw-loader!@site/static/examples/HoverGestureBasic';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/hover.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<HoverGestureBasic/>}
     src={HoverGestureBasicSrc}
@@ -35,12 +28,6 @@ Gesture that can recognize hovering above the view it's attached to. The hover e
 
 On iOS additional [visual effects](#effect-ios-only) may be configured.
 
-  <div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/hover.mp4")} type="video/mp4"/>
-    </video>
-  </div>
-
 :::note
 Don't rely on `Hover` gesture to continue after the mouse button is clicked or the stylus touches the screen. If you want to handle both cases, [compose](/docs/fundamentals/gesture-composition) it with [`Pan`](/docs/gestures/use-pan-gesture) gesture.
 :::
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 f113e3cd11..1549c05c20 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
@@ -5,9 +5,7 @@ sidebar_label: Long press gesture
 sidebar_position: 3
 ---
 
-import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import { webContainer } from '@site/src/utils/getGestureStyles';
 
 import LongPressGestureBasic from '@site/static/examples/LongPressGestureBasic';
 import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPressGestureBasic';
@@ -15,11 +13,6 @@ import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPre
 import MouseButtonProp from './\_shared/mouse-button.mdx';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/longpress.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<LongPressGestureBasic/>}
     src={LongPressGestureBasicSrc}
@@ -38,12 +31,6 @@ Gesture that activates when the corresponding view is pressed for a sufficiently
 This gesture will deactivate immediately after the finger is released.
 The gesture will fail to recognize a touch event if the finger is lifted before the [minimum required time](#minduration) or if the finger is moved further than the [allowable distance](#maxdistance).
 
-<div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/longpress.mp4")} type="video/mp4"/>
-    </video>
-</div>
-
 ## Example
 
 <CollapsibleCode
diff --git a/packages/docs-gesture-handler/docs/gestures/use-pinch-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-pinch-gesture.mdx
index 1f2d24f463..90a0388aa2 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-pinch-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-pinch-gesture.mdx
@@ -5,19 +5,12 @@ sidebar_label: Pinch gesture
 sidebar_position: 5
 ---
 
-import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import { webContainer } from '@site/src/utils/getGestureStyles';
 
 import PinchGestureBasic from '@site/static/examples/PinchGestureBasic';
 import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasicSrc';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/pinch.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<PinchGestureBasic/>}
     src={PinchGestureBasicSrc}
@@ -45,12 +38,6 @@ For example, map views use pinch gestures to change the zoom level of the map.
 When implementing pinch based on focal point, make sure to use it after the gesture had activated, i.e. in `onActivate` or `onUpdate` callbacks. Using it in `onBegin` may lead to unexpected behavior.
 :::
 
-  <div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/pinch.mp4")} type="video/mp4"/>
-    </video>
-  </div>
-
 ## Example
 
 <CollapsibleCode
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 6e58182ce7..1112279d01 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-rotation-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-rotation-gesture.mdx
@@ -5,19 +5,12 @@ sidebar_label: Rotation gesture
 sidebar_position: 4
 ---
 
-import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import { webContainer } from '@site/src/utils/getGestureStyles';
 
 import RotationGestureBasic from '@site/static/examples/RotationGestureBasic';
 import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasicSrc';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/rotation.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<RotationGestureBasic/>}
     src={RotationGestureBasicSrc}
@@ -42,12 +35,6 @@ The gesture activates when fingers are placed on the screen and rotate around a
 When implementing rotation based on `anchor` point, make sure to use it after the gesture had activated, i.e. in `onActivate` or `onUpdate` callbacks. Using it in `onBegin` may lead to unexpected behavior.
 :::
 
-  <div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/rotation.mp4")} type="video/mp4"/>
-    </video>
-  </div>
-
 ## Example
 
 <CollapsibleCode
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 cb1c9850da..755a7f6f06 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx
@@ -15,11 +15,6 @@ import TapGestureBasicSrc from '!!raw-loader!@site/static/examples/TapGestureBas
 import MouseButtonProp from './\_shared/mouse-button.mdx';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/tap.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<TapGestureBasic/>}
     src={TapGestureBasicSrc}
@@ -41,12 +36,6 @@ For example, you might configure tap gesture recognizers to detect single taps,
 
 In order for a gesture to activate, the specified gesture requirements such as [`minPointers`](#minpointers), [`numberOfTaps`](#numberoftaps), [`maxDistance`](#maxdistance), [`maxDuration`](#maxduration), and [`maxDelay`](#maxdelay) must be met.
 
-  <div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/tap.mp4")} type="video/mp4"/>
-    </video>
-  </div>
-
 ## Example
 
 <CollapsibleCode
diff --git a/packages/docs-gesture-handler/static/examples/FlingGestureBasic.js b/packages/docs-gesture-handler/static/examples/FlingGestureBasic.js
index 333b681aae..3fd165914c 100644
--- a/packages/docs-gesture-handler/static/examples/FlingGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/FlingGestureBasic.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import {
   Directions,
-  Gesture,
   GestureDetector,
   GestureHandlerRootView,
+  useFlingGesture,
 } from 'react-native-gesture-handler';
 import { StyleSheet, View } from 'react-native';
 import Animated, {
@@ -49,12 +49,12 @@ export default function App() {
     };
   }, []);
 
-  const fling = Gesture.Fling()
-    .direction(Directions.LEFT | Directions.RIGHT)
-    .onBegin((event) => {
+  const fling = useFlingGesture({
+    direction: Directions.LEFT | Directions.RIGHT,
+    onBegin: (event) => {
       startTranslateX.value = event.x;
-    })
-    .onStart((event) => {
+    },
+    onActivate: (event) => {
       translateX.value = withTiming(
         clamp(
           translateX.value + event.x - startTranslateX.value,
@@ -63,7 +63,8 @@ export default function App() {
         ),
         { duration: 200 }
       );
-    });
+    },
+  });
 
   const boxAnimatedStyles = useAnimatedStyle(() => ({
     transform: [{ translateX: translateX.value }],
diff --git a/packages/docs-gesture-handler/static/examples/FlingGestureBasicSrc.js b/packages/docs-gesture-handler/static/examples/FlingGestureBasicSrc.js
index 19bda17850..649ff7fc67 100644
--- a/packages/docs-gesture-handler/static/examples/FlingGestureBasicSrc.js
+++ b/packages/docs-gesture-handler/static/examples/FlingGestureBasicSrc.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import {
   Directions,
-  Gesture,
   GestureDetector,
   GestureHandlerRootView,
+  useFlingGesture,
 } from 'react-native-gesture-handler';
 import { Dimensions, StyleSheet } from 'react-native';
 import Animated, {
@@ -22,12 +22,12 @@ export default function App() {
   const translateX = useSharedValue(0);
   const startTranslateX = useSharedValue(0);
 
-  const fling = Gesture.Fling()
-    .direction(Directions.LEFT | Directions.RIGHT)
-    .onBegin((event) => {
+  const fling = useFlingGesture({
+    direction: Directions.LEFT | Directions.RIGHT,
+    onBegin: (event) => {
       startTranslateX.value = event.x;
-    })
-    .onStart((event) => {
+    },
+    onActivate: (event) => {
       translateX.value = withTiming(
         clamp(
           translateX.value + event.x - startTranslateX.value,
@@ -36,8 +36,9 @@ export default function App() {
         ),
         { duration: 200 }
       );
-    })
-    .runOnJS(true);
+    },
+    runOnJS: true,
+  });
 
   const boxAnimatedStyles = useAnimatedStyle(() => ({
     transform: [{ translateX: translateX.value }],
diff --git a/packages/docs-gesture-handler/static/examples/HoverGestureBasic.js b/packages/docs-gesture-handler/static/examples/HoverGestureBasic.js
index 3f7b110161..1f16fd61cc 100644
--- a/packages/docs-gesture-handler/static/examples/HoverGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/HoverGestureBasic.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import {
-  Gesture,
   GestureDetector,
   GestureHandlerRootView,
+  useHoverGesture,
 } from 'react-native-gesture-handler';
 import { StyleSheet } from 'react-native';
 import Animated, {
@@ -24,20 +24,20 @@ export default function App() {
   const startX = useSharedValue(0);
   const startY = useSharedValue(0);
 
-  const hover = Gesture.Hover()
-    .onStart((event) => {
+  const hover = useHoverGesture({
+    onActivate: (event) => {
       startX.value = event.x;
       startY.value = event.y;
-    })
-    .onUpdate((event) => {
+    },
+    onUpdate: (event) => {
       translateX.value = (event.x - startX.value) * 0.3;
       translateY.value = (event.y - startY.value) * 0.3;
 
       const distance = Math.sqrt(Math.pow(translateX.value, 2) + Math.pow(translateY.value, 2));
 
       progress.value = distance / 35;
-    })
-    .onEnd(() => {
+    },
+    onDeactivate: () => {
       translateX.value = withTiming(0, {
         duration: 400,
         easing: EASING,
@@ -50,7 +50,8 @@ export default function App() {
         duration: 400,
         easing: EASING,
       });
-    });
+    },
+  });
 
   const boxAnimatedStyle = useAnimatedStyle(() => ({
     transform: [
diff --git a/packages/docs-gesture-handler/static/examples/LongPressGestureBasic.js b/packages/docs-gesture-handler/static/examples/LongPressGestureBasic.js
index 6df3275205..07955a6d38 100644
--- a/packages/docs-gesture-handler/static/examples/LongPressGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/LongPressGestureBasic.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import {
-  Gesture,
   GestureDetector,
   GestureHandlerRootView,
+  useLongPressGesture,
 } from 'react-native-gesture-handler';
 import { Easing, StyleSheet } from 'react-native';
 import Animated, {
@@ -18,14 +18,14 @@ export default function App() {
   const colorIndex = useSharedValue(0);
   const scale = useSharedValue(1);
 
-  const longPress = Gesture.LongPress()
-    .onBegin(() => {
+  const longPress = useLongPressGesture({
+    onBegin: () => {
       scale.value = withTiming(1.2, {
         duration: 500,
         easing: Easing.bezier(0.31, 0.04, 0.03, 1.04),
       });
-    })
-    .onStart(() => {
+    },
+    onActivate: () => {
       colorIndex.value = withTiming(
         (colorIndex.value + 1) % (COLORS.length + 1),
         { duration: 200 },
@@ -35,13 +35,14 @@ export default function App() {
           }
         }
       );
-    })
-    .onFinalize(() => {
+    },
+    onFinalize: () => {
       scale.value = withTiming(1, {
         duration: 250,
         easing: Easing.bezier(0.82, 0.06, 0.42, 1.01),
       });
-    });
+    },
+  });
 
   const animatedStyle = useAnimatedStyle(() => ({
     backgroundColor: interpolateColor(
diff --git a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
index 8b87072dff..f648cef7e8 100644
--- a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import {
-  Gesture,
   GestureDetector,
   GestureHandlerRootView,
+  usePanGesture,
 } from 'react-native-gesture-handler';
 import { StyleSheet, View } from 'react-native';
 import Animated, {
@@ -68,17 +68,17 @@ export default function App() {
     };
   }, []);
 
-  const pan = Gesture.Pan()
-    .minDistance(1)
-    .onStart((event) => {
+  const pan = usePanGesture({
+    minDistance: 1,
+    onActivate: (event) => {
       const distanceX = Math.abs(event.absoluteX - centerX.value);
       const distanceY = Math.abs(event.absoluteY - centerY.value);
       const width = Math.max(distanceX, distanceY) * 2;
       distanceDifference.value = boxWidth.value - width;
 
       touchOpacity.value = withTiming(0.4, { duration: 200 });
-    })
-    .onUpdate((event) => {
+    },
+    onUpdate: (event) => {
       const distanceX = Math.abs(event.absoluteX - centerX.value);
       const distanceY = Math.abs(event.absoluteY - centerY.value);
       boxWidth.value = clamp(
@@ -91,10 +91,11 @@ export default function App() {
       pointerPositionY.value = event.absoluteY - centerY.value - 12;
       negativePointerPositionX.value = centerX.value - event.absoluteX - 12;
       negativePointerPositionY.value = centerY.value - event.absoluteY - 12;
-    })
-    .onEnd(() => {
+    },
+    onDeactivate: () => {
       touchOpacity.value = withTiming(0, { duration: 200 });
-    });
+    },
+  });
 
   const boxAnimatedStyles = useAnimatedStyle(() => ({
     width: boxWidth.value,
diff --git a/packages/docs-gesture-handler/static/examples/PinchGestureBasicSrc.js b/packages/docs-gesture-handler/static/examples/PinchGestureBasicSrc.js
index 34a94a8a2a..a21ac0d6ee 100644
--- a/packages/docs-gesture-handler/static/examples/PinchGestureBasicSrc.js
+++ b/packages/docs-gesture-handler/static/examples/PinchGestureBasicSrc.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Dimensions, StyleSheet } from 'react-native';
 import {
-  Gesture,
   GestureDetector,
   GestureHandlerRootView,
+  usePinchGesture,
 } from 'react-native-gesture-handler';
 import Animated, {
   useSharedValue,
@@ -20,18 +20,19 @@ export default function App() {
   const scale = useSharedValue(1);
   const startScale = useSharedValue(0);
 
-  const pinch = Gesture.Pinch()
-    .onStart(() => {
+  const pinch = usePinchGesture({
+    onActivate: () => {
       startScale.value = scale.value;
-    })
-    .onUpdate((event) => {
+    },
+    onUpdate: (event) => {
       scale.value = clamp(
         startScale.value * event.scale,
         0.5,
         Math.min(width / 100, height / 100)
       );
-    })
-    .runOnJS(true);
+    },
+    runOnJS: true,
+  });
 
   const boxAnimatedStyles = useAnimatedStyle(() => ({
     transform: [{ scale: scale.value }],
diff --git a/packages/docs-gesture-handler/static/examples/RotationGestureBasic.js b/packages/docs-gesture-handler/static/examples/RotationGestureBasic.js
index 8f0bc9370b..9183a84162 100644
--- a/packages/docs-gesture-handler/static/examples/RotationGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/RotationGestureBasic.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import {
-  Gesture,
   GestureDetector,
   GestureHandlerRootView,
+  usePanGesture,
 } from 'react-native-gesture-handler';
 import { StyleSheet } from 'react-native';
 import Animated, {
@@ -48,9 +48,9 @@ export default function App() {
     };
   }, []);
 
-  const pan = Gesture.Pan()
-    .minDistance(1)
-    .onBegin((event) => {
+  const pan = usePanGesture({
+    minDistance: 1,
+    onBegin: (event) => {
       startAngle.value =
         angle.value -
         Math.atan2(
@@ -64,8 +64,8 @@ export default function App() {
       pointerPositionY.value = event.absoluteY - centerY.value - 12;
       negativePointerPositionX.value = centerX.value - event.absoluteX - 12;
       negativePointerPositionY.value = centerY.value - event.absoluteY - 12;
-    })
-    .onUpdate((event) => {
+    },
+    onUpdate: (event) => {
       angle.value =
         startAngle.value +
         Math.atan2(
@@ -76,11 +76,12 @@ export default function App() {
       pointerPositionY.value = event.absoluteY - centerY.value - 12;
       negativePointerPositionX.value = centerX.value - event.absoluteX - 12;
       negativePointerPositionY.value = centerY.value - event.absoluteY - 12;
-    })
-    .onFinalize(() => {
+    },
+    onFinalize: () => {
       touchOpacity.value = withTiming(0, { duration: 200 });
       grabbing.value = false;
-    });
+    },
+  });
 
   const boxAnimatedStyles = useAnimatedStyle(() => ({
     transform: [{ rotate: `${angle.value}rad` }],
diff --git a/packages/docs-gesture-handler/static/examples/RotationGestureBasicSrc.js b/packages/docs-gesture-handler/static/examples/RotationGestureBasicSrc.js
index 85dbdd9c78..9d621bbcac 100644
--- a/packages/docs-gesture-handler/static/examples/RotationGestureBasicSrc.js
+++ b/packages/docs-gesture-handler/static/examples/RotationGestureBasicSrc.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import {
-  Gesture,
   GestureDetector,
   GestureHandlerRootView,
+  useRotationGesture,
 } from 'react-native-gesture-handler';
 import Animated, {
   useSharedValue,
@@ -14,13 +14,14 @@ export default function App() {
   const angle = useSharedValue(0);
   const startAngle = useSharedValue(0);
 
-  const rotation = Gesture.Rotation()
-    .onStart(() => {
+  const rotation = useRotationGesture({
+    onActivate: () => {
       startAngle.value = angle.value;
-    })
-    .onUpdate((event) => {
+    },
+    onUpdate: (event) => {
       angle.value = startAngle.value + event.rotation;
-    });
+    },
+  });
 
   const boxAnimatedStyles = useAnimatedStyle(() => ({
     transform: [{ rotate: `${angle.value}rad` }],
diff --git a/packages/docs-gesture-handler/static/examples/TapGestureBasic.js b/packages/docs-gesture-handler/static/examples/TapGestureBasic.js
index 96f6657af5..3f5d346d51 100644
--- a/packages/docs-gesture-handler/static/examples/TapGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/TapGestureBasic.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import {
-  Gesture,
   GestureDetector,
   GestureHandlerRootView,
+  useTapGesture,
 } from 'react-native-gesture-handler';
 import Animated, {
   interpolateColor,
@@ -17,13 +17,16 @@ const COLORS = ['#b58df1', '#fa7f7c', '#ffe780', '#82cab2'];
 export default function App() {
   const colorIndex = useSharedValue(1);
 
-  const tap = Gesture.Tap().onEnd(() => {
-    if (colorIndex.value > COLORS.length) {
-      colorIndex.value = colorIndex.value % 1 === 0 ? 1 : colorIndex.value % 1;
-    }
+  const tap = useTapGesture({
+    onActivate: () => {
+      if (colorIndex.value > COLORS.length) {
+        colorIndex.value =
+          colorIndex.value % 1 === 0 ? 1 : colorIndex.value % 1;
+      }
 
-    const nextIndex = Math.ceil(colorIndex.value + 1);
-    colorIndex.value = withTiming(nextIndex, { duration: 250 });
+      const nextIndex = Math.ceil(colorIndex.value + 1);
+      colorIndex.value = withTiming(nextIndex, { duration: 250 });
+    },
   });
 
   const animatedStyle = useAnimatedStyle(() => ({

From 8598093cef5ab1ccda03a4e1ea693750c1e01811 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Kie=C5=82b?=
 <mateuszkielb@Mateusz-Kiebs-MacBook-Pro.local>
Date: Tue, 14 Apr 2026 14:31:57 +0200
Subject: [PATCH 03/15] not using the GestureBasicSrc files other than for
 legacy and simplified pinch gesture boundary check

---
 .../docs/gestures/use-fling-gesture.mdx               |  2 +-
 .../docs/gestures/use-pan-gesture.mdx                 |  2 +-
 .../docs/gestures/use-pinch-gesture.mdx               |  2 +-
 .../docs/gestures/use-rotation-gesture.mdx            |  2 +-
 .../static/examples/PinchGestureBasic.js              | 11 +++++------
 5 files changed, 9 insertions(+), 10 deletions(-)

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 7c5b496593..b429d78a62 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx
@@ -8,7 +8,7 @@ sidebar_position: 6
 import { webContainer } from '@site/src/utils/getGestureStyles';
 
 import FlingGestureBasic from '@site/static/examples/FlingGestureBasic';
-import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc';
+import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasic';
 
 
 import MouseButtonProp from './\_shared/mouse-button.mdx';
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 ce265fbb6f..55a43fdb61 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx
@@ -10,7 +10,7 @@ import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/ge
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import PanGestureBasic from '@site/static/examples/PanGestureBasic';
-import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasicSrc';
+import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasic';
 
 import BaseEventData from './\_shared/base-gesture-event-data.mdx';
 import BaseGestureConfig from './\_shared/base-gesture-config.mdx';
diff --git a/packages/docs-gesture-handler/docs/gestures/use-pinch-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-pinch-gesture.mdx
index 90a0388aa2..6944513186 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-pinch-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-pinch-gesture.mdx
@@ -8,7 +8,7 @@ sidebar_position: 5
 import { webContainer } from '@site/src/utils/getGestureStyles';
 
 import PinchGestureBasic from '@site/static/examples/PinchGestureBasic';
-import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasicSrc';
+import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasic';
 
 <div className={webContainer}>
   <InteractiveExample
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 1112279d01..a8cd47f816 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-rotation-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-rotation-gesture.mdx
@@ -8,7 +8,7 @@ sidebar_position: 4
 import { webContainer } from '@site/src/utils/getGestureStyles';
 
 import RotationGestureBasic from '@site/static/examples/RotationGestureBasic';
-import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasicSrc';
+import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasic';
 
 <div className={webContainer}>
   <InteractiveExample
diff --git a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
index f648cef7e8..cfd9e723ab 100644
--- a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
@@ -13,14 +13,14 @@ import Animated, {
 
 const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
 
+//FIXME: doesnt handle resizing
 export default function App() {
   const boxWidth = useSharedValue(100);
   const distanceDifference = useSharedValue(0);
 
   const centerX = useSharedValue(0);
   const centerY = useSharedValue(0);
-  const width = useSharedValue(0);
-  const height = useSharedValue(0);
+  const maxBoxSize = useSharedValue(0);
 
   const pointerPositionX = useSharedValue(0);
   const pointerPositionY = useSharedValue(0);
@@ -42,13 +42,12 @@ export default function App() {
 
     if (containerRef.current) {
       containerRef.current.measureInWindow((x, y, w, h) => {
-        width.value = w;
-        height.value = h;
+        maxBoxSize.value = Math.min(w, h);
 
         boxWidth.value = clamp(
           boxWidth.value,
           100,
-          Math.min(w, h)
+          maxBoxSize.value
         );
       });
     }
@@ -84,7 +83,7 @@ export default function App() {
       boxWidth.value = clamp(
         Math.max(distanceX, distanceY) * 2 + distanceDifference.value,
         100,
-        Math.min(width.value, height.value)
+        maxBoxSize.value
       );
 
       pointerPositionX.value = event.absoluteX - centerX.value - 12;

From 6e2f843b2b19582c1f7103ddb9c968dd3d52d66d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Kie=C5=82b?=
 <mateuszkielb@Mateusz-Kiebs-MacBook-Pro.local>
Date: Wed, 15 Apr 2026 10:24:40 +0200
Subject: [PATCH 04/15] fixed pinch gesture example

---
 .../static/examples/PinchGestureBasic.js             | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
index cfd9e723ab..26ac1e42d5 100644
--- a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
@@ -44,11 +44,7 @@ export default function App() {
       containerRef.current.measureInWindow((x, y, w, h) => {
         maxBoxSize.value = Math.min(w, h);
 
-        boxWidth.value = clamp(
-          boxWidth.value,
-          100,
-          maxBoxSize.value
-        );
+        boxWidth.value = maxBoxSize.value / 2;
       });
     }
   }
@@ -80,11 +76,7 @@ export default function App() {
     onUpdate: (event) => {
       const distanceX = Math.abs(event.absoluteX - centerX.value);
       const distanceY = Math.abs(event.absoluteY - centerY.value);
-      boxWidth.value = clamp(
-        Math.max(distanceX, distanceY) * 2 + distanceDifference.value,
-        100,
-        maxBoxSize.value
-      );
+      boxWidth.value = clamp(Math.max(distanceX, distanceY) * 2 + distanceDifference.value, 0, maxBoxSize.value);
 
       pointerPositionX.value = event.absoluteX - centerX.value - 12;
       pointerPositionY.value = event.absoluteY - centerY.value - 12;

From 3eb98c27f8a3bb87a0fae9db1b3d586cef9c32a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Kie=C5=82b?=
 <mateuszkielb@Mateusz-Kiebs-MacBook-Pro.local>
Date: Wed, 15 Apr 2026 10:31:25 +0200
Subject: [PATCH 05/15] updated legacy a nd versioned docs to also not rely on
 the SrcFiles

---
 .../docs/legacy-gestures/fling-gesture.md     |  2 +-
 .../docs/legacy-gestures/pan-gesture.md       |  2 +-
 .../docs/legacy-gestures/pinch-gesture.md     |  2 +-
 .../docs/legacy-gestures/rotation-gesture.md  |  2 +-
 .../static/examples/FlingGestureBasicSrc.js   | 69 ------------------
 .../static/examples/PanGestureBasicSrc.js     | 70 ------------------
 .../static/examples/PinchGestureBasicSrc.js   | 72 -------------------
 .../examples/RotationGestureBasicSrc.js       | 60 ----------------
 .../version-2.x/gestures/fling-gesture.md     |  2 +-
 .../version-2.x/gestures/pan-gesture.md       |  2 +-
 .../version-2.x/gestures/pinch-gesture.md     |  2 +-
 .../version-2.x/gestures/rotation-gesture.md  |  2 +-
 12 files changed, 8 insertions(+), 279 deletions(-)
 delete mode 100644 packages/docs-gesture-handler/static/examples/FlingGestureBasicSrc.js
 delete mode 100644 packages/docs-gesture-handler/static/examples/PanGestureBasicSrc.js
 delete mode 100644 packages/docs-gesture-handler/static/examples/PinchGestureBasicSrc.js
 delete mode 100644 packages/docs-gesture-handler/static/examples/RotationGestureBasicSrc.js

diff --git a/packages/docs-gesture-handler/docs/legacy-gestures/fling-gesture.md b/packages/docs-gesture-handler/docs/legacy-gestures/fling-gesture.md
index faa2bffdb6..d278b42adf 100644
--- a/packages/docs-gesture-handler/docs/legacy-gestures/fling-gesture.md
+++ b/packages/docs-gesture-handler/docs/legacy-gestures/fling-gesture.md
@@ -10,7 +10,7 @@ import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/ge
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import FlingGestureBasic from '@site/static/examples/FlingGestureBasic';
-import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc';
+import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasic';
 
 import OldAPIInfo from './\_shared/v2-info.md'
 
diff --git a/packages/docs-gesture-handler/docs/legacy-gestures/pan-gesture.md b/packages/docs-gesture-handler/docs/legacy-gestures/pan-gesture.md
index 45e7de380c..f97f4446b7 100644
--- a/packages/docs-gesture-handler/docs/legacy-gestures/pan-gesture.md
+++ b/packages/docs-gesture-handler/docs/legacy-gestures/pan-gesture.md
@@ -14,7 +14,7 @@ import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/ge
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import PanGestureBasic from '@site/static/examples/PanGestureBasic';
-import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasicSrc';
+import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasic';
 
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
diff --git a/packages/docs-gesture-handler/docs/legacy-gestures/pinch-gesture.md b/packages/docs-gesture-handler/docs/legacy-gestures/pinch-gesture.md
index 8adf6fccc3..fe3dd11674 100644
--- a/packages/docs-gesture-handler/docs/legacy-gestures/pinch-gesture.md
+++ b/packages/docs-gesture-handler/docs/legacy-gestures/pinch-gesture.md
@@ -14,7 +14,7 @@ import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/ge
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import PinchGestureBasic from '@site/static/examples/PinchGestureBasic';
-import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasicSrc';
+import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasic';
 
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
diff --git a/packages/docs-gesture-handler/docs/legacy-gestures/rotation-gesture.md b/packages/docs-gesture-handler/docs/legacy-gestures/rotation-gesture.md
index ac6b4bcb2d..2175f2e565 100644
--- a/packages/docs-gesture-handler/docs/legacy-gestures/rotation-gesture.md
+++ b/packages/docs-gesture-handler/docs/legacy-gestures/rotation-gesture.md
@@ -14,7 +14,7 @@ import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/ge
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import RotationGestureBasic from '@site/static/examples/RotationGestureBasic';
-import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasicSrc';
+import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasic';
 
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
diff --git a/packages/docs-gesture-handler/static/examples/FlingGestureBasicSrc.js b/packages/docs-gesture-handler/static/examples/FlingGestureBasicSrc.js
deleted file mode 100644
index 649ff7fc67..0000000000
--- a/packages/docs-gesture-handler/static/examples/FlingGestureBasicSrc.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import {
-  Directions,
-  GestureDetector,
-  GestureHandlerRootView,
-  useFlingGesture,
-} from 'react-native-gesture-handler';
-import { Dimensions, StyleSheet } from 'react-native';
-import Animated, {
-  withTiming,
-  useSharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
-
-const { width } = Dimensions.get('screen');
-
-function clamp(val, min, max) {
-  return Math.min(Math.max(val, min), max);
-}
-
-export default function App() {
-  const translateX = useSharedValue(0);
-  const startTranslateX = useSharedValue(0);
-
-  const fling = useFlingGesture({
-    direction: Directions.LEFT | Directions.RIGHT,
-    onBegin: (event) => {
-      startTranslateX.value = event.x;
-    },
-    onActivate: (event) => {
-      translateX.value = withTiming(
-        clamp(
-          translateX.value + event.x - startTranslateX.value,
-          width / -2 + 50,
-          width / 2 - 50
-        ),
-        { duration: 200 }
-      );
-    },
-    runOnJS: true,
-  });
-
-  const boxAnimatedStyles = useAnimatedStyle(() => ({
-    transform: [{ translateX: translateX.value }],
-  }));
-
-  return (
-    <GestureHandlerRootView style={styles.container}>
-      <GestureDetector gesture={fling}>
-        <Animated.View style={[styles.box, boxAnimatedStyles]}></Animated.View>
-      </GestureDetector>
-    </GestureHandlerRootView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    width: 100,
-    height: 100,
-    borderRadius: 20,
-    backgroundColor: '#b58df1',
-    cursor: 'grab',
-  },
-});
diff --git a/packages/docs-gesture-handler/static/examples/PanGestureBasicSrc.js b/packages/docs-gesture-handler/static/examples/PanGestureBasicSrc.js
deleted file mode 100644
index 975d2c6d52..0000000000
--- a/packages/docs-gesture-handler/static/examples/PanGestureBasicSrc.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
-import {
-  GestureDetector,
-  GestureHandlerRootView,
-  usePanGesture,
-} from 'react-native-gesture-handler';
-import { StyleSheet, View } from 'react-native';
-
-export default function App() {
-  const translationX = useSharedValue(0);
-  const translationY = useSharedValue(0);
-  const prevTranslationX = useSharedValue(0);
-  const prevTranslationY = useSharedValue(0);
-  const grabbing = useSharedValue(false);
-
-  const containerRef = React.useRef(null);
-
-  const animatedStyles = useAnimatedStyle(() => ({
-    transform: [
-      { translateX: translationX.value },
-      { translateY: translationY.value },
-    ],
-    cursor: grabbing.value ? 'grabbing' : 'grab',
-  }));
-
-  const pan = usePanGesture({
-    minDistance: 1,
-    onBegin: () => {
-      grabbing.value = true;
-      prevTranslationX.value = translationX.value;
-      prevTranslationY.value = translationY.value;
-    },
-    onUpdate: (event) => {
-      prevTranslationX.value + event.translationX;
-      prevTranslationY.value + event.translationY;
-    },
-    onFinalize: () => {
-      grabbing.value = false;
-    },
-  });
-
-  return (
-    <GestureHandlerRootView>
-      <View ref={containerRef} style={styles.container}>
-        <GestureDetector gesture={pan}>
-          <Animated.View style={[animatedStyles, styles.box]}></Animated.View>
-        </GestureDetector>
-      </View>
-    </GestureHandlerRootView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    aspectRatio: 3,
-  },
-  box: {
-    width: 100,
-    height: 100,
-    backgroundColor: '#b58df1',
-    borderRadius: 20,
-  },
-});
diff --git a/packages/docs-gesture-handler/static/examples/PinchGestureBasicSrc.js b/packages/docs-gesture-handler/static/examples/PinchGestureBasicSrc.js
deleted file mode 100644
index a21ac0d6ee..0000000000
--- a/packages/docs-gesture-handler/static/examples/PinchGestureBasicSrc.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import { Dimensions, StyleSheet } from 'react-native';
-import {
-  GestureDetector,
-  GestureHandlerRootView,
-  usePinchGesture,
-} from 'react-native-gesture-handler';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
-
-const { width, height } = Dimensions.get('screen');
-
-function clamp(val, min, max) {
-  return Math.min(Math.max(val, min), max);
-}
-
-export default function App() {
-  const scale = useSharedValue(1);
-  const startScale = useSharedValue(0);
-
-  const pinch = usePinchGesture({
-    onActivate: () => {
-      startScale.value = scale.value;
-    },
-    onUpdate: (event) => {
-      scale.value = clamp(
-        startScale.value * event.scale,
-        0.5,
-        Math.min(width / 100, height / 100)
-      );
-    },
-    runOnJS: true,
-  });
-
-  const boxAnimatedStyles = useAnimatedStyle(() => ({
-    transform: [{ scale: scale.value }],
-  }));
-
-  return (
-    <GestureHandlerRootView style={styles.container}>
-      <GestureDetector gesture={pinch}>
-        <Animated.View style={[styles.box, boxAnimatedStyles]}></Animated.View>
-      </GestureDetector>
-    </GestureHandlerRootView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    width: 100,
-    height: 100,
-    borderRadius: 20,
-    backgroundColor: '#b58df1',
-  },
-  dot: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    backgroundColor: '#ccc',
-    position: 'absolute',
-    left: '50%',
-    top: '50%',
-    pointerEvents: 'none',
-  },
-});
diff --git a/packages/docs-gesture-handler/static/examples/RotationGestureBasicSrc.js b/packages/docs-gesture-handler/static/examples/RotationGestureBasicSrc.js
deleted file mode 100644
index 9d621bbcac..0000000000
--- a/packages/docs-gesture-handler/static/examples/RotationGestureBasicSrc.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import { StyleSheet } from 'react-native';
-import {
-  GestureDetector,
-  GestureHandlerRootView,
-  useRotationGesture,
-} from 'react-native-gesture-handler';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
-
-export default function App() {
-  const angle = useSharedValue(0);
-  const startAngle = useSharedValue(0);
-
-  const rotation = useRotationGesture({
-    onActivate: () => {
-      startAngle.value = angle.value;
-    },
-    onUpdate: (event) => {
-      angle.value = startAngle.value + event.rotation;
-    },
-  });
-
-  const boxAnimatedStyles = useAnimatedStyle(() => ({
-    transform: [{ rotate: `${angle.value}rad` }],
-  }));
-
-  return (
-    <GestureHandlerRootView style={styles.container}>
-      <GestureDetector gesture={rotation}>
-        <Animated.View style={[styles.box, boxAnimatedStyles]}></Animated.View>
-      </GestureDetector>
-    </GestureHandlerRootView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    width: 100,
-    height: 100,
-    borderRadius: 20,
-    backgroundColor: '#b58df1',
-  },
-  dot: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    backgroundColor: '#ccc',
-    position: 'absolute',
-    left: '50%',
-    top: '50%',
-  },
-});
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/fling-gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/fling-gesture.md
index 0be6223d9c..faa5ed1d88 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/fling-gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/fling-gesture.md
@@ -10,7 +10,7 @@ import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/ge
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import FlingGestureBasic from '@site/static/examples/FlingGestureBasic';
-import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc';
+import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasic';
 
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pan-gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pan-gesture.md
index 941defcb93..4cdb3d09dd 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pan-gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pan-gesture.md
@@ -10,7 +10,7 @@ import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/ge
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import PanGestureBasic from '@site/static/examples/PanGestureBasic';
-import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasicSrc';
+import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasic';
 
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pinch-gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pinch-gesture.md
index 7917cdfff1..8b63123b7d 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pinch-gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pinch-gesture.md
@@ -10,7 +10,7 @@ import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/ge
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import PinchGestureBasic from '@site/static/examples/PinchGestureBasic';
-import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasicSrc';
+import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasic';
 
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/rotation-gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/rotation-gesture.md
index 44de4d4253..c9689053c0 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/rotation-gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/rotation-gesture.md
@@ -10,7 +10,7 @@ import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/ge
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import RotationGestureBasic from '@site/static/examples/RotationGestureBasic';
-import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasicSrc';
+import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasic';
 
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>

From 4ef9b94d621a01e3c54523457783b7a54709edbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Kie=C5=82b?=
 <mateuszkielb@Mateusz-Kiebs-MacBook-Pro.local>
Date: Wed, 15 Apr 2026 11:29:08 +0200
Subject: [PATCH 06/15] fixed inconsitent container sizes

---
 .../static/examples/PanGestureBasic.js              | 13 +++++--------
 .../static/examples/PinchGestureBasic.js            |  1 -
 .../static/examples/TapGestureBasic.js              |  2 +-
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/docs-gesture-handler/static/examples/PanGestureBasic.js b/packages/docs-gesture-handler/static/examples/PanGestureBasic.js
index fa044c518b..75983f97ce 100644
--- a/packages/docs-gesture-handler/static/examples/PanGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/PanGestureBasic.js
@@ -81,12 +81,10 @@ export default function App() {
   });
 
   return (
-    <GestureHandlerRootView>
-      <View ref={containerRef} style={styles.container}>
-        <GestureDetector gesture={pan}>
-          <Animated.View style={[animatedStyles, styles.box]}></Animated.View>
-        </GestureDetector>
-      </View>
+    <GestureHandlerRootView ref={containerRef} style={styles.container}>
+      <GestureDetector gesture={pan}>
+        <Animated.View style={[animatedStyles, styles.box]}></Animated.View>
+      </GestureDetector>
     </GestureHandlerRootView>
   );
 }
@@ -96,11 +94,10 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    aspectRatio: 3,
   },
   box: {
     width: 100,
-    height: 100,
+    aspectRatio: 1,
     backgroundColor: '#b58df1',
     borderRadius: 20,
   },
diff --git a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
index 26ac1e42d5..c0a18f129e 100644
--- a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
@@ -132,7 +132,6 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    aspectRatio: 3,
   },
   box: {
     aspectRatio: 1,
diff --git a/packages/docs-gesture-handler/static/examples/TapGestureBasic.js b/packages/docs-gesture-handler/static/examples/TapGestureBasic.js
index 3f5d346d51..6b04003955 100644
--- a/packages/docs-gesture-handler/static/examples/TapGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/TapGestureBasic.js
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
   },
   box: {
     width: 100,
-    height: 100,
+    aspectRatio: 1,
     borderRadius: 20,
     cursor: 'pointer',
   },

From 3e656ceb3b91c1607148dab1d8e658f328519c37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Kie=C5=82b?=
 <mateuszkielb@Mateusz-Kiebs-MacBook-Pro.local>
Date: Wed, 15 Apr 2026 12:02:49 +0200
Subject: [PATCH 07/15] removed vidoes from v2 docs and added examples in v2
 api

---
 .../version-2.x/examples/FlingGestureBasic.js |  97 +++++++++++
 .../version-2.x/examples/HoverGestureBasic.js |  88 ++++++++++
 .../examples/LongPressGestureBasic.js         |  76 +++++++++
 .../version-2.x/examples/PanGestureBasic.js   | 106 ++++++++++++
 .../version-2.x/examples/PinchGestureBasic.js | 160 ++++++++++++++++++
 .../examples/RotationGestureBasic.js          | 145 ++++++++++++++++
 .../version-2.x/examples/TapGestureBasic.js   |  58 +++++++
 .../version-2.x/gestures/fling-gesture.md     |  19 +--
 .../version-2.x/gestures/hover-gesture.md     |  19 +--
 .../gestures/long-press-gesture.md            |  19 +--
 .../version-2.x/gestures/pan-gesture.md       |  19 +--
 .../version-2.x/gestures/pinch-gesture.md     |  19 +--
 .../version-2.x/gestures/rotation-gesture.md  |  19 +--
 .../version-2.x/gestures/tap-gesture.md       |  19 +--
 14 files changed, 751 insertions(+), 112 deletions(-)
 create mode 100644 packages/docs-gesture-handler/versioned_docs/version-2.x/examples/FlingGestureBasic.js
 create mode 100644 packages/docs-gesture-handler/versioned_docs/version-2.x/examples/HoverGestureBasic.js
 create mode 100644 packages/docs-gesture-handler/versioned_docs/version-2.x/examples/LongPressGestureBasic.js
 create mode 100644 packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js
 create mode 100644 packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
 create mode 100644 packages/docs-gesture-handler/versioned_docs/version-2.x/examples/RotationGestureBasic.js
 create mode 100644 packages/docs-gesture-handler/versioned_docs/version-2.x/examples/TapGestureBasic.js

diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/FlingGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/FlingGestureBasic.js
new file mode 100644
index 0000000000..333b681aae
--- /dev/null
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/FlingGestureBasic.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import {
+  Directions,
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import { StyleSheet, View } from 'react-native';
+import Animated, {
+  withTiming,
+  useSharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+
+function clamp(val, min, max) {
+  return Math.min(Math.max(val, min), max);
+}
+
+export default function App() {
+  const translateX = useSharedValue(0);
+  const startTranslateX = useSharedValue(0);
+  const containerWidth = useSharedValue(0);
+
+  const containerRef = React.useRef(null);
+
+  const updateContainerWidth = () => {
+    if (!containerRef.current) return;
+
+    containerRef.current.measure((x, y, width, height) => {
+      containerWidth.value = width;
+
+      translateX.value = clamp(
+        translateX.value,
+        containerWidth.value / -2 + 50,
+        containerWidth.value / 2 - 50
+      );
+    });
+  };
+
+  React.useEffect(() => {
+    updateContainerWidth();
+  }, [containerRef.current]);
+
+  React.useEffect(() => {
+    window.addEventListener('resize', updateContainerWidth);
+
+    return () => {
+      window.removeEventListener('resize', updateContainerWidth);
+    };
+  }, []);
+
+  const fling = Gesture.Fling()
+    .direction(Directions.LEFT | Directions.RIGHT)
+    .onBegin((event) => {
+      startTranslateX.value = event.x;
+    })
+    .onStart((event) => {
+      translateX.value = withTiming(
+        clamp(
+          translateX.value + event.x - startTranslateX.value,
+          containerWidth.value / -2 + 50,
+          containerWidth.value / 2 - 50
+        ),
+        { duration: 200 }
+      );
+    });
+
+  const boxAnimatedStyles = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }],
+  }));
+
+  return (
+    <GestureHandlerRootView>
+      <View ref={containerRef} style={styles.container}>
+        <GestureDetector gesture={fling}>
+          <Animated.View
+            style={[styles.box, boxAnimatedStyles]}></Animated.View>
+        </GestureDetector>
+      </View>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 100,
+    height: 100,
+    borderRadius: 20,
+    backgroundColor: '#b58df1',
+    cursor: 'grab',
+  },
+});
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/HoverGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/HoverGestureBasic.js
new file mode 100644
index 0000000000..3f7b110161
--- /dev/null
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/HoverGestureBasic.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  Easing,
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+const EASING = Easing.bezier(1, -1, 0.3, 1.43);
+
+export default function App() {
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+
+  const progress = useSharedValue(0);
+
+  const startX = useSharedValue(0);
+  const startY = useSharedValue(0);
+
+  const hover = Gesture.Hover()
+    .onStart((event) => {
+      startX.value = event.x;
+      startY.value = event.y;
+    })
+    .onUpdate((event) => {
+      translateX.value = (event.x - startX.value) * 0.3;
+      translateY.value = (event.y - startY.value) * 0.3;
+
+      const distance = Math.sqrt(Math.pow(translateX.value, 2) + Math.pow(translateY.value, 2));
+
+      progress.value = distance / 35;
+    })
+    .onEnd(() => {
+      translateX.value = withTiming(0, {
+        duration: 400,
+        easing: EASING,
+      });
+      translateY.value = withTiming(0, {
+        duration: 400,
+        easing: EASING,
+      });
+      progress.value = withTiming(0, {
+        duration: 400,
+        easing: EASING,
+      });
+    });
+
+  const boxAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translateX.value },
+      { translateY: translateY.value },
+    ],
+    backgroundColor: interpolateColor(
+      progress.value,
+      [0, 1],
+      ['#b58df1', '#fa7f7c']
+    )
+  }));
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <GestureDetector gesture={hover}>
+        <Animated.View style={[styles.box, boxAnimatedStyle]}></Animated.View>
+      </GestureDetector>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 100,
+    height: 100,
+    borderRadius: 20,
+    cursor: 'pointer',
+  },
+});
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/LongPressGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/LongPressGestureBasic.js
new file mode 100644
index 0000000000..6df3275205
--- /dev/null
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/LongPressGestureBasic.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import { Easing, StyleSheet } from 'react-native';
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+const COLORS = ['#b58df1', '#fa7f7c', '#ffe780', '#82cab2'];
+
+export default function App() {
+  const colorIndex = useSharedValue(0);
+  const scale = useSharedValue(1);
+
+  const longPress = Gesture.LongPress()
+    .onBegin(() => {
+      scale.value = withTiming(1.2, {
+        duration: 500,
+        easing: Easing.bezier(0.31, 0.04, 0.03, 1.04),
+      });
+    })
+    .onStart(() => {
+      colorIndex.value = withTiming(
+        (colorIndex.value + 1) % (COLORS.length + 1),
+        { duration: 200 },
+        () => {
+          if (colorIndex.value === COLORS.length) {
+            colorIndex.value = 0;
+          }
+        }
+      );
+    })
+    .onFinalize(() => {
+      scale.value = withTiming(1, {
+        duration: 250,
+        easing: Easing.bezier(0.82, 0.06, 0.42, 1.01),
+      });
+    });
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      colorIndex.value,
+      [...COLORS.map((_, i) => i), COLORS.length],
+      [...COLORS, COLORS[0]]
+    ),
+    transform: [{ scale: scale.value }],
+  }));
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <GestureDetector gesture={longPress}>
+        <Animated.View style={[styles.box, animatedStyle]}></Animated.View>
+      </GestureDetector>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 100,
+    height: 100,
+    borderRadius: 20,
+    cursor: 'pointer',
+  },
+});
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js
new file mode 100644
index 0000000000..2d2c7b74eb
--- /dev/null
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js
@@ -0,0 +1,106 @@
+import React from 'react';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import { StyleSheet, View } from 'react-native';
+
+function clamp(val, min, max) {
+  return Math.min(Math.max(val, min), max);
+}
+
+export default function App() {
+  const translationX = useSharedValue(0);
+  const translationY = useSharedValue(0);
+  const prevTranslationX = useSharedValue(0);
+  const prevTranslationY = useSharedValue(0);
+  const grabbing = useSharedValue(false);
+  const maxTranslateX = useSharedValue(0);
+  const maxTranslateY = useSharedValue(0);
+
+  const containerRef = React.useRef(null);
+
+  const animatedStyles = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translationX.value },
+      { translateY: translationY.value },
+    ],
+    cursor: grabbing.value ? 'grabbing' : 'grab',
+  }));
+
+  const updateWidthAndHeight = () => {
+    if (!containerRef.current) return;
+
+    containerRef.current.measureInWindow((x, y, width, height) => {
+      maxTranslateX.value = width / 2 - 50;
+      maxTranslateY.value = height / 2 - 50;
+    });
+  };
+
+  React.useEffect(() => {
+    updateWidthAndHeight();
+  }, [containerRef.current]);
+
+  React.useEffect(() => {
+    window.addEventListener('resize', updateWidthAndHeight);
+    window.addEventListener('scroll', updateWidthAndHeight);
+
+    return () => {
+      window.removeEventListener('resize', updateWidthAndHeight);
+      window.removeEventListener('scroll', updateWidthAndHeight);
+    };
+  }, []);
+
+  const pan = Gesture.Pan()
+    .minDistance(1)
+    .onBegin(() => {
+      grabbing.value = true;
+      prevTranslationX.value = translationX.value;
+      prevTranslationY.value = translationY.value;
+    })
+    .onUpdate((event) => {
+      translationX.value = clamp(
+        prevTranslationX.value + event.translationX,
+        -maxTranslateX.value,
+        maxTranslateX.value
+      );
+      translationY.value = clamp(
+        prevTranslationY.value + event.translationY,
+        -maxTranslateY.value,
+        maxTranslateY.value
+      );
+    })
+    .onFinalize(() => {
+      grabbing.value = false;
+    });
+
+  return (
+    <GestureHandlerRootView>
+      <View ref={containerRef} style={styles.container}>
+        <GestureDetector gesture={pan}>
+          <Animated.View style={[animatedStyles, styles.box]}></Animated.View>
+        </GestureDetector>
+      </View>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    aspectRatio: 3,
+  },
+  box: {
+    width: 100,
+    height: 100,
+    backgroundColor: '#b58df1',
+    borderRadius: 20,
+  },
+});
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
new file mode 100644
index 0000000000..8b87072dff
--- /dev/null
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
@@ -0,0 +1,160 @@
+import React from 'react';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import { StyleSheet, View } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+
+const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
+
+export default function App() {
+  const boxWidth = useSharedValue(100);
+  const distanceDifference = useSharedValue(0);
+
+  const centerX = useSharedValue(0);
+  const centerY = useSharedValue(0);
+  const width = useSharedValue(0);
+  const height = useSharedValue(0);
+
+  const pointerPositionX = useSharedValue(0);
+  const pointerPositionY = useSharedValue(0);
+  const negativePointerPositionX = useSharedValue(0);
+  const negativePointerPositionY = useSharedValue(0);
+
+  const touchOpacity = useSharedValue(0);
+
+  const containerRef = React.useRef(null);
+  const boxRef = React.useRef(null);
+
+  function updateCenterAndDimensions() {
+    if (boxRef.current) {
+      boxRef.current.measureInWindow((x, y, width, height) => {
+        centerX.value = x + width / 2;
+        centerY.value = y + height / 2;
+      });
+    }
+
+    if (containerRef.current) {
+      containerRef.current.measureInWindow((x, y, w, h) => {
+        width.value = w;
+        height.value = h;
+
+        boxWidth.value = clamp(
+          boxWidth.value,
+          100,
+          Math.min(w, h)
+        );
+      });
+    }
+  }
+
+  React.useEffect(() => {
+    updateCenterAndDimensions();
+  }, [boxRef.current, containerRef.current]);
+
+  React.useEffect(() => {
+    window.addEventListener('resize', updateCenterAndDimensions);
+    window.addEventListener('scroll', updateCenterAndDimensions);
+
+    return () => {
+      window.removeEventListener('resize', updateCenterAndDimensions);
+      window.removeEventListener('scroll', updateCenterAndDimensions);
+    };
+  }, []);
+
+  const pan = Gesture.Pan()
+    .minDistance(1)
+    .onStart((event) => {
+      const distanceX = Math.abs(event.absoluteX - centerX.value);
+      const distanceY = Math.abs(event.absoluteY - centerY.value);
+      const width = Math.max(distanceX, distanceY) * 2;
+      distanceDifference.value = boxWidth.value - width;
+
+      touchOpacity.value = withTiming(0.4, { duration: 200 });
+    })
+    .onUpdate((event) => {
+      const distanceX = Math.abs(event.absoluteX - centerX.value);
+      const distanceY = Math.abs(event.absoluteY - centerY.value);
+      boxWidth.value = clamp(
+        Math.max(distanceX, distanceY) * 2 + distanceDifference.value,
+        100,
+        Math.min(width.value, height.value)
+      );
+
+      pointerPositionX.value = event.absoluteX - centerX.value - 12;
+      pointerPositionY.value = event.absoluteY - centerY.value - 12;
+      negativePointerPositionX.value = centerX.value - event.absoluteX - 12;
+      negativePointerPositionY.value = centerY.value - event.absoluteY - 12;
+    })
+    .onEnd(() => {
+      touchOpacity.value = withTiming(0, { duration: 200 });
+    });
+
+  const boxAnimatedStyles = useAnimatedStyle(() => ({
+    width: boxWidth.value,
+  }));
+
+  return (
+    <GestureHandlerRootView>
+      <View ref={containerRef} style={styles.container}>
+        <GestureDetector gesture={pan}>
+          <Animated.View
+            ref={boxRef}
+            style={[styles.box, boxAnimatedStyles]}></Animated.View>
+        </GestureDetector>
+        <Animated.View
+          style={[
+            styles.dot,
+            {
+              transform: [
+                { translateX: pointerPositionX },
+                { translateY: pointerPositionY },
+              ],
+              opacity: touchOpacity,
+            },
+          ]}></Animated.View>
+        <Animated.View
+          style={[
+            styles.dot,
+            {
+              transform: [
+                { translateX: negativePointerPositionX },
+                { translateY: negativePointerPositionY },
+              ],
+              opacity: touchOpacity,
+            },
+          ]}></Animated.View>
+      </View>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    aspectRatio: 3,
+  },
+  box: {
+    aspectRatio: 1,
+    borderRadius: 20,
+    backgroundColor: '#b58df1',
+    cursor: 'pointer',
+  },
+  dot: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: '#ccc',
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+  },
+});
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/RotationGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/RotationGestureBasic.js
new file mode 100644
index 0000000000..8f0bc9370b
--- /dev/null
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/RotationGestureBasic.js
@@ -0,0 +1,145 @@
+import React from 'react';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+
+export default function App() {
+  const angle = useSharedValue(0);
+  const startAngle = useSharedValue(0);
+  const centerX = useSharedValue(0);
+  const centerY = useSharedValue(0);
+  const pointerPositionX = useSharedValue(0);
+  const pointerPositionY = useSharedValue(0);
+  const negativePointerPositionX = useSharedValue(0);
+  const negativePointerPositionY = useSharedValue(0);
+  const touchOpacity = useSharedValue(0);
+  const grabbing = useSharedValue(false);
+
+  const boxRef = React.useRef(null);
+
+  function updateCenter() {
+    if (!boxRef.current) return;
+
+    boxRef.current.measureInWindow((x, y, width, height) => {
+      centerX.value = x + width / 2;
+      centerY.value = y + height / 2;
+    });
+  }
+
+  React.useEffect(() => {
+    updateCenter();
+  }, [boxRef.current]);
+
+  React.useEffect(() => {
+    window.addEventListener('resize', updateCenter);
+    window.addEventListener('scroll', updateCenter);
+
+    return () => {
+      window.removeEventListener('resize', updateCenter);
+      window.removeEventListener('scroll', updateCenter);
+    };
+  }, []);
+
+  const pan = Gesture.Pan()
+    .minDistance(1)
+    .onBegin((event) => {
+      startAngle.value =
+        angle.value -
+        Math.atan2(
+          event.absoluteY - centerY.value,
+          event.absoluteX - centerX.value
+        );
+      touchOpacity.value = withTiming(0.4, { duration: 200 });
+      grabbing.value = true;
+
+      pointerPositionX.value = event.absoluteX - centerX.value - 12;
+      pointerPositionY.value = event.absoluteY - centerY.value - 12;
+      negativePointerPositionX.value = centerX.value - event.absoluteX - 12;
+      negativePointerPositionY.value = centerY.value - event.absoluteY - 12;
+    })
+    .onUpdate((event) => {
+      angle.value =
+        startAngle.value +
+        Math.atan2(
+          event.absoluteY - centerY.value,
+          event.absoluteX - centerX.value
+        );
+      pointerPositionX.value = event.absoluteX - centerX.value - 12;
+      pointerPositionY.value = event.absoluteY - centerY.value - 12;
+      negativePointerPositionX.value = centerX.value - event.absoluteX - 12;
+      negativePointerPositionY.value = centerY.value - event.absoluteY - 12;
+    })
+    .onFinalize(() => {
+      touchOpacity.value = withTiming(0, { duration: 200 });
+      grabbing.value = false;
+    });
+
+  const boxAnimatedStyles = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${angle.value}rad` }],
+    cursor: grabbing.value ? 'grabbing' : 'grab',
+  }));
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <GestureDetector gesture={pan}>
+        <Animated.View
+          ref={boxRef}
+          style={[styles.box, boxAnimatedStyles]}></Animated.View>
+      </GestureDetector>
+      <Animated.View
+        style={[
+          styles.dot,
+          {
+            transform: [
+              { translateX: pointerPositionX },
+              { translateY: pointerPositionY },
+            ],
+            opacity: touchOpacity,
+          },
+        ]}></Animated.View>
+      <Animated.View
+        style={[
+          styles.dot,
+          {
+            transform: [
+              { translateX: negativePointerPositionX },
+              { translateY: negativePointerPositionY },
+            ],
+            opacity: touchOpacity,
+          },
+        ]}></Animated.View>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 100,
+    height: 100,
+    borderRadius: 20,
+    backgroundColor: '#b58df1',
+  },
+  dot: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: '#ccc',
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    pointerEvents: 'none',
+  },
+});
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/TapGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/TapGestureBasic.js
new file mode 100644
index 0000000000..96f6657af5
--- /dev/null
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/TapGestureBasic.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+const COLORS = ['#b58df1', '#fa7f7c', '#ffe780', '#82cab2'];
+
+export default function App() {
+  const colorIndex = useSharedValue(1);
+
+  const tap = Gesture.Tap().onEnd(() => {
+    if (colorIndex.value > COLORS.length) {
+      colorIndex.value = colorIndex.value % 1 === 0 ? 1 : colorIndex.value % 1;
+    }
+
+    const nextIndex = Math.ceil(colorIndex.value + 1);
+    colorIndex.value = withTiming(nextIndex, { duration: 250 });
+  });
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      colorIndex.value,
+      [0, ...COLORS.map((_, i) => i + 1), COLORS.length + 1],
+      [COLORS[COLORS.length - 1], ...COLORS, COLORS[0]]
+    ),
+  }));
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <GestureDetector gesture={tap}>
+        <Animated.View style={[styles.box, animatedStyle]}></Animated.View>
+      </GestureDetector>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 100,
+    height: 100,
+    borderRadius: 20,
+    cursor: 'pointer',
+  },
+});
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/fling-gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/fling-gesture.md
index faa5ed1d88..dbf71fdce4 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/fling-gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/fling-gesture.md
@@ -5,19 +5,12 @@ sidebar_label: Fling gesture
 sidebar_position: 8
 ---
 
-import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
+import { webContainer } from '@site/src/utils/getGestureStyles';
 
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-import FlingGestureBasic from '@site/static/examples/FlingGestureBasic';
-import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasic';
+import FlingGestureBasic from '../examples/FlingGestureBasic';
+import FlingGestureBasicSrc from '!!raw-loader!../examples/FlingGestureBasic';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/fling.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<FlingGestureBasic/>}
     src={FlingGestureBasicSrc}
@@ -34,12 +27,6 @@ Gesture gets [ACTIVE](/docs/2.x/fundamentals/states-events#active) when movement
 When gesture gets activated it will turn into [END](/docs/2.x/fundamentals/states-events#end) state when finger is released.
 The gesture will fail to recognize if the finger is lifted before being activated.
 
-  <div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/fling.mp4")} type="video/mp4"/>
-    </video>
-  </div>
-
 <samp id="FlingGestureBasicSrc">Fling Gesture</samp>
 
 ## Example
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/hover-gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/hover-gesture.md
index 6b794fd4bf..b9c6766c0f 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/hover-gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/hover-gesture.md
@@ -5,19 +5,12 @@ sidebar_label: Hover gesture
 sidebar_position: 9
 ---
 
-import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
+import { webContainer } from '@site/src/utils/getGestureStyles';
 
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-import HoverGestureBasic from '@site/static/examples/HoverGestureBasic';
-import HoverGestureBasicSrc from '!!raw-loader!@site/static/examples/HoverGestureBasic';
+import HoverGestureBasic from '../examples/HoverGestureBasic';
+import HoverGestureBasicSrc from '!!raw-loader!../examples/HoverGestureBasic';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/hover.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<HoverGestureBasic/>}
     src={HoverGestureBasicSrc}
@@ -34,12 +27,6 @@ A continuous gesture that can recognize hovering above the view it's attached to
 
 On iOS additional visual effects may be configured.
 
-  <div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/hover.mp4")} type="video/mp4"/>
-    </video>
-  </div>
-
 <samp id="HoverGestureBasic">Hover Gesture</samp>
 
 ## Reference
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/long-press-gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/long-press-gesture.md
index 61f5431703..23f9e23ae9 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/long-press-gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/long-press-gesture.md
@@ -5,19 +5,12 @@ sidebar_label: Long press gesture
 sidebar_position: 5
 ---
 
-import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
+import { webContainer } from '@site/src/utils/getGestureStyles';
 
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-import LongPressGestureBasic from '@site/static/examples/LongPressGestureBasic';
-import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPressGestureBasic';
+import LongPressGestureBasic from '../examples/LongPressGestureBasic';
+import LongPressGestureBasicSrc from '!!raw-loader!../examples/LongPressGestureBasic';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/longpress.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<LongPressGestureBasic/>}
     src={LongPressGestureBasicSrc}
@@ -33,12 +26,6 @@ A discrete gesture that activates when the corresponding view is pressed for a s
 This gesture's state will turn into [END](/docs/2.x/fundamentals/states-events#end) immediately after the finger is released.
 The gesture will fail to recognize a touch event if the finger is lifted before the [minimum required time](/docs/2.x/gestures/long-press-gesture#mindurationvalue-number) or if the finger is moved further than the [allowable distance](/docs/2.x/gestures/long-press-gesture#maxdistancevalue-number).
 
-<div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/longpress.mp4")} type="video/mp4"/>
-    </video>
-</div>
-
 <samp id="LongPressGestureBasic">Long Press Gesture</samp>
 
 ## Example
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pan-gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pan-gesture.md
index 4cdb3d09dd..487e15a4a5 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pan-gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pan-gesture.md
@@ -5,19 +5,12 @@ sidebar_label: Pan gesture
 sidebar_position: 3
 ---
 
-import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
+import { webContainer } from '@site/src/utils/getGestureStyles';
 
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-import PanGestureBasic from '@site/static/examples/PanGestureBasic';
-import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasic';
+import PanGestureBasic from '../examples/PanGestureBasic';
+import PanGestureBasicSrc from '!!raw-loader!../examples/PanGestureBasic';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/pan.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<PanGestureBasic/>}
     src={PanGestureBasicSrc}
@@ -39,12 +32,6 @@ Configurations such as a minimum initial distance, specific vertical or horizont
 
 Gesture callback can be used for continuous tracking of the pan gesture. It provides information about the gesture such as its XY translation from the starting point as well as its instantaneous velocity.
 
-  <div className={appearOnMobile} style={{ display: 'flex', margin: '16px 0', justifyContent: 'center' }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/pan.mp4")} type="video/mp4"/>
-    </video>
-  </div>
-
 <samp id="PanGestureBasicSrc">Pan Gesture</samp>
 
 ## Example
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pinch-gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pinch-gesture.md
index 8b63123b7d..fd95caa9f6 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pinch-gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/pinch-gesture.md
@@ -5,19 +5,12 @@ sidebar_label: Pinch gesture
 sidebar_position: 7
 ---
 
-import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
+import { webContainer } from '@site/src/utils/getGestureStyles';
 
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-import PinchGestureBasic from '@site/static/examples/PinchGestureBasic';
-import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasic';
+import PinchGestureBasic from '../examples/PinchGestureBasic';
+import PinchGestureBasicSrc from '!!raw-loader!../examples/PinchGestureBasic';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/pinch.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<PinchGestureBasic/>}
     src={PinchGestureBasicSrc}
@@ -40,12 +33,6 @@ Similarly, the scale factor decreases as the distance between the fingers decrea
 Pinch gestures are used most commonly to change the size of objects or content onscreen.
 For example, map views use pinch gestures to change the zoom level of the map.
 
-  <div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/pinch.mp4")} type="video/mp4"/>
-    </video>
-  </div>
-
 <samp id="PinchGestureBasicSrc">Pinch Gesture</samp>
 
 ## Example
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/rotation-gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/rotation-gesture.md
index c9689053c0..e6a7a6fdd5 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/rotation-gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/rotation-gesture.md
@@ -5,19 +5,12 @@ sidebar_label: Rotation gesture
 sidebar_position: 6
 ---
 
-import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
+import { webContainer } from '@site/src/utils/getGestureStyles';
 
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-import RotationGestureBasic from '@site/static/examples/RotationGestureBasic';
-import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasic';
+import RotationGestureBasic from '../examples/RotationGestureBasic';
+import RotationGestureBasicSrc from '!!raw-loader!../examples/RotationGestureBasic';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/rotation.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<RotationGestureBasic/>}
     src={RotationGestureBasicSrc}
@@ -37,12 +30,6 @@ The gesture [activates](/docs/2.x/fundamentals/states-events#active) when finger
 
 Gesture callback can be used for continuous tracking of the rotation gesture. It provides information about the gesture such as the amount rotated, the focal point of the rotation (anchor), and its instantaneous velocity.
 
-  <div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/rotation.mp4")} type="video/mp4"/>
-    </video>
-  </div>
-
 <samp id="RotationGestureBasicSrc">Rotation Gesture</samp>
 
 ## Example
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/tap-gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/tap-gesture.md
index e39b0c8442..605aa92fcf 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/tap-gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/tap-gesture.md
@@ -5,19 +5,12 @@ sidebar_label: Tap gesture
 sidebar_position: 4
 ---
 
-import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
+import { webContainer } from '@site/src/utils/getGestureStyles';
 
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-import TapGestureBasic from '@site/static/examples/TapGestureBasic';
-import TapGestureBasicSrc from '!!raw-loader!@site/static/examples/TapGestureBasic';
+import TapGestureBasic from '../examples/TapGestureBasic';
+import TapGestureBasicSrc from '!!raw-loader!../examples/TapGestureBasic';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/tap.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<TapGestureBasic/>}
     src={TapGestureBasicSrc}
@@ -38,12 +31,6 @@ For example, you might configure tap gesture recognizers to detect single taps,
 
 In order for a gesture to [activate](/docs/2.x/fundamentals/states-events#active), specified gesture requirements such as minPointers, numberOfTaps, maxDist, maxDuration, and maxDelayMs (explained below) must be met. Immediately after the gesture [activates](/docs/2.x/fundamentals/states-events#active), it will [end](/docs/2.x/fundamentals/states-events#end).
 
-  <div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/tap.mp4")} type="video/mp4"/>
-    </video>
-  </div>
-
 <samp id="TapGestureBasic">Tap Gesture</samp>
 
 ## Example

From a7133eba63facfbb2b4601b2fdba8b754c686488 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Kie=C5=82b?=
 <mateuszkielb@Mateusz-Kiebs-MacBook-Pro.local>
Date: Wed, 15 Apr 2026 12:07:57 +0200
Subject: [PATCH 08/15] fixed visual inconsitencies in v2 api the same as in v3

---
 .../version-2.x/examples/PanGestureBasic.js     | 17 +++++++----------
 .../version-2.x/examples/PinchGestureBasic.js   |  1 -
 .../version-2.x/examples/TapGestureBasic.js     |  2 +-
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js
index 2d2c7b74eb..891c6f5fc2 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js
@@ -8,7 +8,7 @@ import {
   GestureDetector,
   GestureHandlerRootView,
 } from 'react-native-gesture-handler';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 function clamp(val, min, max) {
   return Math.min(Math.max(val, min), max);
@@ -38,7 +38,7 @@ export default function App() {
 
     containerRef.current.measureInWindow((x, y, width, height) => {
       maxTranslateX.value = width / 2 - 50;
-      maxTranslateY.value = height / 2 - 50;
+      maxTranslateY.value = height / 2;
     });
   };
 
@@ -80,12 +80,10 @@ export default function App() {
     });
 
   return (
-    <GestureHandlerRootView>
-      <View ref={containerRef} style={styles.container}>
-        <GestureDetector gesture={pan}>
-          <Animated.View style={[animatedStyles, styles.box]}></Animated.View>
-        </GestureDetector>
-      </View>
+    <GestureHandlerRootView ref={containerRef} style={styles.container}>
+      <GestureDetector gesture={pan}>
+        <Animated.View style={[animatedStyles, styles.box]}></Animated.View>
+      </GestureDetector>
     </GestureHandlerRootView>
   );
 }
@@ -95,11 +93,10 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    aspectRatio: 3,
   },
   box: {
     width: 100,
-    height: 100,
+    aspectRatio: 1,
     backgroundColor: '#b58df1',
     borderRadius: 20,
   },
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
index 8b87072dff..92872c4e2f 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
@@ -140,7 +140,6 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    aspectRatio: 3,
   },
   box: {
     aspectRatio: 1,
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/TapGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/TapGestureBasic.js
index 96f6657af5..ef993c6df3 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/TapGestureBasic.js
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/TapGestureBasic.js
@@ -51,7 +51,7 @@ const styles = StyleSheet.create({
   },
   box: {
     width: 100,
-    height: 100,
+    aspectRatio: 1,
     borderRadius: 20,
     cursor: 'pointer',
   },

From 7bac454a025a9b9b5336928fad13a76dbcdef7d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Kie=C5=82b?=
 <mateuszkielb@Mateusz-Kiebs-MacBook-Pro.local>
Date: Wed, 15 Apr 2026 12:20:48 +0200
Subject: [PATCH 09/15] updated pinch gesture to work the same way in the v2
 doc as in v3

---
 .../version-2.x/examples/PinchGestureBasic.js | 74 +++++++++----------
 1 file changed, 33 insertions(+), 41 deletions(-)

diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
index 92872c4e2f..c8b82c59b6 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
@@ -19,8 +19,7 @@ export default function App() {
 
   const centerX = useSharedValue(0);
   const centerY = useSharedValue(0);
-  const width = useSharedValue(0);
-  const height = useSharedValue(0);
+  const maxBoxSize = useSharedValue(0);
 
   const pointerPositionX = useSharedValue(0);
   const pointerPositionY = useSharedValue(0);
@@ -42,14 +41,9 @@ export default function App() {
 
     if (containerRef.current) {
       containerRef.current.measureInWindow((x, y, w, h) => {
-        width.value = w;
-        height.value = h;
-
-        boxWidth.value = clamp(
-          boxWidth.value,
-          100,
-          Math.min(w, h)
-        );
+        maxBoxSize.value = Math.min(w, h);
+
+        boxWidth.value = maxBoxSize.value / 2;
       });
     }
   }
@@ -83,8 +77,8 @@ export default function App() {
       const distanceY = Math.abs(event.absoluteY - centerY.value);
       boxWidth.value = clamp(
         Math.max(distanceX, distanceY) * 2 + distanceDifference.value,
-        100,
-        Math.min(width.value, height.value)
+        0,
+        maxBoxSize.value
       );
 
       pointerPositionX.value = event.absoluteX - centerX.value - 12;
@@ -101,36 +95,34 @@ export default function App() {
   }));
 
   return (
-    <GestureHandlerRootView>
-      <View ref={containerRef} style={styles.container}>
-        <GestureDetector gesture={pan}>
-          <Animated.View
-            ref={boxRef}
-            style={[styles.box, boxAnimatedStyles]}></Animated.View>
-        </GestureDetector>
-        <Animated.View
-          style={[
-            styles.dot,
-            {
-              transform: [
-                { translateX: pointerPositionX },
-                { translateY: pointerPositionY },
-              ],
-              opacity: touchOpacity,
-            },
-          ]}></Animated.View>
+    <GestureHandlerRootView ref={containerRef} style={[styles.container, { height: maxBoxSize.value }]}>
+      <GestureDetector gesture={pan}>
         <Animated.View
-          style={[
-            styles.dot,
-            {
-              transform: [
-                { translateX: negativePointerPositionX },
-                { translateY: negativePointerPositionY },
-              ],
-              opacity: touchOpacity,
-            },
-          ]}></Animated.View>
-      </View>
+          ref={boxRef}
+          style={[styles.box, boxAnimatedStyles]}></Animated.View>
+      </GestureDetector>
+      <Animated.View
+        style={[
+          styles.dot,
+          {
+            transform: [
+              { translateX: pointerPositionX },
+              { translateY: pointerPositionY },
+            ],
+            opacity: touchOpacity,
+          },
+        ]}></Animated.View>
+      <Animated.View
+        style={[
+          styles.dot,
+          {
+            transform: [
+              { translateX: negativePointerPositionX },
+              { translateY: negativePointerPositionY },
+            ],
+            opacity: touchOpacity,
+          },
+        ]}></Animated.View>
     </GestureHandlerRootView>
   );
 }

From f5cd5d4d6583fa189456a699784fc7d5fecb84f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Kie=C5=82b?=
 <mateuszkielb@Mateusz-Kiebs-MacBook-Pro.local>
Date: Wed, 15 Apr 2026 12:24:36 +0200
Subject: [PATCH 10/15] updated the min size for pinch gesture box

---
 .../static/examples/PinchGestureBasic.js                  | 8 ++++++--
 .../version-2.x/examples/PinchGestureBasic.js             | 3 ++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
index c0a18f129e..e930f57a23 100644
--- a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
@@ -13,7 +13,6 @@ import Animated, {
 
 const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
 
-//FIXME: doesnt handle resizing
 export default function App() {
   const boxWidth = useSharedValue(100);
   const distanceDifference = useSharedValue(0);
@@ -21,6 +20,7 @@ export default function App() {
   const centerX = useSharedValue(0);
   const centerY = useSharedValue(0);
   const maxBoxSize = useSharedValue(0);
+  const minBoxSize = 20;
 
   const pointerPositionX = useSharedValue(0);
   const pointerPositionY = useSharedValue(0);
@@ -76,7 +76,11 @@ export default function App() {
     onUpdate: (event) => {
       const distanceX = Math.abs(event.absoluteX - centerX.value);
       const distanceY = Math.abs(event.absoluteY - centerY.value);
-      boxWidth.value = clamp(Math.max(distanceX, distanceY) * 2 + distanceDifference.value, 0, maxBoxSize.value);
+      boxWidth.value = clamp(
+        Math.max(distanceX, distanceY) * 2 + distanceDifference.value,
+        minBoxSize,
+        maxBoxSize.value
+      );
 
       pointerPositionX.value = event.absoluteX - centerX.value - 12;
       pointerPositionY.value = event.absoluteY - centerY.value - 12;
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
index c8b82c59b6..b7659c149a 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
@@ -20,6 +20,7 @@ export default function App() {
   const centerX = useSharedValue(0);
   const centerY = useSharedValue(0);
   const maxBoxSize = useSharedValue(0);
+  const minBoxSize = 20;
 
   const pointerPositionX = useSharedValue(0);
   const pointerPositionY = useSharedValue(0);
@@ -77,7 +78,7 @@ export default function App() {
       const distanceY = Math.abs(event.absoluteY - centerY.value);
       boxWidth.value = clamp(
         Math.max(distanceX, distanceY) * 2 + distanceDifference.value,
-        0,
+        minBoxSize,
         maxBoxSize.value
       );
 

From 0eb4a36e9a5f8e5972d8d643ee4f6f00bb997e49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Kie=C5=82b?=
 <mateuszkielb@Mateusz-Kiebs-MacBook-Pro.local>
Date: Wed, 15 Apr 2026 12:26:18 +0200
Subject: [PATCH 11/15] fixed stucture incosistency in pinch on v3 and v2

---
 .../static/examples/PinchGestureBasic.js      | 56 +++++++++----------
 1 file changed, 27 insertions(+), 29 deletions(-)

diff --git a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
index e930f57a23..fc6c6c9589 100644
--- a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
@@ -97,36 +97,34 @@ export default function App() {
   }));
 
   return (
-    <GestureHandlerRootView>
-      <View ref={containerRef} style={styles.container}>
-        <GestureDetector gesture={pan}>
-          <Animated.View
-            ref={boxRef}
-            style={[styles.box, boxAnimatedStyles]}></Animated.View>
-        </GestureDetector>
+    <GestureHandlerRootView ref={containerRef} style={styles.container}>
+      <GestureDetector gesture={pan}>
         <Animated.View
-          style={[
-            styles.dot,
-            {
-              transform: [
-                { translateX: pointerPositionX },
-                { translateY: pointerPositionY },
-              ],
-              opacity: touchOpacity,
-            },
-          ]}></Animated.View>
-        <Animated.View
-          style={[
-            styles.dot,
-            {
-              transform: [
-                { translateX: negativePointerPositionX },
-                { translateY: negativePointerPositionY },
-              ],
-              opacity: touchOpacity,
-            },
-          ]}></Animated.View>
-      </View>
+          ref={boxRef}
+          style={[styles.box, boxAnimatedStyles]}></Animated.View>
+      </GestureDetector>
+      <Animated.View
+        style={[
+          styles.dot,
+          {
+            transform: [
+              { translateX: pointerPositionX },
+              { translateY: pointerPositionY },
+            ],
+            opacity: touchOpacity,
+          },
+        ]}></Animated.View>
+      <Animated.View
+        style={[
+          styles.dot,
+          {
+            transform: [
+              { translateX: negativePointerPositionX },
+              { translateY: negativePointerPositionY },
+            ],
+            opacity: touchOpacity,
+          },
+        ]}></Animated.View>
     </GestureHandlerRootView>
   );
 }

From 63ade9677d68d115440372623f093c0beb84bcb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Kie=C5=82b?=
 <mateuszkielb@Mateusz-Kiebs-MacBook-Pro.local>
Date: Wed, 15 Apr 2026 12:56:32 +0200
Subject: [PATCH 12/15] fixed the refs passed from GestureHandlerRootView

---
 .../static/examples/PanGestureBasic.js        | 10 ++--
 .../static/examples/PinchGestureBasic.js      | 56 ++++++++++---------
 .../version-2.x/examples/PanGestureBasic.js   | 12 ++--
 .../version-2.x/examples/PinchGestureBasic.js | 56 ++++++++++---------
 4 files changed, 71 insertions(+), 63 deletions(-)

diff --git a/packages/docs-gesture-handler/static/examples/PanGestureBasic.js b/packages/docs-gesture-handler/static/examples/PanGestureBasic.js
index 75983f97ce..0d39f30564 100644
--- a/packages/docs-gesture-handler/static/examples/PanGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/PanGestureBasic.js
@@ -81,10 +81,12 @@ export default function App() {
   });
 
   return (
-    <GestureHandlerRootView ref={containerRef} style={styles.container}>
-      <GestureDetector gesture={pan}>
-        <Animated.View style={[animatedStyles, styles.box]}></Animated.View>
-      </GestureDetector>
+    <GestureHandlerRootView style={styles.container}>
+      <View ref={containerRef}>
+        <GestureDetector gesture={pan}>
+          <Animated.View style={[animatedStyles, styles.box]}></Animated.View>
+        </GestureDetector>
+      </View>
     </GestureHandlerRootView>
   );
 }
diff --git a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
index fc6c6c9589..74b816b708 100644
--- a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
@@ -97,34 +97,36 @@ export default function App() {
   }));
 
   return (
-    <GestureHandlerRootView ref={containerRef} style={styles.container}>
-      <GestureDetector gesture={pan}>
+    <GestureHandlerRootView style={styles.container}>
+      <View ref={containerRef}>
+        <GestureDetector gesture={pan}>
+          <Animated.View
+            ref={boxRef}
+            style={[styles.box, boxAnimatedStyles]}></Animated.View>
+        </GestureDetector>
         <Animated.View
-          ref={boxRef}
-          style={[styles.box, boxAnimatedStyles]}></Animated.View>
-      </GestureDetector>
-      <Animated.View
-        style={[
-          styles.dot,
-          {
-            transform: [
-              { translateX: pointerPositionX },
-              { translateY: pointerPositionY },
-            ],
-            opacity: touchOpacity,
-          },
-        ]}></Animated.View>
-      <Animated.View
-        style={[
-          styles.dot,
-          {
-            transform: [
-              { translateX: negativePointerPositionX },
-              { translateY: negativePointerPositionY },
-            ],
-            opacity: touchOpacity,
-          },
-        ]}></Animated.View>
+          style={[
+            styles.dot,
+            {
+              transform: [
+                { translateX: pointerPositionX },
+                { translateY: pointerPositionY },
+              ],
+              opacity: touchOpacity,
+            },
+          ]}></Animated.View>
+        <Animated.View
+          style={[
+            styles.dot,
+            {
+              transform: [
+                { translateX: negativePointerPositionX },
+                { translateY: negativePointerPositionY },
+              ],
+              opacity: touchOpacity,
+            },
+          ]}></Animated.View>
+      </View>
     </GestureHandlerRootView>
   );
 }
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js
index 891c6f5fc2..5153d1f798 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js
@@ -8,7 +8,7 @@ import {
   GestureDetector,
   GestureHandlerRootView,
 } from 'react-native-gesture-handler';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 function clamp(val, min, max) {
   return Math.min(Math.max(val, min), max);
@@ -80,10 +80,12 @@ export default function App() {
     });
 
   return (
-    <GestureHandlerRootView ref={containerRef} style={styles.container}>
-      <GestureDetector gesture={pan}>
-        <Animated.View style={[animatedStyles, styles.box]}></Animated.View>
-      </GestureDetector>
+    <GestureHandlerRootView style={styles.container}>
+      <View ref={containerRef}>
+        <GestureDetector gesture={pan}>
+          <Animated.View style={[animatedStyles, styles.box]}></Animated.View>
+        </GestureDetector>
+      </View>
     </GestureHandlerRootView>
   );
 }
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
index b7659c149a..b7614b7339 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
@@ -96,34 +96,36 @@ export default function App() {
   }));
 
   return (
-    <GestureHandlerRootView ref={containerRef} style={[styles.container, { height: maxBoxSize.value }]}>
-      <GestureDetector gesture={pan}>
+    <GestureHandlerRootView style={styles.container}>
+      <View ref={containerRef}>
+        <GestureDetector gesture={pan}>
+          <Animated.View
+            ref={boxRef}
+            style={[styles.box, boxAnimatedStyles]}></Animated.View>
+        </GestureDetector>
         <Animated.View
-          ref={boxRef}
-          style={[styles.box, boxAnimatedStyles]}></Animated.View>
-      </GestureDetector>
-      <Animated.View
-        style={[
-          styles.dot,
-          {
-            transform: [
-              { translateX: pointerPositionX },
-              { translateY: pointerPositionY },
-            ],
-            opacity: touchOpacity,
-          },
-        ]}></Animated.View>
-      <Animated.View
-        style={[
-          styles.dot,
-          {
-            transform: [
-              { translateX: negativePointerPositionX },
-              { translateY: negativePointerPositionY },
-            ],
-            opacity: touchOpacity,
-          },
-        ]}></Animated.View>
+          style={[
+            styles.dot,
+            {
+              transform: [
+                { translateX: pointerPositionX },
+                { translateY: pointerPositionY },
+              ],
+              opacity: touchOpacity,
+            },
+          ]}></Animated.View>
+        <Animated.View
+          style={[
+            styles.dot,
+            {
+              transform: [
+                { translateX: negativePointerPositionX },
+                { translateY: negativePointerPositionY },
+              ],
+              opacity: touchOpacity,
+            },
+          ]}></Animated.View>
+      </View>
     </GestureHandlerRootView>
   );
 }

From 4067fd4a85079b1c7a884e430ca46a0ca71cdfab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Kie=C5=82b?=
 <mateuszkielb@Mateusz-Kiebs-MacBook-Pro.local>
Date: Wed, 15 Apr 2026 13:03:08 +0200
Subject: [PATCH 13/15] fixed the style placement

---
 .../docs-gesture-handler/static/examples/PanGestureBasic.js   | 4 ++--
 .../docs-gesture-handler/static/examples/PinchGestureBasic.js | 4 ++--
 .../versioned_docs/version-2.x/examples/PanGestureBasic.js    | 4 ++--
 .../versioned_docs/version-2.x/examples/PinchGestureBasic.js  | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/docs-gesture-handler/static/examples/PanGestureBasic.js b/packages/docs-gesture-handler/static/examples/PanGestureBasic.js
index 0d39f30564..74b8c160ca 100644
--- a/packages/docs-gesture-handler/static/examples/PanGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/PanGestureBasic.js
@@ -81,8 +81,8 @@ export default function App() {
   });
 
   return (
-    <GestureHandlerRootView style={styles.container}>
-      <View ref={containerRef}>
+    <GestureHandlerRootView >
+      <View ref={containerRef} style={styles.container} >
         <GestureDetector gesture={pan}>
           <Animated.View style={[animatedStyles, styles.box]}></Animated.View>
         </GestureDetector>
diff --git a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
index 74b816b708..e930f57a23 100644
--- a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
@@ -97,8 +97,8 @@ export default function App() {
   }));
 
   return (
-    <GestureHandlerRootView style={styles.container}>
-      <View ref={containerRef}>
+    <GestureHandlerRootView>
+      <View ref={containerRef} style={styles.container}>
         <GestureDetector gesture={pan}>
           <Animated.View
             ref={boxRef}
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js
index 5153d1f798..a2bd48bd5c 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js
@@ -80,8 +80,8 @@ export default function App() {
     });
 
   return (
-    <GestureHandlerRootView style={styles.container}>
-      <View ref={containerRef}>
+    <GestureHandlerRootView >
+      <View ref={containerRef} style={styles.container}>
         <GestureDetector gesture={pan}>
           <Animated.View style={[animatedStyles, styles.box]}></Animated.View>
         </GestureDetector>
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
index b7614b7339..caaee681a1 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
@@ -96,8 +96,8 @@ export default function App() {
   }));
 
   return (
-    <GestureHandlerRootView style={styles.container}>
-      <View ref={containerRef}>
+    <GestureHandlerRootView>
+      <View ref={containerRef} style={styles.container}>
         <GestureDetector gesture={pan}>
           <Animated.View
             ref={boxRef}

From 75d8e72bc0c7facf24c79c80437e1a044f17d27b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Kie=C5=82b?= <relextm19@gmail.com>
Date: Wed, 15 Apr 2026 13:57:11 +0200
Subject: [PATCH 14/15] fixed scroll bug with pinch example

---
 .../static/examples/PinchGestureBasic.js                    | 6 +++---
 .../version-2.x/examples/PinchGestureBasic.js               | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
index e930f57a23..98e9871000 100644
--- a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
@@ -44,7 +44,7 @@ export default function App() {
       containerRef.current.measureInWindow((x, y, w, h) => {
         maxBoxSize.value = Math.min(w, h);
 
-        boxWidth.value = maxBoxSize.value / 2;
+        boxWidth.value = clamp(boxWidth.value, minBoxSize, maxBoxSize.value);
       });
     }
   }
@@ -97,8 +97,8 @@ export default function App() {
   }));
 
   return (
-    <GestureHandlerRootView>
-      <View ref={containerRef} style={styles.container}>
+    <GestureHandlerRootView >
+      <View ref={containerRef} style={[styles.container]}>
         <GestureDetector gesture={pan}>
           <Animated.View
             ref={boxRef}
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
index caaee681a1..f2ccbf9ee7 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
@@ -44,7 +44,7 @@ export default function App() {
       containerRef.current.measureInWindow((x, y, w, h) => {
         maxBoxSize.value = Math.min(w, h);
 
-        boxWidth.value = maxBoxSize.value / 2;
+        boxWidth.value = clamp(boxWidth.value, minBoxSize, maxBoxSize.value);
       });
     }
   }

From cbd11de93d2a6641ace8eee9c5ed50d567c6e98d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Kie=C5=82b?= <relextm19@gmail.com>
Date: Wed, 15 Apr 2026 14:26:32 +0200
Subject: [PATCH 15/15] removed pointer events from dots in pinch to avoid
 blocked interaction

---
 .../docs-gesture-handler/static/examples/PinchGestureBasic.js    | 1 +
 .../versioned_docs/version-2.x/examples/PinchGestureBasic.js     | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
index 98e9871000..7c5658622c 100644
--- a/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/static/examples/PinchGestureBasic.js
@@ -151,5 +151,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: '50%',
     top: '50%',
+    pointerEvents: 'none',
   },
 });
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
index f2ccbf9ee7..df79f1fa0f 100644
--- a/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js
@@ -150,5 +150,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: '50%',
     top: '50%',
+    pointerEvents: 'none',
   },
 });