@react-navigation/drawer 8.0.0-alpha.4 → 8.0.0-alpha.40

package/src/types.tsx

@@ -1,4 +1,5 @@
-import type { HeaderOptions } from '@react-navigation/elements';
+import type { HeaderOptions, Icon } from '@react-navigation/elements';
+import type { Screen } from '@react-navigation/elements/internal';
 import type {
   DefaultNavigatorOptions,
   Descriptor,
@@ -13,7 +14,7 @@ import type {
   Theme,
 } from '@react-navigation/native';
 import type { ColorValue, StyleProp, TextStyle, ViewStyle } from 'react-native';
-import type { PanGesture } from 'react-native-gesture-handler';
+import type { PanGestureConfig } from 'react-native-gesture-handler';
 
 export type Scene = {
   route: Route<string>;
@@ -29,12 +30,6 @@ export type DrawerNavigationConfig = {
    * Defaults to `DrawerContent`.
    */
   drawerContent?: (props: DrawerContentComponentProps) => React.ReactNode;
-  /**
-   * Whether inactive screens should be detached from the view hierarchy to save memory.
-   * Make sure to call `enableScreens` from `react-native-screens` to make it work.
-   * Defaults to `true`.
-   */
-  detachInactiveScreens?: boolean;
 };
 
 export type DrawerNavigationOptions = HeaderOptions & {
@@ -70,13 +65,15 @@ export type DrawerNavigationOptions = HeaderOptions & {
     | ((props: { color: ColorValue; focused: boolean }) => React.ReactNode);
 
   /**
-   * A function that given { focused: boolean, color: ColorValue } returns a React.Node to display an icon the drawer.
+   * Icon to display for the drawer item.
    */
-  drawerIcon?: (props: {
-    color: ColorValue;
-    size: number;
-    focused: boolean;
-  }) => React.ReactNode;
+  drawerIcon?:
+    | Icon
+    | ((props: {
+        color: ColorValue;
+        size: number;
+        focused: boolean;
+      }) => Icon | React.ReactNode);
 
   /**
    * Color for the icon and label in the active item in the drawer.
@@ -108,6 +105,11 @@ export type DrawerNavigationOptions = HeaderOptions & {
    */
   drawerItemStyle?: StyleProp<ViewStyle>;
 
+  /**
+   * ID to locate this drawer item in tests.
+   */
+  drawerItemTestID?: string;
+
   /**
    * Style object to apply to the `Text` inside content section which renders a label.
    */
@@ -143,7 +145,7 @@ export type DrawerNavigationOptions = HeaderOptions & {
    *
    * Defaults to `slide` on iOS and `front` on other platforms.
    */
-  drawerType?: 'front' | 'back' | 'slide' | 'permanent';
+  drawerType?: 'front' | 'back' | 'slide' | 'permanent' | undefined;
 
   /**
    * Whether the statusbar should be hidden when the drawer is pulled or opens,
@@ -170,12 +172,12 @@ export type DrawerNavigationOptions = HeaderOptions & {
   /**
    * Style object for the component wrapping the screen content.
    */
-  sceneStyle?: StyleProp<ViewStyle>;
+  sceneStyle?: React.ComponentProps<typeof Screen>['style'];
 
   /**
-   * Function to modify the pan gesture handler via RNGH properties API.
+   * Function to modify the pan gesture config.
    */
-  configureGestureHandler?: (gesture: PanGesture) => PanGesture;
+  configureGestureHandler?: (gesture: PanGestureConfig) => PanGestureConfig;
 
   /**
    * Whether you can use swipe gestures to open or close the drawer.
@@ -208,13 +210,17 @@ export type DrawerNavigationOptions = HeaderOptions & {
   popToTopOnBlur?: boolean;
 
   /**
-   * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
-   * Defaults to `true` when `enableFreeze()` is run at the top of the application.
-   * Requires `react-native-screens` version >=3.16.0.
+   * What should happen when screens become inactive.
+   * - `pause`: Effects are cleaned up.
+   * - `none`: Screen renders normally
+   *
+   * Defaults to `pause`.
    *
-   * Only supported on iOS and Android.
+   * If you set `lazy: false` or preload a screen,
+   * It won't be paused until after the first time it becomes focused.
+   * This makes sure that effects are run to initialize the screen.
    */
-  freezeOnBlur?: boolean;
+  inactiveBehavior?: 'pause' | 'none';
 };
 
 export type DrawerContentComponentProps = {
@@ -307,11 +313,10 @@ export type DrawerDescriptor = Descriptor<
 export type DrawerDescriptorMap = Record<string, DrawerDescriptor>;
 
 export type DrawerProps = {
-  dimensions: { width: number; height: number };
   drawerPosition: 'left' | 'right';
   drawerStyle?: StyleProp<ViewStyle>;
   drawerType: 'front' | 'back' | 'slide' | 'permanent';
-  configureGestureHandler?: (gesture: PanGesture) => PanGesture;
+  configureGestureHandler?: (gesture: PanGestureConfig) => PanGestureConfig;
   hideStatusBarOnOpen: boolean;
   keyboardDismissMode: 'none' | 'on-drag';
   onClose: () => void;

package/src/utils/useDrawerStatus.tsx

@@ -8,7 +8,7 @@ import { DrawerStatusContext } from './DrawerStatusContext';
  * Returns 'open' if the drawer is open, 'closed' if the drawer is closed.
  */
 export function useDrawerStatus(): DrawerStatus {
-  const drawerStatus = React.useContext(DrawerStatusContext);
+  const drawerStatus = React.use(DrawerStatusContext);
 
   if (drawerStatus === undefined) {
     throw new Error(

package/src/views/DrawerContent.tsx

@@ -8,8 +8,12 @@ export function DrawerContent({
   ...rest
 }: DrawerContentComponentProps) {
   const focusedRoute = state.routes[state.index];
-  const focusedDescriptor = descriptors[focusedRoute.key];
-  const focusedOptions = focusedDescriptor.options;
+
+  if (focusedRoute == null) {
+    throw new Error(`Couldn't find a route at index ${state.index}.`);
+  }
+
+  const focusedOptions = descriptors[focusedRoute.key]?.options ?? {};
 
   const { drawerContentStyle, drawerContentContainerStyle } = focusedOptions;
 

package/src/views/DrawerContentScrollView.tsx

@@ -1,21 +1,31 @@
-import { useLocale } from '@react-navigation/native';
+import { UNSTABLE_CornerInset, useLocale } from '@react-navigation/native';
 import * as React from 'react';
-import { ScrollView, type ScrollViewProps, StyleSheet } from 'react-native';
+import {
+  Platform,
+  ScrollView,
+  type ScrollViewProps,
+  StyleSheet,
+} from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { DrawerPositionContext } from '../utils/DrawerPositionContext';
 
 type Props = ScrollViewProps & {
   children: React.ReactNode;
+  ref?: React.Ref<ScrollView>;
 };
 
 const SPACING = 12;
 
-function DrawerContentScrollViewInner(
-  { contentContainerStyle, style, children, ...rest }: Props,
-  ref?: React.Ref<ScrollView>
-) {
-  const drawerPosition = React.useContext(DrawerPositionContext);
+export function DrawerContentScrollView({
+  contentInsetAdjustmentBehavior = 'automatic',
+  contentContainerStyle,
+  style,
+  children,
+  ref,
+  ...rest
+}: Props) {
+  const drawerPosition = React.use(DrawerPositionContext);
   const insets = useSafeAreaInsets();
   const { direction } = useLocale();
 
@@ -28,26 +38,32 @@ function DrawerContentScrollViewInner(
     <ScrollView
       {...rest}
       ref={ref}
+      contentInsetAdjustmentBehavior={contentInsetAdjustmentBehavior}
       contentContainerStyle={[
         {
-          paddingTop: SPACING + insets.top,
-          paddingBottom: SPACING + insets.bottom,
-          paddingStart: SPACING + (!isRight ? insets.left : 0),
-          paddingEnd: SPACING + (isRight ? insets.right : 0),
+          paddingTop:
+            SPACING + Platform.select({ ios: 0, default: insets.top }),
+          paddingBottom:
+            SPACING + Platform.select({ ios: 0, default: insets.bottom }),
+          paddingStart:
+            SPACING +
+            (!isRight ? Platform.select({ ios: 0, default: insets.left }) : 0),
+          paddingEnd:
+            SPACING +
+            (isRight ? Platform.select({ ios: 0, default: insets.right }) : 0),
         },
         contentContainerStyle,
       ]}
       style={[styles.container, style]}
     >
+      {Platform.OS === 'ios' && contentInsetAdjustmentBehavior !== 'never' && (
+        <UNSTABLE_CornerInset direction="vertical" edge="top" />
+      )}
       {children}
     </ScrollView>
   );
 }
 
-export const DrawerContentScrollView = React.forwardRef(
-  DrawerContentScrollViewInner
-);
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,

package/src/views/DrawerItem.tsx

@@ -1,9 +1,15 @@
-import { PlatformPressable, Text } from '@react-navigation/elements';
+import { type Icon, PlatformPressable, Text } from '@react-navigation/elements';
 import { Color } from '@react-navigation/elements/internal';
-import { type Route, useTheme } from '@react-navigation/native';
-import * as React from 'react';
+import {
+  MaterialSymbol,
+  type Route,
+  SFSymbol,
+  useTheme,
+} from '@react-navigation/native';
+import React from 'react';
 import {
   type ColorValue,
+  Image,
   Platform,
   type StyleProp,
   StyleSheet,
@@ -16,11 +22,11 @@ type Props = {
   /**
    * The route object which should be specified by the drawer item.
    */
-  route?: Route<string>;
+  route?: Route<string> | undefined;
   /**
    * The `href` to use for the anchor tag on web
    */
-  href?: string;
+  href?: string | undefined;
   /**
    * The label text of the item.
    */
@@ -30,15 +36,18 @@ type Props = {
   /**
    * Icon to display for the `DrawerItem`.
    */
-  icon?: (props: {
-    focused: boolean;
-    size: number;
-    color: ColorValue;
-  }) => React.ReactNode;
+  icon?:
+    | Icon
+    | ((props: {
+        focused: boolean;
+        size: number;
+        color: ColorValue;
+      }) => Icon | React.ReactNode)
+    | undefined;
   /**
    * Whether to highlight the drawer item as active.
    */
-  focused?: boolean;
+  focused?: boolean | undefined;
   /**
    * Function to execute on press.
    */
@@ -46,54 +55,54 @@ type Props = {
   /**
    * Color for the icon and label when the item is active.
    */
-  activeTintColor?: ColorValue;
+  activeTintColor?: ColorValue | undefined;
   /**
    * Color for the icon and label when the item is inactive.
    */
-  inactiveTintColor?: ColorValue;
+  inactiveTintColor?: ColorValue | undefined;
   /**
    * Background color for item when its active.
    */
-  activeBackgroundColor?: ColorValue;
+  activeBackgroundColor?: ColorValue | undefined;
   /**
    * Background color for item when its inactive.
    */
-  inactiveBackgroundColor?: ColorValue;
+  inactiveBackgroundColor?: ColorValue | undefined;
   /**
    * Color of the touchable effect on press.
    * Only supported on Android.
    *
    * @platform android
    */
-  pressColor?: ColorValue;
+  pressColor?: ColorValue | undefined;
   /**
    * Opacity of the touchable effect on press.
    * Only supported on iOS.
    *
    * @platform ios
    */
-  pressOpacity?: number;
+  pressOpacity?: number | undefined;
   /**
    * Style object for the label element.
    */
-  labelStyle?: StyleProp<TextStyle>;
+  labelStyle?: StyleProp<TextStyle> | undefined;
   /**
    * Style object for the wrapper element.
    */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
   /**
    * Whether label font should scale to respect Text Size accessibility settings.
    */
-  allowFontScaling?: boolean;
+  allowFontScaling?: boolean | undefined;
 
   /**
    * Accessibility label for drawer item.
    */
-  accessibilityLabel?: string;
+  accessibilityLabel?: string | undefined;
   /**
    * ID to locate this drawer item in tests.
    */
-  testID?: string;
+  testID?: string | undefined;
 };
 
 /**
@@ -134,7 +143,59 @@ export function DrawerItem(props: Props) {
       'rgba(0, 0, 0, 0.06)')
     : inactiveBackgroundColor;
 
-  const iconNode = icon ? icon({ size: 24, focused, color }) : null;
+  const iconNode = React.useMemo(() => {
+    if (!icon) {
+      return null;
+    }
+
+    const size = 24;
+
+    const iconValue =
+      typeof icon === 'function' ? icon({ size, focused, color }) : icon;
+
+    if (React.isValidElement(iconValue)) {
+      return iconValue;
+    }
+
+    if (
+      typeof iconValue === 'object' &&
+      iconValue != null &&
+      'type' in iconValue
+    ) {
+      switch (iconValue.type) {
+        case 'image':
+          return (
+            <Image
+              source={iconValue.source}
+              style={{
+                width: size,
+                height: size,
+                tintColor: iconValue.tinted === false ? undefined : color,
+              }}
+            />
+          );
+        case 'sfSymbol':
+          return <SFSymbol name={iconValue.name} size={size} color={color} />;
+        case 'materialSymbol':
+          return (
+            <MaterialSymbol
+              name={iconValue.name}
+              variant={iconValue.variant}
+              weight={iconValue.weight}
+              size={size}
+              color={color}
+            />
+          );
+        default: {
+          const _exhaustiveCheck: never = iconValue;
+
+          return _exhaustiveCheck;
+        }
+      }
+    }
+
+    return null;
+  }, [icon, focused, color]);
 
   return (
     <View
@@ -147,7 +208,10 @@ export function DrawerItem(props: Props) {
         onPress={onPress}
         role="button"
         aria-label={accessibilityLabel}
-        aria-selected={focused}
+        aria-current={
+          Platform.OS === 'web' ? (focused ? 'page' : undefined) : undefined
+        }
+        aria-selected={Platform.OS === 'web' ? undefined : focused}
         pressColor={pressColor}
         pressOpacity={pressOpacity}
         hoverEffect={typeof color === 'string' ? { color } : undefined}

package/src/views/DrawerItemList.tsx

@@ -23,8 +23,12 @@ export function DrawerItemList({ state, navigation, descriptors }: Props) {
   const { buildHref } = useLinkBuilder();
 
   const focusedRoute = state.routes[state.index];
-  const focusedDescriptor = descriptors[focusedRoute.key];
-  const focusedOptions = focusedDescriptor.options;
+
+  if (focusedRoute == null) {
+    throw new Error(`Couldn't find a route at index ${state.index}.`);
+  }
+
+  const focusedOptions = descriptors[focusedRoute.key]?.options ?? {};
 
   const {
     drawerActiveTintColor,
@@ -34,6 +38,12 @@ export function DrawerItemList({ state, navigation, descriptors }: Props) {
   } = focusedOptions;
 
   return state.routes.map((route, i) => {
+    const descriptor = descriptors[route.key];
+
+    if (descriptor == null) {
+      throw new Error(`Couldn't find a descriptor for route '${route.key}'.`);
+    }
+
     const focused = i === state.index;
 
     const onPress = () => {
@@ -47,7 +57,7 @@ export function DrawerItemList({ state, navigation, descriptors }: Props) {
         navigation.dispatch({
           ...(focused
             ? DrawerActions.closeDrawer()
-            : CommonActions.navigate(route)),
+            : CommonActions.navigate(route.name, route.params)),
           target: state.key,
         });
       }
@@ -59,8 +69,9 @@ export function DrawerItemList({ state, navigation, descriptors }: Props) {
       drawerIcon,
       drawerLabelStyle,
       drawerItemStyle,
+      drawerItemTestID,
       drawerAllowFontScaling,
-    } = descriptors[route.key].options;
+    } = descriptor.options;
 
     return (
       <DrawerItem
@@ -84,6 +95,7 @@ export function DrawerItemList({ state, navigation, descriptors }: Props) {
         labelStyle={drawerLabelStyle}
         style={drawerItemStyle}
         onPress={onPress}
+        testID={drawerItemTestID}
       />
     );
   }) as React.ReactNode as React.ReactElement;

package/src/views/DrawerToggleButton.tsx

@@ -1,51 +1,95 @@
-import { HeaderButton } from '@react-navigation/elements';
-import { DrawerActions, useNavigation } from '@react-navigation/native';
+import { HeaderButton, type Icon } from '@react-navigation/elements';
 import {
-  type ColorValue,
-  Image,
-  type ImageSourcePropType,
-  StyleSheet,
-} from 'react-native';
+  DrawerActions,
+  MaterialSymbol,
+  SFSymbol,
+  useNavigation,
+} from '@react-navigation/native';
+import * as React from 'react';
+import { type ColorValue, Image, Platform, StyleSheet } from 'react-native';
 
 import toggleDrawerIcon from './assets/toggle-drawer-icon.png';
 
 type Props = {
-  accessibilityLabel?: string;
-  pressColor?: ColorValue;
-  pressOpacity?: number;
-  tintColor?: ColorValue;
-  imageSource?: ImageSourcePropType;
+  icon?:
+    | Icon
+    | ((props: { tintColor: ColorValue | undefined }) => React.ReactNode)
+    | undefined;
+  accessibilityLabel?: string | undefined;
+  pressColor?: ColorValue | undefined;
+  pressOpacity?: number | undefined;
+  tintColor?: ColorValue | undefined;
+  testID?: string | undefined;
 };
 
 export function DrawerToggleButton({
+  icon,
   tintColor,
   accessibilityLabel = 'Show navigation menu',
-  imageSource = toggleDrawerIcon,
   ...rest
 }: Props) {
   const navigation = useNavigation();
 
+  const drawerIcon =
+    icon ??
+    Platform.select<Icon>({
+      ios: {
+        type: 'sfSymbol',
+        name: 'line.3.horizontal',
+      },
+      android: {
+        type: 'materialSymbol',
+        name: 'menu',
+      },
+      default: {
+        type: 'image',
+        source: toggleDrawerIcon,
+      },
+    });
+
   return (
     <HeaderButton
       {...rest}
       accessibilityLabel={accessibilityLabel}
       onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
     >
-      <Image
-        resizeMode="contain"
-        source={imageSource}
-        fadeDuration={0}
-        tintColor={tintColor}
-        style={styles.icon}
-      />
+      {typeof drawerIcon === 'function' ? (
+        drawerIcon({ tintColor })
+      ) : drawerIcon.type === 'sfSymbol' ? (
+        <SFSymbol
+          name={drawerIcon.name}
+          size={ICON_SIZE}
+          color={tintColor}
+          style={styles.icon}
+        />
+      ) : drawerIcon.type === 'materialSymbol' ? (
+        <MaterialSymbol
+          name={drawerIcon.name}
+          variant={drawerIcon.variant}
+          weight={drawerIcon.weight}
+          size={ICON_SIZE}
+          color={tintColor}
+          style={styles.icon}
+        />
+      ) : (
+        <Image
+          resizeMode="contain"
+          source={drawerIcon.source}
+          fadeDuration={0}
+          tintColor={tintColor}
+          style={styles.icon}
+        />
+      )}
     </HeaderButton>
   );
 }
 
+const ICON_SIZE = 24;
+
 const styles = StyleSheet.create({
   icon: {
-    height: 24,
-    width: 24,
+    height: ICON_SIZE,
+    width: ICON_SIZE,
     marginVertical: 8,
     marginHorizontal: 5,
   },