@react-navigation/drawer 8.0.0-alpha.3 → 8.0.0-alpha.31

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

package/src/views/DrawerItemList.tsx

@@ -59,6 +59,7 @@ export function DrawerItemList({ state, navigation, descriptors }: Props) {
       drawerIcon,
       drawerLabelStyle,
       drawerItemStyle,
+      drawerItemTestID,
       drawerAllowFontScaling,
     } = descriptors[route.key].options;
 
@@ -84,6 +85,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,
   },

package/src/views/DrawerView.tsx

@@ -1,5 +1,7 @@
 import { getHeaderTitle, Header } from '@react-navigation/elements';
 import {
+  ActivityView,
+  Container,
   SafeAreaProviderCompat,
   Screen as ScreenContent,
 } from '@react-navigation/elements/internal';
@@ -15,7 +17,6 @@ import {
 import * as React from 'react';
 import { Platform, StyleSheet } from 'react-native';
 import { Drawer } from 'react-native-drawer-layout';
-import { Screen, ScreenContainer } from 'react-native-screens';
 import useLatestCallback from 'use-latest-callback';
 
 import type {
@@ -52,9 +53,6 @@ function DrawerViewBase({
   descriptors,
   defaultStatus,
   drawerContent = renderDrawerContentDefault,
-  detachInactiveScreens = Platform.OS === 'web' ||
-    Platform.OS === 'android' ||
-    Platform.OS === 'ios',
 }: Props) {
   const { direction } = useLocale();
 
@@ -209,11 +207,7 @@ function DrawerViewBase({
 
   const renderSceneContent = () => {
     return (
-      <ScreenContainer
-        enabled={detachInactiveScreens}
-        hasTwoStates
-        style={styles.content}
-      >
+      <Container style={styles.content}>
         {state.routes.map((route, index) => {
           const descriptor = descriptors[route.key];
           const { lazy = true } = descriptor.options;
@@ -231,7 +225,7 @@ function DrawerViewBase({
           }
 
           const {
-            freezeOnBlur,
+            inactiveBehavior = 'pause',
             header = ({ options }: DrawerHeaderProps) => (
               <Header
                 {...options}
@@ -254,14 +248,20 @@ function DrawerViewBase({
             sceneStyle,
           } = descriptor.options;
 
+          // For preloaded screens and if lazy is false,
+          // Keep them active so that the effects can run
+          const isActive =
+            inactiveBehavior === 'none' ||
+            isFocused ||
+            isPreloaded ||
+            (lazy === false && !loaded.includes(route.key));
+
           return (
-            <Screen
+            <ActivityView
               key={route.key}
-              style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]}
-              activityState={isFocused ? 2 : 0}
-              enabled={detachInactiveScreens}
-              freezeOnBlur={freezeOnBlur}
-              shouldFreeze={!isFocused && !isPreloaded}
+              mode={isFocused ? 'normal' : isActive ? 'inert' : 'paused'}
+              visible={isFocused}
+              style={{ ...StyleSheet.absoluteFill, zIndex: isFocused ? 0 : -1 }}
             >
               <ScreenContent
                 focused={isFocused}
@@ -280,10 +280,10 @@ function DrawerViewBase({
               >
                 {descriptor.render()}
               </ScreenContent>
-            </Screen>
+            </ActivityView>
           );
         })}
-      </ScreenContainer>
+      </Container>
     );
   };