@react-navigation/drawer 8.0.0-alpha.2 → 8.0.0-alpha.21

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>
     );
   };