From dd5708992014ccbdfcfd4c2edb4aa5212c9922c9 Mon Sep 17 00:00:00 2001 From: JRK Date: Fri, 28 Nov 2025 03:47:27 +0100 Subject: [PATCH 1/5] Add mainContainerStyle prop to ReanimatedDrawerLayout Added mainContainerStyle prop to customize the main component's style. --- .../src/components/ReanimatedDrawerLayout.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx b/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx index b30a17c45a..5421074aa7 100644 --- a/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx +++ b/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx @@ -197,6 +197,11 @@ export interface DrawerLayoutProps { */ drawerContainerStyle?: StyleProp; + /** + * Style wrapping the main component. + */ + mainContainerStyle?: StyleProp; + /** * Enables two-finger gestures on supported devices, for example iPads with * trackpads. If not enabled the gesture will require click + drag, with @@ -282,6 +287,7 @@ const DrawerLayout = forwardRef( drawerType = defaultProps.drawerType, drawerBackgroundColor, drawerContainerStyle, + mainContainerStyle, contentContainerStyle, minSwipeDistance = defaultProps.minSwipeDistance, edgeWidth = defaultProps.edgeWidth, @@ -668,7 +674,7 @@ const DrawerLayout = forwardRef( gesture={panGesture} userSelect={userSelect} enableContextMenu={enableContextMenu}> - + Date: Tue, 9 Jun 2026 17:42:23 +0200 Subject: [PATCH 2/5] rename main to background --- .../src/components/ReanimatedDrawerLayout.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx b/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx index 5421074aa7..e4dfb33c89 100644 --- a/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx +++ b/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx @@ -198,9 +198,9 @@ export interface DrawerLayoutProps { drawerContainerStyle?: StyleProp; /** - * Style wrapping the main component. + * Style wrapping the background component. */ - mainContainerStyle?: StyleProp; + backgroundContainerStyle?: StyleProp; /** * Enables two-finger gestures on supported devices, for example iPads with @@ -287,7 +287,7 @@ const DrawerLayout = forwardRef( drawerType = defaultProps.drawerType, drawerBackgroundColor, drawerContainerStyle, - mainContainerStyle, + backgroundContainerStyle, contentContainerStyle, minSwipeDistance = defaultProps.minSwipeDistance, edgeWidth = defaultProps.edgeWidth, @@ -674,7 +674,7 @@ const DrawerLayout = forwardRef( gesture={panGesture} userSelect={userSelect} enableContextMenu={enableContextMenu}> - + Date: Wed, 10 Jun 2026 10:02:44 +0200 Subject: [PATCH 3/5] Rename to rootContainerStyle --- .../src/components/ReanimatedDrawerLayout.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx b/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx index e4dfb33c89..708599a6db 100644 --- a/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx +++ b/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx @@ -198,9 +198,9 @@ export interface DrawerLayoutProps { drawerContainerStyle?: StyleProp; /** - * Style wrapping the background component. - */ - backgroundContainerStyle?: StyleProp; + * Style wrapping the background component. + */ + rootContainerStyle?: StyleProp; /** * Enables two-finger gestures on supported devices, for example iPads with @@ -287,7 +287,7 @@ const DrawerLayout = forwardRef( drawerType = defaultProps.drawerType, drawerBackgroundColor, drawerContainerStyle, - backgroundContainerStyle, + rootContainerStyle, contentContainerStyle, minSwipeDistance = defaultProps.minSwipeDistance, edgeWidth = defaultProps.edgeWidth, @@ -674,7 +674,9 @@ const DrawerLayout = forwardRef( gesture={panGesture} userSelect={userSelect} enableContextMenu={enableContextMenu}> - + Date: Wed, 10 Jun 2026 10:24:16 +0200 Subject: [PATCH 4/5] Update docs --- .../docs/components/reanimated-drawer-layout.mdx | 12 ++++++++++-- .../src/components/ReanimatedDrawerLayout.tsx | 9 ++++++--- 2 files changed, 16 insertions(+), 5 deletions(-) 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 87f0933458..f9e9c887bc 100644 --- a/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx +++ b/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx @@ -108,13 +108,21 @@ minSwipeDistance?: number; Minimal distance to swipe before the drawer starts moving. +### rootContainerStyle + +```ts +rootContainerStyle?: StyleProp; +``` + +Style applied to the outermost container that wraps both the content view and the drawer. Note that this container has `flex: 1` and `overflow: 'hidden'` applied by default. + ### contentContainerStyle ```ts contentContainerStyle?: StyleProp; ``` -Style of the content view container. +Style applied to the container wrapping the content view (the [`children`](#children)) and the background overlay. ### drawerContainerStyle @@ -122,7 +130,7 @@ Style of the content view container. drawerContainerStyle?: StyleProp; ``` -Style wrapping the drawer. +Style applied to the container wrapping the drawer (the view returned by [`renderNavigationView`](#rendernavigationview)). ### edgeWidth diff --git a/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx b/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx index 9f922e7003..542b8853f1 100644 --- a/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx +++ b/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx @@ -188,17 +188,20 @@ export type DrawerLayoutProps = { overlayColor?: string; /** - * Style wrapping the content. + * Style applied to the container wrapping the content view (the `children`) + * and the background overlay. */ contentContainerStyle?: StyleProp; /** - * Style wrapping the drawer. + * Style applied to the container wrapping the drawer (the view returned by + * `renderNavigationView`). */ drawerContainerStyle?: StyleProp; /** - * Style wrapping the background component. + * Style applied to the outermost container that wraps both the content view + * and the drawer. */ rootContainerStyle?: StyleProp; From 374f558ca8b1eb4cd09e9fe3a05c36c58752b2cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Wed, 10 Jun 2026 10:30:09 +0200 Subject: [PATCH 5/5] Typeees --- .../src/components/ReanimatedDrawerLayout.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx b/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx index 542b8853f1..25973058cc 100644 --- a/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx +++ b/packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx @@ -206,13 +206,10 @@ export type DrawerLayoutProps = { rootContainerStyle?: 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. + * Called while the drawer is moving or animating, with a `position` + * parameter indicating the progress of the opening/closing animation. + * It equals `0` when the drawer is closed and `1` when it is fully opened. */ - enableTrackpadTwoFingerGesture?: boolean; - onDrawerSlide?: (position: number) => void; // Implicit `children` prop has been removed in @types/react^18.0.