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

package/lib/module/views/DrawerToggleButton.js

@@ -1,34 +1,64 @@
 "use strict";
 
 import { HeaderButton } from '@react-navigation/elements';
-import { DrawerActions, useNavigation } from '@react-navigation/native';
-import { Image, StyleSheet } from 'react-native';
+import { DrawerActions, MaterialSymbol, SFSymbol, useNavigation } from '@react-navigation/native';
+import * as React from 'react';
+import { Image, Platform, StyleSheet } from 'react-native';
 import toggleDrawerIcon from './assets/toggle-drawer-icon.png';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function DrawerToggleButton({
+  icon,
   tintColor,
   accessibilityLabel = 'Show navigation menu',
-  imageSource = toggleDrawerIcon,
   ...rest
 }) {
   const navigation = useNavigation();
+  const drawerIcon = icon ?? Platform.select({
+    ios: {
+      type: 'sfSymbol',
+      name: 'line.3.horizontal'
+    },
+    android: {
+      type: 'materialSymbol',
+      name: 'menu'
+    },
+    default: {
+      type: 'image',
+      source: toggleDrawerIcon
+    }
+  });
   return /*#__PURE__*/_jsx(HeaderButton, {
     ...rest,
     accessibilityLabel: accessibilityLabel,
     onPress: () => navigation.dispatch(DrawerActions.toggleDrawer()),
-    children: /*#__PURE__*/_jsx(Image, {
+    children: typeof drawerIcon === 'function' ? drawerIcon({
+      tintColor
+    }) : drawerIcon.type === 'sfSymbol' ? /*#__PURE__*/_jsx(SFSymbol, {
+      name: drawerIcon.name,
+      size: ICON_SIZE,
+      color: tintColor,
+      style: styles.icon
+    }) : drawerIcon.type === 'materialSymbol' ? /*#__PURE__*/_jsx(MaterialSymbol, {
+      name: drawerIcon.name,
+      variant: drawerIcon.variant,
+      weight: drawerIcon.weight,
+      size: ICON_SIZE,
+      color: tintColor,
+      style: styles.icon
+    }) : /*#__PURE__*/_jsx(Image, {
       resizeMode: "contain",
-      source: imageSource,
+      source: drawerIcon.source,
       fadeDuration: 0,
       tintColor: tintColor,
       style: styles.icon
     })
   });
 }
+const ICON_SIZE = 24;
 const styles = StyleSheet.create({
   icon: {
-    height: 24,
-    width: 24,
+    height: ICON_SIZE,
+    width: ICON_SIZE,
     marginVertical: 8,
     marginHorizontal: 5
   }

package/lib/module/views/DrawerToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["HeaderButton","DrawerActions","useNavigation","Image","StyleSheet","toggleDrawerIcon","jsx","_jsx","DrawerToggleButton","tintColor","accessibilityLabel","imageSource","rest","navigation","onPress","dispatch","toggleDrawer","children","resizeMode","source","fadeDuration","style","styles","icon","create","height","width","marginVertical","marginHorizontal"],"sourceRoot":"../../../src","sources":["views/DrawerToggleButton.tsx"],"mappings":";;AAAA,SAASA,YAAY,QAAQ,4BAA4B;AACzD,SAASC,aAAa,EAAEC,aAAa,QAAQ,0BAA0B;AACvE,SAEEC,KAAK,EAELC,UAAU,QACL,cAAc;AAErB,OAAOC,gBAAgB,MAAM,iCAAiC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAU/D,OAAO,SAASC,kBAAkBA,CAAC;EACjCC,SAAS;EACTC,kBAAkB,GAAG,sBAAsB;EAC3CC,WAAW,GAAGN,gBAAgB;EAC9B,GAAGO;AACE,CAAC,EAAE;EACR,MAAMC,UAAU,GAAGX,aAAa,CAAC,CAAC;EAElC,oBACEK,IAAA,CAACP,YAAY;IAAA,GACPY,IAAI;IACRF,kBAAkB,EAAEA,kBAAmB;IACvCI,OAAO,EAAEA,CAAA,KAAMD,UAAU,CAACE,QAAQ,CAACd,aAAa,CAACe,YAAY,CAAC,CAAC,CAAE;IAAAC,QAAA,eAEjEV,IAAA,CAACJ,KAAK;MACJe,UAAU,EAAC,SAAS;MACpBC,MAAM,EAAER,WAAY;MACpBS,YAAY,EAAE,CAAE;MAChBX,SAAS,EAAEA,SAAU;MACrBY,KAAK,EAAEC,MAAM,CAACC;IAAK,CACpB;EAAC,CACU,CAAC;AAEnB;AAEA,MAAMD,MAAM,GAAGlB,UAAU,CAACoB,MAAM,CAAC;EAC/BD,IAAI,EAAE;IACJE,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE,EAAE;IACTC,cAAc,EAAE,CAAC;IACjBC,gBAAgB,EAAE;EACpB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["HeaderButton","DrawerActions","MaterialSymbol","SFSymbol","useNavigation","React","Image","Platform","StyleSheet","toggleDrawerIcon","jsx","_jsx","DrawerToggleButton","icon","tintColor","accessibilityLabel","rest","navigation","drawerIcon","select","ios","type","name","android","default","source","onPress","dispatch","toggleDrawer","children","size","ICON_SIZE","color","style","styles","variant","weight","resizeMode","fadeDuration","create","height","width","marginVertical","marginHorizontal"],"sourceRoot":"../../../src","sources":["views/DrawerToggleButton.tsx"],"mappings":";;AAAA,SAASA,YAAY,QAAyB,4BAA4B;AAC1E,SACEC,aAAa,EACbC,cAAc,EACdC,QAAQ,EACRC,aAAa,QACR,0BAA0B;AACjC,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAA0BC,KAAK,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,cAAc;AAE3E,OAAOC,gBAAgB,MAAM,iCAAiC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAY/D,OAAO,SAASC,kBAAkBA,CAAC;EACjCC,IAAI;EACJC,SAAS;EACTC,kBAAkB,GAAG,sBAAsB;EAC3C,GAAGC;AACE,CAAC,EAAE;EACR,MAAMC,UAAU,GAAGb,aAAa,CAAC,CAAC;EAElC,MAAMc,UAAU,GACdL,IAAI,IACJN,QAAQ,CAACY,MAAM,CAAa;IAC1BC,GAAG,EAAE;MACHC,IAAI,EAAE,UAAU;MAChBC,IAAI,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACPF,IAAI,EAAE,gBAAgB;MACtBC,IAAI,EAAE;IACR,CAAC;IACDE,OAAO,EAAE;MACPH,IAAI,EAAE,OAAO;MACbI,MAAM,EAAEhB;IACV;EACF,CAAC,CAAC;EAEJ,oBACEE,IAAA,CAACX,YAAY;IAAA,GACPgB,IAAI;IACRD,kBAAkB,EAAEA,kBAAmB;IACvCW,OAAO,EAAEA,CAAA,KAAMT,UAAU,CAACU,QAAQ,CAAC1B,aAAa,CAAC2B,YAAY,CAAC,CAAC,CAAE;IAAAC,QAAA,EAEhE,OAAOX,UAAU,KAAK,UAAU,GAC/BA,UAAU,CAAC;MAAEJ;IAAU,CAAC,CAAC,GACvBI,UAAU,CAACG,IAAI,KAAK,UAAU,gBAChCV,IAAA,CAACR,QAAQ;MACPmB,IAAI,EAAEJ,UAAU,CAACI,IAAK;MACtBQ,IAAI,EAAEC,SAAU;MAChBC,KAAK,EAAElB,SAAU;MACjBmB,KAAK,EAAEC,MAAM,CAACrB;IAAK,CACpB,CAAC,GACAK,UAAU,CAACG,IAAI,KAAK,gBAAgB,gBACtCV,IAAA,CAACT,cAAc;MACboB,IAAI,EAAEJ,UAAU,CAACI,IAAK;MACtBa,OAAO,EAAEjB,UAAU,CAACiB,OAAQ;MAC5BC,MAAM,EAAElB,UAAU,CAACkB,MAAO;MAC1BN,IAAI,EAAEC,SAAU;MAChBC,KAAK,EAAElB,SAAU;MACjBmB,KAAK,EAAEC,MAAM,CAACrB;IAAK,CACpB,CAAC,gBAEFF,IAAA,CAACL,KAAK;MACJ+B,UAAU,EAAC,SAAS;MACpBZ,MAAM,EAAEP,UAAU,CAACO,MAAO;MAC1Ba,YAAY,EAAE,CAAE;MAChBxB,SAAS,EAAEA,SAAU;MACrBmB,KAAK,EAAEC,MAAM,CAACrB;IAAK,CACpB;EACF,CACW,CAAC;AAEnB;AAEA,MAAMkB,SAAS,GAAG,EAAE;AAEpB,MAAMG,MAAM,GAAG1B,UAAU,CAAC+B,MAAM,CAAC;EAC/B1B,IAAI,EAAE;IACJ2B,MAAM,EAAET,SAAS;IACjBU,KAAK,EAAEV,SAAS;IAChBW,cAAc,EAAE,CAAC;IACjBC,gBAAgB,EAAE;EACpB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/src/views/DrawerToggleButton.d.ts

@@ -1,11 +1,15 @@
-import { type ColorValue, type ImageSourcePropType } from 'react-native';
+import { type HeaderIcon } from '@react-navigation/elements';
+import * as React from 'react';
+import { type ColorValue } from 'react-native';
 type Props = {
+    icon?: HeaderIcon | ((props: {
+        tintColor: ColorValue | undefined;
+    }) => React.ReactNode);
     accessibilityLabel?: string;
     pressColor?: ColorValue;
     pressOpacity?: number;
     tintColor?: ColorValue;
-    imageSource?: ImageSourcePropType;
 };
-export declare function DrawerToggleButton({ tintColor, accessibilityLabel, imageSource, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function DrawerToggleButton({ icon, tintColor, accessibilityLabel, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DrawerToggleButton.d.ts.map

package/lib/typescript/src/views/DrawerToggleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerToggleButton.d.ts","sourceRoot":"","sources":["../../../../src/views/DrawerToggleButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,mBAAmB,EAEzB,MAAM,cAAc,CAAC;AAItB,KAAK,KAAK,GAAG;IACX,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,kBAA2C,EAC3C,WAA8B,EAC9B,GAAG,IAAI,EACR,EAAE,KAAK,2CAkBP"}
+{"version":3,"file":"DrawerToggleButton.d.ts","sourceRoot":"","sources":["../../../../src/views/DrawerToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAO3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,UAAU,EAA+B,MAAM,cAAc,CAAC;AAI5E,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EACD,UAAU,GACV,CAAC,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,UAAU,GAAG,SAAS,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACxE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,SAAS,EACT,kBAA2C,EAC3C,GAAG,IAAI,EACR,EAAE,KAAK,2CAuDP"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Integration for the drawer component from react-native-drawer-layout",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.10",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -46,14 +46,14 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^3.0.0-alpha.0",
+    "@react-navigation/elements": "^3.0.0-alpha.10",
     "color": "^4.2.3",
     "react-native-drawer-layout": "^5.0.0-alpha.0",
     "use-latest-callback": "^0.3.2"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",
-    "@react-navigation/native": "^8.0.0-alpha.0",
+    "@react-navigation/native": "^8.0.0-alpha.10",
     "@testing-library/react-native": "^13.2.1",
     "@types/react": "~19.1.10",
     "del-cli": "^6.0.0",
@@ -63,13 +63,13 @@
     "react-native-gesture-handler": "~2.28.0",
     "react-native-reanimated": "4.1.3",
     "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "^4.19.0",
+    "react-native-screens": "^4.21.0",
     "react-native-worklets": "0.6.1",
     "react-test-renderer": "19.1.0",
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^8.0.0-alpha.0",
+    "@react-navigation/native": "^8.0.0-alpha.10",
     "react": ">= 19.0.0",
     "react-native": "*",
     "react-native-gesture-handler": ">= 2.0.0",
@@ -95,5 +95,5 @@
       ]
     ]
   },
-  "gitHead": "46daae524ec6a59737147ed506222dd09a5b6e39"
+  "gitHead": "4bf35245d085655607d8c658407a4a0c8e641f8d"
 }

package/src/views/DrawerToggleButton.tsx

@@ -1,51 +1,93 @@
-import { HeaderButton } from '@react-navigation/elements';
-import { DrawerActions, useNavigation } from '@react-navigation/native';
+import { HeaderButton, type HeaderIcon } 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 = {
+  icon?:
+    | HeaderIcon
+    | ((props: { tintColor: ColorValue | undefined }) => React.ReactNode);
   accessibilityLabel?: string;
   pressColor?: ColorValue;
   pressOpacity?: number;
   tintColor?: ColorValue;
-  imageSource?: ImageSourcePropType;
 };
 
 export function DrawerToggleButton({
+  icon,
   tintColor,
   accessibilityLabel = 'Show navigation menu',
-  imageSource = toggleDrawerIcon,
   ...rest
 }: Props) {
   const navigation = useNavigation();
 
+  const drawerIcon =
+    icon ??
+    Platform.select<HeaderIcon>({
+      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,
   },