@react-navigation/drawer 6.1.7 → 6.3.1

package/src/views/DrawerItemList.tsx

@@ -39,12 +39,31 @@ export default function DrawerItemList({
 
   return state.routes.map((route, i) => {
     const focused = i === state.index;
+
+    const onPress = () => {
+      const event = navigation.emit({
+        type: 'drawerItemPress',
+        target: route.key,
+        canPreventDefault: true,
+      });
+
+      if (!event.defaultPrevented) {
+        navigation.dispatch({
+          ...(focused
+            ? DrawerActions.closeDrawer()
+            : CommonActions.navigate({ name: route.name, merge: true })),
+          target: state.key,
+        });
+      }
+    };
+
     const {
       title,
       drawerLabel,
       drawerIcon,
       drawerLabelStyle,
       drawerItemStyle,
+      drawerAllowFontScaling,
     } = descriptors[route.key].options;
 
     return (
@@ -63,17 +82,11 @@ export default function DrawerItemList({
         inactiveTintColor={drawerInactiveTintColor}
         activeBackgroundColor={drawerActiveBackgroundColor}
         inactiveBackgroundColor={drawerInactiveBackgroundColor}
+        allowFontScaling={drawerAllowFontScaling}
         labelStyle={drawerLabelStyle}
         style={drawerItemStyle}
         to={buildLink(route.name, route.params)}
-        onPress={() => {
-          navigation.dispatch({
-            ...(focused
-              ? DrawerActions.closeDrawer()
-              : CommonActions.navigate({ name: route.name, merge: true })),
-            target: state.key,
-          });
-        }}
+        onPress={onPress}
       />
     );
   }) as React.ReactNode as React.ReactElement;

package/src/views/DrawerView.tsx

@@ -19,7 +19,7 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import Animated from 'react-native-reanimated';
+import * as Reanimated from 'react-native-reanimated';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 
 import type {
@@ -85,7 +85,7 @@ function DrawerViewBase({
   useLegacyImplementation = !global.nativeCallSyncHook ||
     // Reanimated 2 is not configured
     // @ts-expect-error: the type definitions are incomplete
-    !Animated.isConfigured?.(),
+    !Reanimated.isConfigured?.(),
 }: Props) {
   const Drawer: React.ComponentType<DrawerProps> = useLegacyImplementation
     ? require('./legacy/Drawer').default
@@ -205,6 +205,7 @@ function DrawerViewBase({
     return (
       <MaybeScreenContainer
         enabled={detachInactiveScreens}
+        hasTwoStates
         style={styles.content}
       >
         {state.routes.map((route, index) => {

package/src/views/ScreenFallback.tsx

@@ -22,6 +22,7 @@ export const MaybeScreenContainer = ({
   ...rest
 }: ViewProps & {
   enabled: boolean;
+  hasTwoStates: boolean;
   children: React.ReactNode;
 }) => {
   if (Screens?.screensEnabled?.()) {

package/src/views/legacy/Drawer.tsx

@@ -553,9 +553,14 @@ export default class DrawerView extends React.Component<DrawerProps> {
             <Animated.View
               style={[
                 styles.content,
-                drawerType !== 'permanent'
-                  ? { transform: [{ translateX: contentTranslateX }] }
-                  : undefined,
+                {
+                  transform:
+                    drawerType === 'permanent'
+                      ? // Reanimated needs the property to be present, but it results in Browser bug
+                        // https://bugs.chromium.org/p/chromium/issues/detail?id=20574
+                        []
+                      : [{ translateX: contentTranslateX }],
+                },
               ]}
             >
               <View
@@ -578,6 +583,10 @@ export default class DrawerView extends React.Component<DrawerProps> {
                     progress={progress}
                     onPress={() => this.toggleDrawer(false)}
                     style={overlayStyle as any}
+                    accessibilityElementsHidden={!isOpen}
+                    importantForAccessibility={
+                      isOpen ? 'auto' : 'no-hide-descendants'
+                    }
                   />
                 )
               }
@@ -605,12 +614,15 @@ export default class DrawerView extends React.Component<DrawerProps> {
               onLayout={this.handleDrawerLayout}
               style={[
                 styles.container,
-                drawerType === 'permanent'
-                  ? { opacity: 1 }
-                  : {
-                      transform: [{ translateX: drawerTranslateX }],
-                      opacity: this.drawerOpacity,
-                    },
+                {
+                  transform:
+                    drawerType === 'permanent'
+                      ? // Reanimated needs the property to be present, but it results in Browser bug
+                        // https://bugs.chromium.org/p/chromium/issues/detail?id=20574
+                        []
+                      : [{ translateX: drawerTranslateX }],
+                  opacity: this.drawerOpacity,
+                },
                 drawerType === 'permanent'
                   ? // Without this, the `left`/`right` values don't get reset
                     isRight

package/src/views/legacy/Overlay.tsx

@@ -3,6 +3,7 @@ import { Platform, Pressable, StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 const {
+  // @ts-expect-error: this is to support reanimated 1
   interpolate: interpolateDeprecated,
   interpolateNode,
   cond,

package/src/views/modern/Drawer.tsx

@@ -260,35 +260,37 @@ export default function Drawer({
   });
 
   const drawerAnimatedStyle = useAnimatedStyle(() => {
-    if (drawerType === 'permanent') {
-      return {};
-    }
-
     return {
-      transform: [
-        {
-          translateX: drawerType === 'back' ? 0 : translateX.value,
-        },
-      ],
+      transform:
+        drawerType === 'permanent'
+          ? // Reanimated needs the property to be present, but it results in Browser bug
+            // https://bugs.chromium.org/p/chromium/issues/detail?id=20574
+            []
+          : [
+              {
+                translateX: drawerType === 'back' ? 0 : translateX.value,
+              },
+            ],
     };
   });
 
   const contentAnimatedStyle = useAnimatedStyle(() => {
-    if (drawerType === 'permanent') {
-      return {};
-    }
-
     return {
-      transform: [
-        {
-          translateX:
-            drawerType === 'front'
-              ? 0
-              : drawerPosition === 'left'
-              ? drawerWidth + translateX.value
-              : translateX.value - drawerWidth,
-        },
-      ],
+      transform:
+        drawerType === 'permanent'
+          ? // Reanimated needs the property to be present, but it results in Browser bug
+            // https://bugs.chromium.org/p/chromium/issues/detail?id=20574
+            []
+          : [
+              {
+                translateX:
+                  drawerType === 'front'
+                    ? 0
+                    : drawerPosition === 'left'
+                    ? drawerWidth + translateX.value
+                    : translateX.value - drawerWidth,
+              },
+            ],
     };
   });
 

package/src/views/modern/Overlay.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { Platform, Pressable, StyleSheet } from 'react-native';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import Animated, {
+  useAnimatedProps,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
 
 const PROGRESS_EPSILON = 0.05;
 
@@ -17,17 +20,27 @@ const Overlay = React.forwardRef(function Overlay(
     return {
       opacity: progress.value,
       // We don't want the user to be able to press through the overlay when drawer is open
-      // One approach is to adjust the pointerEvents based on the progress
-      // But we can also send the overlay behind the screen
+      // We can send the overlay behind the screen to avoid it
       zIndex: progress.value > PROGRESS_EPSILON ? 0 : -1,
     };
   });
 
+  const animatedProps = useAnimatedProps(() => {
+    const active = progress.value > PROGRESS_EPSILON;
+
+    return {
+      pointerEvents: active ? 'auto' : 'none',
+      accessibilityElementsHidden: !active,
+      importantForAccessibility: active ? 'auto' : 'no-hide-descendants',
+    } as const;
+  });
+
   return (
     <Animated.View
       {...props}
       ref={ref}
       style={[styles.overlay, overlayStyle, animatedStyle, style]}
+      animatedProps={animatedProps}
     >
       <Pressable onPress={onPress} style={styles.pressable} />
     </Animated.View>