expo-router 7.0.0-canary-20260114-d8e19f5 → 7.0.0-canary-20260119-70f7c28

package/build/layouts/stack-utils/toolbar/StackToolbarMenu.js

@@ -0,0 +1,190 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackToolbarMenuAction = exports.StackToolbarMenu = void 0;
+exports.convertStackToolbarMenuPropsToRNHeaderItem = convertStackToolbarMenuPropsToRNHeaderItem;
+exports.convertStackToolbarMenuActionPropsToRNHeaderItem = convertStackToolbarMenuActionPropsToRNHeaderItem;
+const react_1 = require("react");
+const bottom_toolbar_native_elements_1 = require("./bottom-toolbar-native-elements");
+const context_1 = require("./context");
+const primitives_1 = require("../../../primitives");
+const children_1 = require("../../../utils/children");
+const shared_1 = require("../shared");
+/**
+ * Use as `Stack.Toolbar.Menu` to provide menus in iOS toolbar.
+ * It accepts `Stack.Toolbar.MenuAction` and nested `Stack.Toolbar.Menu`
+ * elements. Menu can be configured using both component props and child
+ * elements.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ * import { Alert } from 'react-native';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Toolbar placement="right">
+ *         <Stack.Toolbar.Menu icon="ellipsis.circle">
+ *           <Stack.Toolbar.MenuAction onPress={() => Alert.alert('Action pressed!')}>
+ *             Action 1
+ *           </Stack.Toolbar.MenuAction>
+ *         </Stack.Toolbar.Menu>
+ *       </Stack.Toolbar>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @see [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/menus) for more information about menus on iOS.
+ *
+ * @platform ios
+ */
+const StackToolbarMenu = ({ children, ...props }) => {
+    const placement = (0, context_1.useToolbarPlacement)();
+    const allowedChildren = (0, react_1.useMemo)(() => placement === 'bottom'
+        ? [exports.StackToolbarMenu, exports.StackToolbarMenuAction, bottom_toolbar_native_elements_1.NativeToolbarMenu, bottom_toolbar_native_elements_1.NativeToolbarMenuAction]
+        : [exports.StackToolbarMenu, exports.StackToolbarMenuAction], [placement]);
+    const validChildren = (0, react_1.useMemo)(() => (0, children_1.filterAllowedChildrenElements)(children, allowedChildren), [children, allowedChildren]);
+    if (process.env.NODE_ENV !== 'production') {
+        const allChildren = react_1.Children.toArray(children);
+        if (allChildren.length !== validChildren.length) {
+            throw new Error(`Stack.Toolbar.Menu only accepts Stack.Toolbar.Menu and Stack.Toolbar.MenuAction as its children.`);
+        }
+    }
+    if (placement === 'bottom') {
+        // TODO(@ubax): Handle image loading using useImage in a follow-up PR.
+        return <bottom_toolbar_native_elements_1.NativeToolbarMenu {...props} image={props.image} children={validChildren}/>;
+    }
+    return <primitives_1.Menu {...props} children={validChildren}/>;
+};
+exports.StackToolbarMenu = StackToolbarMenu;
+function convertStackToolbarMenuPropsToRNHeaderItem(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.StackToolbarMenuAction) || (0, children_1.isChildOfType)(child, exports.StackToolbarMenu));
+    const item = {
+        ...(0, shared_1.convertStackHeaderSharedPropsToRNSharedHeaderItem)(rest),
+        type: 'menu',
+        menu: {
+            items: actions
+                .map((action) => {
+                if ((0, children_1.isChildOfType)(action, exports.StackToolbarMenu)) {
+                    return convertStackToolbarSubmenuMenuPropsToRNHeaderItem(action.props);
+                }
+                return convertStackToolbarMenuActionPropsToRNHeaderItem(action.props);
+            })
+                .filter((i) => !!i),
+        },
+    };
+    if (title) {
+        item.menu.title = title;
+    }
+    return item;
+}
+function convertStackToolbarSubmenuMenuPropsToRNHeaderItem(props) {
+    if (props.hidden) {
+        return undefined;
+    }
+    const sharedProps = (0, shared_1.convertStackHeaderSharedPropsToRNSharedHeaderItem)(props);
+    const actions = react_1.Children.toArray(props.children).filter((child) => (0, children_1.isChildOfType)(child, exports.StackToolbarMenuAction) || (0, children_1.isChildOfType)(child, exports.StackToolbarMenu));
+    // TODO: Remove  Pick<HeaderBarButtonItemSubmenu> when this PR is merged and released in react-navigation:
+    // https://github.com/react-navigation/react-navigation/pull/12895
+    const item = {
+        type: 'submenu',
+        items: actions
+            .map((action) => {
+            if ((0, children_1.isChildOfType)(action, exports.StackToolbarMenu)) {
+                return convertStackToolbarSubmenuMenuPropsToRNHeaderItem(action.props);
+            }
+            return convertStackToolbarMenuActionPropsToRNHeaderItem(action.props);
+        })
+            .filter((i) => !!i),
+        label: sharedProps.label || props.title || '',
+    };
+    if (props.inline !== undefined) {
+        item.displayInline = props.inline;
+    }
+    if (props.palette !== undefined) {
+        item.displayAsPalette = props.palette;
+    }
+    if (props.destructive !== undefined) {
+        item.destructive = props.destructive;
+    }
+    // TODO: Add elementSize to react-native-screens
+    if (sharedProps.icon) {
+        // Only SF Symbols are supported in submenu icons
+        // TODO(@ubax): Add support for other images in react-native-screens
+        if (sharedProps.icon.type === 'sfSymbol') {
+            item.icon = sharedProps.icon;
+        }
+        else {
+            console.warn('When Icon is used inside Stack.Toolbar.Menu used as a submenu, only sfSymbol icons are supported. This is a limitation of React Native Screens.');
+        }
+    }
+    return item;
+}
+/**
+ * An action item for a `Stack.Toolbar.Menu`.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Toolbar placement="right">
+ *         <Stack.Toolbar.Menu icon="ellipsis.circle">
+ *           <Stack.Toolbar.MenuAction onPress={() => alert('Action pressed!')}>
+ *             Action 1
+ *           </Stack.Toolbar.MenuAction>
+ *         </Stack.Toolbar.Menu>
+ *       </Stack.Toolbar>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform ios
+ */
+const StackToolbarMenuAction = (props) => {
+    const placement = (0, context_1.useToolbarPlacement)();
+    if (placement === 'bottom') {
+        // TODO(@ubax): Handle image loading using useImage in a follow-up PR.
+        const icon = typeof props.icon === 'string' ? props.icon : undefined;
+        return <bottom_toolbar_native_elements_1.NativeToolbarMenuAction {...props} icon={icon} image={props.image}/>;
+    }
+    return <primitives_1.MenuAction {...props}/>;
+};
+exports.StackToolbarMenuAction = StackToolbarMenuAction;
+function convertStackToolbarMenuActionPropsToRNHeaderItem(props) {
+    const { children, isOn, unstable_keepPresented, icon, ...rest } = props;
+    const sharedProps = (0, shared_1.convertStackHeaderSharedPropsToRNSharedHeaderItem)(props);
+    const item = {
+        ...rest,
+        type: 'action',
+        label: sharedProps.label,
+        state: isOn ? 'on' : 'off',
+        onPress: props.onPress ?? (() => { }),
+    };
+    if (unstable_keepPresented !== undefined) {
+        item.keepsMenuPresented = unstable_keepPresented;
+    }
+    if (sharedProps.icon) {
+        // Only SF Symbols are supported in submenu icons
+        // TODO(@ubax): Add support for other images in react-native-screens
+        if (sharedProps.icon.type === 'sfSymbol') {
+            item.icon = sharedProps.icon;
+        }
+        else {
+            console.warn('When Icon is used inside Stack.Toolbar.MenuAction, only sfSymbol icons are supported. This is a limitation of React Native Screens.');
+        }
+    }
+    return item;
+}
+//# sourceMappingURL=StackToolbarMenu.js.map

package/build/layouts/stack-utils/toolbar/StackToolbarMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackToolbarMenu.js","sourceRoot":"","sources":["../../../../src/layouts/stack-utils/toolbar/StackToolbarMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\nimport type {\n  NativeStackHeaderItemMenu,\n  NativeStackHeaderItemMenuAction,\n  NativeStackHeaderItemMenuSubmenu,\n} from '@react-navigation/native-stack';\nimport type { ImageRef } from 'expo-image';\nimport { Children, useMemo, 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 { NativeToolbarMenu, NativeToolbarMenuAction } from './bottom-toolbar-native-elements';\nimport { useToolbarPlacement } from './context';\nimport { Menu, MenuAction } from '../../../primitives';\nimport { filterAllowedChildrenElements, isChildOfType } from '../../../utils/children';\nimport {\n  convertStackHeaderSharedPropsToRNSharedHeaderItem,\n  type StackHeaderItemSharedProps,\n} from '../shared';\n\nexport interface StackToolbarMenuProps {\n  accessibilityLabel?: string;\n  accessibilityHint?: string;\n  /**\n   * Menu content - can include icons, labels, badges and menu actions.\n   *\n   * @example\n   * ```tsx\n   * <Stack.Toolbar.Menu>\n   *   <Stack.Toolbar.Icon sfSymbol=\"ellipsis.circle\" />\n   *   <Stack.Toolbar.Label>Options</Stack.Toolbar.Label>\n   *   <Stack.Toolbar.MenuAction onPress={() => {}}>Action 1</Stack.Toolbar.MenuAction>\n   * </Stack.Toolbar.Menu>\n   * ```\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  // TODO(@ubax): Add useImage support in a follow-up PR.\n  /**\n   * Image to display for the menu item.\n   *\n   * > **Note**: This prop is only supported in `Stack.Toolbar.Bottom`.\n   */\n  image?: ImageRef;\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  // TODO(@ubax): Add elementSize support in react-native-screens for header menus.\n  /**\n   * The preferred size of the menu elements.\n   *\n   * > **Note**: This prop is only supported in `Stack.Toolbar.Bottom`.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/preferredelementsize) for more information.\n   *\n   * @platform iOS 16.0+\n   */\n  elementSize?: 'auto' | 'small' | 'medium' | 'large';\n}\n\n/**\n * Use as `Stack.Toolbar.Menu` to provide menus in iOS toolbar.\n * It accepts `Stack.Toolbar.MenuAction` and nested `Stack.Toolbar.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 Page() {\n *   return (\n *     <>\n *       <Stack.Toolbar placement=\"right\">\n *         <Stack.Toolbar.Menu icon=\"ellipsis.circle\">\n *           <Stack.Toolbar.MenuAction onPress={() => Alert.alert('Action pressed!')}>\n *             Action 1\n *           </Stack.Toolbar.MenuAction>\n *         </Stack.Toolbar.Menu>\n *       </Stack.Toolbar>\n *       <ScreenContent />\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 StackToolbarMenu: React.FC<StackToolbarMenuProps> = ({ children, ...props }) => {\n  const placement = useToolbarPlacement();\n\n  const allowedChildren = useMemo(\n    () =>\n      placement === 'bottom'\n        ? [StackToolbarMenu, StackToolbarMenuAction, NativeToolbarMenu, NativeToolbarMenuAction]\n        : [StackToolbarMenu, StackToolbarMenuAction],\n    [placement]\n  );\n\n  const validChildren = useMemo(\n    () => filterAllowedChildrenElements(children, allowedChildren),\n    [children, allowedChildren]\n  );\n\n  if (process.env.NODE_ENV !== 'production') {\n    const allChildren = Children.toArray(children);\n    if (allChildren.length !== validChildren.length) {\n      throw new Error(\n        `Stack.Toolbar.Menu only accepts Stack.Toolbar.Menu and Stack.Toolbar.MenuAction as its children.`\n      );\n    }\n  }\n\n  if (placement === 'bottom') {\n    // TODO(@ubax): Handle image loading using useImage in a follow-up PR.\n    return <NativeToolbarMenu {...props} image={props.image} children={validChildren} />;\n  }\n\n  return <Menu {...props} children={validChildren} />;\n};\n\nexport function convertStackToolbarMenuPropsToRNHeaderItem(\n  props: StackToolbarMenuProps\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) =>\n      isChildOfType(child, StackToolbarMenuAction) || isChildOfType(child, StackToolbarMenu)\n  );\n  const item: NativeStackHeaderItemMenu = {\n    ...convertStackHeaderSharedPropsToRNSharedHeaderItem(rest),\n    type: 'menu',\n    menu: {\n      items: actions\n        .map((action) => {\n          if (isChildOfType(action, StackToolbarMenu)) {\n            return convertStackToolbarSubmenuMenuPropsToRNHeaderItem(action.props);\n          }\n          return convertStackToolbarMenuActionPropsToRNHeaderItem(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 convertStackToolbarSubmenuMenuPropsToRNHeaderItem(\n  props: StackToolbarMenuProps\n): NativeStackHeaderItemMenuSubmenu | undefined {\n  if (props.hidden) {\n    return undefined;\n  }\n  const sharedProps = convertStackHeaderSharedPropsToRNSharedHeaderItem(props);\n  const actions = Children.toArray(props.children).filter(\n    (child) =>\n      isChildOfType(child, StackToolbarMenuAction) || isChildOfType(child, StackToolbarMenu)\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, StackToolbarMenu)) {\n          return convertStackToolbarSubmenuMenuPropsToRNHeaderItem(action.props);\n        }\n        return convertStackToolbarMenuActionPropsToRNHeaderItem(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  // TODO: Add elementSize to react-native-screens\n\n  if (sharedProps.icon) {\n    // Only SF Symbols are supported in submenu icons\n    // TODO(@ubax): Add support for other images in react-native-screens\n    if (sharedProps.icon.type === 'sfSymbol') {\n      item.icon = sharedProps.icon;\n    } else {\n      console.warn(\n        'When Icon is used inside Stack.Toolbar.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 StackToolbarMenuActionProps {\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  // TODO(@ubax): Add useImage support in a follow-up PR.\n  /**\n   * Image to display for the menu action.\n   *\n   * > **Note**: This prop is only supported in `Stack.Toolbar.Bottom`.\n   */\n  image?: ImageRef;\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.Toolbar.Menu`.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Page() {\n *   return (\n *     <>\n *       <Stack.Toolbar placement=\"right\">\n *         <Stack.Toolbar.Menu icon=\"ellipsis.circle\">\n *           <Stack.Toolbar.MenuAction onPress={() => alert('Action pressed!')}>\n *             Action 1\n *           </Stack.Toolbar.MenuAction>\n *         </Stack.Toolbar.Menu>\n *       </Stack.Toolbar>\n *       <ScreenContent />\n *     </>\n *   );\n * }\n * ```\n *\n * @platform ios\n */\nexport const StackToolbarMenuAction: React.FC<StackToolbarMenuActionProps> = (props) => {\n  const placement = useToolbarPlacement();\n\n  if (placement === 'bottom') {\n    // TODO(@ubax): Handle image loading using useImage in a follow-up PR.\n    const icon = typeof props.icon === 'string' ? props.icon : undefined;\n    return <NativeToolbarMenuAction {...props} icon={icon} image={props.image} />;\n  }\n\n  return <MenuAction {...props} />;\n};\n\nexport function convertStackToolbarMenuActionPropsToRNHeaderItem(\n  props: StackToolbarMenuActionProps\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 submenu icons\n    // TODO(@ubax): Add support for other images in react-native-screens\n    if (sharedProps.icon.type === 'sfSymbol') {\n      item.icon = sharedProps.icon;\n    } else {\n      console.warn(\n        'When Icon is used inside Stack.Toolbar.MenuAction, 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/toolbar/StackToolbarSearchBarSlot.d.ts

@@ -0,0 +1,48 @@
+export interface StackToolbarSearchBarSlotProps {
+    /**
+     * Whether the search bar slot should be hidden.
+     *
+     * @default false
+     */
+    hidden?: boolean;
+    /**
+     * Whether to hide the shared background.
+     *
+     * @platform iOS 26+
+     */
+    hidesSharedBackground?: boolean;
+    /**
+     * Whether this search bar slot shares background with adjacent items.
+     *
+     * @platform iOS 26+
+     */
+    sharesBackground?: boolean;
+}
+/**
+ * A search bar slot for the bottom toolbar. This reserves space for the search bar
+ * in the toolbar and allows positioning it among other toolbar items.
+ *
+ * This component is only available in bottom placement (`<Stack.Toolbar>` or `<Stack.Toolbar placement="bottom">`).
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Toolbar>
+ *         <Stack.Toolbar.Button icon="folder" />
+ *         <Stack.Toolbar.SearchBarSlot />
+ *         <Stack.Toolbar.Button icon="ellipsis.circle" />
+ *       </Stack.Toolbar>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform iOS 26+
+ */
+export declare const StackToolbarSearchBarSlot: React.FC<StackToolbarSearchBarSlotProps>;
+//# sourceMappingURL=StackToolbarSearchBarSlot.d.ts.map

package/build/layouts/stack-utils/toolbar/StackToolbarSearchBarSlot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackToolbarSearchBarSlot.d.ts","sourceRoot":"","sources":["../../../../src/layouts/stack-utils/toolbar/StackToolbarSearchBarSlot.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,8BAA8B;IAC7C;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CAa9E,CAAC"}

package/build/layouts/stack-utils/toolbar/StackToolbarSearchBarSlot.js

@@ -0,0 +1,44 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackToolbarSearchBarSlot = void 0;
+const bottom_toolbar_native_elements_1 = require("./bottom-toolbar-native-elements");
+const context_1 = require("./context");
+/**
+ * A search bar slot for the bottom toolbar. This reserves space for the search bar
+ * in the toolbar and allows positioning it among other toolbar items.
+ *
+ * This component is only available in bottom placement (`<Stack.Toolbar>` or `<Stack.Toolbar placement="bottom">`).
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Toolbar>
+ *         <Stack.Toolbar.Button icon="folder" />
+ *         <Stack.Toolbar.SearchBarSlot />
+ *         <Stack.Toolbar.Button icon="ellipsis.circle" />
+ *       </Stack.Toolbar>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform iOS 26+
+ */
+const StackToolbarSearchBarSlot = (props) => {
+    const placement = (0, context_1.useToolbarPlacement)();
+    if (placement !== 'bottom') {
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn('Stack.Toolbar.SearchBarSlot is only available in Bottom placement. It will not render in Left or Right placement.');
+        }
+        return null;
+    }
+    return <bottom_toolbar_native_elements_1.NativeToolbarSearchBarSlot {...props}/>;
+};
+exports.StackToolbarSearchBarSlot = StackToolbarSearchBarSlot;
+//# sourceMappingURL=StackToolbarSearchBarSlot.js.map

package/build/layouts/stack-utils/toolbar/StackToolbarSearchBarSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackToolbarSearchBarSlot.js","sourceRoot":"","sources":["../../../../src/layouts/stack-utils/toolbar/StackToolbarSearchBarSlot.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AACb,qFAA8E;AAC9E,uCAAgD;AAuBhD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACI,MAAM,yBAAyB,GAA6C,CAAC,KAAK,EAAE,EAAE;IAC3F,MAAM,SAAS,GAAG,IAAA,6BAAmB,GAAE,CAAC;IAExC,IAAI,SAAS,KAAK,QAAQ,EAAE,CAAC;QAC3B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;YAC1C,OAAO,CAAC,IAAI,CACV,mHAAmH,CACpH,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CAAC,2DAA0B,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AACnD,CAAC,CAAC;AAbW,QAAA,yBAAyB,6BAapC","sourcesContent":["'use client';\nimport { NativeToolbarSearchBarSlot } from './bottom-toolbar-native-elements';\nimport { useToolbarPlacement } from './context';\n\nexport interface StackToolbarSearchBarSlotProps {\n  /**\n   * Whether the search bar slot should be hidden.\n   *\n   * @default false\n   */\n  hidden?: boolean;\n  /**\n   * Whether to hide the shared background.\n   *\n   * @platform iOS 26+\n   */\n  hidesSharedBackground?: boolean;\n  /**\n   * Whether this search bar slot shares background with adjacent items.\n   *\n   * @platform iOS 26+\n   */\n  sharesBackground?: boolean;\n}\n\n/**\n * A search bar slot for the bottom toolbar. This reserves space for the search bar\n * in the toolbar and allows positioning it among other toolbar items.\n *\n * This component is only available in bottom placement (`<Stack.Toolbar>` or `<Stack.Toolbar placement=\"bottom\">`).\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Page() {\n *   return (\n *     <>\n *       <Stack.Toolbar>\n *         <Stack.Toolbar.Button icon=\"folder\" />\n *         <Stack.Toolbar.SearchBarSlot />\n *         <Stack.Toolbar.Button icon=\"ellipsis.circle\" />\n *       </Stack.Toolbar>\n *       <ScreenContent />\n *     </>\n *   );\n * }\n * ```\n *\n * @platform iOS 26+\n */\nexport const StackToolbarSearchBarSlot: React.FC<StackToolbarSearchBarSlotProps> = (props) => {\n  const placement = useToolbarPlacement();\n\n  if (placement !== 'bottom') {\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn(\n        'Stack.Toolbar.SearchBarSlot is only available in Bottom placement. It will not render in Left or Right placement.'\n      );\n    }\n    return null;\n  }\n\n  return <NativeToolbarSearchBarSlot {...props} />;\n};\n"]}

package/build/layouts/stack-utils/toolbar/StackToolbarSpacer.d.ts

@@ -0,0 +1,80 @@
+import type { NativeStackHeaderItemSpacing } from '@react-navigation/native-stack';
+export interface StackToolbarSpacerProps {
+    /**
+     * Whether the spacer should be hidden.
+     *
+     * @default false
+     */
+    hidden?: boolean;
+    /**
+     * The width of the spacing element.
+     *
+     * In Left/Right placements, width is required.
+     * In Bottom placement, if width is not provided, the spacer will be flexible
+     * and expand to fill available space.
+     */
+    width?: number;
+    /**
+     * Whether to hide the shared background.
+     *
+     * Only available in bottom placement.
+     *
+     * @platform iOS 26+
+     */
+    hidesSharedBackground?: boolean;
+    /**
+     * Whether this spacer shares background with adjacent items.
+     *
+     * Only available in bottom placement.
+     *
+     * @platform iOS 26+
+     */
+    sharesBackground?: boolean;
+}
+/**
+ * A spacing helper used inside `Stack.Toolbar` to create empty space between toolbar items.
+ *
+ * In left/right placements, width is required.
+ * In bottom placement, if width is not provided, creates a flexible spacer that expands to fill space.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Toolbar placement="left">
+ *         <Stack.Toolbar.Button icon="arrow.left" />
+ *         <Stack.Toolbar.Spacer width={8} />
+ *         <Stack.Toolbar.Button icon="arrow.right" />
+ *       </Stack.Toolbar>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Toolbar>
+ *         <Stack.Toolbar.Spacer />
+ *         <Stack.Toolbar.Button icon="search" />
+ *         <Stack.Toolbar.Spacer />
+ *       </Stack.Toolbar>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform ios
+ */
+export declare const StackToolbarSpacer: React.FC<StackToolbarSpacerProps>;
+export declare function convertStackToolbarSpacerPropsToRNHeaderItem(props: StackToolbarSpacerProps): NativeStackHeaderItemSpacing | undefined;
+//# sourceMappingURL=StackToolbarSpacer.d.ts.map

package/build/layouts/stack-utils/toolbar/StackToolbarSpacer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackToolbarSpacer.d.ts","sourceRoot":"","sources":["../../../../src/layouts/stack-utils/toolbar/StackToolbarSpacer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAKnF,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQhE,CAAC;AAEF,wBAAgB,4CAA4C,CAC1D,KAAK,EAAE,uBAAuB,GAC7B,4BAA4B,GAAG,SAAS,CAqB1C"}

package/build/layouts/stack-utils/toolbar/StackToolbarSpacer.js

@@ -0,0 +1,77 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackToolbarSpacer = void 0;
+exports.convertStackToolbarSpacerPropsToRNHeaderItem = convertStackToolbarSpacerPropsToRNHeaderItem;
+const bottom_toolbar_native_elements_1 = require("./bottom-toolbar-native-elements");
+const context_1 = require("./context");
+/**
+ * A spacing helper used inside `Stack.Toolbar` to create empty space between toolbar items.
+ *
+ * In left/right placements, width is required.
+ * In bottom placement, if width is not provided, creates a flexible spacer that expands to fill space.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Toolbar placement="left">
+ *         <Stack.Toolbar.Button icon="arrow.left" />
+ *         <Stack.Toolbar.Spacer width={8} />
+ *         <Stack.Toolbar.Button icon="arrow.right" />
+ *       </Stack.Toolbar>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Toolbar>
+ *         <Stack.Toolbar.Spacer />
+ *         <Stack.Toolbar.Button icon="search" />
+ *         <Stack.Toolbar.Spacer />
+ *       </Stack.Toolbar>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform ios
+ */
+const StackToolbarSpacer = (props) => {
+    const placement = (0, context_1.useToolbarPlacement)();
+    if (placement === 'bottom') {
+        return <bottom_toolbar_native_elements_1.NativeToolbarSpacer {...props}/>;
+    }
+    return null;
+};
+exports.StackToolbarSpacer = StackToolbarSpacer;
+function convertStackToolbarSpacerPropsToRNHeaderItem(props) {
+    const { hidden, width } = props;
+    if (hidden) {
+        return undefined;
+    }
+    // Warn if using flexible spacer in Left/Right placement
+    if (width === undefined) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn('Stack.Toolbar.Spacer requires `width` when used in Left or Right placement. Flexible spacers are only supported in Bottom placement.');
+        }
+        return undefined;
+    }
+    return {
+        type: 'spacing',
+        spacing: width ?? 0,
+    };
+}
+//# sourceMappingURL=StackToolbarSpacer.js.map

package/build/layouts/stack-utils/toolbar/StackToolbarSpacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackToolbarSpacer.js","sourceRoot":"","sources":["../../../../src/layouts/stack-utils/toolbar/StackToolbarSpacer.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AA+Fb,oGAuBC;AAnHD,qFAAuE;AACvE,uCAAgD;AAqChD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACI,MAAM,kBAAkB,GAAsC,CAAC,KAAK,EAAE,EAAE;IAC7E,MAAM,SAAS,GAAG,IAAA,6BAAmB,GAAE,CAAC;IAExC,IAAI,SAAS,KAAK,QAAQ,EAAE,CAAC;QAC3B,OAAO,CAAC,oDAAmB,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;IAC5C,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AARW,QAAA,kBAAkB,sBAQ7B;AAEF,SAAgB,4CAA4C,CAC1D,KAA8B;IAE9B,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAEhC,IAAI,MAAM,EAAE,CAAC;QACX,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,wDAAwD;IACxD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;YAC1C,OAAO,CAAC,IAAI,CACV,sIAAsI,CACvI,CAAC;QACJ,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO;QACL,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,KAAK,IAAI,CAAC;KACpB,CAAC;AACJ,CAAC","sourcesContent":["'use client';\nimport type { NativeStackHeaderItemSpacing } from '@react-navigation/native-stack';\n\nimport { NativeToolbarSpacer } from './bottom-toolbar-native-elements';\nimport { useToolbarPlacement } from './context';\n\nexport interface StackToolbarSpacerProps {\n  /**\n   * Whether the spacer should be hidden.\n   *\n   * @default false\n   */\n  hidden?: boolean;\n  // TODO(@ubax): implement fluid spacing in react-native-screens\n  /**\n   * The width of the spacing element.\n   *\n   * In Left/Right placements, width is required.\n   * In Bottom placement, if width is not provided, the spacer will be flexible\n   * and expand to fill available space.\n   */\n  width?: number;\n  // TODO(@ubax): implement missing props in react-native-screens\n  /**\n   * Whether to hide the shared background.\n   *\n   * Only available in bottom placement.\n   *\n   * @platform iOS 26+\n   */\n  hidesSharedBackground?: boolean;\n  /**\n   * Whether this spacer shares background with adjacent items.\n   *\n   * Only available in bottom placement.\n   *\n   * @platform iOS 26+\n   */\n  sharesBackground?: boolean;\n}\n\n/**\n * A spacing helper used inside `Stack.Toolbar` to create empty space between toolbar items.\n *\n * In left/right placements, width is required.\n * In bottom placement, if width is not provided, creates a flexible spacer that expands to fill space.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Page() {\n *   return (\n *     <>\n *       <Stack.Toolbar placement=\"left\">\n *         <Stack.Toolbar.Button icon=\"arrow.left\" />\n *         <Stack.Toolbar.Spacer width={8} />\n *         <Stack.Toolbar.Button icon=\"arrow.right\" />\n *       </Stack.Toolbar>\n *       <ScreenContent />\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Page() {\n *   return (\n *     <>\n *       <Stack.Toolbar>\n *         <Stack.Toolbar.Spacer />\n *         <Stack.Toolbar.Button icon=\"search\" />\n *         <Stack.Toolbar.Spacer />\n *       </Stack.Toolbar>\n *       <ScreenContent />\n *     </>\n *   );\n * }\n * ```\n *\n * @platform ios\n */\nexport const StackToolbarSpacer: React.FC<StackToolbarSpacerProps> = (props) => {\n  const placement = useToolbarPlacement();\n\n  if (placement === 'bottom') {\n    return <NativeToolbarSpacer {...props} />;\n  }\n\n  return null;\n};\n\nexport function convertStackToolbarSpacerPropsToRNHeaderItem(\n  props: StackToolbarSpacerProps\n): NativeStackHeaderItemSpacing | undefined {\n  const { hidden, width } = props;\n\n  if (hidden) {\n    return undefined;\n  }\n\n  // Warn if using flexible spacer in Left/Right placement\n  if (width === undefined) {\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn(\n        'Stack.Toolbar.Spacer requires `width` when used in Left or Right placement. Flexible spacers are only supported in Bottom placement.'\n      );\n    }\n    return undefined;\n  }\n\n  return {\n    type: 'spacing',\n    spacing: width ?? 0,\n  };\n}\n"]}

package/build/layouts/stack-utils/{StackHeaderView.d.ts → toolbar/StackToolbarView.d.ts}

@@ -1,5 +1,5 @@
 import type { NativeStackHeaderItemCustom } from '@react-navigation/native-stack';
-export interface StackHeaderViewProps {
+export interface StackToolbarViewProps {
     /**
      * Can be any React node.
      */
@@ -18,34 +18,38 @@ export interface StackHeaderViewProps {
      * @platform iOS 26+
      */
     hidesSharedBackground?: boolean;
+    /**
+     * Whether to separate the background of this item from other items.
+     *
+     * Only available in bottom placement.
+     *
+     * @default false
+     */
+    separateBackground?: boolean;
 }
 /**
- * A wrapper to render custom content in the header.
+ * A wrapper to render custom content in the toolbar.
  *
- * Use as `Stack.Header.Item` to render a custom React element into the header
+ * Use inside `Stack.Toolbar` to render a custom React element.
  *
  * @example
  * ```tsx
  * import { Stack } from 'expo-router';
  * import { Text } from 'react-native';
  *
- * function CustomHeaderElement() {
+ * function CustomElement() {
  *   return <Text>Custom Element</Text>;
  * }
  *
- * function Screen() {
+ * export default function Page() {
  *   return (
  *     <>
+ *       <Stack.Toolbar>
+ *         <Stack.Toolbar.View>
+ *           <CustomElement />
+ *         </Stack.Toolbar.View>
+ *       </Stack.Toolbar>
  *       <ScreenContent />
- *       <Stack.Screen>
- *         <Stack.Header>
- *           <Stack.Header.Left>
- *             <Stack.Header.Item>
- *               <CustomHeaderElement />
- *             </Stack.Header.Item>
- *           </Stack.Header.Left>
- *         </Stack.Header>
- *       </Stack.Screen>
  *     </>
  *   );
  * }
@@ -53,6 +57,6 @@ export interface StackHeaderViewProps {
  *
  * @platform ios
  */
-export declare const StackHeaderView: React.FC<StackHeaderViewProps>;
-export declare function convertStackHeaderViewPropsToRNHeaderItem(props: StackHeaderViewProps): NativeStackHeaderItemCustom | undefined;
-//# sourceMappingURL=StackHeaderView.d.ts.map
+export declare const StackToolbarView: React.FC<StackToolbarViewProps>;
+export declare function convertStackToolbarViewPropsToRNHeaderItem(props: StackToolbarViewProps): NativeStackHeaderItemCustom | undefined;
+//# sourceMappingURL=StackToolbarView.d.ts.map

package/build/layouts/stack-utils/toolbar/StackToolbarView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackToolbarView.d.ts","sourceRoot":"","sources":["../../../../src/layouts/stack-utils/toolbar/StackToolbarView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAKlF,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,2BAA2B,CAAC,SAAS,CAAC,CAAC;IAClD;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;OAMG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAQ5D,CAAC;AAEF,wBAAgB,0CAA0C,CACxD,KAAK,EAAE,qBAAqB,GAC3B,2BAA2B,GAAG,SAAS,CAgBzC"}

package/build/layouts/stack-utils/toolbar/StackToolbarView.js

@@ -0,0 +1,61 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackToolbarView = void 0;
+exports.convertStackToolbarViewPropsToRNHeaderItem = convertStackToolbarViewPropsToRNHeaderItem;
+const bottom_toolbar_native_elements_1 = require("./bottom-toolbar-native-elements");
+const context_1 = require("./context");
+/**
+ * A wrapper to render custom content in the toolbar.
+ *
+ * Use inside `Stack.Toolbar` to render a custom React element.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ * import { Text } from 'react-native';
+ *
+ * function CustomElement() {
+ *   return <Text>Custom Element</Text>;
+ * }
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Toolbar>
+ *         <Stack.Toolbar.View>
+ *           <CustomElement />
+ *         </Stack.Toolbar.View>
+ *       </Stack.Toolbar>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform ios
+ */
+const StackToolbarView = (props) => {
+    const placement = (0, context_1.useToolbarPlacement)();
+    if (placement === 'bottom') {
+        return <bottom_toolbar_native_elements_1.NativeToolbarView {...props}>{props.children}</bottom_toolbar_native_elements_1.NativeToolbarView>;
+    }
+    return null;
+};
+exports.StackToolbarView = StackToolbarView;
+function convertStackToolbarViewPropsToRNHeaderItem(props) {
+    if (props.hidden) {
+        return undefined;
+    }
+    const { children, hidesSharedBackground } = props;
+    if (!children) {
+        console.warn('Stack.Toolbar.View requires a child element to render custom content in the toolbar.');
+    }
+    const element = children ? children : <></>;
+    return {
+        type: 'custom',
+        element,
+        hidesSharedBackground,
+    };
+}
+//# sourceMappingURL=StackToolbarView.js.map

package/build/layouts/stack-utils/toolbar/StackToolbarView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackToolbarView.js","sourceRoot":"","sources":["../../../../src/layouts/stack-utils/toolbar/StackToolbarView.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AA4Eb,gGAkBC;AA3FD,qFAAqE;AACrE,uCAAgD;AAgChD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACI,MAAM,gBAAgB,GAAoC,CAAC,KAAK,EAAE,EAAE;IACzE,MAAM,SAAS,GAAG,IAAA,6BAAmB,GAAE,CAAC;IAExC,IAAI,SAAS,KAAK,QAAQ,EAAE,CAAC;QAC3B,OAAO,CAAC,kDAAiB,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,kDAAiB,CAAC,CAAC;IAC5E,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AARW,QAAA,gBAAgB,oBAQ3B;AAEF,SAAgB,0CAA0C,CACxD,KAA4B;IAE5B,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACjB,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,MAAM,EAAE,QAAQ,EAAE,qBAAqB,EAAE,GAAG,KAAK,CAAC;IAClD,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,CAAC,IAAI,CACV,sFAAsF,CACvF,CAAC;IACJ,CAAC;IACD,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC;IAC5C,OAAO;QACL,IAAI,EAAE,QAAQ;QACd,OAAO;QACP,qBAAqB;KACtB,CAAC;AACJ,CAAC","sourcesContent":["'use client';\nimport type { NativeStackHeaderItemCustom } from '@react-navigation/native-stack';\n\nimport { NativeToolbarView } from './bottom-toolbar-native-elements';\nimport { useToolbarPlacement } from './context';\n\nexport interface StackToolbarViewProps {\n  /**\n   * Can be any React node.\n   */\n  children?: NativeStackHeaderItemCustom['element'];\n  /**\n   * Whether the view should be hidden.\n   *\n   * @default false\n   */\n  hidden?: 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  // TODO(@ubax): implement missing props in react-native-screens\n  /**\n   * Whether to separate the background of this item from other items.\n   *\n   * Only available in bottom placement.\n   *\n   * @default false\n   */\n  separateBackground?: boolean;\n}\n\n/**\n * A wrapper to render custom content in the toolbar.\n *\n * Use inside `Stack.Toolbar` to render a custom React element.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n * import { Text } from 'react-native';\n *\n * function CustomElement() {\n *   return <Text>Custom Element</Text>;\n * }\n *\n * export default function Page() {\n *   return (\n *     <>\n *       <Stack.Toolbar>\n *         <Stack.Toolbar.View>\n *           <CustomElement />\n *         </Stack.Toolbar.View>\n *       </Stack.Toolbar>\n *       <ScreenContent />\n *     </>\n *   );\n * }\n * ```\n *\n * @platform ios\n */\nexport const StackToolbarView: React.FC<StackToolbarViewProps> = (props) => {\n  const placement = useToolbarPlacement();\n\n  if (placement === 'bottom') {\n    return <NativeToolbarView {...props}>{props.children}</NativeToolbarView>;\n  }\n\n  return null;\n};\n\nexport function convertStackToolbarViewPropsToRNHeaderItem(\n  props: StackToolbarViewProps\n): NativeStackHeaderItemCustom | undefined {\n  if (props.hidden) {\n    return undefined;\n  }\n  const { children, hidesSharedBackground } = props;\n  if (!children) {\n    console.warn(\n      'Stack.Toolbar.View requires a child element to render custom content in the toolbar.'\n    );\n  }\n  const element = children ? children : <></>;\n  return {\n    type: 'custom',\n    element,\n    hidesSharedBackground,\n  };\n}\n"]}