@react-navigation/drawer 7.0.0-alpha.1 → 7.0.0-alpha.10

package/src/views/DrawerContentScrollView.tsx

@@ -1,10 +1,6 @@
+import { useLocale } from '@react-navigation/native';
 import * as React from 'react';
-import {
-  I18nManager,
-  ScrollView,
-  ScrollViewProps,
-  StyleSheet,
-} from 'react-native';
+import { ScrollView, type ScrollViewProps, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { DrawerPositionContext } from '../utils/DrawerPositionContext';
@@ -19,10 +15,12 @@ function DrawerContentScrollViewInner(
 ) {
   const drawerPosition = React.useContext(DrawerPositionContext);
   const insets = useSafeAreaInsets();
+  const { direction } = useLocale();
 
-  const isRight = I18nManager.getConstants().isRTL
-    ? drawerPosition === 'left'
-    : drawerPosition === 'right';
+  const isRight =
+    direction === 'rtl'
+      ? drawerPosition === 'left'
+      : drawerPosition === 'right';
 
   return (
     <ScrollView

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,
@@ -196,19 +134,17 @@ 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={[
@@ -228,8 +164,8 @@ export function DrawerItem(props: Props) {
               label({ color, focused })
             )}
           </View>
-        </React.Fragment>
-      </LinkPressable>
+        </View>
+      </PlatformPressable>
     </View>
   );
 }
@@ -249,7 +185,4 @@ const styles = StyleSheet.create({
     marginRight: 32,
     flex: 1,
   },
-  button: {
-    display: 'flex',
-  },
 });

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';
@@ -51,10 +54,12 @@ 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,
@@ -153,31 +158,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 +199,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;
           }
 
@@ -295,7 +284,10 @@ function DrawerViewBase({
         overlayAccessibilityLabel={overlayAccessibilityLabel}
         drawerPosition={drawerPosition}
         drawerStyle={[
-          { backgroundColor: colors.card },
+          {
+            backgroundColor: colors.card,
+            width: getDefaultSidebarWidth(dimensions),
+          },
           drawerType === 'permanent' &&
             (drawerPosition === 'left'
               ? {

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;