diff --git a/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx b/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx
index 8641c6970e..87f0933458 100644
--- a/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx
+++ b/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx
@@ -219,12 +219,12 @@ export enum DrawerState {
A function is called when the status of the drawer changes, taking `newState` to represent the drawer's interaction state and `drawerWillShow`, which is `true` when the drawer starts animating towards the open position and `false` otherwise.
-
+
### enableTrackpadTwoFingerGesture
```ts
-enableTrackpadTwoFingerGesture?: boolean;
+enableTrackpadTwoFingerGesture?: boolean | SharedValue;
```
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.
@@ -265,7 +265,7 @@ This parameter allows specifying which `userSelect` property should be applied t
```ts
-activeCursor: ActiveCursor;
+activeCursor?: ActiveCursor | SharedValue;
```
This parameter allows specifying which cursor should be used when the 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"`.
diff --git a/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx b/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx
index 1c09da7328..0df4017c04 100644
--- a/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx
+++ b/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx
@@ -44,6 +44,7 @@ import { MouseButton } from '../handlers/gestureHandlerCommon';
import { GestureDetector } from '../v3/detectors';
import type { PanGestureActiveEvent } from '../v3/hooks/gestures';
import { usePanGesture, useTapGesture } from '../v3/hooks/gestures';
+import type { WithSharedValue } from '../v3/types';
const DRAG_TOSS = 0.05;
@@ -75,7 +76,7 @@ export enum DrawerKeyboardDismissMode {
ON_DRAG,
}
-export interface DrawerLayoutProps {
+export type DrawerLayoutProps = {
/**
* This attribute is present in the native android implementation already and is one
* of the required params. The gesture handler version of DrawerLayout makes it
@@ -193,14 +194,6 @@ export interface DrawerLayoutProps {
*/
drawerContainerStyle?: StyleProp;
- /**
- * 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.
- */
- enableTrackpadTwoFingerGesture?: boolean;
-
onDrawerSlide?: (position: number) => void;
// Implicit `children` prop has been removed in @types/react^18.0.
@@ -216,25 +209,36 @@ export interface DrawerLayoutProps {
*/
userSelect?: UserSelect;
- /**
- * @default 'auto'
- * Sets the displayed cursor pictogram when the drawer is being dragged.
- * Values: see CSS cursor values
- */
- activeCursor?: ActiveCursor;
-
- /**
- * @default 'MouseButton.LEFT'
- * Allows to choose which mouse button should underlying pan handler react to.
- */
- mouseButton?: MouseButton;
-
/**
* @default 'false if MouseButton.RIGHT is specified'
* Allows to enable/disable context menu.
*/
enableContextMenu?: boolean;
-}
+} & WithSharedValue<
+ {
+ /**
+ * 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.
+ */
+ enableTrackpadTwoFingerGesture?: boolean;
+
+ /**
+ * @default 'auto'
+ * Sets the displayed cursor pictogram when the drawer is being dragged.
+ * Values: see CSS cursor values
+ */
+ activeCursor?: ActiveCursor;
+
+ /**
+ * @default 'MouseButton.LEFT'
+ * Allows to choose which mouse button should underlying pan handler react to.
+ */
+ mouseButton?: MouseButton;
+ },
+ ActiveCursor | MouseButton
+>;
export type DrawerMovementOption = {
initialVelocity?: number;