npm - expo-router - Versions diffs - 7.0.0-canary-20251230-fc48ddc → 7.0.0-canary-20260113-0ce2b9c - Mend

expo-router 7.0.0-canary-20251230-fc48ddc → 7.0.0-canary-20260113-0ce2b9c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (151) hide show

package/build/toolbar/elements.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarHost = exports.ToolbarView = exports.ToolbarSpacer = exports.ToolbarButton = exports.ToolbarMenuAction = exports.ToolbarMenu = void 0;
+exports.ToolbarHost = exports.ToolbarView = exports.ToolbarSearchBarPreferredSlot = exports.ToolbarSpacer = exports.ToolbarButton = exports.ToolbarMenuAction = exports.ToolbarMenu = void 0;
 const react_1 = require("react");
 const react_native_1 = require("react-native");
 const native_1 = require("./native");
@@ -24,7 +24,7 @@ const children_1 = require("../utils/children");
  *
  * @platform ios
  */
-const ToolbarMenu = ({ accessibilityHint, accessibilityLabel, separateBackground, hidesSharedBackground, palette, inline, hidden, subtitle, title, destructive, children, icon, tintColor, variant, style, }) => {
+const ToolbarMenu = ({ accessibilityHint, accessibilityLabel, separateBackground, hidesSharedBackground, palette, inline, hidden, subtitle, title, destructive, children, icon, tintColor, variant, style, elementSize, }) => {
     const identifier = (0, react_1.useId)();
     const validChildren = react_1.Children.toArray(children).filter((child) => (0, react_1.isValidElement)(child) && (child.type === exports.ToolbarMenuAction || child.type === exports.ToolbarMenu));
     const label = (0, children_1.getFirstChildOfType)(children, primitives_1.Label);
@@ -34,7 +34,7 @@ const ToolbarMenu = ({ accessibilityHint, accessibilityLabel, separateBackground
         (iconComponent?.props && 'sf' in iconComponent.props ? iconComponent.props.sf : undefined);
     const sf = typeof computedIcon === 'string' ? computedIcon : undefined;
     const titleStyle = react_native_1.StyleSheet.flatten(style);
-    return (<native_2.NativeLinkPreviewAction sharesBackground={!separateBackground} hidesSharedBackground={hidesSharedBackground} hidden={hidden} icon={sf} destructive={destructive} subtitle={subtitle} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} displayAsPalette={palette} displayInline={inline} tintColor={tintColor} titleStyle={titleStyle} barButtonItemStyle={variant === 'done' ? 'prominent' : variant} title={computedTitle} onSelected={() => { }} children={validChildren} identifier={identifier}/>);
+    return (<native_2.NativeLinkPreviewAction sharesBackground={!separateBackground} hidesSharedBackground={hidesSharedBackground} hidden={hidden} icon={sf} destructive={destructive} subtitle={subtitle} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} displayAsPalette={palette} displayInline={inline} preferredElementSize={elementSize} tintColor={tintColor} titleStyle={titleStyle} barButtonItemStyle={variant === 'done' ? 'prominent' : variant} title={computedTitle} onSelected={() => { }} children={validChildren} identifier={identifier}/>);
 };
 exports.ToolbarMenu = ToolbarMenu;
 /**
@@ -83,7 +83,7 @@ const ToolbarButton = (props) => {
     const icon = props.icon ??
         (iconComponent?.props && 'sf' in iconComponent.props ? iconComponent.props.sf : undefined);
     const sf = typeof icon === 'string' ? icon : undefined;
-    return (<native_1.RouterToolbarItem accessibilityHint={props.accessibilityHint} accessibilityLabel={props.accessibilityLabel} barButtonItemStyle={props.variant === 'done' ? 'prominent' : props.variant} disabled={props.disabled} hidden={props.hidden} hidesSharedBackground={props.hidesSharedBackground} identifier={id} onSelected={props.onPress} possibleTitles={props.possibleTitles} selected={props.selected} sharesBackground={!props.separateBackground} systemImageName={sf} title={label} tintColor={props.tintColor} titleStyle={react_native_1.StyleSheet.flatten(props.style)}/>);
+    return (<native_1.RouterToolbarItem accessibilityHint={props.accessibilityHint} accessibilityLabel={props.accessibilityLabel} barButtonItemStyle={props.variant === 'done' ? 'prominent' : props.variant} disabled={props.disabled} hidden={props.hidden} hidesSharedBackground={props.hidesSharedBackground} identifier={id} image={props.image} onSelected={props.onPress} possibleTitles={props.possibleTitles} selected={props.selected} sharesBackground={!props.separateBackground} systemImageName={sf} title={label} tintColor={props.tintColor} titleStyle={react_native_1.StyleSheet.flatten(props.style)}/>);
 };
 exports.ToolbarButton = ToolbarButton;
 /**
@@ -110,6 +110,40 @@ const ToolbarSpacer = (props) => {
     return (<native_1.RouterToolbarItem hidesSharedBackground={props.hidesSharedBackground} hidden={props.hidden} identifier={id} sharesBackground={props.sharesBackground} type={props.width ? 'fixedSpacer' : 'fluidSpacer'} width={props.width}/>);
 };
 exports.ToolbarSpacer = ToolbarSpacer;
+/**
+ * Declares the position of a search bar within the toolbar.
+ * It should only be used as a child of `Toolbar`.
+ *
+ * > **Note**: On iOS 26+, this component specifies where in the toolbar the search bar
+ * > (configured via `Stack.SearchBar`) should appear. On iOS 18 and earlier, the search bar
+ * > will be shown in the header instead.
+ *
+ * > **Important**: You must use `Stack.SearchBar` to configure and display the actual
+ * > search bar. This component only declares its position in the toolbar.
+ *
+ * @example
+ * ```tsx
+ * <Stack.SearchBar placeholder="Search..." />
+ * <Toolbar>
+ *   <Toolbar.SearchBarPreferredSlot />
+ *   <Toolbar.Spacer />
+ *   <Toolbar.Button icon="mic" />
+ * </Toolbar>
+ * ```
+ *
+ * @platform ios 26+
+ */
+const ToolbarSearchBarPreferredSlot = ({ hidesSharedBackground, hidden, sharesBackground, }) => {
+    const id = (0, react_1.useId)();
+    if (process.env.EXPO_OS !== 'ios' || parseInt(String(react_native_1.Platform.Version).split('.')[0], 10) < 26) {
+        return null;
+    }
+    if (hidden) {
+        return null;
+    }
+    return (<native_1.RouterToolbarItem hidesSharedBackground={hidesSharedBackground} identifier={id} sharesBackground={sharesBackground} type="searchBar"/>);
+};
+exports.ToolbarSearchBarPreferredSlot = ToolbarSearchBarPreferredSlot;
 /**
  * A custom view component for the toolbar that can contain any React elements.
  * Useful for embedding custom components.
@@ -127,8 +161,8 @@ exports.ToolbarSpacer = ToolbarSpacer;
  *       placeholderTextColor={Color.ios.placeholderText}
  *     />
  *   </Toolbar.View>
- *   <Toolbar.View separateBackground style={{ width: 32, height: 32 }}>
- *     <Pressable onPress={handlePress}>
+ *   <Toolbar.View separateBackground>
+ *     <Pressable style={{ width: 32, height: 32 }} onPress={handlePress}>
  *       <SymbolView name="plus" size={22} />
  *     </Pressable>
  *   </Toolbar.View>

package/build/toolbar/elements.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"elements.js","sourceRoot":"","sources":["../../src/toolbar/elements.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Children, isValidElement, useId, type ReactNode } from 'react';\nimport { StyleSheet, type ColorValue, type StyleProp } from 'react-native';\nimport type { SFSymbol } from 'sf-symbols-typescript';\n\nimport { RouterToolbarHost, RouterToolbarItem } from './native';\nimport { InternalLinkPreviewContext } from '../link/InternalLinkPreviewContext';\nimport { LinkMenuAction, type LinkMenuActionProps } from '../link/elements';\nimport { NativeLinkPreviewAction } from '../link/preview/native';\nimport { Icon, Label } from '../primitives';\nimport { getFirstChildOfType } from '../utils/children';\nimport type { BasicTextStyle } from '../utils/font';\n\nexport interface ToolbarMenuProps {\n accessibilityLabel?: string;\n accessibilityHint?: string;\n children?: React.ReactNode;\n /*\n An optional subtitle for the menu. Does not appear on `inline` menus.\n \n @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/subtitle) for more information.\n /\n subtitle?: string;\n /\n If `true`, the menu item will be displayed as destructive.\n \n @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/destructive) for more information.\n /\n destructive?: boolean;\n disabled?: boolean;\n hidden?: boolean;\n /\n Whether to hide the shared background when `sharesBackground` is enabled.\n \n Only available for root level menus.\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 Optional SF Symbol displayed alongside the menu item.\n /\n icon?: SFSymbol;\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 > Note: Text buttons cannot share the background.\n \n This prop reverses the native behavior of `sharesBackground`.\n \n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.\n \n @default false\n \n @platform iOS 26+\n /\n separateBackground?: boolean;\n /\n Style for the label of the header item.\n /\n style?: StyleProp<BasicTextStyle>;\n /\n The title of the menu item\n /\n title?: string;\n\n /\n Tint color for the menu icon and text.\n /\n tintColor?: ColorValue;\n\n /\n Controls the visual style of the menu when represented as a bar button.\n \n @default 'plain'\n /\n variant?: 'plain' \| 'done' \| 'prominent';\n}\n\n/\n Adds a context menu for to a toolbar.\n \n @example\n * ```tsx\n * <Toolbar>\n * <Toolbar.Menu title=\"Options\">\n * <Toolbar.MenuAction title=\"Action 1\" onPress={() => {}} />\n * <Toolbar.MenuAction title=\"Action 2\" onPress={() => {}} />\n * </Toolbar.Menu>\n * </Toolbar>\n * ```\n \n @platform ios\n /\nexport const ToolbarMenu: React.FC<ToolbarMenuProps> = ({\n accessibilityHint,\n accessibilityLabel,\n separateBackground,\n hidesSharedBackground,\n palette,\n inline,\n hidden,\n subtitle,\n title,\n destructive,\n children,\n icon,\n tintColor,\n variant,\n style,\n}) => {\n const identifier = useId();\n const validChildren = Children.toArray(children).filter(\n (child) =>\n isValidElement(child) && (child.type === ToolbarMenuAction \|\| child.type === ToolbarMenu)\n );\n const label = getFirstChildOfType(children, Label);\n const iconComponent = getFirstChildOfType(children, Icon);\n\n const computedTitle = title ?? label?.props.children ?? '';\n const computedIcon =\n icon ??\n (iconComponent?.props && 'sf' in iconComponent.props ? iconComponent.props.sf : undefined);\n const sf = typeof computedIcon === 'string' ? computedIcon : undefined;\n const titleStyle = StyleSheet.flatten(style);\n return (\n <NativeLinkPreviewAction\n sharesBackground={!separateBackground}\n hidesSharedBackground={hidesSharedBackground}\n hidden={hidden}\n icon={sf}\n destructive={destructive}\n subtitle={subtitle}\n accessibilityLabel={accessibilityLabel}\n accessibilityHint={accessibilityHint}\n displayAsPalette={palette}\n displayInline={inline}\n tintColor={tintColor}\n titleStyle={titleStyle}\n barButtonItemStyle={variant === 'done' ? 'prominent' : variant}\n title={computedTitle}\n onSelected={() => {}}\n children={validChildren}\n identifier={identifier}\n />\n );\n};\n\nexport type ToolbarMenuActionProps = LinkMenuActionProps;\n\n/\n A single action item within a toolbar menu.\n \n For available props, see [`LinkMenuActionProps`](./router/#linkmenuactionprops).\n \n @example\n * ```tsx\n * <Toolbar>\n * <Toolbar.Menu title=\"Options\">\n * <Toolbar.MenuAction title=\"Action 1\" onPress={() => {}} />\n * <Toolbar.MenuAction title=\"Action 2\" onPress={() => {}} />\n * </Toolbar.Menu>\n * </Toolbar>\n * ```\n \n @platform ios\n /\nexport const ToolbarMenuAction = LinkMenuAction;\n\nexport interface ToolbarButtonProps {\n accessibilityLabel?: string;\n accessibilityHint?: string;\n /\n The text label for the button.\n \n > Note: When icon is used, the label will not be shown and will be used for accessibility purposes only.\n \n @example\n * ```tsx\n * import { Toolbar } from 'expo-router/unstable-toolbar';\n \n ...\n * <Toolbar.Button>This is button label</Toolbar.Button>\n * ```\n /\n children?: ReactNode;\n disabled?: boolean;\n\n /\n Whether the button should be hidden.\n \n @default false\n /\n hidden?: boolean;\n\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 // TODO: support ImageSourcePropType icons in addition to SFSymbols\n /\n The name of the SF Symbol to display as the button icon.\n * For a list of available symbols, see [SF Symbols](https://developer.apple.com/sf-symbols/).\n /\n icon?: SFSymbol;\n\n /\n Callback function when the button is pressed.\n /\n onPress?: () => void;\n\n /\n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/possibletitles) for more information.\n /\n possibleTitles?: string[];\n\n /\n Whether the button is in a selected state\n \n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/isselected) for more information.\n /\n selected?: boolean;\n\n /\n Whether to separate the background of this item from other header items.\n \n > Note: Text buttons cannot share the background.\n \n This prop reverses the native behavior of `sharesBackground`.\n \n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.\n \n @default false\n \n @platform iOS 26+\n /\n separateBackground?: boolean;\n\n /\n Style for the label of the header item.\n /\n style?: StyleProp<BasicTextStyle>;\n\n /\n Tint color for the button icon and text.\n /\n tintColor?: ColorValue;\n\n /\n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/style-swift.enum) for more information.\n \n @default 'plain'\n /\n variant?: 'plain' \| 'done' \| 'prominent';\n}\n\n// As noted in https://sebvidal.com/blog/whats-new-in-uikit-26/?utm_source=chatgpt.com#:~:text=It%27s%20worth%20noting%20that%2C%20at%20the%20time%20of%20writing%2C%20bar%20button%20badges%20are%20only%20supported%20in%20navigation%20bars%20%2D%20not%20tool%20bars.\n// currently badges are not supported in toolbars, and only in navigation bars.\n// Therefore, there is no badge support in ToolbarButton\n/\n A button component for use in the toolbar.\n * It should only be used as a child of `Toolbar`.\n \n @example\n * ```tsx\n * <Toolbar>\n * <Toolbar.Button icon=\"magnifyingglass\" tintColor={Color.ios.placeholderText} />\n * <Toolbar.Button>Text Button</Toolbar.Button>\n * <Toolbar.Button hidden={!isSearchFocused} icon=\"xmark\" onPress={handleClear} />\n * </Toolbar>\n * ```\n \n @platform ios\n /\nexport const ToolbarButton = (props: ToolbarButtonProps) => {\n const id = useId();\n const areChildrenString = typeof props.children === 'string';\n const label = areChildrenString\n ? (props.children as string)\n : getFirstChildOfType(props.children, Label)?.props.children;\n const iconComponent =\n !props.icon && !areChildrenString ? getFirstChildOfType(props.children, Icon) : undefined;\n const icon =\n props.icon ??\n (iconComponent?.props && 'sf' in iconComponent.props ? iconComponent.props.sf : undefined);\n const sf = typeof icon === 'string' ? icon : undefined;\n return (\n <RouterToolbarItem\n accessibilityHint={props.accessibilityHint}\n accessibilityLabel={props.accessibilityLabel}\n barButtonItemStyle={props.variant === 'done' ? 'prominent' : props.variant}\n disabled={props.disabled}\n hidden={props.hidden}\n hidesSharedBackground={props.hidesSharedBackground}\n identifier={id}\n onSelected={props.onPress}\n possibleTitles={props.possibleTitles}\n selected={props.selected}\n sharesBackground={!props.separateBackground}\n systemImageName={sf}\n title={label}\n tintColor={props.tintColor}\n titleStyle={StyleSheet.flatten(props.style)}\n />\n );\n};\n\nexport type ToolbarSpacerProps = {\n /\n Whether to hide the shared background when `sharesBackground` is enabled.\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 spacer should be hidden.\n \n @default false\n /\n hidden?: boolean;\n /\n Whether the spacer shares the background with adjacent toolbar items.\n \n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.\n \n @platform iOS 26+\n * @default false\n /\n sharesBackground?: boolean;\n /\n By default, the spacer is flexible and expands to fill available space.\n * If a width is provided, it creates a [fixed-width spacer](https://developer.apple.com/documentation/uikit/uibarbuttonitem/fixedspace(_:)).\n /\n width?: number;\n};\n\n/\n A spacer component for the toolbar.\n * Without a width, it creates a flexible spacer that expands to fill available space.\n * With a width, it creates a fixed-width spacer.\n * It should only be used as a child of `Toolbar`.\n \n @example\n * ```tsx\n * <Toolbar>\n * <Toolbar.Spacer />\n * <Toolbar.Button icon=\"magnifyingglass\" />\n * <Toolbar.Spacer width={20} />\n * <Toolbar.Button icon=\"mic\" />\n * <Toolbar.Spacer />\n * </Toolbar>\n * ```\n \n @platform ios\n /\nexport const ToolbarSpacer = (props: ToolbarSpacerProps) => {\n const id = useId();\n return (\n <RouterToolbarItem\n hidesSharedBackground={props.hidesSharedBackground}\n hidden={props.hidden}\n identifier={id}\n sharesBackground={props.sharesBackground}\n type={props.width ? 'fixedSpacer' : 'fluidSpacer'}\n width={props.width}\n />\n );\n};\n\n/\n Props for the ToolbarView component.\n \n @platform ios\n /\nexport interface ToolbarViewProps {\n /\n React elements to render inside the toolbar view.\n /\n children: React.ReactNode;\n /\n Whether the view should be hidden.\n \n @default false\n /\n hidden?: boolean;\n /\n Whether to hide the shared background when `sharesBackground` is enabled.\n \n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground) for more information.\n \n @platform iOS 18+\n /\n hidesSharedBackground?: boolean;\n /\n Whether to separate the background of this item from other header items.\n \n This prop reverses the native behavior of `sharesBackground`.\n \n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.\n \n @default false\n \n @platform iOS 26+\n /\n separateBackground?: boolean;\n}\n\n/\n A custom view component for the toolbar that can contain any React elements.\n * Useful for embedding custom components.\n * It should only be used as a child of `Toolbar`.\n \n The items within the view will be absolutely positioned, so flexbox styles will not work as expected.\n \n @example\n * ```tsx\n * <Toolbar>\n * <Toolbar.Spacer />\n * <Toolbar.View>\n * <TextInput\n * placeholder=\"Search\"\n * placeholderTextColor={Color.ios.placeholderText}\n * />\n * </Toolbar.View>\n * <Toolbar.View separateBackground style={{ width: 32, height: 32 }}>\n * <Pressable onPress={handlePress}>\n * <SymbolView name=\"plus\" size={22} />\n * </Pressable>\n * </Toolbar.View>\n * </Toolbar>\n * ```\n \n @platform ios\n */\nexport const ToolbarView = ({\n children,\n hidden,\n hidesSharedBackground,\n separateBackground,\n}: ToolbarViewProps) => {\n const id = useId();\n return (\n <RouterToolbarItem\n hidesSharedBackground={hidesSharedBackground}\n hidden={hidden}\n identifier={id}\n sharesBackground={!separateBackground}>\n {children}\n </RouterToolbarItem>\n );\n};\n\nexport interface ToolbarProps {\n children?: React.ReactNode;\n}\n\nexport const ToolbarHost = (props: ToolbarProps) => {\n // TODO: Replace InternalLinkPreviewContext with a more generic context\n return (\n <InternalLinkPreviewContext value={{ isVisible: false, href: '' }}>\n <RouterToolbarHost {...props} />\n </InternalLinkPreviewContext>\n );\n};\n"]}
1	+ {"version":3,"file":"elements.js","sourceRoot":"","sources":["../../src/toolbar/elements.tsx"],"names":[],"mappings":";;;AACA,iCAAwE;AACxE,+CAAqF;AAGrF,qCAAgE;AAChE,mFAAgF;AAChF,+CAA4E;AAC5E,mDAAiE;AACjE,8CAA4C;AAC5C,gDAAwD;AAmGxD;;;;;;;;;;;;;;GAcG;AACI,MAAM,WAAW,GAA+B,CAAC,EACtD,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,OAAO,EACP,MAAM,EACN,MAAM,EACN,QAAQ,EACR,KAAK,EACL,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,EACP,KAAK,EACL,WAAW,GACZ,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,IAAA,aAAK,GAAE,CAAC;IAC3B,MAAM,aAAa,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CACrD,CAAC,KAAK,EAAE,EAAE,CACR,IAAA,sBAAc,EAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,yBAAiB,IAAI,KAAK,CAAC,IAAI,KAAK,mBAAW,CAAC,CAC5F,CAAC;IACF,MAAM,KAAK,GAAG,IAAA,8BAAmB,EAAC,QAAQ,EAAE,kBAAK,CAAC,CAAC;IACnD,MAAM,aAAa,GAAG,IAAA,8BAAmB,EAAC,QAAQ,EAAE,iBAAI,CAAC,CAAC;IAE1D,MAAM,aAAa,GAAG,KAAK,IAAI,KAAK,EAAE,KAAK,CAAC,QAAQ,IAAI,EAAE,CAAC;IAC3D,MAAM,YAAY,GAChB,IAAI;QACJ,CAAC,aAAa,EAAE,KAAK,IAAI,IAAI,IAAI,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC7F,MAAM,EAAE,GAAG,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;IACvE,MAAM,UAAU,GAAG,yBAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7C,OAAO,CACL,CAAC,gCAAuB,CACtB,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CACtC,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,CAAC,CAAC,EAAE,CAAC,CACT,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAC1B,aAAa,CAAC,CAAC,MAAM,CAAC,CACtB,oBAAoB,CAAC,CAAC,WAAW,CAAC,CAClC,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,kBAAkB,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAC/D,KAAK,CAAC,CAAC,aAAa,CAAC,CACrB,UAAU,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CACrB,QAAQ,CAAC,CAAC,aAAa,CAAC,CACxB,UAAU,CAAC,CAAC,UAAU,CAAC,EACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAtDW,QAAA,WAAW,eAsDtB;AAIF;;;;;;;;;;;;;;;;GAgBG;AACU,QAAA,iBAAiB,GAAG,yBAAc,CAAC;AAiHhD,yQAAyQ;AACzQ,+EAA+E;AAC/E,wDAAwD;AACxD;;;;;;;;;;;;;;GAcG;AACI,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IACnB,MAAM,iBAAiB,GAAG,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,CAAC;IAC7D,MAAM,KAAK,GAAG,iBAAiB;QAC7B,CAAC,CAAE,KAAK,CAAC,QAAmB;QAC5B,CAAC,CAAC,IAAA,8BAAmB,EAAC,KAAK,CAAC,QAAQ,EAAE,kBAAK,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC;IAC/D,MAAM,aAAa,GACjB,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAA,8BAAmB,EAAC,KAAK,CAAC,QAAQ,EAAE,iBAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5F,MAAM,IAAI,GACR,KAAK,CAAC,IAAI;QACV,CAAC,aAAa,EAAE,KAAK,IAAI,IAAI,IAAI,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC7F,MAAM,EAAE,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IACvD,OAAO,CACL,CAAC,0BAAiB,CAChB,iBAAiB,CAAC,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAC3C,kBAAkB,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAC7C,kBAAkB,CAAC,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAC3E,QAAQ,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CACzB,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CACrB,qBAAqB,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,CACnD,UAAU,CAAC,CAAC,EAAE,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CACnB,UAAU,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAC1B,cAAc,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CACrC,QAAQ,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CACzB,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAC5C,eAAe,CAAC,CAAC,EAAE,CAAC,CACpB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,SAAS,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAC3B,UAAU,CAAC,CAAC,yBAAU,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAC5C,CACH,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,aAAa,iBAgCxB;AAiCF;;;;;;;;;;;;;;;;;;GAkBG;AACI,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IACnB,OAAO,CACL,CAAC,0BAAiB,CAChB,qBAAqB,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,CACnD,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CACrB,UAAU,CAAC,CAAC,EAAE,CAAC,CACf,gBAAgB,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,CACzC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAClD,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EACnB,CACH,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,aAAa,iBAYxB;AA4BF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACI,MAAM,6BAA6B,GAAG,CAAC,EAC5C,qBAAqB,EACrB,MAAM,EACN,gBAAgB,GACmB,EAAE,EAAE;IACvC,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IACnB,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,KAAK,KAAK,IAAI,QAAQ,CAAC,MAAM,CAAC,uBAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC;QAC/F,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,MAAM,EAAE,CAAC;QACX,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL,CAAC,0BAAiB,CAChB,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,UAAU,CAAC,CAAC,EAAE,CAAC,CACf,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,IAAI,CAAC,WAAW,EAChB,CACH,CAAC;AACJ,CAAC,CAAC;AApBW,QAAA,6BAA6B,iCAoBxC;AAwCF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACI,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,MAAM,EACN,qBAAqB,EACrB,kBAAkB,GACD,EAAE,EAAE;IACrB,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IACnB,OAAO,CACL,CAAC,0BAAiB,CAChB,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,UAAU,CAAC,CAAC,EAAE,CAAC,CACf,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CACtC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,0BAAiB,CAAC,CACrB,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,WAAW,eAgBtB;AAMK,MAAM,WAAW,GAAG,CAAC,KAAmB,EAAE,EAAE;IACjD,uEAAuE;IACvE,OAAO,CACL,CAAC,uDAA0B,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAChE;MAAA,CAAC,0BAAiB,CAAC,IAAI,KAAK,CAAC,EAC/B;IAAA,EAAE,uDAA0B,CAAC,CAC9B,CAAC;AACJ,CAAC,CAAC;AAPW,QAAA,WAAW,eAOtB","sourcesContent":["import type { ImageRef } from 'expo-image';\nimport { Children, isValidElement, useId, type ReactNode } from 'react';\nimport { Platform, StyleSheet, type ColorValue, type StyleProp } from 'react-native';\nimport type { SFSymbol } from 'sf-symbols-typescript';\n\nimport { RouterToolbarHost, RouterToolbarItem } from './native';\nimport { InternalLinkPreviewContext } from '../link/InternalLinkPreviewContext';\nimport { LinkMenuAction, type LinkMenuActionProps } from '../link/elements';\nimport { NativeLinkPreviewAction } from '../link/preview/native';\nimport { Icon, Label } from '../primitives';\nimport { getFirstChildOfType } from '../utils/children';\nimport type { BasicTextStyle } from '../utils/font';\n\nexport interface ToolbarMenuProps {\n accessibilityLabel?: string;\n accessibilityHint?: string;\n children?: React.ReactNode;\n /*\n An optional subtitle for the menu. Does not appear on `inline` menus.\n \n @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenuelement/subtitle) for more information.\n /\n subtitle?: string;\n /\n If `true`, the menu item will be displayed as destructive.\n \n @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/destructive) for more information.\n /\n destructive?: boolean;\n disabled?: boolean;\n hidden?: boolean;\n /\n Whether to hide the shared background when `sharesBackground` is enabled.\n \n Only available for root level menus.\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 Optional SF Symbol displayed alongside the menu item.\n /\n icon?: SFSymbol;\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 * The `elementSize` property is ignored when palette is used, all items will be `elementSize=\"small\"`. Use `elementSize=\"medium\"` instead of `palette` to display actions with titles horizontally.\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 > Note: Text buttons cannot share the background.\n \n This prop reverses the native behavior of `sharesBackground`.\n \n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.\n \n @default false\n \n @platform iOS 26+\n /\n separateBackground?: boolean;\n /\n Style for the label of the header item.\n /\n style?: StyleProp<BasicTextStyle>;\n /\n The title of the menu item\n /\n title?: string;\n\n /\n Tint color for the menu icon and text.\n /\n tintColor?: ColorValue;\n\n /\n Controls the visual style of the menu when represented as a bar button.\n \n @default 'plain'\n /\n variant?: 'plain' \| 'done' \| 'prominent';\n /\n The preferred size of the menu elements.\n * `elementSize` property is ignored when `palette` is used.\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 Adds a context menu for to a toolbar.\n \n @example\n * ```tsx\n * <Toolbar>\n * <Toolbar.Menu title=\"Options\">\n * <Toolbar.MenuAction title=\"Action 1\" onPress={() => {}} />\n * <Toolbar.MenuAction title=\"Action 2\" onPress={() => {}} />\n * </Toolbar.Menu>\n * </Toolbar>\n * ```\n \n @platform ios\n /\nexport const ToolbarMenu: React.FC<ToolbarMenuProps> = ({\n accessibilityHint,\n accessibilityLabel,\n separateBackground,\n hidesSharedBackground,\n palette,\n inline,\n hidden,\n subtitle,\n title,\n destructive,\n children,\n icon,\n tintColor,\n variant,\n style,\n elementSize,\n}) => {\n const identifier = useId();\n const validChildren = Children.toArray(children).filter(\n (child) =>\n isValidElement(child) && (child.type === ToolbarMenuAction \|\| child.type === ToolbarMenu)\n );\n const label = getFirstChildOfType(children, Label);\n const iconComponent = getFirstChildOfType(children, Icon);\n\n const computedTitle = title ?? label?.props.children ?? '';\n const computedIcon =\n icon ??\n (iconComponent?.props && 'sf' in iconComponent.props ? iconComponent.props.sf : undefined);\n const sf = typeof computedIcon === 'string' ? computedIcon : undefined;\n const titleStyle = StyleSheet.flatten(style);\n return (\n <NativeLinkPreviewAction\n sharesBackground={!separateBackground}\n hidesSharedBackground={hidesSharedBackground}\n hidden={hidden}\n icon={sf}\n destructive={destructive}\n subtitle={subtitle}\n accessibilityLabel={accessibilityLabel}\n accessibilityHint={accessibilityHint}\n displayAsPalette={palette}\n displayInline={inline}\n preferredElementSize={elementSize}\n tintColor={tintColor}\n titleStyle={titleStyle}\n barButtonItemStyle={variant === 'done' ? 'prominent' : variant}\n title={computedTitle}\n onSelected={() => {}}\n children={validChildren}\n identifier={identifier}\n />\n );\n};\n\nexport type ToolbarMenuActionProps = LinkMenuActionProps;\n\n/\n A single action item within a toolbar menu.\n \n For available props, see [`LinkMenuActionProps`](./router/#linkmenuactionprops).\n \n @example\n * ```tsx\n * <Toolbar>\n * <Toolbar.Menu title=\"Options\">\n * <Toolbar.MenuAction title=\"Action 1\" onPress={() => {}} />\n * <Toolbar.MenuAction title=\"Action 2\" onPress={() => {}} />\n * </Toolbar.Menu>\n * </Toolbar>\n * ```\n \n @platform ios\n /\nexport const ToolbarMenuAction = LinkMenuAction;\n\nexport interface ToolbarButtonProps {\n accessibilityLabel?: string;\n accessibilityHint?: string;\n /\n The text label for the button.\n \n > Note: When icon is used, the label will not be shown and will be used for accessibility purposes only.\n \n @example\n * ```tsx\n * import { Toolbar } from 'expo-router/unstable-toolbar';\n \n ...\n * <Toolbar.Button>This is button label</Toolbar.Button>\n * ```\n /\n children?: ReactNode;\n disabled?: boolean;\n\n /\n Whether the button should be hidden.\n \n @default false\n /\n hidden?: boolean;\n\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 // TODO: support ImageSourcePropType icons in addition to SFSymbols\n /\n The name of the SF Symbol to display as the button icon.\n * For a list of available symbols, see [SF Symbols](https://developer.apple.com/sf-symbols/).\n /\n icon?: SFSymbol;\n\n /\n Custom image loaded using expo-image's `useImage` hook.\n * Takes priority over `icon` (SF Symbol) when both are provided.\n \n @example\n * ```tsx\n * import { useImage } from 'expo-image';\n * import { Toolbar } from 'expo-router/unstable-toolbar';\n \n const customIcon = useImage('https://example.com/icon.png', {\n * maxWidth: 44,\n * maxHeight: 44,\n * });\n \n <Toolbar.Button image={customIcon} onPress={() => {}} />\n * ```\n /\n image?: ImageRef \| null;\n\n /\n Callback function when the button is pressed.\n /\n onPress?: () => void;\n\n /\n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/possibletitles) for more information.\n /\n possibleTitles?: string[];\n\n /\n Whether the button is in a selected state\n \n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/isselected) for more information.\n /\n selected?: boolean;\n\n /\n Whether to separate the background of this item from other header items.\n \n > Note: Text buttons cannot share the background.\n \n This prop reverses the native behavior of `sharesBackground`.\n \n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.\n \n @default false\n \n @platform iOS 26+\n /\n separateBackground?: boolean;\n\n /\n Style for the label of the header item.\n /\n style?: StyleProp<BasicTextStyle>;\n\n /\n Tint color for the button icon and text.\n /\n tintColor?: ColorValue;\n\n /\n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/style-swift.enum) for more information.\n \n @default 'plain'\n /\n variant?: 'plain' \| 'done' \| 'prominent';\n}\n\n// As noted in https://sebvidal.com/blog/whats-new-in-uikit-26/?utm_source=chatgpt.com#:~:text=It%27s%20worth%20noting%20that%2C%20at%20the%20time%20of%20writing%2C%20bar%20button%20badges%20are%20only%20supported%20in%20navigation%20bars%20%2D%20not%20tool%20bars.\n// currently badges are not supported in toolbars, and only in navigation bars.\n// Therefore, there is no badge support in ToolbarButton\n/\n A button component for use in the toolbar.\n * It should only be used as a child of `Toolbar`.\n \n @example\n * ```tsx\n * <Toolbar>\n * <Toolbar.Button icon=\"magnifyingglass\" tintColor={Color.ios.placeholderText} />\n * <Toolbar.Button>Text Button</Toolbar.Button>\n * <Toolbar.Button hidden={!isSearchFocused} icon=\"xmark\" onPress={handleClear} />\n * </Toolbar>\n * ```\n \n @platform ios\n /\nexport const ToolbarButton = (props: ToolbarButtonProps) => {\n const id = useId();\n const areChildrenString = typeof props.children === 'string';\n const label = areChildrenString\n ? (props.children as string)\n : getFirstChildOfType(props.children, Label)?.props.children;\n const iconComponent =\n !props.icon && !areChildrenString ? getFirstChildOfType(props.children, Icon) : undefined;\n const icon =\n props.icon ??\n (iconComponent?.props && 'sf' in iconComponent.props ? iconComponent.props.sf : undefined);\n const sf = typeof icon === 'string' ? icon : undefined;\n return (\n <RouterToolbarItem\n accessibilityHint={props.accessibilityHint}\n accessibilityLabel={props.accessibilityLabel}\n barButtonItemStyle={props.variant === 'done' ? 'prominent' : props.variant}\n disabled={props.disabled}\n hidden={props.hidden}\n hidesSharedBackground={props.hidesSharedBackground}\n identifier={id}\n image={props.image}\n onSelected={props.onPress}\n possibleTitles={props.possibleTitles}\n selected={props.selected}\n sharesBackground={!props.separateBackground}\n systemImageName={sf}\n title={label}\n tintColor={props.tintColor}\n titleStyle={StyleSheet.flatten(props.style)}\n />\n );\n};\n\nexport type ToolbarSpacerProps = {\n /\n Whether to hide the shared background when `sharesBackground` is enabled.\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 spacer should be hidden.\n \n @default false\n /\n hidden?: boolean;\n /\n Whether the spacer shares the background with adjacent toolbar items.\n \n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.\n \n @platform iOS 26+\n * @default false\n /\n sharesBackground?: boolean;\n /\n By default, the spacer is flexible and expands to fill available space.\n * If a width is provided, it creates a [fixed-width spacer](https://developer.apple.com/documentation/uikit/uibarbuttonitem/fixedspace(_:)).\n /\n width?: number;\n};\n\n/\n A spacer component for the toolbar.\n * Without a width, it creates a flexible spacer that expands to fill available space.\n * With a width, it creates a fixed-width spacer.\n * It should only be used as a child of `Toolbar`.\n \n @example\n * ```tsx\n * <Toolbar>\n * <Toolbar.Spacer />\n * <Toolbar.Button icon=\"magnifyingglass\" />\n * <Toolbar.Spacer width={20} />\n * <Toolbar.Button icon=\"mic\" />\n * <Toolbar.Spacer />\n * </Toolbar>\n * ```\n \n @platform ios\n /\nexport const ToolbarSpacer = (props: ToolbarSpacerProps) => {\n const id = useId();\n return (\n <RouterToolbarItem\n hidesSharedBackground={props.hidesSharedBackground}\n hidden={props.hidden}\n identifier={id}\n sharesBackground={props.sharesBackground}\n type={props.width ? 'fixedSpacer' : 'fluidSpacer'}\n width={props.width}\n />\n );\n};\n\nexport interface ToolbarSearchBarPreferredSlotProps {\n /\n Whether to hide the shared background when `sharesBackground` is enabled.\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 search bar placed in the toolbar should be hidden.\n \n @default false\n /\n hidden?: boolean;\n /\n Whether the search bar shares the background with adjacent toolbar items.\n \n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.\n \n @platform iOS 26+\n * @default false\n /\n sharesBackground?: boolean;\n}\n\n/\n Declares the position of a search bar within the toolbar.\n * It should only be used as a child of `Toolbar`.\n \n > Note: On iOS 26+, this component specifies where in the toolbar the search bar\n * > (configured via `Stack.SearchBar`) should appear. On iOS 18 and earlier, the search bar\n * > will be shown in the header instead.\n \n > Important: You must use `Stack.SearchBar` to configure and display the actual\n * > search bar. This component only declares its position in the toolbar.\n \n @example\n * ```tsx\n * <Stack.SearchBar placeholder=\"Search...\" />\n * <Toolbar>\n * <Toolbar.SearchBarPreferredSlot />\n * <Toolbar.Spacer />\n * <Toolbar.Button icon=\"mic\" />\n * </Toolbar>\n * ```\n \n @platform ios 26+\n /\nexport const ToolbarSearchBarPreferredSlot = ({\n hidesSharedBackground,\n hidden,\n sharesBackground,\n}: ToolbarSearchBarPreferredSlotProps) => {\n const id = useId();\n if (process.env.EXPO_OS !== 'ios' \|\| parseInt(String(Platform.Version).split('.')[0], 10) < 26) {\n return null;\n }\n if (hidden) {\n return null;\n }\n return (\n <RouterToolbarItem\n hidesSharedBackground={hidesSharedBackground}\n identifier={id}\n sharesBackground={sharesBackground}\n type=\"searchBar\"\n />\n );\n};\n\n/\n Props for the ToolbarView component.\n \n @platform ios\n /\nexport interface ToolbarViewProps {\n /\n React elements to render inside the toolbar view.\n /\n children: React.ReactNode;\n /\n Whether the view should be hidden.\n \n @default false\n /\n hidden?: boolean;\n /\n Whether to hide the shared background when `sharesBackground` is enabled.\n \n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground) for more information.\n \n @platform iOS 18+\n /\n hidesSharedBackground?: boolean;\n /\n Whether to separate the background of this item from other header items.\n \n This prop reverses the native behavior of `sharesBackground`.\n \n @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.\n \n @default false\n \n @platform iOS 26+\n /\n separateBackground?: boolean;\n}\n\n/\n A custom view component for the toolbar that can contain any React elements.\n * Useful for embedding custom components.\n * It should only be used as a child of `Toolbar`.\n \n The items within the view will be absolutely positioned, so flexbox styles will not work as expected.\n \n @example\n * ```tsx\n * <Toolbar>\n * <Toolbar.Spacer />\n * <Toolbar.View>\n * <TextInput\n * placeholder=\"Search\"\n * placeholderTextColor={Color.ios.placeholderText}\n * />\n * </Toolbar.View>\n * <Toolbar.View separateBackground>\n * <Pressable style={{ width: 32, height: 32 }} onPress={handlePress}>\n * <SymbolView name=\"plus\" size={22} />\n * </Pressable>\n * </Toolbar.View>\n * </Toolbar>\n * ```\n \n @platform ios\n */\nexport const ToolbarView = ({\n children,\n hidden,\n hidesSharedBackground,\n separateBackground,\n}: ToolbarViewProps) => {\n const id = useId();\n return (\n <RouterToolbarItem\n hidesSharedBackground={hidesSharedBackground}\n hidden={hidden}\n identifier={id}\n sharesBackground={!separateBackground}>\n {children}\n </RouterToolbarItem>\n );\n};\n\nexport interface ToolbarProps {\n children?: React.ReactNode;\n}\n\nexport const ToolbarHost = (props: ToolbarProps) => {\n // TODO: Replace InternalLinkPreviewContext with a more generic context\n return (\n <InternalLinkPreviewContext value={{ isVisible: false, href: '' }}>\n <RouterToolbarHost {...props} />\n </InternalLinkPreviewContext>\n );\n};\n"]}

package/build/toolbar/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ToolbarMenu, ToolbarMenuAction, ToolbarButton, ToolbarSpacer, ToolbarView } from './elements';
+import { ToolbarMenu, ToolbarMenuAction, ToolbarButton, ToolbarSpacer, ToolbarSearchBarPreferredSlot, ToolbarView } from './elements';
 /**
  * A component that provides a [bottom toolbar](https://developer.apple.com/design/human-interface-guidelines/toolbars).
  *
@@ -13,8 +13,8 @@ import { ToolbarMenu, ToolbarMenuAction, ToolbarButton, ToolbarSpacer, ToolbarVi
  *       <Toolbar>
  *         <Toolbar.Spacer />
  *         <Toolbar.Button icon="magnifyingglass" tintColor={Color.ios.placeholderText} />
- *         <Toolbar.View style={{ width: 200 }}>
- *           <TextInput placeholder="Search" />
+ *         <Toolbar.View>
+ *           <TextInput style={{ width: 200 }} placeholder="Search" />
  *         </Toolbar.View>
  *         <Toolbar.Menu icon="ellipsis">
  *           <Toolbar.MenuAction icon="mail" title="Send email" onPress={() => {}} />
@@ -34,8 +34,9 @@ export declare const Toolbar: ((props: import("./elements").ToolbarProps) => imp
     MenuAction: typeof import("..").LinkMenuAction;
     Button: (props: import("./elements").ToolbarButtonProps) => import("react").JSX.Element;
     Spacer: (props: import("./elements").ToolbarSpacerProps) => import("react").JSX.Element;
+    SearchBarPreferredSlot: ({ hidesSharedBackground, hidden, sharesBackground, }: import("./elements").ToolbarSearchBarPreferredSlotProps) => import("react").JSX.Element | null;
     View: ({ children, hidden, hidesSharedBackground, separateBackground, }: import("./elements").ToolbarViewProps) => import("react").JSX.Element;
 };
-export { ToolbarMenu, ToolbarMenuAction, ToolbarButton, ToolbarSpacer, ToolbarView };
-export type { ToolbarProps, ToolbarMenuProps, ToolbarMenuActionProps, ToolbarButtonProps, ToolbarSpacerProps, ToolbarViewProps as ToolbarCustomViewProps, } from './elements';
+export { ToolbarMenu, ToolbarMenuAction, ToolbarButton, ToolbarSpacer, ToolbarSearchBarPreferredSlot, ToolbarView, };
+export type { ToolbarProps, ToolbarMenuProps, ToolbarMenuActionProps, ToolbarButtonProps, ToolbarSpacerProps, ToolbarSearchBarPreferredSlotProps, ToolbarViewProps as ToolbarCustomViewProps, } from './elements';
 //# sourceMappingURL=index.d.ts.map

package/build/toolbar/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,WAAW,EACZ,MAAM,YAAY,CAAC;AAEpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,OAAO~~;;;;;;CAMlB~~,CAAC;AAEH,OAAO,~~EAAE~~,WAAW,~~EAAE~~,iBAAiB,~~EAAE~~,aAAa,~~EAAE~~,aAAa,~~EAAE~~,WAAW,~~EAAE~~,CAAC;~~AAErF~~,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,IAAI,sBAAsB,GAC3C,MAAM,YAAY,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,6BAA6B,EAC7B,WAAW,EACZ,MAAM,YAAY,CAAC;AAEpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,OAAO;;;;;;;CAOlB,CAAC;AAEH,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,6BAA6B,EAC7B,WAAW,GACZ,CAAC;AAEF,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,kCAAkC,EAClC,gBAAgB,IAAI,sBAAsB,GAC3C,MAAM,YAAY,CAAC"}

package/build/toolbar/index.js CHANGED Viewed

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarView = exports.ToolbarSpacer = exports.ToolbarButton = exports.ToolbarMenuAction = exports.ToolbarMenu = exports.Toolbar = void 0;
+exports.ToolbarView = exports.ToolbarSearchBarPreferredSlot = exports.ToolbarSpacer = exports.ToolbarButton = exports.ToolbarMenuAction = exports.ToolbarMenu = exports.Toolbar = void 0;
 const elements_1 = require("./elements");
 Object.defineProperty(exports, "ToolbarMenu", { enumerable: true, get: function () { return elements_1.ToolbarMenu; } });
 Object.defineProperty(exports, "ToolbarMenuAction", { enumerable: true, get: function () { return elements_1.ToolbarMenuAction; } });
 Object.defineProperty(exports, "ToolbarButton", { enumerable: true, get: function () { return elements_1.ToolbarButton; } });
 Object.defineProperty(exports, "ToolbarSpacer", { enumerable: true, get: function () { return elements_1.ToolbarSpacer; } });
+Object.defineProperty(exports, "ToolbarSearchBarPreferredSlot", { enumerable: true, get: function () { return elements_1.ToolbarSearchBarPreferredSlot; } });
 Object.defineProperty(exports, "ToolbarView", { enumerable: true, get: function () { return elements_1.ToolbarView; } });
 /**
  * A component that provides a [bottom toolbar](https://developer.apple.com/design/human-interface-guidelines/toolbars).
@@ -21,8 +22,8 @@ Object.defineProperty(exports, "ToolbarView", { enumerable: true, get: function
  *       <Toolbar>
  *         <Toolbar.Spacer />
  *         <Toolbar.Button icon="magnifyingglass" tintColor={Color.ios.placeholderText} />
- *         <Toolbar.View style={{ width: 200 }}>
- *           <TextInput placeholder="Search" />
+ *         <Toolbar.View>
+ *           <TextInput style={{ width: 200 }} placeholder="Search" />
  *         </Toolbar.View>
  *         <Toolbar.Menu icon="ellipsis">
  *           <Toolbar.MenuAction icon="mail" title="Send email" onPress={() => {}} />
@@ -42,6 +43,7 @@ exports.Toolbar = Object.assign(elements_1.ToolbarHost, {
     MenuAction: elements_1.ToolbarMenuAction,
     Button: elements_1.ToolbarButton,
     Spacer: elements_1.ToolbarSpacer,
+    SearchBarPreferredSlot: elements_1.ToolbarSearchBarPreferredSlot,
     View: elements_1.ToolbarView,
 });
 //# sourceMappingURL=index.js.map

package/build/toolbar/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/toolbar/index.ts"],"names":[],"mappings":";;;AAAA,~~yCAOoB~~;~~AAwCX~~,~~4FA7CP~~,sBAAW,~~OA6CO~~;~~AAAE~~,~~kGA5CpB~~,4BAAiB,~~OA4CoB~~;~~AAAE~~,~~8FA3CvC~~,wBAAa,~~OA2CuC~~;~~AAAE~~,~~8FA1CtD~~,wBAAa,~~OA0CsD~~;~~AAAE~~,~~4FAzCrE~~,sBAAW,~~OAyCqE~~;~~AAtClF~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACU,QAAA,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,sBAAW,EAAE;IAChD,IAAI,EAAE,sBAAW;IACjB,UAAU,EAAE,4BAAiB;IAC7B,MAAM,EAAE,wBAAa;IACrB,MAAM,EAAE,wBAAa;IACrB,IAAI,EAAE,sBAAW;CAClB,CAAC,CAAC","sourcesContent":["import {\n ToolbarHost,\n ToolbarMenu,\n ToolbarMenuAction,\n ToolbarButton,\n ToolbarSpacer,\n ToolbarView,\n} from './elements';\n\n/*\n A component that provides a [bottom toolbar](https://developer.apple.com/design/human-interface-guidelines/toolbars).\n \n @example\n * ```tsx\n * import { Toolbar } from \"expo-router\";\n \n export default function MyScreen() {\n * return (\n * <>\n * <YourScreenContent />\n * <Toolbar>\n * <Toolbar.Spacer />\n * <Toolbar.Button icon=\"magnifyingglass\" tintColor={Color.ios.placeholderText} />\n * <Toolbar.View style={{ width: 200 }}~~>\n~~ * <TextInput placeholder=\"Search\" />\n * </Toolbar.View>\n * <Toolbar.Menu icon=\"ellipsis\">\n * <Toolbar.MenuAction icon=\"mail\" title=\"Send email\" onPress={() => {}} />\n * <Toolbar.MenuAction icon=\"trash\" title=\"Delete\" destructive onPress={() => {}} />\n * </Toolbar.Menu>\n * <Toolbar.Spacer />\n * </Toolbar>\n * </>\n * );\n * }\n * ```\n \n @platform ios\n */\nexport const Toolbar = Object.assign(ToolbarHost, {\n Menu: ToolbarMenu,\n MenuAction: ToolbarMenuAction,\n Button: ToolbarButton,\n Spacer: ToolbarSpacer,\n View: ToolbarView,\n});\n\nexport { ToolbarMenu, ToolbarMenuAction, ToolbarButton, ToolbarSpacer, ToolbarView };\n\nexport type {\n ToolbarProps,\n ToolbarMenuProps,\n ToolbarMenuActionProps,\n ToolbarButtonProps,\n ToolbarSpacerProps,\n ToolbarViewProps as ToolbarCustomViewProps,\n} from './elements';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/toolbar/index.ts"],"names":[],"mappings":";;;AAAA,yCAQoB;AA0ClB,4FAhDA,sBAAW,OAgDA;AACX,kGAhDA,4BAAiB,OAgDA;AACjB,8FAhDA,wBAAa,OAgDA;AACb,8FAhDA,wBAAa,OAgDA;AACb,8GAhDA,wCAA6B,OAgDA;AAC7B,4FAhDA,sBAAW,OAgDA;AA7Cb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACU,QAAA,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,sBAAW,EAAE;IAChD,IAAI,EAAE,sBAAW;IACjB,UAAU,EAAE,4BAAiB;IAC7B,MAAM,EAAE,wBAAa;IACrB,MAAM,EAAE,wBAAa;IACrB,sBAAsB,EAAE,wCAA6B;IACrD,IAAI,EAAE,sBAAW;CAClB,CAAC,CAAC","sourcesContent":["import {\n ToolbarHost,\n ToolbarMenu,\n ToolbarMenuAction,\n ToolbarButton,\n ToolbarSpacer,\n ToolbarSearchBarPreferredSlot,\n ToolbarView,\n} from './elements';\n\n/*\n A component that provides a [bottom toolbar](https://developer.apple.com/design/human-interface-guidelines/toolbars).\n \n @example\n * ```tsx\n * import { Toolbar } from \"expo-router\";\n \n export default function MyScreen() {\n * return (\n * <>\n * <YourScreenContent />\n * <Toolbar>\n * <Toolbar.Spacer />\n * <Toolbar.Button icon=\"magnifyingglass\" tintColor={Color.ios.placeholderText} />\n * <Toolbar.View>\n * <TextInput style={{ width: 200 }} placeholder=\"Search\" />\n * </Toolbar.View>\n * <Toolbar.Menu icon=\"ellipsis\">\n * <Toolbar.MenuAction icon=\"mail\" title=\"Send email\" onPress={() => {}} />\n * <Toolbar.MenuAction icon=\"trash\" title=\"Delete\" destructive onPress={() => {}} />\n * </Toolbar.Menu>\n * <Toolbar.Spacer />\n * </Toolbar>\n * </>\n * );\n * }\n * ```\n \n @platform ios\n */\nexport const Toolbar = Object.assign(ToolbarHost, {\n Menu: ToolbarMenu,\n MenuAction: ToolbarMenuAction,\n Button: ToolbarButton,\n Spacer: ToolbarSpacer,\n SearchBarPreferredSlot: ToolbarSearchBarPreferredSlot,\n View: ToolbarView,\n});\n\nexport {\n ToolbarMenu,\n ToolbarMenuAction,\n ToolbarButton,\n ToolbarSpacer,\n ToolbarSearchBarPreferredSlot,\n ToolbarView,\n};\n\nexport type {\n ToolbarProps,\n ToolbarMenuProps,\n ToolbarMenuActionProps,\n ToolbarButtonProps,\n ToolbarSpacerProps,\n ToolbarSearchBarPreferredSlotProps,\n ToolbarViewProps as ToolbarCustomViewProps,\n} from './elements';\n"]}

package/build/toolbar/native.ios.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"native.ios.d.ts","sourceRoot":"","sources":["../../src/toolbar/native.ios.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAMrF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAc9D;~~AAiBD~~,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+~~BAE9D~~"}
1	+ {"version":3,"file":"native.ios.d.ts","sourceRoot":"","sources":["../../src/toolbar/native.ios.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAMrF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAc9D;AAmBD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAU9D"}

package/build/toolbar/native.ios.js CHANGED Viewed

@@ -16,6 +16,8 @@ function RouterToolbarHost(props) {
 }
 const RouterToolbarItemView = (0, expo_1.requireNativeView)('ExpoRouterToolbarModule', 'RouterToolbarItemView');
 function RouterToolbarItem(props) {
-    return <RouterToolbarItemView {...props}/>;
+    // Needed to pass shared object ID to native side
+    const imageObjectId = props.image?.__expo_shared_object_id__;
+    return <RouterToolbarItemView {...props} image={imageObjectId}/>;
 }
 //# sourceMappingURL=native.ios.js.map

package/build/toolbar/native.ios.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"native.ios.js","sourceRoot":"","sources":["../../src/toolbar/native.ios.tsx"],"names":[],"mappings":";;AAUA,8CAcC;~~AAiBD~~,~~8CAEC~~;~~AA3CD~~,+BAAyC;AAMzC,MAAM,qBAAqB,GAAmC,IAAA,wBAAiB,EAC7E,yBAAyB,EACzB,uBAAuB,CACxB,CAAC;AACF,SAAgB,iBAAiB,CAAC,KAA6B;IAC7D,OAAO,CACL,CAAC,qBAAqB,CACpB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,aAAa;SAC/B,CAAC,EACF,CACH,CAAC;AACJ,CAAC;AAED,MAAM,qBAAqB,~~GAcvB~~,IAAA,wBAAiB,EAAC,yBAAyB,EAAE,uBAAuB,CAAC,CAAC;~~AAC1E~~,SAAgB,iBAAiB,CAAC,KAA6B;IAC7D,OAAO,CAAC,qBAAqB,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;~~AAC9C~~,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport { type ColorValue, type TextStyle, type ViewProps } from 'react-native';\nimport type { SFSymbol } from 'sf-symbols-typescript';\n\nimport type { RouterToolbarHostProps, RouterToolbarItemProps } from './native.types';\n\nconst RouterToolbarHostView: React.ComponentType<ViewProps> = requireNativeView(\n 'ExpoRouterToolbarModule',\n 'RouterToolbarHostView'\n);\nexport function RouterToolbarHost(props: RouterToolbarHostProps) {\n return (\n <RouterToolbarHostView\n {...props}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n width: 1,\n height: 1,\n backgroundColor: 'transparent',\n }}\n />\n );\n}\n\nconst RouterToolbarItemView: React.ComponentType<\n ViewProps & {\n identifier: string;\n title?: string;\n systemImageName?: SFSymbol;\n type?: string;\n titleStyle?: {\n fontFamily?: string;\n fontSize?: number;\n fontWeight?: TextStyle['fontWeight'];\n color?: ColorValue;\n };\n tintColor?: ColorValue;\n }\n> = requireNativeView('ExpoRouterToolbarModule', 'RouterToolbarItemView');\nexport function RouterToolbarItem(props: RouterToolbarItemProps) {\n return <RouterToolbarItemView {...props} />;\n}\n"]}
1	+ {"version":3,"file":"native.ios.js","sourceRoot":"","sources":["../../src/toolbar/native.ios.tsx"],"names":[],"mappings":";;AAUA,8CAcC;AAmBD,8CAUC;AArDD,+BAAyC;AAMzC,MAAM,qBAAqB,GAAmC,IAAA,wBAAiB,EAC7E,yBAAyB,EACzB,uBAAuB,CACxB,CAAC;AACF,SAAgB,iBAAiB,CAAC,KAA6B;IAC7D,OAAO,CACL,CAAC,qBAAqB,CACpB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,aAAa;SAC/B,CAAC,EACF,CACH,CAAC;AACJ,CAAC;AAED,MAAM,qBAAqB,GAevB,IAAA,wBAAiB,EAAC,yBAAyB,EAAE,uBAAuB,CAAC,CAAC;AAE1E,SAAgB,iBAAiB,CAAC,KAA6B;IAC7D,iDAAiD;IACjD,MAAM,aAAa,GACjB,KAAK,CAAC,KAKP,EAAE,yBAAyB,CAAC;IAC7B,OAAO,CAAC,qBAAqB,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,EAAG,CAAC;AACpE,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport { type ColorValue, type TextStyle, type ViewProps } from 'react-native';\nimport type { SFSymbol } from 'sf-symbols-typescript';\n\nimport type { RouterToolbarHostProps, RouterToolbarItemProps } from './native.types';\n\nconst RouterToolbarHostView: React.ComponentType<ViewProps> = requireNativeView(\n 'ExpoRouterToolbarModule',\n 'RouterToolbarHostView'\n);\nexport function RouterToolbarHost(props: RouterToolbarHostProps) {\n return (\n <RouterToolbarHostView\n {...props}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n width: 1,\n height: 1,\n backgroundColor: 'transparent',\n }}\n />\n );\n}\n\nconst RouterToolbarItemView: React.ComponentType<\n ViewProps & {\n identifier: string;\n title?: string;\n systemImageName?: SFSymbol;\n image?: number;\n type?: string;\n titleStyle?: {\n fontFamily?: string;\n fontSize?: number;\n fontWeight?: TextStyle['fontWeight'];\n color?: ColorValue;\n };\n tintColor?: ColorValue;\n }\n> = requireNativeView('ExpoRouterToolbarModule', 'RouterToolbarItemView');\n\nexport function RouterToolbarItem(props: RouterToolbarItemProps) {\n // Needed to pass shared object ID to native side\n const imageObjectId = (\n props.image as\n \| {\n __expo_shared_object_id__: number;\n }\n \| undefined\n )?.__expo_shared_object_id__;\n return <RouterToolbarItemView {...props} image={imageObjectId} />;\n}\n"]}

package/build/toolbar/native.types.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import type { ImageRef } from 'expo-image';
 import type { ColorValue } from 'react-native';
 import type { SFSymbol } from 'sf-symbols-typescript';
 import type { BasicTextStyle } from '../utils/font';
@@ -9,7 +10,22 @@ export interface RouterToolbarItemProps {
     identifier: string;
     title?: string;
     systemImageName?: SFSymbol;
-    type?: 'normal' | 'fixedSpacer' | 'fluidSpacer';
+    /**
+     * Custom image loaded using expo-image's `useImage` hook.
+     * Takes priority over `systemImageName` when both are provided.
+     *
+     * @example
+     * ```tsx
+     * const customIcon = useImage('https://example.com/icon.png', {
+     *   maxWidth: 44,
+     *   maxHeight: 44,
+     * });
+     *
+     * <Toolbar.Item image={customIcon} title="Custom" />
+     * ```
+     */
+    image?: ImageRef | null;
+    type?: 'normal' | 'fixedSpacer' | 'fluidSpacer' | 'searchBar';
     tintColor?: ColorValue;
     hidesSharedBackground?: boolean;
     sharesBackground?: boolean;

package/build/toolbar/native.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"native.types.d.ts","sourceRoot":"","sources":["../../src/toolbar/native.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,GAAG,aAAa,CAAC;~~IAChD~~,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B,kBAAkB,CAAC,EAAE;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,eAAe,CAAC,EAAE,UAAU,CAAC;KAC9B,GAAG,cAAc,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB"}
1	+ {"version":3,"file":"native.types.d.ts","sourceRoot":"","sources":["../../src/toolbar/native.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,GAAG,aAAa,GAAG,WAAW,CAAC;IAC9D,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B,kBAAkB,CAAC,EAAE;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,eAAe,CAAC,EAAE,UAAU,CAAC;KAC9B,GAAG,cAAc,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB"}

package/build/toolbar/native.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"native.types.js","sourceRoot":"","sources":["../../src/toolbar/native.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ColorValue } from 'react-native';\nimport type { SFSymbol } from 'sf-symbols-typescript';\n\nimport type { BasicTextStyle } from '../utils/font';\n\nexport interface RouterToolbarHostProps {\n children?: React.ReactNode;\n}\n\nexport interface RouterToolbarItemProps {\n children?: React.ReactNode;\n identifier: string;\n title?: string;\n systemImageName?: SFSymbol;\n type?: 'normal' \| 'fixedSpacer' \| 'fluidSpacer';\n tintColor?: ColorValue;\n hidesSharedBackground?: boolean;\n sharesBackground?: boolean;\n barButtonItemStyle?: 'plain' \| 'prominent';\n width?: number;\n hidden?: boolean;\n selected?: boolean;\n possibleTitles?: string[];\n // Right now this does not seem to work\n badgeConfiguration?: {\n value?: string;\n backgroundColor?: ColorValue;\n } & BasicTextStyle;\n titleStyle?: BasicTextStyle;\n accessibilityLabel?: string;\n accessibilityHint?: string;\n disabled?: boolean;\n onSelected?: () => void;\n}\n"]}
1	+ {"version":3,"file":"native.types.js","sourceRoot":"","sources":["../../src/toolbar/native.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ImageRef } from 'expo-image';\nimport type { ColorValue } from 'react-native';\nimport type { SFSymbol } from 'sf-symbols-typescript';\n\nimport type { BasicTextStyle } from '../utils/font';\n\nexport interface RouterToolbarHostProps {\n children?: React.ReactNode;\n}\n\nexport interface RouterToolbarItemProps {\n children?: React.ReactNode;\n identifier: string;\n title?: string;\n systemImageName?: SFSymbol;\n /*\n Custom image loaded using expo-image's `useImage` hook.\n * Takes priority over `systemImageName` when both are provided.\n \n @example\n * ```tsx\n * const customIcon = useImage('https://example.com/icon.png', {\n * maxWidth: 44,\n * maxHeight: 44,\n * });\n \n <Toolbar.Item image={customIcon} title=\"Custom\" />\n * ```\n */\n image?: ImageRef \| null;\n type?: 'normal' \| 'fixedSpacer' \| 'fluidSpacer' \| 'searchBar';\n tintColor?: ColorValue;\n hidesSharedBackground?: boolean;\n sharesBackground?: boolean;\n barButtonItemStyle?: 'plain' \| 'prominent';\n width?: number;\n hidden?: boolean;\n selected?: boolean;\n possibleTitles?: string[];\n // Right now this does not seem to work\n badgeConfiguration?: {\n value?: string;\n backgroundColor?: ColorValue;\n } & BasicTextStyle;\n titleStyle?: BasicTextStyle;\n accessibilityLabel?: string;\n accessibilityHint?: string;\n disabled?: boolean;\n onSelected?: () => void;\n}\n"]}

package/build/ui/Slot.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slot.d.ts","sourceRoot":"","sources":["../../src/ui/Slot.tsx"],"names":[],"mappings":"AACA,~~OAAO~~,~~EAGL~~,KAAK,yBAAyB,EAC9B,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AACf,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;~~AAsB1D~~,MAAM,WAAW,IAAI,CAAC,KAAK,GAAG,SAAS,EAAE,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC,CACjE,SAAQ,yBAAyB,CAAC,KAAK,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;CAAG;AAElE,eAAO,MAAM,IAAI,EAAE,IAA8C,CAAC"}
1	+ {"version":3,"file":"Slot.d.ts","sourceRoot":"","sources":["../../src/ui/Slot.tsx"],"names":[],"mappings":"AACA,OAAc,EAGZ,KAAK,yBAAyB,EAC9B,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AACf,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAoC1D,MAAM,WAAW,IAAI,CAAC,KAAK,GAAG,SAAS,EAAE,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC,CACjE,SAAQ,yBAAyB,CAAC,KAAK,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;CAAG;AAElE,eAAO,MAAM,IAAI,EAAE,IAA8C,CAAC"}

package/build/ui/Slot.js CHANGED Viewed

@@ -1,8 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Slot = void 0;
 const react_slot_1 = require("@radix-ui/react-slot");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 /**
  * RadixUI has special logic to handle the merging of `style` and `className` props.
@@ -20,6 +53,16 @@ const react_native_1 = require("react-native");
 function ShimSlotForReactNative(Component) {
     return (0, react_1.forwardRef)(function RNSlotHOC({ style, ...props }, ref) {
         style = (0, react_1.useMemo)(() => react_native_1.StyleSheet.flatten(style), [style]);
+        if (process.env.NODE_ENV !== 'production') {
+            if (react_1.default.isValidElement(props.children)) {
+                if (typeof props.children.props === 'object' &&
+                    props.children.props !== null &&
+                    'style' in props.children.props &&
+                    Array.isArray(props.children.props.style)) {
+                    throw new Error(`[expo-router]: You are passing an array of styles to a child of <Slot>. Consider flattening the styles with StyleSheet.flatten before passing them to the child component.`);
+                }
+            }
+        }
         return <Component ref={ref} {...props} style={style}/>;
     });
 }

package/build/ui/Slot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slot.js","sourceRoot":"","sources":["../../src/ui/Slot.tsx"],"names":[],"mappings":"~~;;;~~AAAA,qDAAuD;AACvD~~,iCAMe~~;AACf,+CAA0D;AAE1D;;;;;;;;;;;;GAYG;AACH,SAAS,sBAAsB,CAAC,SAAyB;IACvD,OAAO,IAAA,kBAAU,EAAC,SAAS,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG;QAC3D,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,yBAAU,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1D,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;IAC1D,CAAC,CAAC,CAAC;AACL,CAAC;AAKY,QAAA,IAAI,GAAS,sBAAsB,CAAC,iBAAO,CAAS,CAAC","sourcesContent":["import { Slot as RUISlot } from '@radix-ui/react-slot';\nimport {\n forwardRef,\n useMemo,\n type ForwardRefExoticComponent,\n type Component,\n type RefAttributes,\n} from 'react';\nimport { StyleSheet, type ViewProps } from 'react-native';\n\n/*\n RadixUI has special logic to handle the merging of `style` and `className` props.\n * On the web styles are not allowed so Radix does not handle this scenario.\n * This could be fixed upstream (PR open), but it may not as RN is not their target\n * platform.\n \n This shim calls `StyleSheet.flatten` on the styles before we render the <Slot />\n \n @see https://github.com/expo/expo/issues/31352\n * @see https://github.com/radix-ui/primitives/issues/3107\n * @param Component\n * @returns\n */\nfunction ShimSlotForReactNative(Component: typeof RUISlot): typeof RUISlot {\n return forwardRef(function RNSlotHOC({ style, ...props }, ref) {\n style = useMemo(() => StyleSheet.flatten(style), [style]);\n return <Component ref={ref} {...props} style={style} />;\n });\n}\n\nexport interface Slot<Props = ViewProps, Ref = Component<ViewProps>>\n extends ForwardRefExoticComponent<Props & RefAttributes<Ref>> {}\n\nexport const Slot: Slot = ShimSlotForReactNative(RUISlot) as Slot;\n"]}
1	+ {"version":3,"file":"Slot.js","sourceRoot":"","sources":["../../src/ui/Slot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qDAAuD;AACvD,+CAMe;AACf,+CAA0D;AAE1D;;;;;;;;;;;;GAYG;AACH,SAAS,sBAAsB,CAAC,SAAyB;IACvD,OAAO,IAAA,kBAAU,EAAC,SAAS,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG;QAC3D,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,yBAAU,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1D,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;YAC1C,IAAI,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACzC,IACE,OAAO,KAAK,CAAC,QAAQ,CAAC,KAAK,KAAK,QAAQ;oBACxC,KAAK,CAAC,QAAQ,CAAC,KAAK,KAAK,IAAI;oBAC7B,OAAO,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK;oBAC/B,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EACzC,CAAC;oBACD,MAAM,IAAI,KAAK,CACb,4KAA4K,CAC7K,CAAC;gBACJ,CAAC;YACH,CAAC;QACH,CAAC;QACD,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;IAC1D,CAAC,CAAC,CAAC;AACL,CAAC;AAKY,QAAA,IAAI,GAAS,sBAAsB,CAAC,iBAAO,CAAS,CAAC","sourcesContent":["import { Slot as RUISlot } from '@radix-ui/react-slot';\nimport React, {\n forwardRef,\n useMemo,\n type ForwardRefExoticComponent,\n type Component,\n type RefAttributes,\n} from 'react';\nimport { StyleSheet, type ViewProps } from 'react-native';\n\n/*\n RadixUI has special logic to handle the merging of `style` and `className` props.\n * On the web styles are not allowed so Radix does not handle this scenario.\n * This could be fixed upstream (PR open), but it may not as RN is not their target\n * platform.\n \n This shim calls `StyleSheet.flatten` on the styles before we render the <Slot />\n \n @see https://github.com/expo/expo/issues/31352\n * @see https://github.com/radix-ui/primitives/issues/3107\n * @param Component\n * @returns\n */\nfunction ShimSlotForReactNative(Component: typeof RUISlot): typeof RUISlot {\n return forwardRef(function RNSlotHOC({ style, ...props }, ref) {\n style = useMemo(() => StyleSheet.flatten(style), [style]);\n if (process.env.NODE_ENV !== 'production') {\n if (React.isValidElement(props.children)) {\n if (\n typeof props.children.props === 'object' &&\n props.children.props !== null &&\n 'style' in props.children.props &&\n Array.isArray(props.children.props.style)\n ) {\n throw new Error(\n `[expo-router]: You are passing an array of styles to a child of <Slot>. Consider flattening the styles with StyleSheet.flatten before passing them to the child component.`\n );\n }\n }\n }\n return <Component ref={ref} {...props} style={style} />;\n });\n}\n\nexport interface Slot<Props = ViewProps, Ref = Component<ViewProps>>\n extends ForwardRefExoticComponent<Props & RefAttributes<Ref>> {}\n\nexport const Slot: Slot = ShimSlotForReactNative(RUISlot) as Slot;\n"]}

package/build/useScreens.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
-import { type EventMapBase, type NavigationState, type ParamListBase, type RouteProp, type ScreenListeners } from '@react-navigation/native';
+import type { BottomTabNavigationEventMap } from '@react-navigation/bottom-tabs';
+import { type EventMapBase, type NavigationProp, type NavigationState, type ParamListBase, type RouteProp, type ScreenListeners } from '@react-navigation/native';
+import type { NativeStackNavigationEventMap } from '@react-navigation/native-stack';
 import React from 'react';
 import { RouteNode } from './Route';
 import { UnknownOutputParams } from './types';
@@ -31,7 +33,12 @@ export type SingularOptions = boolean | ((name: string, params: UnknownOutputPar
 export declare function useSortedScreens(order: ScreenProps[], protectedScreens: Set<string>, useOnlyUserDefinedScreens?: boolean): React.ReactNode[];
 /** Wrap the component with various enhancements and add access to child routes. */
 export declare function getQualifiedRouteComponent(value: RouteNode): React.ComponentType<any> | {
-    ({ route, navigation, ...props }: any): React.JSX.Element;
+    ({ route, navigation, ...props }: {
+        route?: RouteProp<ParamListBase, string>;
+        navigation: Omit<NavigationProp<ParamListBase, string, undefined, NavigationState, object, NativeStackNavigationEventMap | BottomTabNavigationEventMap>, "getState"> & {
+            getState(): NavigationState | undefined;
+        };
+    }): React.JSX.Element;
     displayName: string;
 };
 export declare function screenOptionsFactory(route: RouteNode, options?: ScreenProps['options']): ScreenProps['options'];

package/build/useScreens.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useScreens.d.ts","sourceRoot":"","sources":["../src/useScreens.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,eAAe,EACrB,MAAM,0BAA0B,CAAC;~~AAElC~~,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAsB,SAAS,EAAuC,MAAM,SAAS,CAAC;AAa7F,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAK9C,MAAM,MAAM,WAAW,CACrB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1D,MAAM,SAAS,eAAe,GAAG,eAAe,EAChD,SAAS,SAAS,YAAY,GAAG,YAAY,IAC3C;IACF,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,OAAO,CAAC,EACJ,QAAQ,GACR,CAAC,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QAAC,UAAU,EAAE,GAAG,CAAA;KAAE,KAAK,QAAQ,CAAC,CAAC;IAEvF,SAAS,CAAC,EACN,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,GAClC,CAAC,CAAC,IAAI,EAAE;QACN,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QACxC,UAAU,EAAE,GAAG,CAAC;KACjB,KAAK,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9C,KAAK,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;KAAE,KAAK,MAAM,GAAG,SAAS,CAAC;IAE7E,mBAAmB,CAAC,EAAE,eAAe,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,mBAAmB,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;AA2FxE;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,WAAW,EAAE,EACpB,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,EAC7B,yBAAyB,GAAE,OAAe,GACzC,KAAK,CAAC,SAAS,EAAE,CAoBnB;AAkDD,mFAAmF;AACnF,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,SAAS;sCAiCtD,GAAG;;~~EAoEP~~;AAgED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAChB,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAC/B,WAAW,CAAC,SAAS,CAAC,CAqBxB;AAED,wBAAgB,aAAa,CAC3B,KAAK,EAAE,SAAS,EAChB,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,GAAE,OAAO,CAAC,WAAW,CAAM,qBAYxD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,UAa5E"}
1	+ {"version":3,"file":"useScreens.d.ts","sourceRoot":"","sources":["../src/useScreens.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,eAAe,EACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AACpF,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAsB,SAAS,EAAuC,MAAM,SAAS,CAAC;AAa7F,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAK9C,MAAM,MAAM,WAAW,CACrB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1D,MAAM,SAAS,eAAe,GAAG,eAAe,EAChD,SAAS,SAAS,YAAY,GAAG,YAAY,IAC3C;IACF,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,OAAO,CAAC,EACJ,QAAQ,GACR,CAAC,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QAAC,UAAU,EAAE,GAAG,CAAA;KAAE,KAAK,QAAQ,CAAC,CAAC;IAEvF,SAAS,CAAC,EACN,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,GAClC,CAAC,CAAC,IAAI,EAAE;QACN,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QACxC,UAAU,EAAE,GAAG,CAAC;KACjB,KAAK,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9C,KAAK,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;KAAE,KAAK,MAAM,GAAG,SAAS,CAAC;IAE7E,mBAAmB,CAAC,EAAE,eAAe,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,mBAAmB,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;AA2FxE;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,WAAW,EAAE,EACpB,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,EAC7B,yBAAyB,GAAE,OAAe,GACzC,KAAK,CAAC,SAAS,EAAE,CAoBnB;AAkDD,mFAAmF;AACnF,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,SAAS;sCAiCtD;QACD,KAAK,CAAC,EAAE,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QACzC,UAAU,EAAE,IAAI,CACd,cAAc,CACZ,aAAa,EACb,MAAM,EACN,SAAS,EACT,eAAe,EACf,MAAM,EACN,6BAA6B,GAAG,2BAA2B,CAC5D,EACD,UAAU,CACX,GAAG;YACF,QAAQ,IAAI,eAAe,GAAG,SAAS,CAAC;SACzC,CAAC;KACH;;EAoEF;AAgED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAChB,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAC/B,WAAW,CAAC,SAAS,CAAC,CAqBxB;AAED,wBAAgB,aAAa,CAC3B,KAAK,EAAE,SAAS,EAChB,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,GAAE,OAAO,CAAC,WAAW,CAAM,qBAYxD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,UAa5E"}

package/build/useScreens.js CHANGED Viewed

@@ -199,13 +199,13 @@ function getQualifiedRouteComponent(value) {
         const store = (0, storeContext_1.useExpoRouterStore)();
         if (isFocused) {
             const state = navigation.getState();
-            const isLeaf = !('state' in state.routes[state.index]);
+            const isLeaf = !(state && 'state' in state.routes[state.index]);
             if (isLeaf && stateForPath)
                 store.setFocusedState(stateForPath);
         }
         (0, react_1.useEffect)(() => navigation.addListener('focus', () => {
             const state = navigation.getState();
-            const isLeaf = !('state' in state.routes[state.index]);
+            const isLeaf = !(state && 'state' in state.routes[state.index]);
             // Because setFocusedState caches the route info, this call will only trigger rerenders
             // if the component itself didn’t rerender and the route info changed.
             // Otherwise, the update from the `if` above will handle it,
@@ -224,10 +224,12 @@ function getQualifiedRouteComponent(value) {
                 }
             });
         }, [navigation]);
-        return (<Route_1.Route node={value} route={route}>
-        {value.type === 'route' && navigationEvents_1.unstable_navigationEvents.hasAnyListener() && (<AnalyticsListeners navigation={navigation} screenId={route.key}/>)}
-        <ZoomTransitionEnabler_1.ZoomTransitionEnabler route={route}/>
+        const isRouteType = value.type === 'route';
+        const hasRouteKey = !!route?.key;
+        return (<Route_1.Route node={value} params={route?.params}>
+        {isRouteType && hasRouteKey && navigationEvents_1.unstable_navigationEvents.hasAnyListener() && (<AnalyticsListeners navigation={navigation} screenId={route.key}/>)}
         <zoom_transition_context_providers_1.ZoomTransitionTargetContextProvider route={route}>
+          <ZoomTransitionEnabler_1.ZoomTransitionEnabler route={route}/>
           <react_1.default.Suspense fallback={<SuspenseFallback_1.SuspenseFallback route={value}/>}>
             <ScreenComponent {...props}
         // Expose the template segment path, e.g. `(home)`, `[foo]`, `index`