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

package/src/types.tsx

@@ -35,16 +35,6 @@ export type DrawerNavigationConfig = {
    * Defaults to `true`.
    */
   detachInactiveScreens?: boolean;
-  /**
-   * Whether to use the legacy implementation based on Reanimated 1.
-   * The new implementation based on Reanimated 2 will perform better,
-   * but it's not possible to use Chrome remote debugger.
-   *
-   * This defaults to `true` if Reanimated 2 is not configured.
-   *
-   * Otherwise, it defaults to `false`
-   */
-  useLegacyImplementation?: boolean;
 };
 
 export type DrawerNavigationOptions = HeaderOptions & {
@@ -258,6 +248,26 @@ export type DrawerNavigationEventMap = {
    * Event which fires on tapping on the item in the drawer menu.
    */
   drawerItemPress: { data: undefined; canPreventDefault: true };
+  /**
+   * Event which fires when a transition animation starts.
+   */
+  transitionStart: { data: { closing: boolean } };
+  /**
+   * Event which fires when a transition animation ends.
+   */
+  transitionEnd: { data: { closing: boolean } };
+  /**
+   * Event which fires when navigation gesture starts.
+   */
+  gestureStart: { data: undefined };
+  /**
+   * Event which fires when navigation gesture is completed.
+   */
+  gestureEnd: { data: undefined };
+  /**
+   * Event which fires when navigation gesture is canceled.
+   */
+  gestureCancel: { data: undefined };
 };
 
 export type DrawerNavigationHelpers = NavigationHelpers<
@@ -269,7 +279,7 @@ export type DrawerNavigationHelpers = NavigationHelpers<
 export type DrawerNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined
+  NavigatorID extends string | undefined = undefined,
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -283,7 +293,7 @@ export type DrawerNavigationProp<
 export type DrawerScreenProps<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined
+  NavigatorID extends string | undefined = undefined,
 > = {
   navigation: DrawerNavigationProp<ParamList, RouteName, NavigatorID>;
   route: RouteProp<ParamList, RouteName>;

package/src/utils/DrawerPositionContext.tsx

@@ -1,3 +1,5 @@
 import * as React from 'react';
 
-export default React.createContext<'left' | 'right' | undefined>(undefined);
+export const DrawerPositionContext = React.createContext<
+  'left' | 'right' | undefined
+>(undefined);

package/src/utils/DrawerStatusContext.tsx

@@ -1,8 +1,6 @@
 import type { DrawerStatus } from '@react-navigation/native';
 import * as React from 'react';
 
-const DrawerStatusContext = React.createContext<DrawerStatus | undefined>(
-  undefined
-);
-
-export default DrawerStatusContext;
+export const DrawerStatusContext = React.createContext<
+  DrawerStatus | undefined
+>(undefined);

package/src/utils/addCancelListener.native.tsx

@@ -0,0 +1,12 @@
+import { BackHandler } from 'react-native';
+
+export const addCancelListener = (callback: () => boolean) => {
+  const subscription = BackHandler.addEventListener(
+    'hardwareBackPress',
+    callback
+  );
+
+  return () => {
+    subscription.remove();
+  };
+};

package/src/utils/addCancelListener.tsx

@@ -0,0 +1,13 @@
+export const addCancelListener = (callback: () => boolean) => {
+  const handleEscape = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      callback();
+    }
+  };
+
+  document?.body?.addEventListener?.('keyup', handleEscape);
+
+  return () => {
+    document?.body?.removeEventListener?.('keyup', handleEscape);
+  };
+};

package/src/utils/getDrawerStatusFromState.tsx

@@ -4,7 +4,7 @@ import type {
   ParamListBase,
 } from '@react-navigation/native';
 
-export default function getDrawerStatusFromState(
+export function getDrawerStatusFromState(
   state: DrawerNavigationState<ParamListBase>
 ): DrawerStatus {
   if (state.history == null) {

package/src/utils/useDrawerStatus.tsx

@@ -1,13 +1,13 @@
 import type { DrawerStatus } from '@react-navigation/native';
 import * as React from 'react';
 
-import DrawerStatusContext from './DrawerStatusContext';
+import { DrawerStatusContext } from './DrawerStatusContext';
 
 /**
  * Hook to detect if the drawer's status in a parent navigator.
  * Returns 'open' if the drawer is open, 'closed' if the drawer is closed.
  */
-export default function useDrawerStatus(): DrawerStatus {
+export function useDrawerStatus(): DrawerStatus {
   const drawerStatus = React.useContext(DrawerStatusContext);
 
   if (drawerStatus === undefined) {

package/src/views/DrawerContent.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
 import type { DrawerContentComponentProps } from '../types';
-import DrawerContentScrollView from './DrawerContentScrollView';
-import DrawerItemList from './DrawerItemList';
+import { DrawerContentScrollView } from './DrawerContentScrollView';
+import { DrawerItemList } from './DrawerItemList';
 
-export default function DrawerContent({
+export function DrawerContent({
   descriptors,
   state,
   ...rest

package/src/views/DrawerContentScrollView.tsx

@@ -1,28 +1,26 @@
+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';
+import { DrawerPositionContext } from '../utils/DrawerPositionContext';
 
 type Props = ScrollViewProps & {
   children: React.ReactNode;
 };
 
-function DrawerContentScrollView(
+function DrawerContentScrollViewInner(
   { contentContainerStyle, style, children, ...rest }: Props,
   ref?: React.Ref<ScrollView>
 ) {
   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
@@ -43,7 +41,9 @@ function DrawerContentScrollView(
   );
 }
 
-export default React.forwardRef(DrawerContentScrollView);
+export const DrawerContentScrollView = React.forwardRef(
+  DrawerContentScrollViewInner
+);
 
 const styles = StyleSheet.create({
   container: {

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,73 +94,13 @@ 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.
  */
-export default function DrawerItem(props: Props) {
-  const { colors } = useTheme();
+export function DrawerItem(props: Props) {
+  const { colors, fonts } = useTheme();
 
   const {
-    route,
     href,
     icon,
     label,
@@ -196,19 +134,17 @@ export default 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={[
@@ -220,13 +156,7 @@ export default function DrawerItem(props: Props) {
               <Text
                 numberOfLines={1}
                 allowFontScaling={allowFontScaling}
-                style={[
-                  {
-                    color,
-                    fontWeight: '500',
-                  },
-                  labelStyle,
-                ]}
+                style={[{ color }, fonts.medium, labelStyle]}
               >
                 {label}
               </Text>
@@ -234,8 +164,8 @@ export default function DrawerItem(props: Props) {
               label({ color, focused })
             )}
           </View>
-        </React.Fragment>
-      </LinkPressable>
+        </View>
+      </PlatformPressable>
     </View>
   );
 }
@@ -255,7 +185,4 @@ const styles = StyleSheet.create({
     marginRight: 32,
     flex: 1,
   },
-  button: {
-    display: 'flex',
-  },
 });

package/src/views/DrawerItemList.tsx

@@ -1,14 +1,14 @@
 import {
   CommonActions,
   DrawerActions,
-  DrawerNavigationState,
-  ParamListBase,
-  useLinkTools,
+  type DrawerNavigationState,
+  type ParamListBase,
+  useLinkBuilder,
 } from '@react-navigation/native';
 import * as React from 'react';
 
 import type { DrawerDescriptorMap, DrawerNavigationHelpers } from '../types';
-import DrawerItem from './DrawerItem';
+import { DrawerItem } from './DrawerItem';
 
 type Props = {
   state: DrawerNavigationState<ParamListBase>;
@@ -19,12 +19,8 @@ type Props = {
 /**
  * Component that renders the navigation list in the drawer.
  */
-export default function DrawerItemList({
-  state,
-  navigation,
-  descriptors,
-}: Props) {
-  const { buildHref } = useLinkTools();
+export function DrawerItemList({ state, navigation, descriptors }: Props) {
+  const { buildHref } = useLinkBuilder();
 
   const focusedRoute = state.routes[state.index];
   const focusedDescriptor = descriptors[focusedRoute.key];
@@ -75,8 +71,8 @@ export default function DrawerItemList({
           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';
@@ -16,14 +16,12 @@ type Props = {
   tintColor?: string;
 };
 
-export default function DrawerToggleButton({ tintColor, ...rest }: Props) {
+export function DrawerToggleButton({ tintColor, ...rest }: Props) {
   const navigation = useNavigation<DrawerNavigationProp<ParamListBase>>();
 
   return (
     <PlatformPressable
       {...rest}
-      accessible
-      accessibilityRole="button"
       android_ripple={{ borderless: true }}
       onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
       style={styles.touchable}
@@ -34,6 +32,7 @@ export default 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,15 +7,17 @@ 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';
 
 import type {
   DrawerContentComponentProps,
@@ -24,11 +27,12 @@ import type {
   DrawerNavigationHelpers,
   DrawerNavigationProp,
 } from '../types';
-import DrawerPositionContext from '../utils/DrawerPositionContext';
-import DrawerStatusContext from '../utils/DrawerStatusContext';
-import getDrawerStatusFromState from '../utils/getDrawerStatusFromState';
-import DrawerContent from './DrawerContent';
-import DrawerToggleButton from './DrawerToggleButton';
+import { addCancelListener } from '../utils/addCancelListener';
+import { DrawerPositionContext } from '../utils/DrawerPositionContext';
+import { DrawerStatusContext } from '../utils/DrawerStatusContext';
+import { getDrawerStatusFromState } from '../utils/getDrawerStatusFromState';
+import { DrawerContent } from './DrawerContent';
+import { DrawerToggleButton } from './DrawerToggleButton';
 import { MaybeScreen, MaybeScreenContainer } from './ScreenFallback';
 
 type Props = DrawerNavigationConfig & {
@@ -50,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,
@@ -80,19 +86,56 @@ function DrawerViewBase({
 
   const drawerStatus = getDrawerStatusFromState(state);
 
-  const handleDrawerOpen = React.useCallback(() => {
+  const handleDrawerOpen = useLatestCallback(() => {
     navigation.dispatch({
       ...DrawerActions.openDrawer(),
       target: state.key,
     });
-  }, [navigation, state.key]);
+  });
 
-  const handleDrawerClose = React.useCallback(() => {
+  const handleDrawerClose = useLatestCallback(() => {
     navigation.dispatch({
       ...DrawerActions.closeDrawer(),
       target: state.key,
     });
-  }, [navigation, state.key]);
+  });
+
+  const handleGestureStart = useLatestCallback(() => {
+    navigation.emit({
+      type: 'gestureStart',
+      target: state.key,
+    });
+  });
+
+  const handleGestureEnd = useLatestCallback(() => {
+    navigation.emit({
+      type: 'gestureEnd',
+      target: state.key,
+    });
+  });
+
+  const handleGestureCancel = useLatestCallback(() => {
+    navigation.emit({
+      type: 'gestureCancel',
+      target: state.key,
+    });
+  });
+
+  const handleTransitionStart = useLatestCallback((closing: boolean) => {
+    navigation.emit({
+      type: 'transitionStart',
+      data: { closing },
+      target: state.key,
+    });
+  });
+
+  const handleTransitionEnd = useLatestCallback((closing: boolean) => {
+    navigation.emit({
+      type: 'transitionEnd',
+      data: { closing },
+      target: state.key,
+    });
+  });
 
   React.useEffect(() => {
     if (drawerStatus === defaultStatus || drawerType === 'permanent') {
@@ -115,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,
@@ -177,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;
           }
 
@@ -240,6 +267,11 @@ function DrawerViewBase({
         open={drawerStatus !== 'closed'}
         onOpen={handleDrawerOpen}
         onClose={handleDrawerClose}
+        onGestureStart={handleGestureStart}
+        onGestureEnd={handleGestureEnd}
+        onGestureCancel={handleGestureCancel}
+        onTransitionStart={handleTransitionStart}
+        onTransitionEnd={handleTransitionEnd}
         layout={dimensions}
         gestureHandlerProps={gestureHandlerProps}
         swipeEnabled={swipeEnabled}
@@ -252,7 +284,10 @@ function DrawerViewBase({
         overlayAccessibilityLabel={overlayAccessibilityLabel}
         drawerPosition={drawerPosition}
         drawerStyle={[
-          { backgroundColor: colors.card },
+          {
+            backgroundColor: colors.card,
+            width: getDefaultSidebarWidth(dimensions),
+          },
           drawerType === 'permanent' &&
             (drawerPosition === 'left'
               ? {
@@ -274,7 +309,7 @@ function DrawerViewBase({
   );
 }
 
-export default function DrawerView({ navigation, ...rest }: Props) {
+export function DrawerView({ navigation, ...rest }: Props) {
   return (
     <SafeAreaProviderCompat>
       <DrawerViewBase navigation={navigation} {...rest} />

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;