software-mansion · m-bert · Feb 25, 2026 · Feb 20, 2026 · Feb 23, 2026 · Feb 23, 2026
diff --git a/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx b/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx
@@ -8,6 +8,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
 
+import MouseButtonProp from '../gestures/\_shared/mouse-button.mdx';
+
 :::info
 This component acts as a cross-platform replacement for React Native's [`DrawerLayoutAndroid`](http://reactnative.dev/docs/drawerlayoutandroid.html) component, written using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started). For detailed information on standard parameters, please refer to the [React Native documentation](http://reactnative.dev/docs/drawerlayoutandroid.html).
 :::
@@ -29,16 +31,101 @@ drawerType?: DrawerType;
 Specifies the way the drawer will be displayed.
 Accepts values of the `DrawerType` enum. Defaults to `FRONT`.
 
-| `drawerType` | Description |
-| -- | -- |
-|`FRONT` | The drawer will be displayed above the content view. |
-|`BACK` | The drawer will be displayed below the content view, revealed by sliding away the content view. |
-|`SLIDE` | The drawer will appear attached to the content view, opening it slides both the drawer and the content view. |
+- `FRONT` The drawer will be displayed above the content view. 
+- `BACK` The drawer will be displayed below the content view, revealed by sliding away the content view.
+- `SLIDE` The drawer will appear attached to the content view, opening it slides both the drawer and the content view.
 
 | `FRONT`                                               | `BACK`                                               | `SLIDE`                                               |
 | ----------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------- |
 | <img src={useBaseUrl('gifs/new-drawer-front.gif')} /> | <img src={useBaseUrl('gifs/new-drawer-back.gif')} /> | <img src={useBaseUrl('gifs/new-drawer-slide.gif')} /> |
 
+### drawerBackgroundColor
+
+```ts
+drawerBackgroundColor?: string;
+```
+
+Color of the drawer's background.
+
+### drawerWidth
+
+```ts
+drawerWidth?: number;
+```
+
+Width of the drawer. Defaults to `200`.
+
+### drawerLockMode
+
+<CollapsibleCode 
+label="Show composed types definitions"
+expandedLabel="Hide composed types definitions"
+lineBounds={[0, 1]}
+src={`
+drawerLockMode?: DrawerLockMode;
+
+export enum DrawerLockMode {
+    UNLOCKED,
+    LOCKED_CLOSED,
+    LOCKED_OPEN,
+}
+`}/>
+
+Specifies the lock mode of the drawer.
+
+ - `UNLOCKED` The drawer is unlocked and can be opened or closed by gestures.
+ - `LOCKED_CLOSED` The drawer will move freely until it settles in a closed position, then the gestures will be disabled.
+ - `LOCKED_OPEN` The drawer will move freely until it settles in an opened position, then the gestures will be disabled.
+
+### keyboardDismissMode
+
+<CollapsibleCode 
+label="Show composed types definitions"
+expandedLabel="Hide composed types definitions"
+lineBounds={[0, 1]}
+src={`
+keyboardDismissMode?: DrawerKeyboardDismissMode;
+
+export enum DrawerKeyboardDismissMode {
+    NONE,
+    ON_DRAG,
+}
+`}/>
+
+Determines if system keyboard should be closed upon dragging the drawer.
+
+### animationSpeed
+
+```ts
+animationSpeed?: number;
+```
+
+Speed of animation that will play when letting go, or dismissing the drawer.
+
+### minSwipeDistance
+
+```ts
+minSwipeDistance?: number;
+```
+
+Minimal distance to swipe before the drawer starts moving.
+
+### contentContainerStyle
+
+```ts
+contentContainerStyle?: StyleProp<ViewStyle>;
+```
+
+Style of the content view container.
+
+### drawerContainerStyle
+
+```ts
+drawerContainerStyle?: StyleProp<ViewStyle>;
+```
+
+Style wrapping the drawer.
+
 ### edgeWidth
 
 ```ts
@@ -153,28 +240,7 @@ children?: ReactNode | ((openValue?: SharedValue<number>) => ReactNode);
 
 Either a component rendered in the content view or a function. If `children` is a function, it receives an `openValue` parameter -  [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) that indicates the progress of the drawer's opening or closing animation. This value equals `0` when the drawer is closed and `1` when it is fully opened. The drawer component can use this value to animate its children during the opening or closing process. This function must return a [`ReactNode`](https://reactnative.dev/docs/react-node).
 
-<HeaderWithBadges platforms={['android', 'web']}>
-### mouseButton
-</HeaderWithBadges>
-
-<CollapsibleCode 
-label="Show composed types definitions"
-expandedLabel="Hide composed types definitions"
-lineBounds={[0, 1]}
-src={`
-mouseButton: MouseButton | SharedValue<MouseButton>;
-
-enum MouseButton {
-  LEFT,
-  RIGHT,
-  MIDDLE,
-  BUTTON_4,
-  BUTTON_5,
-  ALL,
-}
-`}/>
-
-Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
+<MouseButtonProp />
 
 <HeaderWithBadges platforms={['web']}>
 ### enableContextMenu
@@ -186,8 +252,27 @@ enableContextMenu: boolean;
 
 Specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Default value is set to `false` if [`MouseButton.RIGHT`](#mousebutton-web--android-only) is specified.
 
+<HeaderWithBadges platforms={['web']}>
+### userSelect
+</HeaderWithBadges>
+
+```ts
+userSelect: 'none' | 'auto' | 'text';
+```
+
+This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`.
+
+<HeaderWithBadges platforms={['web']}>
+### activeCursor
+</HeaderWithBadges>
+
+```ts
+activeCursor: ActiveCursor;
+```
+
+This parameter allows to specify which cursor should be used when gesture activates. Supports all [CSS cursor values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/cursor#keyword) (e.g. `"grab"`, `"zoom-in"`). Default value is set to `"auto"`.
 
-## Methods
+## Drawer ref methods
 
 Using a reference to `ReanimatedDrawerLayout` allows you to manually trigger the opening and closing of the component.
 

diff --git a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx
@@ -252,41 +252,53 @@ enableTrackpadTwoFingerGesture?: boolean;
 
 Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger the gesture.
 
-<HeaderWithBadges platforms={['android', 'web']}>
-### mouseButton
-</HeaderWithBadges>
+### enabled
 
-<CollapsibleCode 
-label="Show composed types definitions"
-expandedLabel="Hide composed types definitions"
-lineBounds={[0, 1]}
-src={`
-mouseButton: MouseButton | SharedValue<MouseButton>;
-
-enum MouseButton {
-  LEFT,
-  RIGHT,
-  MIDDLE,
-  BUTTON_4,
-  BUTTON_5,
-  ALL,
-}
-`}/>
+```ts
+enabled: boolean;
+```
 
-Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
+Indicates whether `ReanimatedSwipeable` should be analyzing stream of touch events or not. Defaults to `true`.
 
-<HeaderWithBadges platforms={['web']}>
-### enableContextMenu
-</HeaderWithBadges>
+### testID
 
 ```ts
-enableContextMenu: boolean;
+testID: string;
 ```
 
-Specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Default value is set to `false`.
+Sets a `testID` property, allowing for querying `ReanimatedSwipeable` for it in tests.
+
+### hitSlop
+
+<CollapsibleCode 
+label="Show composed types definitions"
+expandedLabel="Hide composed types definitions"
+lineBounds={[0, 1]}
+collapsed={false}
+src={`
+hitSlop: HitSlop | SharedValue<HitSlop>;
+
+type HitSlop =
+  | number
+  | null
+  | undefined
+  | Partial<
+      Record<
+        'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal',
+        number
+      >
+    >
+  | Record<'width' | 'left', number>
+  | Record<'width' | 'right', number>
+  | Record<'height' | 'top', number>
+  | Record<'height' | 'bottom', number>;
+`}/>
 
+This parameter enables control over what part of the connected view area can be used to begin recognizing the gesture.
+When a negative number is provided the bounds of the view will reduce the area by the given number of points in each of the sides evenly.
+See [hitSlop section](/docs/gestures/use-pan-gesture#hitslop) in `Pan` gesture for more details.
 
-## Methods
+## Swipeable ref methods
 
 Using a reference to `Swipeable` allows you to manually trigger the opening and closing of the component, as well as reset its swiping state.
 

diff --git a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx b/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx
@@ -139,7 +139,9 @@ useAnimated: boolean;
 
 Setting this property is set to `true` ensures that the [Animated API](/docs/fundamentals/animated-interactions) functions correctly when `useNativeDriver` is set to `false`. The default value is set to `false`.
 
+<HeaderWithBadges platforms={['web']}>
 ### activeCursor
+</HeaderWithBadges>
 
 ```ts
 activeCursor: ActiveCursor | SharedValue<ActiveCursor>;

diff --git a/packages/docs-gesture-handler/docs/gestures/_shared/mouse-button.mdx b/packages/docs-gesture-handler/docs/gestures/_shared/mouse-button.mdx
@@ -0,0 +1,26 @@
+import CollapsibleCode from '@site/src/components/CollapsibleCode';
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
+
+<HeaderWithBadges platforms={['android', 'web']}>
+### mouseButton
+</HeaderWithBadges>
+
+<CollapsibleCode 
+label="Show composed types definitions"
+expandedLabel="Hide composed types definitions"
+lineBounds={[0, 1]}
+collapsed={false}
+src={`
+mouseButton: MouseButton | SharedValue<MouseButton>;
+
+enum MouseButton {
+  LEFT,
+  RIGHT,
+  MIDDLE,
+  BUTTON_4,
+  BUTTON_5,
+  ALL,
+}
+`}/>
+
+Allows users to choose which mouse buttons to respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
diff --git a/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx
@@ -14,6 +14,8 @@ import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestur
 
 import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
 
+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}}>
@@ -142,29 +144,7 @@ numberOfPointers: number | SharedValue<number>;
 
 Determine exact number of points required to handle the fling gesture.
 
-<HeaderWithBadges platforms={['android', 'web']}>
-### mouseButton
-</HeaderWithBadges>
-
-<CollapsibleCode 
-label="Show composed types definitions"
-expandedLabel="Hide composed types definitions"
-lineBounds={[0, 1]}
-collapsed={false}
-src={`
-mouseButton: MouseButton | SharedValue<MouseButton>;
-
-enum MouseButton {
-  LEFT,
-  RIGHT,
-  MIDDLE,
-  BUTTON_4,
-  BUTTON_5,
-  ALL,
-}
-`}/>
-
-Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
+<MouseButtonProp />
 
 <BaseGestureConfig />
 

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
@@ -14,6 +14,8 @@ import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPre
 
 import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
 
+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}}>
@@ -75,29 +77,7 @@ maxDistance: number | SharedValue<number>;
 
 Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a long press gesture. If the finger travels further than the defined distance and the gesture hasn't yet activated, it will fail to recognize the gesture. The default value is 10.
 
-<HeaderWithBadges platforms={['android', 'web']}>
-### mouseButton
-</HeaderWithBadges>
-
-<CollapsibleCode 
-label="Show composed types definitions"
-expandedLabel="Hide composed types definitions"
-lineBounds={[0, 1]}
-collapsed={false}
-src={`
-mouseButton: MouseButton | SharedValue<MouseButton>;
-
-enum MouseButton {
-  LEFT,
-  RIGHT,
-  MIDDLE,
-  BUTTON_4,
-  BUTTON_5,
-  ALL,
-}
-`}/>
-
-Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
+<MouseButtonProp />
 
 <BaseGestureConfig />