@react-navigation/drawer 7.0.0-alpha.4 → 7.0.0-alpha.6

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,8 +1,8 @@
 import {
   CommonActions,
   DrawerActions,
-  DrawerNavigationState,
-  ParamListBase,
+  type DrawerNavigationState,
+  type ParamListBase,
   useLinkTools,
 } from '@react-navigation/native';
 import * as React from 'react';

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

@@ -7,14 +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, 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';
@@ -27,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';
@@ -157,30 +158,10 @@ function DrawerViewBase({
       return true;
     };
 
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        handleHardwareBack();
-      }
-    };
-
-    if (Platform.OS === 'web') {
-      document?.body?.addEventListener?.('keyup', handleEscape);
-      return () => {
-        document?.body?.removeEventListener?.('keyup', handleEscape);
-      };
-    }
-
     // 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
-    );
-
-    return () => {
-      subscription?.remove?.();
-    };
+    return addCancelListener(handleHardwareBack);
   }, [
     defaultStatus,
     drawerStatus,

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;