@react-navigation/drawer 7.0.0-alpha.2 → 7.0.0-alpha.21

package/src/views/DrawerItem.tsx

@@ -1,15 +1,13 @@
-import { PlatformPressable } from '@react-navigation/elements';
-import { CommonActions, Link, Route, useTheme } from '@react-navigation/native';
+import { PlatformPressable, Text } from '@react-navigation/elements';
+import { type Route, useTheme } from '@react-navigation/native';
 import Color from 'color';
 import * as React from 'react';
 import {
-  Platform,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
-  Text,
-  TextStyle,
+  type TextStyle,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
 
 type Props = {
@@ -96,65 +94,6 @@ type Props = {
   testID?: string;
 };
 
-const LinkPressable = ({
-  route,
-  href,
-  children,
-  style,
-  onPress,
-  onLongPress,
-  onPressIn,
-  onPressOut,
-  accessibilityRole,
-  ...rest
-}: Omit<React.ComponentProps<typeof PlatformPressable>, 'style'> & {
-  style: StyleProp<ViewStyle>;
-} & {
-  route: Route<string>;
-  href?: string;
-  children: React.ReactNode;
-  onPress?: () => void;
-}) => {
-  if (Platform.OS === 'web') {
-    // React Native Web doesn't forward `onClick` if we use `TouchableWithoutFeedback`.
-    // We need to use `onClick` to be able to prevent default browser handling of links.
-    return (
-      <Link
-        {...rest}
-        href={href}
-        action={CommonActions.navigate(route.name, route.params)}
-        style={[styles.button, style]}
-        onPress={(e: any) => {
-          if (
-            !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
-            (e.button == null || e.button === 0) // ignore everything but left clicks
-          ) {
-            e.preventDefault();
-            onPress?.(e);
-          }
-        }}
-        // types for PressableProps and TextProps are incompatible with each other by `null` so we
-        // can't use {...rest} for these 3 props
-        onLongPress={onLongPress ?? undefined}
-        onPressIn={onPressIn ?? undefined}
-        onPressOut={onPressOut ?? undefined}
-      >
-        {children}
-      </Link>
-    );
-  } else {
-    return (
-      <PlatformPressable
-        {...rest}
-        accessibilityRole={accessibilityRole}
-        onPress={onPress}
-      >
-        <View style={style}>{children}</View>
-      </PlatformPressable>
-    );
-  }
-};
-
 /**
  * A component used to show an action item with an icon and a label in a navigation drawer.
  */
@@ -162,7 +101,6 @@ export function DrawerItem(props: Props) {
   const { colors, fonts } = useTheme();
 
   const {
-    route,
     href,
     icon,
     label,
@@ -182,7 +120,7 @@ export function DrawerItem(props: Props) {
     ...rest
   } = props;
 
-  const { borderRadius = 4 } = StyleSheet.flatten(style || {});
+  const { borderRadius = 56 } = StyleSheet.flatten(style || {});
   const color = focused ? activeTintColor : inactiveTintColor;
   const backgroundColor = focused
     ? activeBackgroundColor
@@ -196,31 +134,24 @@ export function DrawerItem(props: Props) {
       {...rest}
       style={[styles.container, { borderRadius, backgroundColor }, style]}
     >
-      <LinkPressable
+      <PlatformPressable
         testID={testID}
         onPress={onPress}
-        style={[styles.wrapper, { borderRadius }]}
         accessibilityLabel={accessibilityLabel}
         accessibilityRole="button"
         accessibilityState={{ selected: focused }}
         pressColor={pressColor}
         pressOpacity={pressOpacity}
-        route={route}
         href={href}
       >
-        <React.Fragment>
+        <View style={[styles.wrapper, { borderRadius }]}>
           {iconNode}
-          <View
-            style={[
-              styles.label,
-              { marginLeft: iconNode ? 32 : 0, marginVertical: 5 },
-            ]}
-          >
+          <View style={[styles.label, { marginStart: iconNode ? 16 : 0 }]}>
             {typeof label === 'string' ? (
               <Text
                 numberOfLines={1}
                 allowFontScaling={allowFontScaling}
-                style={[{ color }, fonts.medium, labelStyle]}
+                style={[styles.labelText, { color }, fonts.medium, labelStyle]}
               >
                 {label}
               </Text>
@@ -228,28 +159,32 @@ export function DrawerItem(props: Props) {
               label({ color, focused })
             )}
           </View>
-        </React.Fragment>
-      </LinkPressable>
+        </View>
+      </PlatformPressable>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    marginHorizontal: 10,
-    marginVertical: 4,
+    marginHorizontal: 12,
+    marginVertical: 2,
     overflow: 'hidden',
   },
   wrapper: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 8,
+    paddingVertical: 12,
+    paddingStart: 16,
+    paddingEnd: 24,
   },
   label: {
-    marginRight: 32,
+    marginEnd: 12,
+    marginVertical: 4,
     flex: 1,
   },
-  button: {
-    display: 'flex',
+  labelText: {
+    lineHeight: 24,
+    textAlignVertical: 'center',
   },
 });

package/src/views/DrawerItemList.tsx

@@ -1,9 +1,9 @@
 import {
   CommonActions,
   DrawerActions,
-  DrawerNavigationState,
-  ParamListBase,
-  useLinkTools,
+  type DrawerNavigationState,
+  type ParamListBase,
+  useLinkBuilder,
 } from '@react-navigation/native';
 import * as React from 'react';
 
@@ -20,7 +20,7 @@ type Props = {
  * Component that renders the navigation list in the drawer.
  */
 export function DrawerItemList({ state, navigation, descriptors }: Props) {
-  const { buildHref } = useLinkTools();
+  const { buildHref } = useLinkBuilder();
 
   const focusedRoute = state.routes[state.index];
   const focusedDescriptor = descriptors[focusedRoute.key];
@@ -71,8 +71,8 @@ export function DrawerItemList({ state, navigation, descriptors }: Props) {
           drawerLabel !== undefined
             ? drawerLabel
             : title !== undefined
-            ? title
-            : route.name
+              ? title
+              : route.name
         }
         icon={drawerIcon}
         focused={focused}

package/src/views/DrawerToggleButton.tsx

@@ -1,7 +1,7 @@
 import { PlatformPressable } from '@react-navigation/elements';
 import {
   DrawerActions,
-  ParamListBase,
+  type ParamListBase,
   useNavigation,
 } from '@react-navigation/native';
 import * as React from 'react';
@@ -22,8 +22,6 @@ export function DrawerToggleButton({ tintColor, ...rest }: Props) {
   return (
     <PlatformPressable
       {...rest}
-      accessible
-      accessibilityRole="button"
       android_ripple={{ borderless: true }}
       onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
       style={styles.touchable}
@@ -34,6 +32,7 @@ export function DrawerToggleButton({ tintColor, ...rest }: Props) {
     >
       <Image
         style={[styles.icon, tintColor ? { tintColor } : null]}
+        resizeMode="contain"
         source={require('./assets/toggle-drawer-icon.png')}
         fadeDuration={0}
       />
@@ -46,7 +45,6 @@ const styles = StyleSheet.create({
     height: 24,
     width: 24,
     margin: 3,
-    resizeMode: 'contain',
   },
   touchable: {
     marginHorizontal: 11,

package/src/views/DrawerView.tsx

@@ -1,4 +1,5 @@
 import {
+  getDefaultSidebarWidth,
   getHeaderTitle,
   Header,
   SafeAreaProviderCompat,
@@ -6,13 +7,14 @@ import {
 } from '@react-navigation/elements';
 import {
   DrawerActions,
-  DrawerNavigationState,
-  DrawerStatus,
-  ParamListBase,
+  type DrawerNavigationState,
+  type DrawerStatus,
+  type ParamListBase,
+  useLocale,
   useTheme,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { BackHandler, I18nManager, Platform, StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import { Drawer } from 'react-native-drawer-layout';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import useLatestCallback from 'use-latest-callback';
@@ -25,6 +27,7 @@ import type {
   DrawerNavigationHelpers,
   DrawerNavigationProp,
 } from '../types';
+import { addCancelListener } from '../utils/addCancelListener';
 import { DrawerPositionContext } from '../utils/DrawerPositionContext';
 import { DrawerStatusContext } from '../utils/DrawerStatusContext';
 import { getDrawerStatusFromState } from '../utils/getDrawerStatusFromState';
@@ -39,6 +42,8 @@ type Props = DrawerNavigationConfig & {
   descriptors: DrawerDescriptorMap;
 };
 
+const DRAWER_BORDER_RADIUS = 16;
+
 function DrawerViewBase({
   state,
   navigation,
@@ -51,14 +56,16 @@ function DrawerViewBase({
     Platform.OS === 'android' ||
     Platform.OS === 'ios',
 }: Props) {
+  const { direction } = useLocale();
+
   const focusedRouteKey = state.routes[state.index].key;
   const {
     drawerHideStatusBarOnOpen,
-    drawerPosition = I18nManager.getConstants().isRTL ? 'right' : 'left',
+    drawerPosition = direction === 'rtl' ? 'right' : 'left',
     drawerStatusBarAnimation,
     drawerStyle,
-    drawerType,
-    gestureHandlerProps,
+    drawerType = Platform.select({ ios: 'slide', default: 'front' }),
+    configureGestureHandler,
     keyboardDismissMode,
     overlayColor = 'rgba(0, 0, 0, 0.5)',
     swipeEdgeWidth,
@@ -153,31 +160,10 @@ function DrawerViewBase({
       return true;
     };
 
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        handleHardwareBack();
-      }
-    };
-
     // We only add the listeners when drawer opens
     // This way we can make sure that the listener is added as late as possible
     // This will make sure that our handler will run first when back button is pressed
-    const subscription = BackHandler.addEventListener(
-      'hardwareBackPress',
-      handleHardwareBack
-    );
-
-    if (Platform.OS === 'web') {
-      document?.body?.addEventListener?.('keyup', handleEscape);
-    }
-
-    return () => {
-      subscription.remove();
-
-      if (Platform.OS === 'web') {
-        document?.body?.removeEventListener?.('keyup', handleEscape);
-      }
-    };
+    return addCancelListener(handleHardwareBack);
   }, [
     defaultStatus,
     drawerStatus,
@@ -215,8 +201,13 @@ function DrawerViewBase({
             return null;
           }
 
-          if (lazy && !loaded.includes(route.key) && !isFocused) {
-            // Don't render a lazy screen if we've never navigated to it
+          if (
+            lazy &&
+            !loaded.includes(route.key) &&
+            !isFocused &&
+            !state.preloadedRouteKeys.includes(route.key)
+          ) {
+            // Don't render a lazy screen if we've never navigated to it or it wasn't preloaded
             return null;
           }
 
@@ -284,7 +275,7 @@ function DrawerViewBase({
         onTransitionStart={handleTransitionStart}
         onTransitionEnd={handleTransitionEnd}
         layout={dimensions}
-        gestureHandlerProps={gestureHandlerProps}
+        configureGestureHandler={configureGestureHandler}
         swipeEnabled={swipeEnabled}
         swipeEdgeWidth={swipeEdgeWidth}
         swipeMinDistance={swipeMinDistance}
@@ -295,16 +286,30 @@ function DrawerViewBase({
         overlayAccessibilityLabel={overlayAccessibilityLabel}
         drawerPosition={drawerPosition}
         drawerStyle={[
-          { backgroundColor: colors.card },
+          {
+            backgroundColor: colors.card,
+            width: getDefaultSidebarWidth(dimensions),
+          },
           drawerType === 'permanent' &&
             (drawerPosition === 'left'
               ? {
-                  borderRightColor: colors.border,
-                  borderRightWidth: StyleSheet.hairlineWidth,
+                  borderEndColor: colors.border,
+                  borderEndWidth: StyleSheet.hairlineWidth,
+                }
+              : {
+                  borderStartColor: colors.border,
+                  borderStartWidth: StyleSheet.hairlineWidth,
+                }),
+
+          drawerType === 'front' &&
+            (drawerPosition === 'left'
+              ? {
+                  borderTopRightRadius: DRAWER_BORDER_RADIUS,
+                  borderBottomRightRadius: DRAWER_BORDER_RADIUS,
                 }
               : {
-                  borderLeftColor: colors.border,
-                  borderLeftWidth: StyleSheet.hairlineWidth,
+                  borderTopLeftRadius: DRAWER_BORDER_RADIUS,
+                  borderBottomLeftRadius: DRAWER_BORDER_RADIUS,
                 }),
           drawerStyle,
         ]}

package/src/views/ScreenFallback.tsx

@@ -1,6 +1,11 @@
 import { ResourceSavingView } from '@react-navigation/elements';
 import * as React from 'react';
-import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+import {
+  type StyleProp,
+  View,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
 
 type Props = {
   visible: boolean;