react-native-drawer-layout 4.2.0 → 5.0.0-alpha.0

package/lib/typescript/src/views/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/views/Drawer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,wBAAgB,MAAM,CAAC,EACrB,SAAiB,EACjB,cAAuD,EACvD,WAAW,EACX,UAAoB,EACpB,OAAO,EACP,iBAAiB,EACjB,eAAe,EACf,IAAI,EACJ,YAAY,EACZ,yBAAyB,EACzB,mBAAmB,EACnB,QAAQ,EACR,KAAK,GACN,EAAE,WAAW,2CA6Hb"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/views/Drawer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,wBAAgB,MAAM,CAAC,EACrB,SAAiB,EACjB,cAAuD,EACvD,WAAW,EACX,UAAoB,EACpB,OAAO,EACP,iBAAiB,EACjB,eAAe,EACf,IAAI,EACJ,YAAY,EACZ,yBAAyB,EACzB,mBAAmB,EACnB,QAAQ,EACR,KAAK,GACN,EAAE,WAAW,2CA2Hb"}

package/lib/typescript/src/views/Drawer.native.d.ts

@@ -1,3 +1,3 @@
 import type { DrawerProps } from '../types';
-export declare function Drawer({ layout: customLayout, direction, drawerPosition, drawerStyle, drawerType, configureGestureHandler, hideStatusBarOnOpen, keyboardDismissMode, onClose, onOpen, onGestureStart, onGestureCancel, onGestureEnd, onTransitionStart, onTransitionEnd, open, overlayStyle, overlayAccessibilityLabel, statusBarAnimation, swipeEnabled, swipeEdgeWidth, swipeMinDistance, swipeMinVelocity, renderDrawerContent, children, style, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Drawer({ direction, drawerPosition, drawerStyle, drawerType, configureGestureHandler, hideStatusBarOnOpen, keyboardDismissMode, onClose, onOpen, onGestureStart, onGestureCancel, onGestureEnd, onTransitionStart, onTransitionEnd, open, overlayStyle, overlayAccessibilityLabel, statusBarAnimation, swipeEnabled, swipeEdgeWidth, swipeMinDistance, swipeMinVelocity, renderDrawerContent, children, style, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Drawer.native.d.ts.map

package/lib/typescript/src/views/Drawer.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.native.d.ts","sourceRoot":"","sources":["../../../../src/views/Drawer.native.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAuB5C,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,YAAY,EACpB,SAA4D,EAC5D,cAAuD,EACvD,WAAW,EACX,UAAoB,EACpB,uBAAuB,EACvB,mBAA2B,EAC3B,mBAA+B,EAC/B,OAAO,EACP,MAAM,EACN,cAAc,EACd,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,IAAI,EACJ,YAAY,EACZ,yBAAyB,EACzB,kBAA4B,EAC5B,YAEyB,EACzB,cAAiC,EACjC,gBAAqC,EACrC,gBAAqC,EACrC,mBAAmB,EACnB,QAAQ,EACR,KAAK,GACN,EAAE,WAAW,2CAgZb"}
+{"version":3,"file":"Drawer.native.d.ts","sourceRoot":"","sources":["../../../../src/views/Drawer.native.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAuB5C,wBAAgB,MAAM,CAAC,EACrB,SAA4D,EAC5D,cAAuD,EACvD,WAAW,EACX,UAAoB,EACpB,uBAAuB,EACvB,mBAA2B,EAC3B,mBAA+B,EAC/B,OAAO,EACP,MAAM,EACN,cAAc,EACd,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,IAAI,EACJ,YAAY,EACZ,yBAAyB,EACzB,kBAA4B,EAC5B,YAEyB,EACzB,cAAiC,EACjC,gBAAqC,EACrC,gBAAqC,EACrC,mBAAmB,EACnB,QAAQ,EACR,KAAK,GACN,EAAE,WAAW,2CA4db"}

package/lib/typescript/src/views/Overlay.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.native.d.ts","sourceRoot":"","sources":["../../../../src/views/Overlay.native.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,kBAAmC,EACnC,GAAG,IAAI,EACR,EAAE,YAAY,2CA+Bd"}
+{"version":3,"file":"Overlay.native.d.ts","sourceRoot":"","sources":["../../../../src/views/Overlay.native.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,kBAAmC,EACnC,GAAG,IAAI,EACR,EAAE,YAAY,2CAiCd"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-drawer-layout",
   "description": "Drawer component for React Native",
-  "version": "4.2.0",
+  "version": "5.0.0-alpha.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -43,25 +43,22 @@
   },
   "dependencies": {
     "color": "^4.2.3",
-    "use-latest-callback": "^0.2.4"
+    "use-latest-callback": "^0.3.2"
   },
   "devDependencies": {
-    "@jest/globals": "^30.0.0",
-    "@testing-library/react-native": "^13.2.0",
-    "@types/color": "^4.2.0",
-    "@types/react": "~19.0.10",
     "del-cli": "^6.0.0",
-    "react": "19.0.0",
-    "react-native": "0.79.3",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
     "react-native-builder-bob": "^0.40.12",
-    "react-test-renderer": "19.0.0",
-    "typescript": "^5.8.3"
+    "react-native-reanimated": "4.1.3",
+    "react-native-worklets": "0.6.1",
+    "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "react": ">= 18.2.0",
+    "react": ">= 19.0.0",
     "react-native": "*",
     "react-native-gesture-handler": ">= 2.0.0",
-    "react-native-reanimated": ">= 2.0.0"
+    "react-native-reanimated": ">= 4.0.0"
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -81,5 +78,5 @@
       ]
     ]
   },
-  "gitHead": "6f98ce195ea29883f4242e56390b334547c68bc5"
+  "gitHead": "46daae524ec6a59737147ed506222dd09a5b6e39"
 }

package/src/types.tsx

@@ -3,8 +3,6 @@ import type { StyleProp, View, ViewStyle } from 'react-native';
 import type { PanGesture } from 'react-native-gesture-handler';
 import type { SharedValue } from 'react-native-reanimated';
 
-export type Layout = { width: number; height: number };
-
 export type DrawerProps = {
   /**
    * Whether the drawer is open or not.
@@ -51,15 +49,9 @@ export type DrawerProps = {
    */
   renderDrawerContent: () => React.ReactNode;
 
-  /**
-   * Object containing the layout of the container.
-   * Defaults to the dimensions of the application's window.
-   */
-  layout?: { width: number; height: number };
-
   /**
    * Locale direction of the drawer.
-   * Defaults to `rtl` when `I18nManager.isRTL` is `true` on Android & iOS, otherwise `ltr`.
+   * Defaults to `rtl` when `I18nManager.getConstants().isRTL` is `true` on Android & iOS, otherwise `ltr`.
    */
   direction?: 'ltr' | 'rtl';
 

package/src/utils/getDrawerWidth.tsx

@@ -1,4 +1,4 @@
-import { type StyleProp, StyleSheet, type ViewStyle } from 'react-native';
+import { type DimensionValue, type ViewStyle } from 'react-native';
 
 const APPROX_APP_BAR_HEIGHT = 56;
 const DEFAULT_DRAWER_WIDTH = 360;
@@ -11,25 +11,27 @@ const DEFAULT_DRAWER_WIDTH = 360;
 const DRAWER_DEFAULT_WIDTH_WEB = `min(calc(100% - ${APPROX_APP_BAR_HEIGHT}px), ${DEFAULT_DRAWER_WIDTH}px)`;
 
 export function getDrawerWidthNative({
-  layout,
-  drawerStyle,
+  containerWidth,
+  customWidth,
 }: {
-  layout: { width: number; height: number };
-  drawerStyle?: StyleProp<ViewStyle>;
+  containerWidth: number;
+  customWidth: DimensionValue | undefined | null;
 }) {
+  'worklet';
+
   const defaultWidth =
-    layout.width - APPROX_APP_BAR_HEIGHT <= 360
-      ? layout.width - APPROX_APP_BAR_HEIGHT
+    containerWidth - APPROX_APP_BAR_HEIGHT <= 360
+      ? containerWidth - APPROX_APP_BAR_HEIGHT
       : DEFAULT_DRAWER_WIDTH;
 
-  const { width = defaultWidth } = StyleSheet.flatten(drawerStyle) || {};
+  const width = customWidth ?? defaultWidth;
 
   if (typeof width === 'string' && width.endsWith('%')) {
     // Try to calculate width if a percentage is given
     const percentage = Number(width.replace(/%$/, ''));
 
     if (Number.isFinite(percentage)) {
-      return layout.width * (percentage / 100);
+      return containerWidth * (percentage / 100);
     }
   }
 
@@ -39,9 +41,9 @@ export function getDrawerWidthNative({
 export function getDrawerWidthWeb({
   drawerStyle,
 }: {
-  drawerStyle?: StyleProp<ViewStyle>;
+  drawerStyle: ViewStyle;
 }): string {
-  const { width } = StyleSheet.flatten(drawerStyle) || {};
+  const { width } = drawerStyle;
 
   if (typeof width === 'number') {
     return `${width}px`;

package/src/views/Drawer.native.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import {
+  Dimensions,
   I18nManager,
-  InteractionManager,
   Keyboard,
+  type LayoutChangeEvent,
   Platform,
   StatusBar,
   StyleSheet,
-  useWindowDimensions,
   View,
 } from 'react-native';
 import Animated, {
@@ -44,7 +44,6 @@ const minmax = (value: number, start: number, end: number) => {
 };
 
 export function Drawer({
-  layout: customLayout,
   direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
   drawerPosition = direction === 'rtl' ? 'right' : 'left',
   drawerStyle,
@@ -73,25 +72,27 @@ export function Drawer({
   children,
   style,
 }: DrawerProps) {
-  const windowDimensions = useWindowDimensions();
-
-  const layout = customLayout ?? windowDimensions;
-  const drawerWidth = getDrawerWidthNative({ layout, drawerStyle });
+  const { width: customWidth } = StyleSheet.flatten(drawerStyle) || {};
 
   const isOpen = drawerType === 'permanent' ? true : open;
   const isRight = drawerPosition === 'right';
 
   const getDrawerTranslationX = React.useCallback(
-    (open: boolean) => {
+    (open: boolean, containerWidth: number) => {
       'worklet';
 
+      const drawerWidth = getDrawerWidthNative({
+        containerWidth,
+        customWidth,
+      });
+
       if (drawerPosition === 'left') {
         return open ? 0 : -drawerWidth;
       }
 
       return open ? 0 : drawerWidth;
     },
-    [drawerPosition, drawerWidth]
+    [customWidth, drawerPosition]
   );
 
   const hideStatusBar = React.useCallback(
@@ -109,19 +110,6 @@ export function Drawer({
     return () => hideStatusBar(false);
   }, [isOpen, hideStatusBarOnOpen, statusBarAnimation, hideStatusBar]);
 
-  const interactionHandleRef = React.useRef<number | null>(null);
-
-  const startInteraction = useLatestCallback(() => {
-    interactionHandleRef.current = InteractionManager.createInteractionHandle();
-  });
-
-  const endInteraction = useLatestCallback(() => {
-    if (interactionHandleRef.current != null) {
-      InteractionManager.clearInteractionHandle(interactionHandleRef.current);
-      interactionHandleRef.current = null;
-    }
-  });
-
   const hideKeyboard = useLatestCallback(() => {
     if (keyboardDismissMode === 'on-drag') {
       Keyboard.dismiss();
@@ -130,19 +118,16 @@ export function Drawer({
 
   const onGestureBegin = useLatestCallback(() => {
     onGestureStart?.();
-    startInteraction();
     hideKeyboard();
     hideStatusBar(true);
   });
 
   const onGestureFinish = useLatestCallback(() => {
     onGestureEnd?.();
-    endInteraction();
   });
 
   const onGestureAbort = useLatestCallback(() => {
     onGestureCancel?.();
-    endInteraction();
   });
 
   const hitSlop = React.useMemo(
@@ -155,9 +140,55 @@ export function Drawer({
     [isRight, isOpen, swipeEdgeWidth]
   );
 
+  const [initialWidth] = React.useState(() => Dimensions.get('window').width);
+
+  const layoutWidth = useSharedValue(initialWidth);
+  const translationX = useSharedValue(
+    getDrawerTranslationX(open, initialWidth)
+  );
+
+  const contentRef = React.useRef<View>(null);
+
+  React.useLayoutEffect(() => {
+    const measureLayout = () => {
+      contentRef.current?.measure((_x, _y, width) => {
+        layoutWidth.set(width);
+        translationX.set(getDrawerTranslationX(open, width));
+      });
+    };
+
+    measureLayout();
+
+    // FIXME: the layout is off after screen rotation
+    // Measure the layout again on screen rotation
+    let handle: number | undefined;
+
+    const subscription = Dimensions.addEventListener('change', () => {
+      // The measurement is not accurate without the delay
+      handle = requestAnimationFrame(() => {
+        measureLayout();
+      });
+    });
+
+    return () => {
+      if (handle != null) {
+        cancelAnimationFrame(handle);
+      }
+
+      subscription.remove();
+    };
+
+    // only measure on initial render
+    // subsequent updates will be handled by onLayout
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    layoutWidth.set(event.nativeEvent.layout.width);
+  };
+
   const touchStartX = useSharedValue(0);
   const touchX = useSharedValue(0);
-  const translationX = useSharedValue(getDrawerTranslationX(open));
   const gestureState = useSharedValue<GestureState>(GestureState.UNDETERMINED);
 
   const onAnimationStart = useLatestCallback((open: boolean) => {
@@ -174,31 +205,47 @@ export function Drawer({
     }
   );
 
+  const animatingTo = useSharedValue<'open' | 'close' | null>(null);
+
   const toggleDrawer = React.useCallback(
     (open: boolean, velocity?: number) => {
       'worklet';
 
-      const translateX = getDrawerTranslationX(open);
+      touchStartX.set(0);
+      touchX.set(0);
+
+      const containerWidth = layoutWidth.get();
+      const toValue = getDrawerTranslationX(open, containerWidth);
+
+      if (translationX.get() === toValue) {
+        return;
+      }
+
+      if (animatingTo.get() === (open ? 'open' : 'close')) {
+        return;
+      }
 
       if (velocity === undefined) {
         runOnJS(onAnimationStart)(open);
       }
 
-      touchStartX.value = 0;
-      touchX.value = 0;
-      translationX.value = withSpring(
-        translateX,
-        {
-          velocity,
-          stiffness: 1000,
-          damping: 500,
-          mass: 3,
-          overshootClamping: true,
-          restDisplacementThreshold: 0.01,
-          restSpeedThreshold: 0.01,
-          reduceMotion: ReduceMotion.Never,
-        },
-        (finished) => runOnJS(onAnimationEnd)(open, finished)
+      animatingTo.set(open ? 'open' : 'close');
+      translationX.set(
+        withSpring(
+          toValue,
+          {
+            velocity,
+            stiffness: 1000,
+            damping: 500,
+            mass: 3,
+            overshootClamping: true,
+            reduceMotion: ReduceMotion.Never,
+          },
+          (finished) => {
+            animatingTo.set(null);
+            runOnJS(onAnimationEnd)(open, finished);
+          }
+        )
       );
 
       if (open) {
@@ -208,18 +255,22 @@ export function Drawer({
       }
     },
     [
-      getDrawerTranslationX,
-      onAnimationEnd,
-      onAnimationStart,
-      onClose,
-      onOpen,
       touchStartX,
       touchX,
+      layoutWidth,
+      getDrawerTranslationX,
       translationX,
+      animatingTo,
+      onAnimationStart,
+      onAnimationEnd,
+      onOpen,
+      onClose,
     ]
   );
 
-  React.useEffect(() => toggleDrawer(open), [open, toggleDrawer]);
+  React.useEffect(() => {
+    toggleDrawer(open);
+  }, [animatingTo, open, toggleDrawer]);
 
   const startX = useSharedValue(0);
 
@@ -228,9 +279,9 @@ export function Drawer({
       .onBegin((event) => {
         'worklet';
 
-        startX.value = translationX.value;
-        gestureState.value = event.state;
-        touchStartX.value = event.x;
+        startX.set(translationX.get());
+        gestureState.set(event.state);
+        touchStartX.set(event.x);
       })
       .onStart(() => {
         'worklet';
@@ -240,14 +291,14 @@ export function Drawer({
       .onChange((event) => {
         'worklet';
 
-        touchX.value = event.x;
-        translationX.value = startX.value + event.translationX;
-        gestureState.value = event.state;
+        touchX.set(event.x);
+        translationX.set(startX.get() + event.translationX);
+        gestureState.set(event.state);
       })
       .onEnd((event, success) => {
         'worklet';
 
-        gestureState.value = event.state;
+        gestureState.set(event.state);
 
         if (!success) {
           runOnJS(onGestureAbort)();
@@ -300,6 +351,11 @@ export function Drawer({
   ]);
 
   const translateX = useDerivedValue(() => {
+    const drawerWidth = getDrawerWidthNative({
+      containerWidth: layoutWidth.get(),
+      customWidth,
+    });
+
     // Comment stolen from react-native-gesture-handler/DrawerLayout
     //
     // While closing the drawer when user starts gesture outside of its area (in greyed
@@ -326,32 +382,38 @@ export function Drawer({
     //
     // This is used only when drawerType is "front"
     const touchDistance =
-      drawerType === 'front' && gestureState.value === GestureState.ACTIVE
+      drawerType === 'front' && gestureState.get() === GestureState.ACTIVE
         ? minmax(
             drawerPosition === 'left'
-              ? touchStartX.value - drawerWidth
-              : layout.width - drawerWidth - touchStartX.value,
+              ? touchStartX.get() - drawerWidth
+              : layoutWidth.get() - drawerWidth - touchStartX.get(),
             0,
-            layout.width
+            layoutWidth.get()
           )
         : 0;
 
     const translateX =
       drawerPosition === 'left'
-        ? minmax(translationX.value + touchDistance, -drawerWidth, 0)
-        : minmax(translationX.value - touchDistance, 0, drawerWidth);
+        ? minmax(translationX.get() + touchDistance, -drawerWidth, 0)
+        : minmax(translationX.get() - touchDistance, 0, drawerWidth);
 
     return translateX;
   });
 
   const drawerAnimatedStyle = useAnimatedStyle(() => {
-    const distanceFromEdge = layout.width - drawerWidth;
+    const drawerWidth = getDrawerWidthNative({
+      containerWidth: layoutWidth.get(),
+      customWidth,
+    });
+
+    const distanceFromEdge = layoutWidth.get() - drawerWidth;
 
     return {
+      width: drawerWidth,
       // FIXME: Reanimated skips committing to the shadow tree if no layout props are animated
       // This results in pressables not getting their correct position and can't be pressed
       // So we animate the zIndex to force the commit - it doesn't affect the drawer visually
-      zIndex: translateX.value === 0 ? 0 : 1,
+      zIndex: translateX.get() === 0 ? 0 : 1,
       transform:
         drawerType === 'permanent'
           ? // Reanimated needs the property to be present, but it results in Browser bug
@@ -361,7 +423,7 @@ export function Drawer({
               {
                 translateX:
                   // The drawer stays in place when `drawerType` is `back`
-                  (drawerType === 'back' ? 0 : translateX.value) +
+                  (drawerType === 'back' ? 0 : translateX.get()) +
                   (direction === 'rtl'
                     ? drawerPosition === 'left'
                       ? -distanceFromEdge
@@ -373,18 +435,23 @@ export function Drawer({
             ],
     };
   }, [
+    customWidth,
     direction,
     drawerPosition,
     drawerType,
-    drawerWidth,
-    layout.width,
+    layoutWidth,
     translateX,
   ]);
 
   const contentAnimatedStyle = useAnimatedStyle(() => {
+    const drawerWidth = getDrawerWidthNative({
+      containerWidth: layoutWidth.get(),
+      customWidth,
+    });
+
     return {
       // FIXME: Force Reanimated to commit to the shadow tree
-      zIndex: translateX.value === 0 ? 0 : drawerType === 'back' ? 2 : 1,
+      zIndex: translateX.get() === 0 ? 0 : drawerType === 'back' ? 2 : 1,
       transform:
         drawerType === 'permanent'
           ? // Reanimated needs the property to be present, but it results in Browser bug
@@ -396,19 +463,24 @@ export function Drawer({
                   // The screen content stays in place when `drawerType` is `front`
                   drawerType === 'front'
                     ? 0
-                    : translateX.value +
+                    : translateX.get() +
                       drawerWidth * (drawerPosition === 'left' ? 1 : -1),
               },
             ],
     };
-  }, [drawerPosition, drawerType, drawerWidth, translateX]);
+  }, [customWidth, drawerPosition, drawerType, layoutWidth, translateX]);
 
   const progress = useDerivedValue(() => {
+    const containerWidth = layoutWidth.get();
+
     return drawerType === 'permanent'
       ? 1
       : interpolate(
-          translateX.value,
-          [getDrawerTranslationX(false), getDrawerTranslationX(true)],
+          translateX.get(),
+          [
+            getDrawerTranslationX(false, containerWidth),
+            getDrawerTranslationX(true, containerWidth),
+          ],
           [0, 1]
         );
   });
@@ -433,7 +505,11 @@ export function Drawer({
                 },
               ]}
             >
-              <Animated.View style={[styles.content, contentAnimatedStyle]}>
+              <Animated.View
+                ref={contentRef}
+                onLayout={onLayout}
+                style={[styles.content, contentAnimatedStyle]}
+              >
                 <View
                   aria-hidden={isOpen && drawerType !== 'permanent'}
                   style={styles.content}
@@ -455,7 +531,6 @@ export function Drawer({
                 style={[
                   styles.drawer,
                   {
-                    width: drawerWidth,
                     position:
                       drawerType === 'permanent' ? 'relative' : 'absolute',
                     zIndex: drawerType === 'back' ? -1 : 0,

package/src/views/Drawer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
 import useLatestCallback from 'use-latest-callback';
 
 import type { DrawerProps } from '../types';
@@ -23,14 +23,15 @@ export function Drawer({
   children,
   style,
 }: DrawerProps) {
+  const flattenedDrawerStyle = StyleSheet.flatten(drawerStyle) || {};
   const drawerWidth = getDrawerWidthWeb({
-    drawerStyle,
+    drawerStyle: flattenedDrawerStyle,
   });
 
   const progress = useFakeSharedValue(open ? 1 : 0);
 
   React.useEffect(() => {
-    progress.value = open ? 1 : 0;
+    progress.set(open ? 1 : 0);
   }, [open, progress]);
 
   const drawerRef = React.useRef<View>(null);
@@ -99,9 +100,9 @@ export function Drawer({
           position: drawerType === 'permanent' ? 'relative' : 'absolute',
           zIndex: drawerType === 'back' ? -1 : 1,
         },
-        // @ts-expect-error: width contains `calc` for web
-        { width: drawerWidth },
-        // @ts-expect-error: offset contains `calc` for web
+        // FIXME: width contains `px` on web
+        { width: drawerWidth } as ViewStyle,
+        // @ts-expect-error offset contains `calc` for web
         drawerType !== 'permanent'
           ? // Position drawer off-screen by default in closed state
             // And add a translation only when drawer is open
@@ -114,18 +115,15 @@ export function Drawer({
         drawerStyle,
       ]}
     >
-      {renderDrawerContent()}
+      <Inert enabled={drawerType !== 'permanent' && !isOpen}>
+        {renderDrawerContent()}
+      </Inert>
     </View>
   );
 
   const mainContent = (
     <View key="content" style={[styles.content, contentAnimatedStyle]}>
-      <View
-        aria-hidden={isOpen && drawerType !== 'permanent'}
-        style={styles.content}
-      >
-        {children}
-      </View>
+      <Inert enabled={drawerType !== 'permanent' && isOpen}>{children}</Inert>
       {drawerType !== 'permanent' ? (
         <Overlay
           open={open}
@@ -149,6 +147,30 @@ export function Drawer({
   );
 }
 
+function Inert({
+  enabled,
+  children,
+}: {
+  enabled: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      inert={enabled}
+      aria-hidden={enabled}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 'auto',
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

package/src/views/Overlay.native.tsx

@@ -16,8 +16,11 @@ export function Overlay({
   ...rest
 }: OverlayProps) {
   const animatedStyle = useAnimatedStyle(() => {
+    const active = progress.value > PROGRESS_EPSILON;
+
     return {
       opacity: progress.value,
+      pointerEvents: active ? 'auto' : 'none',
     };
   }, [progress]);
 
@@ -25,7 +28,6 @@ export function Overlay({
     const active = progress.value > PROGRESS_EPSILON;
 
     return {
-      'pointerEvents': active ? 'auto' : 'none',
       'aria-hidden': !active,
     } as const;
   }, [progress]);