software-mansion · relextm19 · Apr 14, 2026 · Apr 14, 2026 · Apr 14, 2026 · Apr 15, 2026
diff --git 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-fling-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx
@@ -5,22 +5,15 @@ 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';
+import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasic';
 
 
 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
@@ -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
@@ -5,21 +5,14 @@ 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';
 
 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-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';
@@ -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/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';
+import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasic';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/pinch.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<PinchGestureBasic/>}
     src={PinchGestureBasicSrc}
@@ -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
@@ -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';
+import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasic';
 
 <div className={webContainer}>
-  <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
-    <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
-      <source src={useBaseUrl("/video/rotation.mp4")} type="video/mp4"/>
-    </video>
-  </div>
   <InteractiveExample
     component={<RotationGestureBasic/>}
     src={RotationGestureBasicSrc}
@@ -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
@@ -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/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
@@ -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
@@ -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
@@ -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/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"
-}
+}
diff --git 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/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: [