@react-navigation/drawer 6.2.0 → 6.3.2

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 {
@@ -80,12 +80,9 @@ function DrawerViewBase({
   detachInactiveScreens = Platform.OS === 'web' ||
     Platform.OS === 'android' ||
     Platform.OS === 'ios',
-  // Running in chrome debugger
-  // @ts-expect-error
-  useLegacyImplementation = !global.nativeCallSyncHook ||
-    // Reanimated 2 is not configured
-    // @ts-expect-error: the type definitions are incomplete
-    !Animated.isConfigured?.(),
+  // Reanimated 2 is not configured
+  // @ts-expect-error: the type definitions are incomplete
+  useLegacyImplementation = !Reanimated.isConfigured?.(),
 }: Props) {
   const Drawer: React.ComponentType<DrawerProps> = useLegacyImplementation
     ? require('./legacy/Drawer').default
@@ -205,6 +202,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

@@ -558,7 +558,7 @@ export default class DrawerView extends React.Component<DrawerProps> {
                     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
-                        undefined
+                        []
                       : [{ translateX: contentTranslateX }],
                 },
               ]}
@@ -619,7 +619,7 @@ export default class DrawerView extends React.Component<DrawerProps> {
                     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
-                        undefined
+                        []
                       : [{ translateX: drawerTranslateX }],
                   opacity: this.drawerOpacity,
                 },

package/src/views/modern/Drawer.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  I18nManager,
   InteractionManager,
   Keyboard,
   Platform,
@@ -260,15 +261,26 @@ export default function Drawer({
   });
 
   const drawerAnimatedStyle = useAnimatedStyle(() => {
+    const distanceFromEdge = dimensions.width - drawerWidth;
+
     return {
       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
-            undefined
+            []
           : [
               {
-                translateX: drawerType === 'back' ? 0 : translateX.value,
+                translateX:
+                  // The drawer stays in place when `drawerType` is `back`
+                  (drawerType === 'back' ? 0 : translateX.value) +
+                  (drawerPosition === 'left'
+                    ? I18nManager.isRTL
+                      ? -distanceFromEdge
+                      : 0
+                    : I18nManager.isRTL
+                    ? 0
+                    : distanceFromEdge),
               },
             ],
     };
@@ -280,15 +292,15 @@ export default function Drawer({
         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
-            undefined
+            []
           : [
               {
                 translateX:
+                  // The screen content stays in place when `drawerType` is `front`
                   drawerType === 'front'
                     ? 0
-                    : drawerPosition === 'left'
-                    ? drawerWidth + translateX.value
-                    : translateX.value - drawerWidth,
+                    : translateX.value +
+                      drawerWidth * (drawerPosition === 'left' ? 1 : -1),
               },
             ],
     };