Add rootContainerStyle prop to ReanimatedDrawerLayout

packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx

@@ -108,21 +108,29 @@ minSwipeDistance?: number;
 
 Minimal distance to swipe before the drawer starts moving.
 
+### rootContainerStyle
+
+```ts
+rootContainerStyle?: StyleProp<ViewStyle>;
+```
+
+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<ViewStyle>;
 ```
 
-Style of the content view container.
+Style applied to the container wrapping the content view (the [`children`](#children)) and the background overlay.
 
 ### drawerContainerStyle
 
 ```ts
 drawerContainerStyle?: StyleProp<ViewStyle>;
 ```
 
-Style wrapping the drawer.
+Style applied to the container wrapping the drawer (the view returned by [`renderNavigationView`](#rendernavigationview)).
 
 ### edgeWidth
 

packages/docs-gesture-handler/docs/fundamentals/_examples/hooks/Simultaneous.tsx

@@ -8,8 +8,8 @@ import {
   useSimultaneousGestures,
 } from 'react-native-gesture-handler';
 import Animated, {
-  useSharedValue,
   useAnimatedStyle,
+  useSharedValue,
 } from 'react-native-reanimated';
 
 export default function App() {

packages/docs-gesture-handler/src/components/CodeComparison/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import CodeBlock from '@theme/CodeBlock';
 import useFormattedCode from '@site/src/hooks/useFormattedCode';
+import CodeBlock from '@theme/CodeBlock';
+import React from 'react';
 
 export default function CodeComparison({
   label1,

packages/docs-gesture-handler/src/components/CollapseButton/index.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable import-x/extensions */
-import React from 'react';
-import styles from './styles.module.css';
+import { useColorMode } from '@docusaurus/theme-common';
 import Arrow from '@site/static/img/Arrow.svg';
 import ArrowDark from '@site/static/img/Arrow-dark.svg';
-import { useColorMode } from '@docusaurus/theme-common';
 import clsx from 'clsx';
+import React from 'react';
+
+import styles from './styles.module.css';
 
 const CollapseButton: React.FC<{
   label: string;

packages/docs-gesture-handler/src/components/CollapsibleCode/index.tsx

@@ -1,10 +1,9 @@
-import React, { useState } from 'react';
-import CodeBlock from '@theme/CodeBlock';
-import styles from './styles.module.css';
-
 import CollapseButton from '@site/src/components/CollapseButton';
-
 import useFormattedCode from '@site/src/hooks/useFormattedCode';
+import CodeBlock from '@theme/CodeBlock';
+import React, { useState } from 'react';
+
+import styles from './styles.module.css';
 interface Props {
   src: string;
   label: string;

packages/docs-gesture-handler/src/components/Hero/StartScreen/index.tsx

@@ -1,6 +1,7 @@
+import HomepageButton from '@site/src/components/HomepageButton';
 import React from 'react';
+
 import styles from './styles.module.css';
-import HomepageButton from '@site/src/components/HomepageButton';
 
 const StartScreen = () => {
   return (

packages/docs-gesture-handler/src/hooks/useFormattedCode.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
-import * as prettier from 'prettier/standalone';
-import tsParser from 'prettier/plugins/typescript';
 import estreeParser from 'prettier/plugins/estree';
+import tsParser from 'prettier/plugins/typescript';
+import * as prettier from 'prettier/standalone';
+import { useEffect, useState } from 'react';
 
 const prettierOptions = {
   parser: 'typescript',

packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx

@@ -188,15 +188,28 @@ 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<ViewStyle>;
 
   /**
-   * Style wrapping the drawer.
+   * Style applied to the container wrapping the drawer (the view returned by
+   * `renderNavigationView`).
    */
   drawerContainerStyle?: StyleProp<ViewStyle>;
 
+  /**
+   * Style applied to the outermost container that wraps both the content view
+   * and the drawer.
+   */
+  rootContainerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * 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.
+   */
   onDrawerSlide?: (position: number) => void;
 
   // Implicit `children` prop has been removed in @types/react^18.0.
@@ -286,6 +299,7 @@ const DrawerLayout = function DrawerLayout(
     drawerType = defaultProps.drawerType,
     drawerBackgroundColor,
     drawerContainerStyle,
+    rootContainerStyle,
     contentContainerStyle,
     minSwipeDistance = defaultProps.minSwipeDistance,
     edgeWidth = defaultProps.edgeWidth,
@@ -664,7 +678,9 @@ const DrawerLayout = function DrawerLayout(
       gesture={panGesture}
       userSelect={userSelect}
       enableContextMenu={enableContextMenu}>
-      <Animated.View style={styles.main} onLayout={handleContainerLayout}>
+      <Animated.View
+        style={[styles.main, rootContainerStyle]}
+        onLayout={handleContainerLayout}>
         <VirtualGestureDetector
           gesture={overlayDismissGesture}
           userSelect={userSelect}>