@react-navigation/drawer 6.1.6 → 6.3.0

package/src/views/DrawerView.tsx

@@ -7,6 +7,7 @@ import {
 import {
   DrawerActions,
   DrawerNavigationState,
+  DrawerStatus,
   ParamListBase,
   useTheme,
 } from '@react-navigation/native';
@@ -39,6 +40,7 @@ import { GestureHandlerRootView } from './GestureHandler';
 import { MaybeScreen, MaybeScreenContainer } from './ScreenFallback';
 
 type Props = DrawerNavigationConfig & {
+  defaultStatus: DrawerStatus;
   state: DrawerNavigationState<ParamListBase>;
   navigation: DrawerNavigationHelpers;
   descriptors: DrawerDescriptorMap;
@@ -71,6 +73,7 @@ function DrawerViewBase({
   state,
   navigation,
   descriptors,
+  defaultStatus,
   drawerContent = (props: DrawerContentComponentProps) => (
     <DrawerContent {...props} />
   ),
@@ -132,25 +135,29 @@ function DrawerViewBase({
   }, [navigation, state.key]);
 
   React.useEffect(() => {
-    if (drawerStatus !== 'open' || drawerType === 'permanent') {
+    if (drawerStatus === defaultStatus || drawerType === 'permanent') {
       return;
     }
 
-    const handleClose = () => {
+    const handleHardwareBack = () => {
       // We shouldn't handle the back button if the parent screen isn't focused
       // This will avoid the drawer overriding event listeners from a focused screen
       if (!navigation.isFocused()) {
         return false;
       }
 
-      handleDrawerClose();
+      if (defaultStatus === 'open') {
+        handleDrawerOpen();
+      } else {
+        handleDrawerClose();
+      }
 
       return true;
     };
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        handleClose();
+        handleHardwareBack();
       }
     };
 
@@ -159,7 +166,7 @@ function DrawerViewBase({
     // This will make sure that our handler will run first when back button is pressed
     const subscription = BackHandler.addEventListener(
       'hardwareBackPress',
-      handleClose
+      handleHardwareBack
     );
 
     if (Platform.OS === 'web') {
@@ -173,7 +180,14 @@ function DrawerViewBase({
         document?.body?.removeEventListener?.('keyup', handleEscape);
       }
     };
-  }, [drawerStatus, drawerType, handleDrawerClose, navigation]);
+  }, [
+    defaultStatus,
+    drawerStatus,
+    drawerType,
+    handleDrawerClose,
+    handleDrawerOpen,
+    navigation,
+  ]);
 
   const renderDrawerContent = () => {
     return (
@@ -191,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>