expo-router 7.0.0-canary-20251216-6e1f9a7 → 7.0.0-canary-20251223-b83b31e

package/build/layouts/stack-utils/StackHeaderLeftRight.d.ts

@@ -1,15 +1,119 @@
 import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
-import { type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export interface StackHeaderLeftProps {
+    /**
+     * Child elements to compose the left area of the header. Can include Stack.Header.Button,
+     * Stack.Header.Menu, Stack.Header.Item, and Stack.Header.Spacer components.
+     */
     children?: ReactNode;
+    /**
+     * When `true`, renders children as a custom component in the header left area,
+     * replacing the default header left layout.
+     *
+     * @default false
+     */
     asChild?: boolean;
 }
 export interface StackHeaderRightProps {
+    /**
+     * Child elements to compose the right area of the header. Can include Stack.Header.Button,
+     * Stack.Header.Menu, Stack.Header.Item, and Stack.Header.Spacer components.
+     */
     children?: ReactNode;
+    /**
+     * When `true`, renders children as a custom component in the header right area,
+     * replacing the default header right layout.
+     *
+     * @default false
+     */
     asChild?: boolean;
 }
-export declare function StackHeaderLeft(props: StackHeaderLeftProps): null;
-export declare function StackHeaderRight(props: StackHeaderRightProps): null;
+/**
+ * The component used to configure the left area of the stack header.
+ *
+ * When used inside a screen, it allows you to customize the left side of the header dynamically.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Header.Left>
+ *         <Stack.Header.Button onPress={() => alert('Left button pressed!')} />
+ *       </Stack.Header.Left>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * When used inside the layout, it needs to be wrapped in `Stack.Header` to take effect.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Layout() {
+ *   return (
+ *     <Stack>
+ *       <Stack.Screen name="index">
+ *         <Stack.Header>
+ *           <Stack.Header.Left>
+ *             <Stack.Header.Button onPress={() => alert('Left button pressed!')} />
+ *           </Stack.Header.Left>
+ *         </Stack.Header>
+ *       </Stack.Screen>
+ *     </Stack>
+ *   );
+ * }
+ * ```
+ */
+export declare const StackHeaderLeft: React.FC<StackHeaderLeftProps>;
+/**
+ * The component used to configure the right area of the stack header.
+ *
+ * When used inside a screen, it allows you to customize the right side of the header dynamically.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Header.Right>
+ *         <Stack.Header.Button onPress={() => alert('Right button pressed!')} />
+ *       </Stack.Header.Right>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * When used inside the layout, it needs to be wrapped in `Stack.Header` to take effect.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Layout() {
+ *   return (
+ *     <Stack>
+ *       <Stack.Screen name="index">
+ *         <Stack.Header>
+ *           <Stack.Header.Right>
+ *             <Stack.Header.Button onPress={() => alert('Right button pressed!')} />
+ *           </Stack.Header.Right>
+ *         </Stack.Header>
+ *       </Stack.Screen>
+ *     </Stack>
+ *   );
+ * }
+ * ```
+ */
+export declare const StackHeaderRight: React.FC<StackHeaderRightProps>;
 export declare function appendStackHeaderRightPropsToOptions(options: NativeStackNavigationOptions, props: StackHeaderRightProps): NativeStackNavigationOptions;
 export declare function appendStackHeaderLeftPropsToOptions(options: NativeStackNavigationOptions, props: StackHeaderLeftProps): NativeStackNavigationOptions;
 //# sourceMappingURL=StackHeaderLeftRight.d.ts.map

package/build/layouts/stack-utils/StackHeaderLeftRight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackHeaderLeftRight.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderLeftRight.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAc,EAA4B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAcxE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,QAE1D;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,QAE5D;AA+CD,wBAAgB,oCAAoC,CAClD,OAAO,EAAE,4BAA4B,EACrC,KAAK,EAAE,qBAAqB,GAC3B,4BAA4B,CAe9B;AAED,wBAAgB,mCAAmC,CACjD,OAAO,EAAE,4BAA4B,EACrC,KAAK,EAAE,oBAAoB,GAC1B,4BAA4B,CAW9B"}
+{"version":3,"file":"StackHeaderLeftRight.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderLeftRight.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,KAAK,EAAE,EAA4B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBxE,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAK1D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAK5D,CAAC;AAiDF,wBAAgB,oCAAoC,CAClD,OAAO,EAAE,4BAA4B,EACrC,KAAK,EAAE,qBAAqB,GAC3B,4BAA4B,CAe9B;AAED,wBAAgB,mCAAmC,CACjD,OAAO,EAAE,4BAA4B,EACrC,KAAK,EAAE,oBAAoB,GAC1B,4BAA4B,CAW9B"}

package/build/layouts/stack-utils/StackHeaderLeftRight.js

@@ -33,28 +33,121 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StackHeaderLeft = StackHeaderLeft;
-exports.StackHeaderRight = StackHeaderRight;
+exports.StackHeaderRight = exports.StackHeaderLeft = void 0;
 exports.appendStackHeaderRightPropsToOptions = appendStackHeaderRightPropsToOptions;
 exports.appendStackHeaderLeftPropsToOptions = appendStackHeaderLeftPropsToOptions;
 const react_1 = __importStar(require("react"));
+const react_2 = require("react");
 const StackHeaderButton_1 = require("./StackHeaderButton");
-const StackHeaderItem_1 = require("./StackHeaderItem");
 const StackHeaderMenu_1 = require("./StackHeaderMenu");
 const StackHeaderSpacer_1 = require("./StackHeaderSpacer");
+const StackHeaderView_1 = require("./StackHeaderView");
 const children_1 = require("../../utils/children");
-function StackHeaderLeft(props) {
-    return null;
-}
-function StackHeaderRight(props) {
-    return null;
-}
+const Screen_1 = require("../../views/Screen");
+/**
+ * The component used to configure the left area of the stack header.
+ *
+ * When used inside a screen, it allows you to customize the left side of the header dynamically.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Header.Left>
+ *         <Stack.Header.Button onPress={() => alert('Left button pressed!')} />
+ *       </Stack.Header.Left>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * When used inside the layout, it needs to be wrapped in `Stack.Header` to take effect.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Layout() {
+ *   return (
+ *     <Stack>
+ *       <Stack.Screen name="index">
+ *         <Stack.Header>
+ *           <Stack.Header.Left>
+ *             <Stack.Header.Button onPress={() => alert('Left button pressed!')} />
+ *           </Stack.Header.Left>
+ *         </Stack.Header>
+ *       </Stack.Screen>
+ *     </Stack>
+ *   );
+ * }
+ * ```
+ */
+const StackHeaderLeft = (props) => {
+    // This component will only render when used inside a page
+    // but only if it is not wrapped in Stack.Screen.Header
+    const updatedOptions = (0, react_2.useMemo)(() => appendStackHeaderLeftPropsToOptions({}, props), [props]);
+    return <Screen_1.Screen options={updatedOptions}/>;
+};
+exports.StackHeaderLeft = StackHeaderLeft;
+/**
+ * The component used to configure the right area of the stack header.
+ *
+ * When used inside a screen, it allows you to customize the right side of the header dynamically.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Header.Right>
+ *         <Stack.Header.Button onPress={() => alert('Right button pressed!')} />
+ *       </Stack.Header.Right>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * When used inside the layout, it needs to be wrapped in `Stack.Header` to take effect.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Layout() {
+ *   return (
+ *     <Stack>
+ *       <Stack.Screen name="index">
+ *         <Stack.Header>
+ *           <Stack.Header.Right>
+ *             <Stack.Header.Button onPress={() => alert('Right button pressed!')} />
+ *           </Stack.Header.Right>
+ *         </Stack.Header>
+ *       </Stack.Screen>
+ *     </Stack>
+ *   );
+ * }
+ * ```
+ */
+const StackHeaderRight = (props) => {
+    // This component will only render when used inside a page
+    // but only if it is not wrapped in Stack.Screen.Header
+    const updatedOptions = (0, react_2.useMemo)(() => appendStackHeaderRightPropsToOptions({}, props), [props]);
+    return <Screen_1.Screen options={updatedOptions}/>;
+};
+exports.StackHeaderRight = StackHeaderRight;
 function convertHeaderRightLeftChildrenToUnstableItems(children, side) {
     const allChildren = react_1.default.Children.toArray(children);
     const actions = allChildren.filter((child) => (0, children_1.isChildOfType)(child, StackHeaderButton_1.StackHeaderButton) ||
         (0, children_1.isChildOfType)(child, StackHeaderMenu_1.StackHeaderMenu) ||
         (0, children_1.isChildOfType)(child, StackHeaderSpacer_1.StackHeaderSpacer) ||
-        (0, children_1.isChildOfType)(child, StackHeaderItem_1.StackHeaderItem));
+        (0, children_1.isChildOfType)(child, StackHeaderView_1.StackHeaderView));
     if (actions.length !== allChildren.length && process.env.NODE_ENV !== 'production') {
         const otherElements = allChildren
             .filter((child) => !actions.some((action) => action === child))
@@ -71,7 +164,8 @@ function convertHeaderRightLeftChildrenToUnstableItems(children, side) {
         });
         console.warn(`Stack.Header.${side} only accepts <Stack.Header.Button>, <Stack.Header.Menu>, <Menu>, and <Stack.Header.Item> as children. Found invalid children: ${otherElements.join(', ')}`);
     }
-    return () => actions.map((action) => {
+    return () => actions
+        .map((action) => {
         if ((0, children_1.isChildOfType)(action, StackHeaderButton_1.StackHeaderButton)) {
             return (0, StackHeaderButton_1.convertStackHeaderButtonPropsToRNHeaderItem)(action.props);
         }
@@ -81,8 +175,9 @@ function convertHeaderRightLeftChildrenToUnstableItems(children, side) {
         else if ((0, children_1.isChildOfType)(action, StackHeaderSpacer_1.StackHeaderSpacer)) {
             return (0, StackHeaderSpacer_1.convertStackHeaderSpacerPropsToRNHeaderItem)(action.props);
         }
-        return (0, StackHeaderItem_1.convertStackHeaderItemPropsToRNHeaderItem)(action.props);
-    });
+        return (0, StackHeaderView_1.convertStackHeaderViewPropsToRNHeaderItem)(action.props);
+    })
+        .filter((item) => !!item);
 }
 function appendStackHeaderRightPropsToOptions(options, props) {
     if (props.asChild) {

package/build/layouts/stack-utils/StackHeaderLeftRight.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackHeaderLeftRight.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderLeftRight.tsx"],"names":[],"mappings":"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","sourcesContent":["import { NativeStackNavigationOptions } from '@react-navigation/native-stack';\nimport React, { Fragment, isValidElement, type ReactNode } from 'react';\n\nimport {\n  convertStackHeaderButtonPropsToRNHeaderItem,\n  StackHeaderButton,\n} from './StackHeaderButton';\nimport { convertStackHeaderItemPropsToRNHeaderItem, StackHeaderItem } from './StackHeaderItem';\nimport { convertStackHeaderMenuPropsToRNHeaderItem, StackHeaderMenu } from './StackHeaderMenu';\nimport {\n  convertStackHeaderSpacerPropsToRNHeaderItem,\n  StackHeaderSpacer,\n} from './StackHeaderSpacer';\nimport { isChildOfType } from '../../utils/children';\n\nexport interface StackHeaderLeftProps {\n  children?: ReactNode;\n  asChild?: boolean;\n}\n\nexport interface StackHeaderRightProps {\n  children?: ReactNode;\n  asChild?: boolean;\n}\n\nexport function StackHeaderLeft(props: StackHeaderLeftProps) {\n  return null;\n}\n\nexport function StackHeaderRight(props: StackHeaderRightProps) {\n  return null;\n}\n\nfunction convertHeaderRightLeftChildrenToUnstableItems(\n  children: React.ReactNode,\n  side: 'Left' | 'Right'\n):\n  | NativeStackNavigationOptions['unstable_headerRightItems']\n  | NativeStackNavigationOptions['unstable_headerLeftItems'] {\n  const allChildren = React.Children.toArray(children);\n  const actions = allChildren.filter(\n    (child) =>\n      isChildOfType(child, StackHeaderButton) ||\n      isChildOfType(child, StackHeaderMenu) ||\n      isChildOfType(child, StackHeaderSpacer) ||\n      isChildOfType(child, StackHeaderItem)\n  );\n  if (actions.length !== allChildren.length && process.env.NODE_ENV !== 'production') {\n    const otherElements = allChildren\n      .filter((child) => !actions.some((action) => action === child))\n      .map((e) => {\n        if (isValidElement(e)) {\n          if (e.type === Fragment) {\n            return '<Fragment>';\n          } else {\n            return (e.type as { name: string })?.name ?? e.type;\n          }\n        }\n\n        return String(e);\n      });\n    console.warn(\n      `Stack.Header.${side} only accepts <Stack.Header.Button>, <Stack.Header.Menu>, <Menu>, and <Stack.Header.Item> as children. Found invalid children: ${otherElements.join(', ')}`\n    );\n  }\n  return () =>\n    actions.map((action) => {\n      if (isChildOfType(action, StackHeaderButton)) {\n        return convertStackHeaderButtonPropsToRNHeaderItem(action.props);\n      } else if (isChildOfType(action, StackHeaderMenu)) {\n        return convertStackHeaderMenuPropsToRNHeaderItem(action.props);\n      } else if (isChildOfType(action, StackHeaderSpacer)) {\n        return convertStackHeaderSpacerPropsToRNHeaderItem(action.props);\n      }\n      return convertStackHeaderItemPropsToRNHeaderItem(action.props);\n    });\n}\n\nexport function appendStackHeaderRightPropsToOptions(\n  options: NativeStackNavigationOptions,\n  props: StackHeaderRightProps\n): NativeStackNavigationOptions {\n  if (props.asChild) {\n    return {\n      ...options,\n      headerRight: () => props.children,\n    };\n  }\n\n  return {\n    ...options,\n    unstable_headerRightItems: convertHeaderRightLeftChildrenToUnstableItems(\n      props.children,\n      'Right'\n    ),\n  };\n}\n\nexport function appendStackHeaderLeftPropsToOptions(\n  options: NativeStackNavigationOptions,\n  props: StackHeaderLeftProps\n): NativeStackNavigationOptions {\n  if (props.asChild) {\n    return {\n      ...options,\n      headerLeft: () => props.children,\n    };\n  }\n  return {\n    ...options,\n    unstable_headerLeftItems: convertHeaderRightLeftChildrenToUnstableItems(props.children, 'Left'),\n  };\n}\n"]}
+{"version":3,"file":"StackHeaderLeftRight.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderLeftRight.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgMA,oFAkBC;AAED,kFAcC;AAjOD,+CAAwE;AACxE,iCAAgC;AAEhC,2DAG6B;AAC7B,uDAA+F;AAC/F,2DAG6B;AAC7B,uDAA+F;AAC/F,mDAAqD;AACrD,+CAA4C;AAgC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACI,MAAM,eAAe,GAAmC,CAAC,KAAK,EAAE,EAAE;IACvE,0DAA0D;IAC1D,uDAAuD;IACvD,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,mCAAmC,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9F,OAAO,CAAC,eAAM,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,EAAG,CAAC;AAC7C,CAAC,CAAC;AALW,QAAA,eAAe,mBAK1B;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACI,MAAM,gBAAgB,GAAoC,CAAC,KAAK,EAAE,EAAE;IACzE,0DAA0D;IAC1D,uDAAuD;IACvD,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,oCAAoC,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/F,OAAO,CAAC,eAAM,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,EAAG,CAAC;AAC7C,CAAC,CAAC;AALW,QAAA,gBAAgB,oBAK3B;AAEF,SAAS,6CAA6C,CACpD,QAAyB,EACzB,IAAsB;IAItB,MAAM,WAAW,GAAG,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,WAAW,CAAC,MAAM,CAChC,CAAC,KAAK,EAAE,EAAE,CACR,IAAA,wBAAa,EAAC,KAAK,EAAE,qCAAiB,CAAC;QACvC,IAAA,wBAAa,EAAC,KAAK,EAAE,iCAAe,CAAC;QACrC,IAAA,wBAAa,EAAC,KAAK,EAAE,qCAAiB,CAAC;QACvC,IAAA,wBAAa,EAAC,KAAK,EAAE,iCAAe,CAAC,CACxC,CAAC;IACF,IAAI,OAAO,CAAC,MAAM,KAAK,WAAW,CAAC,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;QACnF,MAAM,aAAa,GAAG,WAAW;aAC9B,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,KAAK,KAAK,CAAC,CAAC;aAC9D,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACT,IAAI,IAAA,sBAAc,EAAC,CAAC,CAAC,EAAE,CAAC;gBACtB,IAAI,CAAC,CAAC,IAAI,KAAK,gBAAQ,EAAE,CAAC;oBACxB,OAAO,YAAY,CAAC;gBACtB,CAAC;qBAAM,CAAC;oBACN,OAAQ,CAAC,CAAC,IAAyB,EAAE,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;gBACtD,CAAC;YACH,CAAC;YAED,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;QACL,OAAO,CAAC,IAAI,CACV,gBAAgB,IAAI,kIAAkI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CACjL,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,EAAE,CACV,OAAO;SACJ,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;QACd,IAAI,IAAA,wBAAa,EAAC,MAAM,EAAE,qCAAiB,CAAC,EAAE,CAAC;YAC7C,OAAO,IAAA,+DAA2C,EAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACnE,CAAC;aAAM,IAAI,IAAA,wBAAa,EAAC,MAAM,EAAE,iCAAe,CAAC,EAAE,CAAC;YAClD,OAAO,IAAA,2DAAyC,EAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjE,CAAC;aAAM,IAAI,IAAA,wBAAa,EAAC,MAAM,EAAE,qCAAiB,CAAC,EAAE,CAAC;YACpD,OAAO,IAAA,+DAA2C,EAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACnE,CAAC;QACD,OAAO,IAAA,2DAAyC,EAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjE,CAAC,CAAC;SACD,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;AAED,SAAgB,oCAAoC,CAClD,OAAqC,EACrC,KAA4B;IAE5B,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,OAAO;YACL,GAAG,OAAO;YACV,WAAW,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ;SAClC,CAAC;IACJ,CAAC;IAED,OAAO;QACL,GAAG,OAAO;QACV,yBAAyB,EAAE,6CAA6C,CACtE,KAAK,CAAC,QAAQ,EACd,OAAO,CACR;KACF,CAAC;AACJ,CAAC;AAED,SAAgB,mCAAmC,CACjD,OAAqC,EACrC,KAA2B;IAE3B,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,OAAO;YACL,GAAG,OAAO;YACV,UAAU,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ;SACjC,CAAC;IACJ,CAAC;IACD,OAAO;QACL,GAAG,OAAO;QACV,wBAAwB,EAAE,6CAA6C,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC;KAChG,CAAC;AACJ,CAAC","sourcesContent":["import { NativeStackNavigationOptions } from '@react-navigation/native-stack';\nimport React, { Fragment, isValidElement, type ReactNode } from 'react';\nimport { useMemo } from 'react';\n\nimport {\n  convertStackHeaderButtonPropsToRNHeaderItem,\n  StackHeaderButton,\n} from './StackHeaderButton';\nimport { convertStackHeaderMenuPropsToRNHeaderItem, StackHeaderMenu } from './StackHeaderMenu';\nimport {\n  convertStackHeaderSpacerPropsToRNHeaderItem,\n  StackHeaderSpacer,\n} from './StackHeaderSpacer';\nimport { convertStackHeaderViewPropsToRNHeaderItem, StackHeaderView } from './StackHeaderView';\nimport { isChildOfType } from '../../utils/children';\nimport { Screen } from '../../views/Screen';\n\nexport interface StackHeaderLeftProps {\n  /**\n   * Child elements to compose the left area of the header. Can include Stack.Header.Button,\n   * Stack.Header.Menu, Stack.Header.Item, and Stack.Header.Spacer components.\n   */\n  children?: ReactNode;\n  /**\n   * When `true`, renders children as a custom component in the header left area,\n   * replacing the default header left layout.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nexport interface StackHeaderRightProps {\n  /**\n   * Child elements to compose the right area of the header. Can include Stack.Header.Button,\n   * Stack.Header.Menu, Stack.Header.Item, and Stack.Header.Spacer components.\n   */\n  children?: ReactNode;\n  /**\n   * When `true`, renders children as a custom component in the header right area,\n   * replacing the default header right layout.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\n/**\n * The component used to configure the left area of the stack header.\n *\n * When used inside a screen, it allows you to customize the left side of the header dynamically.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Page() {\n *   return (\n *     <>\n *       <Stack.Header.Left>\n *         <Stack.Header.Button onPress={() => alert('Left button pressed!')} />\n *       </Stack.Header.Left>\n *       <ScreenContent />\n *     </>\n *   );\n * }\n * ```\n *\n * When used inside the layout, it needs to be wrapped in `Stack.Header` to take effect.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Layout() {\n *   return (\n *     <Stack>\n *       <Stack.Screen name=\"index\">\n *         <Stack.Header>\n *           <Stack.Header.Left>\n *             <Stack.Header.Button onPress={() => alert('Left button pressed!')} />\n *           </Stack.Header.Left>\n *         </Stack.Header>\n *       </Stack.Screen>\n *     </Stack>\n *   );\n * }\n * ```\n */\nexport const StackHeaderLeft: React.FC<StackHeaderLeftProps> = (props) => {\n  // This component will only render when used inside a page\n  // but only if it is not wrapped in Stack.Screen.Header\n  const updatedOptions = useMemo(() => appendStackHeaderLeftPropsToOptions({}, props), [props]);\n  return <Screen options={updatedOptions} />;\n};\n\n/**\n * The component used to configure the right area of the stack header.\n *\n * When used inside a screen, it allows you to customize the right side of the header dynamically.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Page() {\n *   return (\n *     <>\n *       <Stack.Header.Right>\n *         <Stack.Header.Button onPress={() => alert('Right button pressed!')} />\n *       </Stack.Header.Right>\n *       <ScreenContent />\n *     </>\n *   );\n * }\n * ```\n *\n * When used inside the layout, it needs to be wrapped in `Stack.Header` to take effect.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Layout() {\n *   return (\n *     <Stack>\n *       <Stack.Screen name=\"index\">\n *         <Stack.Header>\n *           <Stack.Header.Right>\n *             <Stack.Header.Button onPress={() => alert('Right button pressed!')} />\n *           </Stack.Header.Right>\n *         </Stack.Header>\n *       </Stack.Screen>\n *     </Stack>\n *   );\n * }\n * ```\n */\nexport const StackHeaderRight: React.FC<StackHeaderRightProps> = (props) => {\n  // This component will only render when used inside a page\n  // but only if it is not wrapped in Stack.Screen.Header\n  const updatedOptions = useMemo(() => appendStackHeaderRightPropsToOptions({}, props), [props]);\n  return <Screen options={updatedOptions} />;\n};\n\nfunction convertHeaderRightLeftChildrenToUnstableItems(\n  children: React.ReactNode,\n  side: 'Left' | 'Right'\n):\n  | NativeStackNavigationOptions['unstable_headerRightItems']\n  | NativeStackNavigationOptions['unstable_headerLeftItems'] {\n  const allChildren = React.Children.toArray(children);\n  const actions = allChildren.filter(\n    (child) =>\n      isChildOfType(child, StackHeaderButton) ||\n      isChildOfType(child, StackHeaderMenu) ||\n      isChildOfType(child, StackHeaderSpacer) ||\n      isChildOfType(child, StackHeaderView)\n  );\n  if (actions.length !== allChildren.length && process.env.NODE_ENV !== 'production') {\n    const otherElements = allChildren\n      .filter((child) => !actions.some((action) => action === child))\n      .map((e) => {\n        if (isValidElement(e)) {\n          if (e.type === Fragment) {\n            return '<Fragment>';\n          } else {\n            return (e.type as { name: string })?.name ?? e.type;\n          }\n        }\n\n        return String(e);\n      });\n    console.warn(\n      `Stack.Header.${side} only accepts <Stack.Header.Button>, <Stack.Header.Menu>, <Menu>, and <Stack.Header.Item> as children. Found invalid children: ${otherElements.join(', ')}`\n    );\n  }\n  return () =>\n    actions\n      .map((action) => {\n        if (isChildOfType(action, StackHeaderButton)) {\n          return convertStackHeaderButtonPropsToRNHeaderItem(action.props);\n        } else if (isChildOfType(action, StackHeaderMenu)) {\n          return convertStackHeaderMenuPropsToRNHeaderItem(action.props);\n        } else if (isChildOfType(action, StackHeaderSpacer)) {\n          return convertStackHeaderSpacerPropsToRNHeaderItem(action.props);\n        }\n        return convertStackHeaderViewPropsToRNHeaderItem(action.props);\n      })\n      .filter((item) => !!item);\n}\n\nexport function appendStackHeaderRightPropsToOptions(\n  options: NativeStackNavigationOptions,\n  props: StackHeaderRightProps\n): NativeStackNavigationOptions {\n  if (props.asChild) {\n    return {\n      ...options,\n      headerRight: () => props.children,\n    };\n  }\n\n  return {\n    ...options,\n    unstable_headerRightItems: convertHeaderRightLeftChildrenToUnstableItems(\n      props.children,\n      'Right'\n    ),\n  };\n}\n\nexport function appendStackHeaderLeftPropsToOptions(\n  options: NativeStackNavigationOptions,\n  props: StackHeaderLeftProps\n): NativeStackNavigationOptions {\n  if (props.asChild) {\n    return {\n      ...options,\n      headerLeft: () => props.children,\n    };\n  }\n  return {\n    ...options,\n    unstable_headerLeftItems: convertHeaderRightLeftChildrenToUnstableItems(props.children, 'Left'),\n  };\n}\n"]}

package/build/layouts/stack-utils/StackHeaderMenu.d.ts

@@ -3,15 +3,71 @@ import { type ReactNode } from 'react';
 import type { ImageSourcePropType } from 'react-native';
 import type { SFSymbol } from 'sf-symbols-typescript';
 import { type StackHeaderItemSharedProps } from './shared';
-export interface StackHeaderMenuProps extends StackHeaderItemSharedProps {
+export interface StackHeaderMenuProps {
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
     /**
-     * Optional title to show on top of the menu.
+     * There are two ways to specify the content of the menu header item - using props or child components:
+     *
+     * @example
+     * ```tsx
+     * import { Stack } from 'expo-router';
+     *
+     * ...
+     * <Stack.Header.Menu icon="star.fill" title="As props">
+     *  <Stack.Header.MenuAction>Action 1</Stack.Header.MenuAction>
+     * </Stack.Header.Menu>
+     * ```
+     *
+     * @example
+     * ```tsx
+     * import { Stack } from 'expo-router';
+     *
+     * ...
+     * <Stack.Header.Menu>
+     *   <Stack.Header.Icon sf="star.fill" />
+     *   <Stack.Header.Label>As components</Stack.Header.Label>
+     *   <Stack.Header.Badge>3</Stack.Header.Badge>
+     *   <Stack.Header.MenuAction>Action 1</Stack.Header.MenuAction>
+     * </Stack.Header.Menu>
+     * ```
+     *
+     * **Note**: When icon is used, the label will not be shown and will be used for accessibility purposes only.
      */
-    title?: string;
+    children?: ReactNode;
+    /**
+     * If `true`, the menu item will be displayed as destructive.
+     *
+     * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/destructive) for more information.
+     */
+    destructive?: boolean;
+    disabled?: boolean;
+    /**
+     * Whether to hide the shared background.
+     *
+     * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground) for more information.
+     *
+     * @platform iOS 26+
+     */
+    hidesSharedBackground?: boolean;
+    /**
+     * Whether the menu should be hidden.
+     *
+     * @default false
+     */
+    hidden?: boolean;
+    /**
+     * Icon for the menu item.
+     *
+     * Can be an SF Symbol name or an image source.
+     */
+    icon?: StackHeaderItemSharedProps['icon'];
     /**
      * If `true`, the menu will be displayed inline.
      * This means that the menu will not be collapsed
      *
+     * > **Note*: Inline menus are only supported in submenus.
+     *
      * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayinline) for more information.
      */
     inline?: boolean;
@@ -19,15 +75,35 @@ export interface StackHeaderMenuProps extends StackHeaderItemSharedProps {
      * If `true`, the menu will be displayed as a palette.
      * This means that the menu will be displayed as one row
      *
+     * > **Note**: Palette menus are only supported in submenus.
+     *
      * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayaspalette) for more information.
      */
     palette?: boolean;
     /**
-     * If `true`, the menu item will be displayed as destructive.
+     * Whether to separate the background of this item from other header items.
      *
-     * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/destructive) for more information.
+     * @default false
      */
-    destructive?: boolean;
+    separateBackground?: boolean;
+    /**
+     * Style for the label of the header item.
+     */
+    style?: StackHeaderItemSharedProps['style'];
+    /**
+     * The tint color to apply to the button item
+     *
+     * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/tintcolor) for more information.
+     */
+    tintColor?: StackHeaderItemSharedProps['tintColor'];
+    /**
+     * Optional title to show on top of the menu.
+     */
+    title?: string;
+    /**
+     * @default 'plain'
+     */
+    variant?: StackHeaderItemSharedProps['variant'];
 }
 /**
  * Component representing menu for `Stack.Header.Right` or `Stack.Header.Left`.
@@ -104,7 +180,7 @@ export interface StackHeaderMenuProps extends StackHeaderItemSharedProps {
  * @platform ios
  */
 export declare const StackHeaderMenu: React.FC<StackHeaderMenuProps>;
-export declare function convertStackHeaderMenuPropsToRNHeaderItem(props: StackHeaderMenuProps): NativeStackHeaderItemMenu;
+export declare function convertStackHeaderMenuPropsToRNHeaderItem(props: StackHeaderMenuProps): NativeStackHeaderItemMenu | undefined;
 export interface StackHeaderMenuActionProps {
     /**
      * Can be an Icon, Label or string title.

package/build/layouts/stack-utils/StackHeaderMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackHeaderMenu.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,yBAAyB,EACzB,+BAA+B,EAEhC,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,UAAU,CAAC;AAIlB,MAAM,WAAW,oBAAqB,SAAQ,0BAA0B;IACtE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAAQ,CAAC;AAEpE,wBAAgB,yCAAyC,CACvD,KAAK,EAAE,oBAAoB,GAC1B,yBAAyB,CAsB3B;AAiDD,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,mBAAmB,CAAC;IACtC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;OAOG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAAc,CAAC;AAEtF,wBAAgB,+CAA+C,CAC7D,KAAK,EAAE,0BAA0B,GAChC,+BAA+B,CAwBjC"}
+{"version":3,"file":"StackHeaderMenu.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,yBAAyB,EACzB,+BAA+B,EAEhC,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,UAAU,CAAC;AAIlB,MAAM,WAAW,oBAAoB;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,0BAA0B,CAAC,MAAM,CAAC,CAAC;IAC1C;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,0BAA0B,CAAC,OAAO,CAAC,CAAC;IAC5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACpD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,0BAA0B,CAAC,SAAS,CAAC,CAAC;CACjD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAAQ,CAAC;AAEpE,wBAAgB,yCAAyC,CACvD,KAAK,EAAE,oBAAoB,GAC1B,yBAAyB,GAAG,SAAS,CA2BvC;AAsDD,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,mBAAmB,CAAC;IACtC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;OAOG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAAc,CAAC;AAEtF,wBAAgB,+CAA+C,CAC7D,KAAK,EAAE,0BAA0B,GAChC,+BAA+B,CAwBjC"}

package/build/layouts/stack-utils/StackHeaderMenu.js

@@ -83,18 +83,23 @@ const children_1 = require("../../utils/children");
  */
 exports.StackHeaderMenu = primitives_1.Menu;
 function convertStackHeaderMenuPropsToRNHeaderItem(props) {
+    if (props.hidden) {
+        return undefined;
+    }
     const { title, ...rest } = props;
     const actions = react_1.Children.toArray(props.children).filter((child) => (0, children_1.isChildOfType)(child, exports.StackHeaderMenuAction) || (0, children_1.isChildOfType)(child, exports.StackHeaderMenu));
     const item = {
         ...(0, shared_1.convertStackHeaderSharedPropsToRNSharedHeaderItem)(rest),
         type: 'menu',
         menu: {
-            items: actions.map((action) => {
+            items: actions
+                .map((action) => {
                 if ((0, children_1.isChildOfType)(action, exports.StackHeaderMenu)) {
                     return convertStackHeaderSubmenuMenuPropsToRNHeaderItem(action.props);
                 }
                 return convertStackHeaderMenuActionPropsToRNHeaderItem(action.props);
-            }),
+            })
+                .filter((i) => !!i),
         },
     };
     if (title) {
@@ -103,6 +108,9 @@ function convertStackHeaderMenuPropsToRNHeaderItem(props) {
     return item;
 }
 function convertStackHeaderSubmenuMenuPropsToRNHeaderItem(props) {
+    if (props.hidden) {
+        return undefined;
+    }
     // Removing children. Otherwise the buttons will be broken
     const sharedProps = (0, shared_1.convertStackHeaderSharedPropsToRNSharedHeaderItem)(props);
     const actions = react_1.Children.toArray(props.children).filter((child) => (0, children_1.isChildOfType)(child, exports.StackHeaderMenuAction) || (0, children_1.isChildOfType)(child, exports.StackHeaderMenu));
@@ -110,12 +118,14 @@ function convertStackHeaderSubmenuMenuPropsToRNHeaderItem(props) {
     // https://github.com/react-navigation/react-navigation/pull/12895
     const item = {
         type: 'submenu',
-        items: actions.map((action) => {
+        items: actions
+            .map((action) => {
             if ((0, children_1.isChildOfType)(action, exports.StackHeaderMenu)) {
                 return convertStackHeaderSubmenuMenuPropsToRNHeaderItem(action.props);
             }
             return convertStackHeaderMenuActionPropsToRNHeaderItem(action.props);
-        }),
+        })
+            .filter((i) => !!i),
         label: sharedProps.label || props.title || '',
     };
     if (props.inline !== undefined) {

package/build/layouts/stack-utils/StackHeaderMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackHeaderMenu.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {\n  NativeStackHeaderItemMenu,\n  NativeStackHeaderItemMenuAction,\n  NativeStackHeaderItemMenuSubmenu,\n} from '@react-navigation/native-stack';\nimport { Children, type ReactNode } from 'react';\nimport type { ImageSourcePropType } from 'react-native';\nimport type { HeaderBarButtonItemSubmenu } from 'react-native-screens';\nimport type { SFSymbol } from 'sf-symbols-typescript';\n\nimport {\n  convertStackHeaderSharedPropsToRNSharedHeaderItem,\n  type StackHeaderItemSharedProps,\n} from './shared';\nimport { Menu, MenuAction } from '../../primitives';\nimport { isChildOfType } from '../../utils/children';\n\nexport interface StackHeaderMenuProps extends StackHeaderItemSharedProps {\n  /**\n   * Optional title to show on top of the menu.\n   */\n  title?: string;\n  /**\n   * If `true`, the menu will be displayed inline.\n   * This means that the menu will not be collapsed\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayinline) for more information.\n   */\n  inline?: boolean;\n  /**\n   * If `true`, the menu will be displayed as a palette.\n   * This means that the menu will be displayed as one row\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayaspalette) for more information.\n   */\n  palette?: boolean;\n  /**\n   * If `true`, the menu item will be displayed as destructive.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/destructive) for more information.\n   */\n  destructive?: boolean;\n}\n\n/**\n * Component representing menu for `Stack.Header.Right` or `Stack.Header.Left`.\n *\n * Use as `Stack.Header.Menu` to provide top-level menus on iOS header bars.\n * It accepts `Stack.Header.MenuAction` and nested `Stack.Header.Menu`\n * elements. Menu can be configured using both component props and child\n * elements.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n * import { Alert } from 'react-native';\n *\n * export default function Screen() {\n *   return (\n *     <>\n *       <ScreenContent />\n *       <Stack.Screen>\n *         <Stack.Header>\n *           <Stack.Header.Right>\n *             <Stack.Header.Menu>\n *               <Stack.Header.Label>Menu</Stack.Header.Label>\n *               <Stack.Header.Icon sf=\"ellipsis.circle\" />\n *               <Stack.Header.MenuAction onPress={() => Alert.alert('Action 1 pressed!')}>\n *                 Action 1\n *               </Stack.Header.MenuAction>\n *               <Stack.Header.MenuAction isOn icon=\"star.fill\">\n *                 Action 2\n *               </Stack.Header.MenuAction>\n *               <Stack.Header.Menu inline>\n *                 <Stack.Header.MenuAction isOn>Sub Action</Stack.Header.MenuAction>\n *               </Stack.Header.Menu>\n *             </Stack.Header.Menu>\n *           </Stack.Header.Right>\n *         </Stack.Header>\n *       </Stack.Screen>\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n * import { Text } from 'react-native';\n *\n * export default function Screen() {\n *   return (\n *     <>\n *       <ScreenContent />\n *       <Stack.Screen>\n *         <Stack.Header>\n *           <Stack.Header.Left>\n *             <Stack.Header.Menu>\n *               <Stack.Header.MenuAction onPress={() => Alert.alert('Action 1 pressed!')}>\n *                 Action 1\n *               </Stack.Header.MenuAction>\n *               <Stack.Header.Menu inline palette title=\"Icons\">\n *                 <Stack.Header.MenuAction isOn icon=\"star.fill\" />\n *                 <Stack.Header.MenuAction icon=\"heart.fill\" />\n *               </Stack.Header.Menu>\n *             </Stack.Header.Menu>\n *           </Stack.Header.Left>\n *         </Stack.Header>\n *       </Stack.Screen>\n *     </>\n *   );\n * }\n * ```\n *\n * @see [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/menus) for more information about menus on iOS.\n *\n * @platform ios\n */\nexport const StackHeaderMenu: React.FC<StackHeaderMenuProps> = Menu;\n\nexport function convertStackHeaderMenuPropsToRNHeaderItem(\n  props: StackHeaderMenuProps\n): NativeStackHeaderItemMenu {\n  const { title, ...rest } = props;\n  const actions = Children.toArray(props.children).filter(\n    (child) => isChildOfType(child, StackHeaderMenuAction) || isChildOfType(child, StackHeaderMenu)\n  );\n  const item: NativeStackHeaderItemMenu = {\n    ...convertStackHeaderSharedPropsToRNSharedHeaderItem(rest),\n    type: 'menu',\n    menu: {\n      items: actions.map((action) => {\n        if (isChildOfType(action, StackHeaderMenu)) {\n          return convertStackHeaderSubmenuMenuPropsToRNHeaderItem(action.props);\n        }\n        return convertStackHeaderMenuActionPropsToRNHeaderItem(action.props);\n      }),\n    },\n  };\n  if (title) {\n    item.menu.title = title;\n  }\n\n  return item;\n}\n\nfunction convertStackHeaderSubmenuMenuPropsToRNHeaderItem(\n  props: StackHeaderMenuProps\n): NativeStackHeaderItemMenuSubmenu {\n  // Removing children. Otherwise the buttons will be broken\n  const sharedProps = convertStackHeaderSharedPropsToRNSharedHeaderItem(props);\n  const actions = Children.toArray(props.children).filter(\n    (child) => isChildOfType(child, StackHeaderMenuAction) || isChildOfType(child, StackHeaderMenu)\n  );\n\n  // TODO: Remove  Pick<HeaderBarButtonItemSubmenu> when this PR is merged and released in react-navigation:\n  // https://github.com/react-navigation/react-navigation/pull/12895\n  const item: NativeStackHeaderItemMenuSubmenu &\n    Pick<HeaderBarButtonItemSubmenu, 'displayAsPalette' | 'displayInline' | 'destructive'> = {\n    type: 'submenu',\n    items: actions.map((action) => {\n      if (isChildOfType(action, StackHeaderMenu)) {\n        return convertStackHeaderSubmenuMenuPropsToRNHeaderItem(action.props);\n      }\n      return convertStackHeaderMenuActionPropsToRNHeaderItem(action.props);\n    }),\n    label: sharedProps.label || props.title || '',\n  };\n\n  if (props.inline !== undefined) {\n    item.displayInline = props.inline;\n  }\n  if (props.palette !== undefined) {\n    item.displayAsPalette = props.palette;\n  }\n  if (props.destructive !== undefined) {\n    item.destructive = props.destructive;\n  }\n\n  if (sharedProps.icon) {\n    // Only SF Symbols are supported in submenu icons\n    if (sharedProps.icon.type === 'sfSymbol') {\n      item.icon = sharedProps.icon;\n    } else {\n      console.warn(\n        'When Icon is used inside Stack.Header.Menu used as a submenu, only sfSymbol icons are supported. This is a limitation of React Native Screens.'\n      );\n    }\n  }\n\n  return item;\n}\n\nexport interface StackHeaderMenuActionProps {\n  /**\n   * Can be an Icon, Label or string title.\n   */\n  children?: ReactNode;\n  /**\n   * If `true`, the menu item will be disabled and not selectable.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/disabled) for more information.\n   */\n  disabled?: boolean;\n  icon?: SFSymbol | ImageSourcePropType;\n  /**\n   * If `true`, the menu item will be displayed as destructive.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/destructive) for more information.\n   */\n  destructive?: boolean;\n  /**\n   * If `true`, the menu will be kept presented after the action is selected.\n   *\n   * This is marked as unstable, because when action is selected it will recreate the menu,\n   * which will close all opened submenus and reset the scroll position.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/keepsmenupresented) for more information.\n   */\n  unstable_keepPresented?: boolean;\n  /**\n   * If `true`, the menu item will be displayed as selected.\n   */\n  isOn?: boolean;\n  onPress?: () => void;\n  /**\n   * An elaborated title that explains the purpose of the action.\n   */\n  discoverabilityLabel?: string;\n  /**\n   * An optional subtitle for the menu item.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/subtitle) for more information.\n   */\n  subtitle?: string;\n  hidden?: boolean;\n}\n\n/**\n * An action item for a `Stack.Header.Menu`.\n *\n * @example\n * ```tsx\n * import React from 'react';\n * import { Alert } from 'react-native';\n * import { Stack, Label, Icon } from 'expo-router';\n *\n * export default function ExampleScreen() {\n *   return (\n *     <>\n *       <ScreenContent />\n *       <Stack.Screen>\n *         <Stack.Header>\n *           <Stack.Header.Right>\n *             <Stack.Header.Menu icon=\"ellipsis.circle\">\n *               <Stack.Header.MenuAction onPress={() => Alert.alert('Action 1 pressed!')}>\n *                 Action 1\n *               </Stack.Header.MenuAction>\n *               <Stack.Header.MenuAction isOn onPress={() => Alert.alert('Action 2 pressed!')}>\n *                 <Label>Action 2</Label>\n *                 <Icon sf=\"star.fill\" />\n *               </Stack.Header.MenuAction>\n *             </Stack.Header.Menu>\n *           </Stack.Header.Right>\n *         </Stack.Header>\n *       </Stack.Screen>\n *     </>\n *   );\n * }\n * ```\n *\n * @see [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/menus) for more information about menus on iOS.\n *\n * @platform ios\n */\nexport const StackHeaderMenuAction: React.FC<StackHeaderMenuActionProps> = MenuAction;\n\nexport function convertStackHeaderMenuActionPropsToRNHeaderItem(\n  props: StackHeaderMenuActionProps\n): NativeStackHeaderItemMenuAction {\n  const { children, isOn, unstable_keepPresented, icon, ...rest } = props;\n  const sharedProps = convertStackHeaderSharedPropsToRNSharedHeaderItem(props);\n  const item: NativeStackHeaderItemMenuAction = {\n    ...rest,\n    type: 'action',\n    label: sharedProps.label,\n    state: isOn ? 'on' : 'off',\n    onPress: props.onPress ?? (() => {}),\n  };\n  if (unstable_keepPresented !== undefined) {\n    item.keepsMenuPresented = unstable_keepPresented;\n  }\n  if (sharedProps.icon) {\n    // Only SF Symbols are supported in action icons\n    if (sharedProps.icon.type === 'sfSymbol') {\n      item.icon = sharedProps.icon;\n    } else {\n      console.warn(\n        'When Icon is used inside Stack.Header.Menu.Action, only sfSymbol icons are supported. This is a limitation of React Native Screens.'\n      );\n    }\n  }\n  return item;\n}\n"]}
+{"version":3,"file":"StackHeaderMenu.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {\n  NativeStackHeaderItemMenu,\n  NativeStackHeaderItemMenuAction,\n  NativeStackHeaderItemMenuSubmenu,\n} from '@react-navigation/native-stack';\nimport { Children, type ReactNode } from 'react';\nimport type { ImageSourcePropType } from 'react-native';\nimport type { HeaderBarButtonItemSubmenu } from 'react-native-screens';\nimport type { SFSymbol } from 'sf-symbols-typescript';\n\nimport {\n  convertStackHeaderSharedPropsToRNSharedHeaderItem,\n  type StackHeaderItemSharedProps,\n} from './shared';\nimport { Menu, MenuAction } from '../../primitives';\nimport { isChildOfType } from '../../utils/children';\n\nexport interface StackHeaderMenuProps {\n  accessibilityLabel?: string;\n  accessibilityHint?: string;\n  /**\n   * There are two ways to specify the content of the menu header item - using props or child components:\n   *\n   * @example\n   * ```tsx\n   * import { Stack } from 'expo-router';\n   *\n   * ...\n   * <Stack.Header.Menu icon=\"star.fill\" title=\"As props\">\n   *  <Stack.Header.MenuAction>Action 1</Stack.Header.MenuAction>\n   * </Stack.Header.Menu>\n   * ```\n   *\n   * @example\n   * ```tsx\n   * import { Stack } from 'expo-router';\n   *\n   * ...\n   * <Stack.Header.Menu>\n   *   <Stack.Header.Icon sf=\"star.fill\" />\n   *   <Stack.Header.Label>As components</Stack.Header.Label>\n   *   <Stack.Header.Badge>3</Stack.Header.Badge>\n   *   <Stack.Header.MenuAction>Action 1</Stack.Header.MenuAction>\n   * </Stack.Header.Menu>\n   * ```\n   *\n   * **Note**: When icon is used, the label will not be shown and will be used for accessibility purposes only.\n   */\n  children?: ReactNode;\n  /**\n   * If `true`, the menu item will be displayed as destructive.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/destructive) for more information.\n   */\n  destructive?: boolean;\n  disabled?: boolean;\n  /**\n   * Whether to hide the shared background.\n   *\n   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground) for more information.\n   *\n   * @platform iOS 26+\n   */\n  hidesSharedBackground?: boolean;\n  /**\n   * Whether the menu should be hidden.\n   *\n   * @default false\n   */\n  hidden?: boolean;\n  /**\n   * Icon for the menu item.\n   *\n   * Can be an SF Symbol name or an image source.\n   */\n  icon?: StackHeaderItemSharedProps['icon'];\n  /**\n   * If `true`, the menu will be displayed inline.\n   * This means that the menu will not be collapsed\n   *\n   * > **Note*: Inline menus are only supported in submenus.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayinline) for more information.\n   */\n  inline?: boolean;\n  /**\n   * If `true`, the menu will be displayed as a palette.\n   * This means that the menu will be displayed as one row\n   *\n   * > **Note**: Palette menus are only supported in submenus.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayaspalette) for more information.\n   */\n  palette?: boolean;\n  /**\n   * Whether to separate the background of this item from other header items.\n   *\n   * @default false\n   */\n  separateBackground?: boolean;\n  /**\n   * Style for the label of the header item.\n   */\n  style?: StackHeaderItemSharedProps['style'];\n  /**\n   * The tint color to apply to the button item\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/tintcolor) for more information.\n   */\n  tintColor?: StackHeaderItemSharedProps['tintColor'];\n  /**\n   * Optional title to show on top of the menu.\n   */\n  title?: string;\n  /**\n   * @default 'plain'\n   */\n  variant?: StackHeaderItemSharedProps['variant'];\n}\n\n/**\n * Component representing menu for `Stack.Header.Right` or `Stack.Header.Left`.\n *\n * Use as `Stack.Header.Menu` to provide top-level menus on iOS header bars.\n * It accepts `Stack.Header.MenuAction` and nested `Stack.Header.Menu`\n * elements. Menu can be configured using both component props and child\n * elements.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n * import { Alert } from 'react-native';\n *\n * export default function Screen() {\n *   return (\n *     <>\n *       <ScreenContent />\n *       <Stack.Screen>\n *         <Stack.Header>\n *           <Stack.Header.Right>\n *             <Stack.Header.Menu>\n *               <Stack.Header.Label>Menu</Stack.Header.Label>\n *               <Stack.Header.Icon sf=\"ellipsis.circle\" />\n *               <Stack.Header.MenuAction onPress={() => Alert.alert('Action 1 pressed!')}>\n *                 Action 1\n *               </Stack.Header.MenuAction>\n *               <Stack.Header.MenuAction isOn icon=\"star.fill\">\n *                 Action 2\n *               </Stack.Header.MenuAction>\n *               <Stack.Header.Menu inline>\n *                 <Stack.Header.MenuAction isOn>Sub Action</Stack.Header.MenuAction>\n *               </Stack.Header.Menu>\n *             </Stack.Header.Menu>\n *           </Stack.Header.Right>\n *         </Stack.Header>\n *       </Stack.Screen>\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n * import { Text } from 'react-native';\n *\n * export default function Screen() {\n *   return (\n *     <>\n *       <ScreenContent />\n *       <Stack.Screen>\n *         <Stack.Header>\n *           <Stack.Header.Left>\n *             <Stack.Header.Menu>\n *               <Stack.Header.MenuAction onPress={() => Alert.alert('Action 1 pressed!')}>\n *                 Action 1\n *               </Stack.Header.MenuAction>\n *               <Stack.Header.Menu inline palette title=\"Icons\">\n *                 <Stack.Header.MenuAction isOn icon=\"star.fill\" />\n *                 <Stack.Header.MenuAction icon=\"heart.fill\" />\n *               </Stack.Header.Menu>\n *             </Stack.Header.Menu>\n *           </Stack.Header.Left>\n *         </Stack.Header>\n *       </Stack.Screen>\n *     </>\n *   );\n * }\n * ```\n *\n * @see [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/menus) for more information about menus on iOS.\n *\n * @platform ios\n */\nexport const StackHeaderMenu: React.FC<StackHeaderMenuProps> = Menu;\n\nexport function convertStackHeaderMenuPropsToRNHeaderItem(\n  props: StackHeaderMenuProps\n): NativeStackHeaderItemMenu | undefined {\n  if (props.hidden) {\n    return undefined;\n  }\n  const { title, ...rest } = props;\n  const actions = Children.toArray(props.children).filter(\n    (child) => isChildOfType(child, StackHeaderMenuAction) || isChildOfType(child, StackHeaderMenu)\n  );\n  const item: NativeStackHeaderItemMenu = {\n    ...convertStackHeaderSharedPropsToRNSharedHeaderItem(rest),\n    type: 'menu',\n    menu: {\n      items: actions\n        .map((action) => {\n          if (isChildOfType(action, StackHeaderMenu)) {\n            return convertStackHeaderSubmenuMenuPropsToRNHeaderItem(action.props);\n          }\n          return convertStackHeaderMenuActionPropsToRNHeaderItem(action.props);\n        })\n        .filter((i) => !!i),\n    },\n  };\n  if (title) {\n    item.menu.title = title;\n  }\n\n  return item;\n}\n\nfunction convertStackHeaderSubmenuMenuPropsToRNHeaderItem(\n  props: StackHeaderMenuProps\n): NativeStackHeaderItemMenuSubmenu | undefined {\n  if (props.hidden) {\n    return undefined;\n  }\n  // Removing children. Otherwise the buttons will be broken\n  const sharedProps = convertStackHeaderSharedPropsToRNSharedHeaderItem(props);\n  const actions = Children.toArray(props.children).filter(\n    (child) => isChildOfType(child, StackHeaderMenuAction) || isChildOfType(child, StackHeaderMenu)\n  );\n\n  // TODO: Remove  Pick<HeaderBarButtonItemSubmenu> when this PR is merged and released in react-navigation:\n  // https://github.com/react-navigation/react-navigation/pull/12895\n  const item: NativeStackHeaderItemMenuSubmenu &\n    Pick<HeaderBarButtonItemSubmenu, 'displayAsPalette' | 'displayInline' | 'destructive'> = {\n    type: 'submenu',\n    items: actions\n      .map((action) => {\n        if (isChildOfType(action, StackHeaderMenu)) {\n          return convertStackHeaderSubmenuMenuPropsToRNHeaderItem(action.props);\n        }\n        return convertStackHeaderMenuActionPropsToRNHeaderItem(action.props);\n      })\n      .filter((i) => !!i),\n    label: sharedProps.label || props.title || '',\n  };\n\n  if (props.inline !== undefined) {\n    item.displayInline = props.inline;\n  }\n  if (props.palette !== undefined) {\n    item.displayAsPalette = props.palette;\n  }\n  if (props.destructive !== undefined) {\n    item.destructive = props.destructive;\n  }\n\n  if (sharedProps.icon) {\n    // Only SF Symbols are supported in submenu icons\n    if (sharedProps.icon.type === 'sfSymbol') {\n      item.icon = sharedProps.icon;\n    } else {\n      console.warn(\n        'When Icon is used inside Stack.Header.Menu used as a submenu, only sfSymbol icons are supported. This is a limitation of React Native Screens.'\n      );\n    }\n  }\n\n  return item;\n}\n\nexport interface StackHeaderMenuActionProps {\n  /**\n   * Can be an Icon, Label or string title.\n   */\n  children?: ReactNode;\n  /**\n   * If `true`, the menu item will be disabled and not selectable.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/disabled) for more information.\n   */\n  disabled?: boolean;\n  icon?: SFSymbol | ImageSourcePropType;\n  /**\n   * If `true`, the menu item will be displayed as destructive.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/destructive) for more information.\n   */\n  destructive?: boolean;\n  /**\n   * If `true`, the menu will be kept presented after the action is selected.\n   *\n   * This is marked as unstable, because when action is selected it will recreate the menu,\n   * which will close all opened submenus and reset the scroll position.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/attributes/keepsmenupresented) for more information.\n   */\n  unstable_keepPresented?: boolean;\n  /**\n   * If `true`, the menu item will be displayed as selected.\n   */\n  isOn?: boolean;\n  onPress?: () => void;\n  /**\n   * An elaborated title that explains the purpose of the action.\n   */\n  discoverabilityLabel?: string;\n  /**\n   * An optional subtitle for the menu item.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/subtitle) for more information.\n   */\n  subtitle?: string;\n  hidden?: boolean;\n}\n\n/**\n * An action item for a `Stack.Header.Menu`.\n *\n * @example\n * ```tsx\n * import React from 'react';\n * import { Alert } from 'react-native';\n * import { Stack, Label, Icon } from 'expo-router';\n *\n * export default function ExampleScreen() {\n *   return (\n *     <>\n *       <ScreenContent />\n *       <Stack.Screen>\n *         <Stack.Header>\n *           <Stack.Header.Right>\n *             <Stack.Header.Menu icon=\"ellipsis.circle\">\n *               <Stack.Header.MenuAction onPress={() => Alert.alert('Action 1 pressed!')}>\n *                 Action 1\n *               </Stack.Header.MenuAction>\n *               <Stack.Header.MenuAction isOn onPress={() => Alert.alert('Action 2 pressed!')}>\n *                 <Label>Action 2</Label>\n *                 <Icon sf=\"star.fill\" />\n *               </Stack.Header.MenuAction>\n *             </Stack.Header.Menu>\n *           </Stack.Header.Right>\n *         </Stack.Header>\n *       </Stack.Screen>\n *     </>\n *   );\n * }\n * ```\n *\n * @see [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/menus) for more information about menus on iOS.\n *\n * @platform ios\n */\nexport const StackHeaderMenuAction: React.FC<StackHeaderMenuActionProps> = MenuAction;\n\nexport function convertStackHeaderMenuActionPropsToRNHeaderItem(\n  props: StackHeaderMenuActionProps\n): NativeStackHeaderItemMenuAction {\n  const { children, isOn, unstable_keepPresented, icon, ...rest } = props;\n  const sharedProps = convertStackHeaderSharedPropsToRNSharedHeaderItem(props);\n  const item: NativeStackHeaderItemMenuAction = {\n    ...rest,\n    type: 'action',\n    label: sharedProps.label,\n    state: isOn ? 'on' : 'off',\n    onPress: props.onPress ?? (() => {}),\n  };\n  if (unstable_keepPresented !== undefined) {\n    item.keepsMenuPresented = unstable_keepPresented;\n  }\n  if (sharedProps.icon) {\n    // Only SF Symbols are supported in action icons\n    if (sharedProps.icon.type === 'sfSymbol') {\n      item.icon = sharedProps.icon;\n    } else {\n      console.warn(\n        'When Icon is used inside Stack.Header.Menu.Action, only sfSymbol icons are supported. This is a limitation of React Native Screens.'\n      );\n    }\n  }\n  return item;\n}\n"]}

package/build/layouts/stack-utils/StackHeaderSpacer.d.ts

@@ -1,5 +1,11 @@
 import type { NativeStackHeaderItemSpacing } from '@react-navigation/native-stack';
 export interface StackHeaderSpacerProps {
+    /**
+     * Whether the spacer should be hidden.
+     *
+     * @default false
+     */
+    hidden?: boolean;
     /**
      * The width of the spacing element.
      *
@@ -36,5 +42,5 @@ export interface StackHeaderSpacerProps {
  * @platform ios
  */
 export declare const StackHeaderSpacer: React.FC<StackHeaderSpacerProps>;
-export declare function convertStackHeaderSpacerPropsToRNHeaderItem(props: StackHeaderSpacerProps): NativeStackHeaderItemSpacing;
+export declare function convertStackHeaderSpacerPropsToRNHeaderItem({ hidden, width, }: StackHeaderSpacerProps): NativeStackHeaderItemSpacing | undefined;
 //# sourceMappingURL=StackHeaderSpacer.d.ts.map

package/build/layouts/stack-utils/StackHeaderSpacer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackHeaderSpacer.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderSpacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAEnF,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAc,CAAC;AAE9E,wBAAgB,2CAA2C,CACzD,KAAK,EAAE,sBAAsB,GAC5B,4BAA4B,CAK9B"}
+{"version":3,"file":"StackHeaderSpacer.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderSpacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAEnF,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;CAIf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAc,CAAC;AAE9E,wBAAgB,2CAA2C,CAAC,EAC1D,MAAM,EACN,KAAK,GACN,EAAE,sBAAsB,GAAG,4BAA4B,GAAG,SAAS,CAQnE"}

package/build/layouts/stack-utils/StackHeaderSpacer.js

@@ -32,10 +32,13 @@ exports.convertStackHeaderSpacerPropsToRNHeaderItem = convertStackHeaderSpacerPr
  */
 const StackHeaderSpacer = () => null;
 exports.StackHeaderSpacer = StackHeaderSpacer;
-function convertStackHeaderSpacerPropsToRNHeaderItem(props) {
+function convertStackHeaderSpacerPropsToRNHeaderItem({ hidden, width, }) {
+    if (hidden) {
+        return undefined;
+    }
     return {
         type: 'spacing',
-        spacing: props.width,
+        spacing: width,
     };
 }
 //# sourceMappingURL=StackHeaderSpacer.js.map