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

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

@@ -1,15 +1,16 @@
+import { type Icon } from '@react-navigation/elements';
 import { type Route } from '@react-navigation/native';
-import * as React from 'react';
+import React from 'react';
 import { type ColorValue, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 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.
      */
@@ -20,15 +21,15 @@ type Props = {
     /**
      * Icon to display for the `DrawerItem`.
      */
-    icon?: (props: {
+    icon?: Icon | ((props: {
         focused: boolean;
         size: number;
         color: ColorValue;
-    }) => React.ReactNode;
+    }) => Icon | React.ReactNode) | undefined;
     /**
      * Whether to highlight the drawer item as active.
      */
-    focused?: boolean;
+    focused?: boolean | undefined;
     /**
      * Function to execute on press.
      */
@@ -36,53 +37,53 @@ 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;
 };
 /**
  * A component used to show an action item with an icon and a label in a navigation drawer.

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerItem.d.ts","sourceRoot":"","sources":["../../../../src/views/DrawerItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,KAAK,EAAY,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,SAAS,EAEd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,KAAK,GAAG;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EACD,MAAM,GACN,CAAC,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1E;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;QACb,OAAO,EAAE,OAAO,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,UAAU,CAAC;KACnB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B;;OAEG;IACH,qBAAqB,CAAC,EAAE,UAAU,CAAC;IACnC;;OAEG;IACH,uBAAuB,CAAC,EAAE,UAAU,CAAC;IACrC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,2CA0EtC"}
+{"version":3,"file":"DrawerItem.d.ts","sourceRoot":"","sources":["../../../../src/views/DrawerItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,4BAA4B,CAAC;AAEhF,OAAO,EAEL,KAAK,KAAK,EAGX,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,UAAU,EAGf,KAAK,SAAS,EAEd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,KAAK,GAAG;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IAClC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,EACD,MAAM,GACN,CAAC,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1E;;OAEG;IACH,IAAI,CAAC,EACD,IAAI,GACJ,CAAC,CAAC,KAAK,EAAE;QACP,OAAO,EAAE,OAAO,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,UAAU,CAAC;KACnB,KAAK,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,GAC7B,SAAS,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACzC;;OAEG;IACH,iBAAiB,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC3C;;OAEG;IACH,qBAAqB,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/C;;OAEG;IACH,uBAAuB,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACjD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACpC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IAC9C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IACzC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAEvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,2CA8HtC"}

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerItemList.d.ts","sourceRoot":"","sources":["../../../../src/views/DrawerItemList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAEnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAG7E,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IAC5C,UAAU,EAAE,uBAAuB,CAAC;IACpC,WAAW,EAAE,mBAAmB,CAAC;CAClC,CAAC;AAEF;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,KAAK,GAmE7C,KAAK,CAAC,YAAY,CAC5C"}
+{"version":3,"file":"DrawerItemList.d.ts","sourceRoot":"","sources":["../../../../src/views/DrawerItemList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAEnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAG7E,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IAC5C,UAAU,EAAE,uBAAuB,CAAC;IACpC,WAAW,EAAE,mBAAmB,CAAC;CAClC,CAAC;AAEF;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,KAAK,GAqE7C,KAAK,CAAC,YAAY,CAC5C"}

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

@@ -1,11 +1,16 @@
-import { type ColorValue, type ImageSourcePropType } from 'react-native';
+import { type Icon } from '@react-navigation/elements';
+import * as React from 'react';
+import { type ColorValue } from 'react-native';
 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 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,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAOrE,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,IAAI,GACJ,CAAC,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,UAAU,GAAG,SAAS,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,GACnE,SAAS,CAAC;IACd,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,UAAU,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,SAAS,EACT,kBAA2C,EAC3C,GAAG,IAAI,EACR,EAAE,KAAK,2CAuDP"}

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerView.d.ts","sourceRoot":"","sources":["../../../../src/views/DrawerView.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,aAAa,EAInB,MAAM,0BAA0B,CAAC;AAOlC,OAAO,KAAK,EAEV,mBAAmB,EAEnB,sBAAsB,EACtB,uBAAuB,EAExB,MAAM,UAAU,CAAC;AAQlB,KAAK,KAAK,GAAG,sBAAsB,GAAG;IACpC,aAAa,EAAE,YAAY,CAAC;IAC5B,KAAK,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IAC5C,UAAU,EAAE,uBAAuB,CAAC;IACpC,WAAW,EAAE,mBAAmB,CAAC;CAClC,CAAC;AAsTF,wBAAgB,UAAU,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAMxD"}
+{"version":3,"file":"DrawerView.d.ts","sourceRoot":"","sources":["../../../../src/views/DrawerView.tsx"],"names":[],"mappings":"AAOA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,aAAa,EAInB,MAAM,0BAA0B,CAAC;AAMlC,OAAO,KAAK,EAEV,mBAAmB,EAEnB,sBAAsB,EACtB,uBAAuB,EAExB,MAAM,UAAU,CAAC;AAQlB,KAAK,KAAK,GAAG,sBAAsB,GAAG;IACpC,aAAa,EAAE,YAAY,CAAC;IAC5B,KAAK,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IAC5C,UAAU,EAAE,uBAAuB,CAAC;IACpC,WAAW,EAAE,mBAAmB,CAAC;CAClC,CAAC;AAqTF,wBAAgB,UAAU,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAMxD"}

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.2",
+  "version": "8.0.0-alpha.21",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -46,36 +46,37 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^3.0.0-alpha.2",
+    "@react-navigation/elements": "^3.0.0-alpha.19",
     "color": "^4.2.3",
-    "react-native-drawer-layout": "^5.0.0-alpha.0",
+    "react-native-drawer-layout": "^5.0.0-alpha.5",
     "use-latest-callback": "^0.3.2"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",
-    "@react-navigation/native": "^8.0.0-alpha.2",
-    "@testing-library/react-native": "^13.2.1",
-    "@types/react": "~19.1.10",
+    "@react-navigation/native": "^8.0.0-alpha.17",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/react": "~19.2.2",
     "del-cli": "^6.0.0",
-    "react": "19.1.0",
-    "react-native": "0.81.4",
+    "react": "19.2.0",
+    "react-native": "0.83.2",
     "react-native-builder-bob": "^0.40.12",
-    "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.20.0",
-    "react-native-worklets": "0.6.1",
-    "react-test-renderer": "19.1.0",
-    "typescript": "^5.9.2"
+    "react-native-gesture-handler": "~2.30.0",
+    "react-native-reanimated": "~4.2.1",
+    "react-native-safe-area-context": "~5.6.2",
+    "react-native-screens": "^4.24.0",
+    "react-native-worklets": "0.7.2",
+    "react-test-renderer": "19.2.0",
+    "typescript": "^6.0.2"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^8.0.0-alpha.2",
-    "react": ">= 19.0.0",
+    "@react-navigation/native": "^8.0.0-alpha.17",
+    "react": ">= 19.2.0",
     "react-native": "*",
     "react-native-gesture-handler": ">= 2.0.0",
     "react-native-reanimated": ">= 4.0.0",
     "react-native-safe-area-context": ">= 5.5.0",
-    "react-native-screens": ">= 4.19.0"
+    "react-native-screens": ">= 4.24.0",
+    "react-native-worklets": ">= 0.4.0"
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -95,5 +96,5 @@
       ]
     ]
   },
-  "gitHead": "9664da8fff3bd7ed575bf12ddfcc47b3a42be997"
+  "gitHead": "71f3b00d579a18e8a67d96722862deddc876a3f7"
 }

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,
@@ -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,7 +172,7 @@ 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.
@@ -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 = {

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/DrawerContentScrollView.tsx

@@ -1,4 +1,4 @@
-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 { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -15,7 +15,7 @@ function DrawerContentScrollViewInner(
   { contentContainerStyle, style, children, ...rest }: Props,
   ref?: React.Ref<ScrollView>
 ) {
-  const drawerPosition = React.useContext(DrawerPositionContext);
+  const drawerPosition = React.use(DrawerPositionContext);
   const insets = useSafeAreaInsets();
   const { direction } = useLocale();
 
@@ -25,22 +25,32 @@ function DrawerContentScrollViewInner(
       : drawerPosition === 'right';
 
   return (
-    <ScrollView
-      {...rest}
-      ref={ref}
-      contentContainerStyle={[
-        {
-          paddingTop: SPACING + insets.top,
-          paddingBottom: SPACING + insets.bottom,
-          paddingStart: SPACING + (!isRight ? insets.left : 0),
-          paddingEnd: SPACING + (isRight ? insets.right : 0),
-        },
-        contentContainerStyle,
-      ]}
-      style={[styles.container, style]}
-    >
-      {children}
-    </ScrollView>
+    <>
+      <ScrollView
+        {...rest}
+        ref={ref}
+        contentContainerStyle={[
+          {
+            paddingBottom: SPACING + insets.bottom,
+            paddingStart: SPACING + (!isRight ? insets.left : 0),
+            paddingEnd: SPACING + (isRight ? insets.right : 0),
+          },
+          contentContainerStyle,
+        ]}
+        style={[styles.container, style]}
+      >
+        <UNSTABLE_CornerInset
+          direction="vertical"
+          edge="top"
+          style={{
+            // We don't want to apply both safe area and corner insets
+            minHeight: insets.top,
+            marginBottom: SPACING,
+          }}
+        />
+        {children}
+      </ScrollView>
+    </>
   );
 }
 

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;