Add rootContainerStyle prop to ReanimatedDrawerLayout (#3846)

**What this PR does**

This PR adds a new `mainContainerStyle` prop to the main component.
Until now, it was not possible to apply custom styles to the wrapper
since it was fully controlled internally. By exposing this prop,
consumers can now override or extend the wrapper's styles and apply
absolute positioning or any other layout adjustment when needed.

**Why**

I needed to apply absolute positioning to the top-level wrapper but
there was no way to customize it. Adding this prop keeps the existing
default behavior while allowing more flexibility for advanced layout
cases.

**How**

- Added the `mainContainerStyle` prop
- Passed it directly to the `ReanimatedDrawerLayout` element
- Ensured it merges cleanly with the component's default styling

---------

Co-authored-by: Michał <michal.bert@swmansion.com>

Author: jr-k

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}>