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 1/6] 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 2/6] 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 3/6] 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 4/6] 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 5/6] 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 6/6] 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',
   },