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

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

@@ -4,42 +4,32 @@ exports.StackHeaderComponent = StackHeaderComponent;
 exports.appendStackHeaderPropsToOptions = appendStackHeaderPropsToOptions;
 const react_1 = require("react");
 const react_native_1 = require("react-native");
-const StackHeaderBackButton_1 = require("./StackHeaderBackButton");
-const StackHeaderLeftRight_1 = require("./StackHeaderLeftRight");
-const StackHeaderTitle_1 = require("./StackHeaderTitle");
-const StackSearchBar_1 = require("./StackSearchBar");
-const children_1 = require("../../utils/children");
 const Screen_1 = require("../../views/Screen");
 /**
- * The component used to configure the whole stack header.
+ * The component used to configure header styling for a stack screen.
  *
- * When used inside a screen, it allows you to customize the header dynamically by composing
- * header subcomponents (title, left/right areas, back button, search bar, etc.).
+ * Use this component to set header appearance properties like blur effect, background color,
+ * and shadow visibility.
  *
+ * @example
  * ```tsx
  * import { Stack } from 'expo-router';
  *
  * export default function Page() {
  *   return (
  *     <>
- *       <Stack.Header>
- *         <Stack.Header.Title>Page title</Stack.Header.Title>
- *         <Stack.Header.Left>
- *           <Stack.Header.Button onPress={() => alert('Left pressed')} />
- *         </Stack.Header.Left>
- *         <Stack.Header.Right>
- *           <Stack.Header.Button onPress={() => alert('Right pressed')} />
- *         </Stack.Header.Right>
- *       </Stack.Header>
+ *       <Stack.Header
+ *         blurEffect="systemMaterial"
+ *         style={{ backgroundColor: '#fff' }}
+ *       />
  *       <ScreenContent />
  *     </>
  *   );
  * }
  * ```
  *
- * When used inside a layout, it needs to be wrapped in `Stack.Screen` to take effect.
- *
- * Example (inside a layout):
+ * @example
+ * When used inside a layout with Stack.Screen:
  * ```tsx
  * import { Stack } from 'expo-router';
  *
@@ -47,12 +37,7 @@ const Screen_1 = require("../../views/Screen");
  *   return (
  *     <Stack>
  *       <Stack.Screen name="index">
- *         <Stack.Header>
- *           <Stack.Header.Title>Layout title</Stack.Header.Title>
- *           <Stack.Header.Right>
- *             <Stack.Header.Button onPress={() => alert('Right pressed')} />
- *           </Stack.Header.Right>
- *         </Stack.Header>
+ *         <Stack.Header blurEffect="systemMaterial" />
  *       </Stack.Screen>
  *     </Stack>
  *   );
@@ -74,7 +59,10 @@ function appendStackHeaderPropsToOptions(options, props) {
     if (props.asChild) {
         return { ...options, header: () => props.children };
     }
-    let updatedOptions = {
+    if (props.children && !props.asChild) {
+        console.warn(`To render a custom header, set the 'asChild' prop to true on Stack.Header.`);
+    }
+    return {
         ...options,
         headerShown: !props.hidden,
         headerBlurEffect: props.blurEffect,
@@ -87,33 +75,5 @@ function appendStackHeaderPropsToOptions(options, props) {
         headerShadowVisible: flattenedStyle?.shadowColor !== 'transparent',
         headerLargeTitleShadowVisible: flattenedLargeStyle?.shadowColor !== 'transparent',
     };
-    function appendChildOptions(child, options) {
-        let updatedOptions = options;
-        if ((0, children_1.isChildOfType)(child, StackHeaderTitle_1.StackHeaderTitle)) {
-            updatedOptions = (0, StackHeaderTitle_1.appendStackHeaderTitlePropsToOptions)(updatedOptions, child.props);
-        }
-        else if ((0, children_1.isChildOfType)(child, StackHeaderLeftRight_1.StackHeaderLeft)) {
-            updatedOptions = (0, StackHeaderLeftRight_1.appendStackHeaderLeftPropsToOptions)(updatedOptions, child.props);
-        }
-        else if ((0, children_1.isChildOfType)(child, StackHeaderLeftRight_1.StackHeaderRight)) {
-            updatedOptions = (0, StackHeaderLeftRight_1.appendStackHeaderRightPropsToOptions)(updatedOptions, child.props);
-        }
-        else if ((0, children_1.isChildOfType)(child, StackHeaderBackButton_1.StackHeaderBackButton)) {
-            updatedOptions = (0, StackHeaderBackButton_1.appendStackHeaderBackButtonPropsToOptions)(updatedOptions, child.props);
-        }
-        else if ((0, children_1.isChildOfType)(child, StackSearchBar_1.StackSearchBar)) {
-            updatedOptions = (0, StackSearchBar_1.appendStackSearchBarPropsToOptions)(updatedOptions, child.props);
-        }
-        else {
-            console.warn(`Warning: Unknown child element passed to Stack.Header: ${child.type.name ?? child.type}`);
-        }
-        return updatedOptions;
-    }
-    react_1.Children.forEach(props.children, (child) => {
-        if ((0, react_1.isValidElement)(child)) {
-            updatedOptions = appendChildOptions(child, updatedOptions);
-        }
-    });
-    return updatedOptions;
 }
 //# sourceMappingURL=StackHeaderComponent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StackHeaderComponent.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import { NativeStackNavigationOptions } from '@react-navigation/native-stack';\nimport { Children, isValidElement, useMemo, type ReactNode } from 'react';\nimport { StyleSheet, type ColorValue, type StyleProp } from 'react-native';\nimport type { ScreenStackHeaderConfigProps } from 'react-native-screens';\n\nimport {\n  appendStackHeaderBackButtonPropsToOptions,\n  StackHeaderBackButton,\n} from './StackHeaderBackButton';\nimport {\n  appendStackHeaderLeftPropsToOptions,\n  appendStackHeaderRightPropsToOptions,\n  StackHeaderLeft,\n  StackHeaderRight,\n} from './StackHeaderLeftRight';\nimport { appendStackHeaderTitlePropsToOptions, StackHeaderTitle } from './StackHeaderTitle';\nimport { appendStackSearchBarPropsToOptions, StackSearchBar } from './StackSearchBar';\nimport { isChildOfType } from '../../utils/children';\nimport { Screen } from '../../views/Screen';\n\nexport interface StackHeaderProps {\n  /**\n   * Child elements to compose the header. Can include Stack.Header.Title, Stack.Header.Left,\n   * Stack.Header.Right, Stack.Header.BackButton, and Stack.Header.SearchBar components.\n   */\n  children?: ReactNode;\n  /**\n   * Whether to hide the header completely. When set to `true`, the header will not be rendered.\n   *\n   * @default false\n   */\n  hidden?: boolean;\n  /**\n   * When `true`, renders children as a custom header component, replacing the default header entirely.\n   * Use this to implement fully custom header layouts.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * The blur effect to apply to the header background on iOS.\n   * Common values include 'regular', 'prominent', 'systemMaterial', etc.\n   *\n   * @platform ios\n   */\n  blurEffect?: ScreenStackHeaderConfigProps['blurEffect'];\n  /**\n   * Style properties for the standard-sized header.\n   * - `color`: Tint color for header elements (similar to tintColor in React Navigation)\n   * - `backgroundColor`: Background color of the header\n   * - `shadowColor`: Set to 'transparent' to hide the header shadow/border\n   */\n  style?: StyleProp<{\n    color?: ColorValue; // tintColor from ReactNavigation\n    backgroundColor?: ScreenStackHeaderConfigProps['backgroundColor'];\n    shadowColor?: undefined | 'transparent';\n  }>;\n  /**\n   * Style properties for the large title header (iOS).\n   * - `backgroundColor`: Background color of the large title header\n   * - `shadowColor`: Set to 'transparent' to hide the large title shadow/border\n   *\n   * @platform ios\n   */\n  largeStyle?: StyleProp<{\n    backgroundColor?: ScreenStackHeaderConfigProps['largeTitleBackgroundColor'];\n    shadowColor?: undefined | 'transparent';\n  }>;\n}\n\n/**\n * The component used to configure the whole stack header.\n *\n * When used inside a screen, it allows you to customize the header dynamically by composing\n * header subcomponents (title, left/right areas, back button, search bar, etc.).\n *\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Page() {\n *   return (\n *     <>\n *       <Stack.Header>\n *         <Stack.Header.Title>Page title</Stack.Header.Title>\n *         <Stack.Header.Left>\n *           <Stack.Header.Button onPress={() => alert('Left pressed')} />\n *         </Stack.Header.Left>\n *         <Stack.Header.Right>\n *           <Stack.Header.Button onPress={() => alert('Right pressed')} />\n *         </Stack.Header.Right>\n *       </Stack.Header>\n *       <ScreenContent />\n *     </>\n *   );\n * }\n * ```\n *\n * When used inside a layout, it needs to be wrapped in `Stack.Screen` to take effect.\n *\n * Example (inside a layout):\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Layout() {\n *   return (\n *     <Stack>\n *       <Stack.Screen name=\"index\">\n *         <Stack.Header>\n *           <Stack.Header.Title>Layout title</Stack.Header.Title>\n *           <Stack.Header.Right>\n *             <Stack.Header.Button onPress={() => alert('Right pressed')} />\n *           </Stack.Header.Right>\n *         </Stack.Header>\n *       </Stack.Screen>\n *     </Stack>\n *   );\n * }\n * ```\n */\nexport function StackHeaderComponent(props: StackHeaderProps) {\n  // This component will only render when used inside a page\n  // but only if it is not wrapped in Stack.Screen\n  const updatedOptions = useMemo(() => appendStackHeaderPropsToOptions({}, props), [props]);\n  return <Screen options={updatedOptions} />;\n}\n\nexport function appendStackHeaderPropsToOptions(\n  options: NativeStackNavigationOptions,\n  props: StackHeaderProps\n): NativeStackNavigationOptions {\n  const flattenedStyle = StyleSheet.flatten(props.style);\n  const flattenedLargeStyle = StyleSheet.flatten(props.largeStyle);\n\n  if (props.hidden) {\n    return { ...options, headerShown: false };\n  }\n\n  if (props.asChild) {\n    return { ...options, header: () => props.children };\n  }\n\n  let updatedOptions: NativeStackNavigationOptions = {\n    ...options,\n    headerShown: !props.hidden,\n    headerBlurEffect: props.blurEffect,\n    headerStyle: {\n      backgroundColor: flattenedStyle?.backgroundColor as string | undefined,\n    },\n    headerLargeStyle: {\n      backgroundColor: flattenedLargeStyle?.backgroundColor as string | undefined,\n    },\n    headerShadowVisible: flattenedStyle?.shadowColor !== 'transparent',\n    headerLargeTitleShadowVisible: flattenedLargeStyle?.shadowColor !== 'transparent',\n  };\n\n  function appendChildOptions(child: React.ReactElement, options: NativeStackNavigationOptions) {\n    let updatedOptions = options;\n    if (isChildOfType(child, StackHeaderTitle)) {\n      updatedOptions = appendStackHeaderTitlePropsToOptions(updatedOptions, child.props);\n    } else if (isChildOfType(child, StackHeaderLeft)) {\n      updatedOptions = appendStackHeaderLeftPropsToOptions(updatedOptions, child.props);\n    } else if (isChildOfType(child, StackHeaderRight)) {\n      updatedOptions = appendStackHeaderRightPropsToOptions(updatedOptions, child.props);\n    } else if (isChildOfType(child, StackHeaderBackButton)) {\n      updatedOptions = appendStackHeaderBackButtonPropsToOptions(updatedOptions, child.props);\n    } else if (isChildOfType(child, StackSearchBar)) {\n      updatedOptions = appendStackSearchBarPropsToOptions(updatedOptions, child.props);\n    } else {\n      console.warn(\n        `Warning: Unknown child element passed to Stack.Header: ${(child.type as { name: string }).name ?? child.type}`\n      );\n    }\n    return updatedOptions;\n  }\n\n  Children.forEach(props.children, (child) => {\n    if (isValidElement(child)) {\n      updatedOptions = appendChildOptions(child, updatedOptions);\n    }\n  });\n\n  return updatedOptions;\n}\n"]}
+{"version":3,"file":"StackHeaderComponent.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderComponent.tsx"],"names":[],"mappings":";;AA+FA,oDAKC;AAED,0EAgCC;AArID,iCAAgD;AAChD,+CAA2E;AAG3E,+CAA4C;AAmD5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,SAAgB,oBAAoB,CAAC,KAAuB;IAC1D,0DAA0D;IAC1D,gDAAgD;IAChD,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,+BAA+B,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1F,OAAO,CAAC,eAAM,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,EAAG,CAAC;AAC7C,CAAC;AAED,SAAgB,+BAA+B,CAC7C,OAAqC,EACrC,KAAuB;IAEvB,MAAM,cAAc,GAAG,yBAAU,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvD,MAAM,mBAAmB,GAAG,yBAAU,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAEjE,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACjB,OAAO,EAAE,GAAG,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC;IAC5C,CAAC;IAED,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,OAAO,EAAE,GAAG,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IACtD,CAAC;IAED,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QACrC,OAAO,CAAC,IAAI,CAAC,4EAA4E,CAAC,CAAC;IAC7F,CAAC;IAED,OAAO;QACL,GAAG,OAAO;QACV,WAAW,EAAE,CAAC,KAAK,CAAC,MAAM;QAC1B,gBAAgB,EAAE,KAAK,CAAC,UAAU;QAClC,WAAW,EAAE;YACX,eAAe,EAAE,cAAc,EAAE,eAAqC;SACvE;QACD,gBAAgB,EAAE;YAChB,eAAe,EAAE,mBAAmB,EAAE,eAAqC;SAC5E;QACD,mBAAmB,EAAE,cAAc,EAAE,WAAW,KAAK,aAAa;QAClE,6BAA6B,EAAE,mBAAmB,EAAE,WAAW,KAAK,aAAa;KAClF,CAAC;AACJ,CAAC","sourcesContent":["import { NativeStackNavigationOptions } from '@react-navigation/native-stack';\nimport { useMemo, type ReactNode } from 'react';\nimport { StyleSheet, type ColorValue, type StyleProp } from 'react-native';\nimport type { ScreenStackHeaderConfigProps } from 'react-native-screens';\n\nimport { Screen } from '../../views/Screen';\n\nexport interface StackHeaderProps {\n  /**\n   * Child elements for custom header when `asChild` is true.\n   */\n  children?: ReactNode;\n  /**\n   * Whether to hide the header completely. When set to `true`, the header will not be rendered.\n   *\n   * @default false\n   */\n  hidden?: boolean;\n  /**\n   * When `true`, renders children as a custom header component, replacing the default header entirely.\n   * Use this to implement fully custom header layouts.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * The blur effect to apply to the header background on iOS.\n   * Common values include 'regular', 'prominent', 'systemMaterial', etc.\n   *\n   * @platform ios\n   */\n  blurEffect?: ScreenStackHeaderConfigProps['blurEffect'];\n  /**\n   * Style properties for the standard-sized header.\n   * - `color`: Tint color for header elements (similar to tintColor in React Navigation)\n   * - `backgroundColor`: Background color of the header\n   * - `shadowColor`: Set to 'transparent' to hide the header shadow/border\n   */\n  style?: StyleProp<{\n    color?: ColorValue; // tintColor from ReactNavigation\n    backgroundColor?: ScreenStackHeaderConfigProps['backgroundColor'];\n    shadowColor?: undefined | 'transparent';\n  }>;\n  /**\n   * Style properties for the large title header (iOS).\n   * - `backgroundColor`: Background color of the large title header\n   * - `shadowColor`: Set to 'transparent' to hide the large title shadow/border\n   *\n   * @platform ios\n   */\n  largeStyle?: StyleProp<{\n    backgroundColor?: ScreenStackHeaderConfigProps['largeTitleBackgroundColor'];\n    shadowColor?: undefined | 'transparent';\n  }>;\n}\n\n/**\n * The component used to configure header styling for a stack screen.\n *\n * Use this component to set header appearance properties like blur effect, background color,\n * and shadow visibility.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Page() {\n *   return (\n *     <>\n *       <Stack.Header\n *         blurEffect=\"systemMaterial\"\n *         style={{ backgroundColor: '#fff' }}\n *       />\n *       <ScreenContent />\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * When used inside a layout with Stack.Screen:\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Layout() {\n *   return (\n *     <Stack>\n *       <Stack.Screen name=\"index\">\n *         <Stack.Header blurEffect=\"systemMaterial\" />\n *       </Stack.Screen>\n *     </Stack>\n *   );\n * }\n * ```\n */\nexport function StackHeaderComponent(props: StackHeaderProps) {\n  // This component will only render when used inside a page\n  // but only if it is not wrapped in Stack.Screen\n  const updatedOptions = useMemo(() => appendStackHeaderPropsToOptions({}, props), [props]);\n  return <Screen options={updatedOptions} />;\n}\n\nexport function appendStackHeaderPropsToOptions(\n  options: NativeStackNavigationOptions,\n  props: StackHeaderProps\n): NativeStackNavigationOptions {\n  const flattenedStyle = StyleSheet.flatten(props.style);\n  const flattenedLargeStyle = StyleSheet.flatten(props.largeStyle);\n\n  if (props.hidden) {\n    return { ...options, headerShown: false };\n  }\n\n  if (props.asChild) {\n    return { ...options, header: () => props.children };\n  }\n\n  if (props.children && !props.asChild) {\n    console.warn(`To render a custom header, set the 'asChild' prop to true on Stack.Header.`);\n  }\n\n  return {\n    ...options,\n    headerShown: !props.hidden,\n    headerBlurEffect: props.blurEffect,\n    headerStyle: {\n      backgroundColor: flattenedStyle?.backgroundColor as string | undefined,\n    },\n    headerLargeStyle: {\n      backgroundColor: flattenedLargeStyle?.backgroundColor as string | undefined,\n    },\n    headerShadowVisible: flattenedStyle?.shadowColor !== 'transparent',\n    headerLargeTitleShadowVisible: flattenedLargeStyle?.shadowColor !== 'transparent',\n  };\n}\n"]}

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

@@ -1,9 +1,14 @@
 import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import { type PropsWithChildren } from 'react';
+import { StackScreenTitle, StackScreenBackButton } from './screen';
 export interface StackScreenProps extends PropsWithChildren {
     name?: string;
     options?: NativeStackNavigationOptions;
 }
 export declare function StackScreen({ children, options, ...rest }: StackScreenProps): import("react").JSX.Element;
+export declare namespace StackScreen {
+    var Title: typeof StackScreenTitle;
+    var BackButton: typeof StackScreenBackButton;
+}
 export declare function appendScreenStackPropsToOptions(options: NativeStackNavigationOptions, props: StackScreenProps): NativeStackNavigationOptions;
 //# sourceMappingURL=StackScreen.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StackScreen.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackScreen.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAqC,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AASlF,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,4BAA4B,CAAC;CACxC;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BAU3E;AAED,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,4BAA4B,EACrC,KAAK,EAAE,gBAAgB,GACtB,4BAA4B,CAkB9B"}
+{"version":3,"file":"StackScreen.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackScreen.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAqC,KAAK,iBAAiB,EAAkB,MAAM,OAAO,CAAC;AAGlG,OAAO,EACL,gBAAgB,EAEhB,qBAAqB,EAEtB,MAAM,UAAU,CAAC;AAKlB,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,4BAA4B,CAAC;CACxC;AAUD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BAmB3E;yBAnBe,WAAW;;;;AAwB3B,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,4BAA4B,EACrC,KAAK,EAAE,gBAAgB,GACtB,4BAA4B,CA2C9B"}

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

@@ -5,24 +5,51 @@ exports.StackScreen = StackScreen;
 exports.appendScreenStackPropsToOptions = appendScreenStackPropsToOptions;
 const react_1 = require("react");
 const StackHeaderComponent_1 = require("./StackHeaderComponent");
+const screen_1 = require("./screen");
+const toolbar_1 = require("./toolbar");
+const children_1 = require("../../utils/children");
 const Screen_1 = require("../../views/Screen");
+function extractBottomToolbars(children) {
+    return ((0, children_1.getAllChildrenOfType)(children, toolbar_1.StackToolbar).filter((child) => child.props.placement === 'bottom' || child.props.placement === undefined) ?? []);
+}
 function StackScreen({ children, options, ...rest }) {
     // This component will only render when used inside a page.
     const updatedOptions = (0, react_1.useMemo)(() => appendScreenStackPropsToOptions(options ?? {}, {
         children,
     }), [options, children]);
-    return <Screen_1.Screen {...rest} options={updatedOptions}/>;
+    const bottomToolbars = (0, react_1.useMemo)(() => extractBottomToolbars(children), [children]);
+    return (<>
+      <Screen_1.Screen {...rest} options={updatedOptions}/>
+      {/* Bottom toolbar is a native component rendered separately */}
+      {bottomToolbars}
+    </>);
 }
+StackScreen.Title = screen_1.StackScreenTitle;
+StackScreen.BackButton = screen_1.StackScreenBackButton;
 function appendScreenStackPropsToOptions(options, props) {
     let updatedOptions = { ...options, ...props.options };
-    function appendChildOptions(child, options) {
-        if (child.type === StackHeaderComponent_1.StackHeaderComponent) {
-            updatedOptions = (0, StackHeaderComponent_1.appendStackHeaderPropsToOptions)(options, child.props);
+    function appendChildOptions(child, opts) {
+        if ((0, children_1.isChildOfType)(child, StackHeaderComponent_1.StackHeaderComponent)) {
+            return (0, StackHeaderComponent_1.appendStackHeaderPropsToOptions)(opts, child.props);
+        }
+        if ((0, children_1.isChildOfType)(child, screen_1.StackScreenTitle)) {
+            return (0, screen_1.appendStackScreenTitlePropsToOptions)(opts, child.props);
+        }
+        if ((0, children_1.isChildOfType)(child, screen_1.StackScreenBackButton)) {
+            return (0, screen_1.appendStackScreenBackButtonPropsToOptions)(opts, child.props);
         }
-        else {
-            console.warn(`Warning: Unknown child element passed to Stack.Screen: ${child.type.name ?? child.type}`);
+        if ((0, children_1.isChildOfType)(child, toolbar_1.StackToolbar)) {
+            const placement = child.props.placement ?? 'bottom';
+            if (placement === 'bottom') {
+                throw new Error(`Stack.Toolbar with placement="bottom" cannot be used inside Stack.Screen in _layout.tsx. Please move it to the page component.`);
+            }
+            return (0, toolbar_1.appendStackToolbarPropsToOptions)(opts, child.props);
         }
-        return updatedOptions;
+        const typeName = typeof child.type === 'function'
+            ? child.type.name || 'Unknown'
+            : String(child.type);
+        console.warn(`Unknown child element passed to Stack.Screen: ${typeName}`);
+        return opts;
     }
     react_1.Children.forEach(props.children, (child) => {
         if ((0, react_1.isValidElement)(child)) {

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

@@ -1 +1 @@
-{"version":3,"file":"StackScreen.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackScreen.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAgBb,kCAUC;AAED,0EAqBC;AA/CD,iCAAkF;AAElF,iEAIgC;AAChC,+CAA4C;AAO5C,SAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,EAAoB;IAC1E,2DAA2D;IAC3D,MAAM,cAAc,GAAG,IAAA,eAAO,EAC5B,GAAG,EAAE,CACH,+BAA+B,CAAC,OAAO,IAAI,EAAE,EAAE;QAC7C,QAAQ;KACT,CAAC,EACJ,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAC;IACF,OAAO,CAAC,eAAM,CAAC,IAAI,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,EAAG,CAAC;AACvD,CAAC;AAED,SAAgB,+BAA+B,CAC7C,OAAqC,EACrC,KAAuB;IAEvB,IAAI,cAAc,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,KAAK,CAAC,OAAO,EAAE,CAAC;IACtD,SAAS,kBAAkB,CAAC,KAAyB,EAAE,OAAqC;QAC1F,IAAI,KAAK,CAAC,IAAI,KAAK,2CAAoB,EAAE,CAAC;YACxC,cAAc,GAAG,IAAA,sDAA+B,EAAC,OAAO,EAAE,KAAK,CAAC,KAAyB,CAAC,CAAC;QAC7F,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,IAAI,CACV,0DAA2D,KAAK,CAAC,IAAyB,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,EAAE,CAChH,CAAC;QACJ,CAAC;QACD,OAAO,cAAc,CAAC;IACxB,CAAC;IACD,gBAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACzC,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE,CAAC;YAC1B,cAAc,GAAG,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC,CAAC,CAAC;IACH,OAAO,cAAc,CAAC;AACxB,CAAC","sourcesContent":["'use client';\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack';\nimport { Children, isValidElement, useMemo, type PropsWithChildren } from 'react';\n\nimport {\n  StackHeaderComponent,\n  appendStackHeaderPropsToOptions,\n  type StackHeaderProps,\n} from './StackHeaderComponent';\nimport { Screen } from '../../views/Screen';\n\nexport interface StackScreenProps extends PropsWithChildren {\n  name?: string;\n  options?: NativeStackNavigationOptions;\n}\n\nexport function StackScreen({ children, options, ...rest }: StackScreenProps) {\n  // This component will only render when used inside a page.\n  const updatedOptions = useMemo(\n    () =>\n      appendScreenStackPropsToOptions(options ?? {}, {\n        children,\n      }),\n    [options, children]\n  );\n  return <Screen {...rest} options={updatedOptions} />;\n}\n\nexport function appendScreenStackPropsToOptions(\n  options: NativeStackNavigationOptions,\n  props: StackScreenProps\n): NativeStackNavigationOptions {\n  let updatedOptions = { ...options, ...props.options };\n  function appendChildOptions(child: React.ReactElement, options: NativeStackNavigationOptions) {\n    if (child.type === StackHeaderComponent) {\n      updatedOptions = appendStackHeaderPropsToOptions(options, child.props as StackHeaderProps);\n    } else {\n      console.warn(\n        `Warning: Unknown child element passed to Stack.Screen: ${(child.type as { name: string }).name ?? child.type}`\n      );\n    }\n    return updatedOptions;\n  }\n  Children.forEach(props.children, (child) => {\n    if (isValidElement(child)) {\n      updatedOptions = appendChildOptions(child, updatedOptions);\n    }\n  });\n  return updatedOptions;\n}\n"]}
+{"version":3,"file":"StackScreen.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack';\nimport { Children, isValidElement, useMemo, type PropsWithChildren, type ReactNode } from 'react';\n\nimport { StackHeaderComponent, appendStackHeaderPropsToOptions } from './StackHeaderComponent';\nimport {\n  StackScreenTitle,\n  appendStackScreenTitlePropsToOptions,\n  StackScreenBackButton,\n  appendStackScreenBackButtonPropsToOptions,\n} from './screen';\nimport { StackToolbar, appendStackToolbarPropsToOptions, type StackToolbarProps } from './toolbar';\nimport { getAllChildrenOfType, isChildOfType } from '../../utils/children';\nimport { Screen } from '../../views/Screen';\n\nexport interface StackScreenProps extends PropsWithChildren {\n  name?: string;\n  options?: NativeStackNavigationOptions;\n}\n\nfunction extractBottomToolbars(children: ReactNode): React.ReactElement<StackToolbarProps>[] {\n  return (\n    getAllChildrenOfType(children, StackToolbar).filter(\n      (child) => child.props.placement === 'bottom' || child.props.placement === undefined\n    ) ?? []\n  );\n}\n\nexport function StackScreen({ children, options, ...rest }: StackScreenProps) {\n  // This component will only render when used inside a page.\n  const updatedOptions = useMemo(\n    () =>\n      appendScreenStackPropsToOptions(options ?? {}, {\n        children,\n      }),\n    [options, children]\n  );\n\n  const bottomToolbars = useMemo(() => extractBottomToolbars(children), [children]);\n\n  return (\n    <>\n      <Screen {...rest} options={updatedOptions} />\n      {/* Bottom toolbar is a native component rendered separately */}\n      {bottomToolbars}\n    </>\n  );\n}\n\nStackScreen.Title = StackScreenTitle;\nStackScreen.BackButton = StackScreenBackButton;\n\nexport function appendScreenStackPropsToOptions(\n  options: NativeStackNavigationOptions,\n  props: StackScreenProps\n): NativeStackNavigationOptions {\n  let updatedOptions = { ...options, ...props.options };\n\n  function appendChildOptions(child: React.ReactElement, opts: NativeStackNavigationOptions) {\n    if (isChildOfType(child, StackHeaderComponent)) {\n      return appendStackHeaderPropsToOptions(opts, child.props);\n    }\n\n    if (isChildOfType(child, StackScreenTitle)) {\n      return appendStackScreenTitlePropsToOptions(opts, child.props);\n    }\n\n    if (isChildOfType(child, StackScreenBackButton)) {\n      return appendStackScreenBackButtonPropsToOptions(opts, child.props);\n    }\n\n    if (isChildOfType(child, StackToolbar)) {\n      const placement = child.props.placement ?? 'bottom';\n\n      if (placement === 'bottom') {\n        throw new Error(\n          `Stack.Toolbar with placement=\"bottom\" cannot be used inside Stack.Screen in _layout.tsx. Please move it to the page component.`\n        );\n      }\n\n      return appendStackToolbarPropsToOptions(opts, child.props);\n    }\n\n    const typeName =\n      typeof child.type === 'function'\n        ? (child.type as { name?: string }).name || 'Unknown'\n        : String(child.type);\n    console.warn(`Unknown child element passed to Stack.Screen: ${typeName}`);\n    return opts;\n  }\n\n  Children.forEach(props.children, (child) => {\n    if (isValidElement(child)) {\n      updatedOptions = appendChildOptions(child, updatedOptions);\n    }\n  });\n\n  return updatedOptions;\n}\n"]}

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

@@ -2,6 +2,34 @@ import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import type { SearchBarProps } from 'react-native-screens';
 export interface StackSearchBarProps extends SearchBarProps {
 }
+/**
+ * A search bar component that integrates with the native stack header.
+ *
+ * > **Note:** Using `Stack.SearchBar` will automatically make the header visible
+ * (`headerShown: true`), as the search bar is rendered as part of the native header.
+ *
+ * To display the search bar in the bottom toolbar on iOS 26+, use
+ * `Stack.Toolbar.SearchBarSlot` inside `Stack.Toolbar`.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.SearchBar
+ *         placeholder="Search..."
+ *         onChangeText={(text) => console.log(text)}
+ *       />
+ *      <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform ios
+ */
 export declare function StackSearchBar(props: StackSearchBarProps): import("react").JSX.Element;
 export declare function appendStackSearchBarPropsToOptions(options: NativeStackNavigationOptions, props: StackSearchBarProps): NativeStackNavigationOptions;
 //# sourceMappingURL=StackSearchBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StackSearchBar.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackSearchBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAE9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAO3D,MAAM,WAAW,mBAAoB,SAAQ,cAAc;CAAG;AAE9D,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,+BAGxD;AAED,wBAAgB,kCAAkC,CAChD,OAAO,EAAE,4BAA4B,EACrC,KAAK,EAAE,mBAAmB,GACzB,4BAA4B,CAO9B"}
+{"version":3,"file":"StackSearchBar.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackSearchBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAE9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAO3D,MAAM,WAAW,mBAAoB,SAAQ,cAAc;CAAG;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,+BAGxD;AAED,wBAAgB,kCAAkC,CAChD,OAAO,EAAE,4BAA4B,EACrC,KAAK,EAAE,mBAAmB,GACzB,4BAA4B,CAQ9B"}

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

@@ -4,6 +4,34 @@ exports.StackSearchBar = StackSearchBar;
 exports.appendStackSearchBarPropsToOptions = appendStackSearchBarPropsToOptions;
 const react_1 = require("react");
 const Screen_1 = require("../../views/Screen");
+/**
+ * A search bar component that integrates with the native stack header.
+ *
+ * > **Note:** Using `Stack.SearchBar` will automatically make the header visible
+ * (`headerShown: true`), as the search bar is rendered as part of the native header.
+ *
+ * To display the search bar in the bottom toolbar on iOS 26+, use
+ * `Stack.Toolbar.SearchBarSlot` inside `Stack.Toolbar`.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.SearchBar
+ *         placeholder="Search..."
+ *         onChangeText={(text) => console.log(text)}
+ *       />
+ *      <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform ios
+ */
 function StackSearchBar(props) {
     const updatedOptions = (0, react_1.useMemo)(() => appendStackSearchBarPropsToOptions({}, props), [props]);
     return <Screen_1.Screen options={updatedOptions}/>;
@@ -11,6 +39,7 @@ function StackSearchBar(props) {
 function appendStackSearchBarPropsToOptions(options, props) {
     return {
         ...options,
+        headerShown: true,
         headerSearchBarOptions: {
             ...props,
         },

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

@@ -1 +1 @@
-{"version":3,"file":"StackSearchBar.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackSearchBar.tsx"],"names":[],"mappings":";;AAWA,wCAGC;AAED,gFAUC;AAzBD,iCAAgC;AAGhC,+CAA4C;AAO5C,SAAgB,cAAc,CAAC,KAA0B;IACvD,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,kCAAkC,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC7F,OAAO,CAAC,eAAM,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,EAAG,CAAC;AAC7C,CAAC;AAED,SAAgB,kCAAkC,CAChD,OAAqC,EACrC,KAA0B;IAE1B,OAAO;QACL,GAAG,OAAO;QACV,sBAAsB,EAAE;YACtB,GAAG,KAAK;SACT;KACF,CAAC;AACJ,CAAC","sourcesContent":["import { NativeStackNavigationOptions } from '@react-navigation/native-stack';\nimport { useMemo } from 'react';\nimport type { SearchBarProps } from 'react-native-screens';\n\nimport { Screen } from '../../views/Screen';\n\n// TODO: Discuss adding SearchBarPreferredSlot to react-native-screens header items\n// and exposing it as Stack.Header.SearchBarPreferredSlot\n// https://linear.app/expo/issue/ENG-18555\nexport interface StackSearchBarProps extends SearchBarProps {}\n\nexport function StackSearchBar(props: StackSearchBarProps) {\n  const updatedOptions = useMemo(() => appendStackSearchBarPropsToOptions({}, props), [props]);\n  return <Screen options={updatedOptions} />;\n}\n\nexport function appendStackSearchBarPropsToOptions(\n  options: NativeStackNavigationOptions,\n  props: StackSearchBarProps\n): NativeStackNavigationOptions {\n  return {\n    ...options,\n    headerSearchBarOptions: {\n      ...props,\n    },\n  };\n}\n"]}
+{"version":3,"file":"StackSearchBar.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackSearchBar.tsx"],"names":[],"mappings":";;AAuCA,wCAGC;AAED,gFAWC;AAtDD,iCAAgC;AAGhC,+CAA4C;AAO5C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,SAAgB,cAAc,CAAC,KAA0B;IACvD,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,kCAAkC,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC7F,OAAO,CAAC,eAAM,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,EAAG,CAAC;AAC7C,CAAC;AAED,SAAgB,kCAAkC,CAChD,OAAqC,EACrC,KAA0B;IAE1B,OAAO;QACL,GAAG,OAAO;QACV,WAAW,EAAE,IAAI;QACjB,sBAAsB,EAAE;YACtB,GAAG,KAAK;SACT;KACF,CAAC;AACJ,CAAC","sourcesContent":["import { NativeStackNavigationOptions } from '@react-navigation/native-stack';\nimport { useMemo } from 'react';\nimport type { SearchBarProps } from 'react-native-screens';\n\nimport { Screen } from '../../views/Screen';\n\n// TODO: Discuss adding SearchBarSlot to react-native-screens header items\n// and exposing it as Stack.Header.SearchBarPreferredSlot\n// https://linear.app/expo/issue/ENG-18555\nexport interface StackSearchBarProps extends SearchBarProps {}\n\n/**\n * A search bar component that integrates with the native stack header.\n *\n * > **Note:** Using `Stack.SearchBar` will automatically make the header visible\n * (`headerShown: true`), as the search bar is rendered as part of the native header.\n *\n * To display the search bar in the bottom toolbar on iOS 26+, use\n * `Stack.Toolbar.SearchBarSlot` inside `Stack.Toolbar`.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Page() {\n *   return (\n *     <>\n *       <Stack.SearchBar\n *         placeholder=\"Search...\"\n *         onChangeText={(text) => console.log(text)}\n *       />\n *      <ScreenContent />\n *     </>\n *   );\n * }\n * ```\n *\n * @platform ios\n */\nexport function StackSearchBar(props: StackSearchBarProps) {\n  const updatedOptions = useMemo(() => appendStackSearchBarPropsToOptions({}, props), [props]);\n  return <Screen options={updatedOptions} />;\n}\n\nexport function appendStackSearchBarPropsToOptions(\n  options: NativeStackNavigationOptions,\n  props: StackSearchBarProps\n): NativeStackNavigationOptions {\n  return {\n    ...options,\n    headerShown: true,\n    headerSearchBarOptions: {\n      ...props,\n    },\n  };\n}\n"]}

package/build/layouts/stack-utils/common-primitives.d.ts

@@ -1,24 +1,24 @@
 import { type ImageSourcePropType, type StyleProp, type TextStyle } from 'react-native';
 import type { SFSymbol } from 'sf-symbols-typescript';
-export interface StackHeaderLabelProps {
+export interface StackToolbarLabelProps {
     /**
      * The text to display as the label for the tab.
      */
     children?: string;
 }
-export declare const StackHeaderLabel: React.FC<StackHeaderLabelProps>;
-export type StackHeaderIconProps = {
+export declare const StackToolbarLabel: React.FC<StackToolbarLabelProps>;
+export type StackToolbarIconProps = {
     src: ImageSourcePropType;
 } | {
     sf: SFSymbol;
 };
-export declare const StackHeaderIcon: React.FC<StackHeaderIconProps>;
-export interface StackHeaderBadgeProps {
+export declare const StackToolbarIcon: React.FC<StackToolbarIconProps>;
+export interface StackToolbarBadgeProps {
     /**
      * The text to display as the badge
      */
     children?: string;
     style?: StyleProp<Pick<TextStyle, 'fontFamily' | 'fontSize' | 'color' | 'fontWeight' | 'backgroundColor'>>;
 }
-export declare const StackHeaderBadge: React.FC<StackHeaderBadgeProps>;
+export declare const StackToolbarBadge: React.FC<StackToolbarBadgeProps>;
 //# sourceMappingURL=common-primitives.d.ts.map

package/build/layouts/stack-utils/common-primitives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common-primitives.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/common-primitives.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACxF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAItD,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAAS,CAAC;AAEvE,MAAM,MAAM,oBAAoB,GAC5B;IAEE,GAAG,EAAE,mBAAmB,CAAC;CAC1B,GACD;IACE,EAAE,EAAE,QAAQ,CAAC;CACd,CAAC;AAEN,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAAQ,CAAC;AAEpE,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,KAAK,CAAC,EAAE,SAAS,CACf,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,iBAAiB,CAAC,CACxF,CAAC;CACH;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAAS,CAAC"}
+{"version":3,"file":"common-primitives.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/common-primitives.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACxF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAItD,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAS,CAAC;AAEzE,MAAM,MAAM,qBAAqB,GAC7B;IAEE,GAAG,EAAE,mBAAmB,CAAC;CAC1B,GACD;IACE,EAAE,EAAE,QAAQ,CAAC;CACd,CAAC;AAEN,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAAQ,CAAC;AAEtE,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,KAAK,CAAC,EAAE,SAAS,CACf,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,iBAAiB,CAAC,CACxF,CAAC;CACH;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAS,CAAC"}

package/build/layouts/stack-utils/common-primitives.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StackHeaderBadge = exports.StackHeaderIcon = exports.StackHeaderLabel = void 0;
+exports.StackToolbarBadge = exports.StackToolbarIcon = exports.StackToolbarLabel = void 0;
 const primitives_1 = require("../../primitives");
-exports.StackHeaderLabel = primitives_1.Label;
-exports.StackHeaderIcon = primitives_1.Icon;
-exports.StackHeaderBadge = primitives_1.Badge;
+exports.StackToolbarLabel = primitives_1.Label;
+exports.StackToolbarIcon = primitives_1.Icon;
+exports.StackToolbarBadge = primitives_1.Badge;
 //# sourceMappingURL=common-primitives.js.map

package/build/layouts/stack-utils/common-primitives.js.map

@@ -1 +1 @@
-{"version":3,"file":"common-primitives.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/common-primitives.tsx"],"names":[],"mappings":";;;AAGA,iDAAsD;AASzC,QAAA,gBAAgB,GAAoC,kBAAK,CAAC;AAW1D,QAAA,eAAe,GAAmC,iBAAI,CAAC;AAavD,QAAA,gBAAgB,GAAoC,kBAAK,CAAC","sourcesContent":["import { type ImageSourcePropType, type StyleProp, type TextStyle } from 'react-native';\nimport type { SFSymbol } from 'sf-symbols-typescript';\n\nimport { Badge, Icon, Label } from '../../primitives';\n\nexport interface StackHeaderLabelProps {\n  /**\n   * The text to display as the label for the tab.\n   */\n  children?: string;\n}\n\nexport const StackHeaderLabel: React.FC<StackHeaderLabelProps> = Label;\n\nexport type StackHeaderIconProps =\n  | {\n      // TODO: add support for vector icons\n      src: ImageSourcePropType;\n    }\n  | {\n      sf: SFSymbol;\n    };\n\nexport const StackHeaderIcon: React.FC<StackHeaderIconProps> = Icon;\n\nexport interface StackHeaderBadgeProps {\n  /**\n   * The text to display as the badge\n   */\n  children?: string;\n\n  style?: StyleProp<\n    Pick<TextStyle, 'fontFamily' | 'fontSize' | 'color' | 'fontWeight' | 'backgroundColor'>\n  >;\n}\n\nexport const StackHeaderBadge: React.FC<StackHeaderBadgeProps> = Badge;\n"]}
+{"version":3,"file":"common-primitives.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/common-primitives.tsx"],"names":[],"mappings":";;;AAGA,iDAAsD;AASzC,QAAA,iBAAiB,GAAqC,kBAAK,CAAC;AAW5D,QAAA,gBAAgB,GAAoC,iBAAI,CAAC;AAazD,QAAA,iBAAiB,GAAqC,kBAAK,CAAC","sourcesContent":["import { type ImageSourcePropType, type StyleProp, type TextStyle } from 'react-native';\nimport type { SFSymbol } from 'sf-symbols-typescript';\n\nimport { Badge, Icon, Label } from '../../primitives';\n\nexport interface StackToolbarLabelProps {\n  /**\n   * The text to display as the label for the tab.\n   */\n  children?: string;\n}\n\nexport const StackToolbarLabel: React.FC<StackToolbarLabelProps> = Label;\n\nexport type StackToolbarIconProps =\n  | {\n      // TODO: add support for vector icons\n      src: ImageSourcePropType;\n    }\n  | {\n      sf: SFSymbol;\n    };\n\nexport const StackToolbarIcon: React.FC<StackToolbarIconProps> = Icon;\n\nexport interface StackToolbarBadgeProps {\n  /**\n   * The text to display as the badge\n   */\n  children?: string;\n\n  style?: StyleProp<\n    Pick<TextStyle, 'fontFamily' | 'fontSize' | 'color' | 'fontWeight' | 'backgroundColor'>\n  >;\n}\n\nexport const StackToolbarBadge: React.FC<StackToolbarBadgeProps> = Badge;\n"]}

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

@@ -1,28 +1,9 @@
-import { StackHeaderBackButton, type StackHeaderBackButtonProps } from './StackHeaderBackButton';
-import { StackHeaderButton, type StackHeaderButtonProps } from './StackHeaderButton';
 import { StackHeaderComponent, type StackHeaderProps } from './StackHeaderComponent';
-import { StackHeaderLeft, type StackHeaderLeftProps, StackHeaderRight, type StackHeaderRightProps } from './StackHeaderLeftRight';
-import { StackHeaderMenu, StackHeaderMenuAction, type StackHeaderMenuActionProps, type StackHeaderMenuProps } from './StackHeaderMenu';
-import { StackHeaderSpacer, type StackHeaderSpacerProps } from './StackHeaderSpacer';
-import { StackHeaderTitle, type StackHeaderTitleProps } from './StackHeaderTitle';
-import { StackHeaderView, type StackHeaderViewProps } from './StackHeaderView';
 import { StackSearchBar, type StackSearchBarProps } from './StackSearchBar';
-import { StackHeaderBadge, StackHeaderIcon, StackHeaderLabel, type StackHeaderBadgeProps, type StackHeaderIconProps, type StackHeaderLabelProps } from './common-primitives';
 import type { StackHeaderItemSharedProps } from './shared';
-export declare const StackHeader: typeof StackHeaderComponent & {
-    Left: import("react").FC<StackHeaderLeftProps>;
-    Right: import("react").FC<StackHeaderRightProps>;
-    BackButton: typeof StackHeaderBackButton;
-    Title: typeof StackHeaderTitle;
-    Button: import("react").FC<StackHeaderButtonProps>;
-    Badge: import("react").FC<StackHeaderBadgeProps>;
-    Label: import("react").FC<StackHeaderLabelProps>;
-    Icon: import("react").FC<StackHeaderIconProps>;
-    Menu: import("react").FC<StackHeaderMenuProps>;
-    MenuAction: import("react").FC<StackHeaderMenuActionProps>;
-    View: import("react").FC<StackHeaderViewProps>;
-    Spacer: import("react").FC<StackHeaderSpacerProps>;
-};
-export { StackHeaderBackButton, type StackHeaderBackButtonProps, type StackHeaderProps, StackHeaderLeft, type StackHeaderLeftProps, StackHeaderRight, type StackHeaderRightProps, StackSearchBar, type StackSearchBarProps, StackHeaderTitle, type StackHeaderTitleProps, StackHeaderButton, type StackHeaderButtonProps, StackHeaderBadge, type StackHeaderBadgeProps, StackHeaderLabel, type StackHeaderLabelProps, StackHeaderIcon, type StackHeaderIconProps, StackHeaderMenu, type StackHeaderMenuProps, StackHeaderMenuAction, type StackHeaderMenuActionProps, StackHeaderView, type StackHeaderViewProps, StackHeaderSpacer, type StackHeaderSpacerProps, type StackHeaderItemSharedProps, };
+export declare const StackHeader: typeof StackHeaderComponent;
+export { type StackHeaderProps, StackSearchBar, type StackSearchBarProps, type StackHeaderItemSharedProps, };
+export * from './toolbar';
+export * from './screen';
 export { StackScreen, appendScreenStackPropsToOptions, type StackScreenProps } from './StackScreen';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,gBAAgB,EAChB,KAAK,qBAAqB,EAC3B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,eAAe,EACf,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,oBAAoB,EAC1B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC3B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAatB,CAAC;AAEH,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,gBAAgB,EACrB,eAAe,EACf,KAAK,oBAAoB,EACzB,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,cAAc,EACd,KAAK,mBAAmB,EACxB,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,eAAe,EACf,KAAK,oBAAoB,EACzB,eAAe,EACf,KAAK,oBAAoB,EACzB,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,eAAe,EACf,KAAK,oBAAoB,EACzB,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,0BAA0B,GAChC,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,+BAA+B,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D,eAAO,MAAM,WAAW,6BAAuB,CAAC;AAEhD,OAAO,EACL,KAAK,gBAAgB,EACrB,cAAc,EACd,KAAK,mBAAmB,EACxB,KAAK,0BAA0B,GAChC,CAAC;AAEF,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,WAAW,EAAE,+BAA+B,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

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

@@ -1,43 +1,26 @@
 "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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.appendScreenStackPropsToOptions = exports.StackScreen = exports.StackHeaderSpacer = exports.StackHeaderView = exports.StackHeaderMenuAction = exports.StackHeaderMenu = exports.StackHeaderIcon = exports.StackHeaderLabel = exports.StackHeaderBadge = exports.StackHeaderButton = exports.StackHeaderTitle = exports.StackSearchBar = exports.StackHeaderRight = exports.StackHeaderLeft = exports.StackHeaderBackButton = exports.StackHeader = void 0;
-const StackHeaderBackButton_1 = require("./StackHeaderBackButton");
-Object.defineProperty(exports, "StackHeaderBackButton", { enumerable: true, get: function () { return StackHeaderBackButton_1.StackHeaderBackButton; } });
-const StackHeaderButton_1 = require("./StackHeaderButton");
-Object.defineProperty(exports, "StackHeaderButton", { enumerable: true, get: function () { return StackHeaderButton_1.StackHeaderButton; } });
+exports.appendScreenStackPropsToOptions = exports.StackScreen = exports.StackSearchBar = exports.StackHeader = void 0;
 const StackHeaderComponent_1 = require("./StackHeaderComponent");
-const StackHeaderLeftRight_1 = require("./StackHeaderLeftRight");
-Object.defineProperty(exports, "StackHeaderLeft", { enumerable: true, get: function () { return StackHeaderLeftRight_1.StackHeaderLeft; } });
-Object.defineProperty(exports, "StackHeaderRight", { enumerable: true, get: function () { return StackHeaderLeftRight_1.StackHeaderRight; } });
-const StackHeaderMenu_1 = require("./StackHeaderMenu");
-Object.defineProperty(exports, "StackHeaderMenu", { enumerable: true, get: function () { return StackHeaderMenu_1.StackHeaderMenu; } });
-Object.defineProperty(exports, "StackHeaderMenuAction", { enumerable: true, get: function () { return StackHeaderMenu_1.StackHeaderMenuAction; } });
-const StackHeaderSpacer_1 = require("./StackHeaderSpacer");
-Object.defineProperty(exports, "StackHeaderSpacer", { enumerable: true, get: function () { return StackHeaderSpacer_1.StackHeaderSpacer; } });
-const StackHeaderTitle_1 = require("./StackHeaderTitle");
-Object.defineProperty(exports, "StackHeaderTitle", { enumerable: true, get: function () { return StackHeaderTitle_1.StackHeaderTitle; } });
-const StackHeaderView_1 = require("./StackHeaderView");
-Object.defineProperty(exports, "StackHeaderView", { enumerable: true, get: function () { return StackHeaderView_1.StackHeaderView; } });
 const StackSearchBar_1 = require("./StackSearchBar");
 Object.defineProperty(exports, "StackSearchBar", { enumerable: true, get: function () { return StackSearchBar_1.StackSearchBar; } });
-const common_primitives_1 = require("./common-primitives");
-Object.defineProperty(exports, "StackHeaderBadge", { enumerable: true, get: function () { return common_primitives_1.StackHeaderBadge; } });
-Object.defineProperty(exports, "StackHeaderIcon", { enumerable: true, get: function () { return common_primitives_1.StackHeaderIcon; } });
-Object.defineProperty(exports, "StackHeaderLabel", { enumerable: true, get: function () { return common_primitives_1.StackHeaderLabel; } });
-exports.StackHeader = Object.assign(StackHeaderComponent_1.StackHeaderComponent, {
-    Left: StackHeaderLeftRight_1.StackHeaderLeft,
-    Right: StackHeaderLeftRight_1.StackHeaderRight,
-    BackButton: StackHeaderBackButton_1.StackHeaderBackButton,
-    Title: StackHeaderTitle_1.StackHeaderTitle,
-    Button: StackHeaderButton_1.StackHeaderButton,
-    Badge: common_primitives_1.StackHeaderBadge,
-    Label: common_primitives_1.StackHeaderLabel,
-    Icon: common_primitives_1.StackHeaderIcon,
-    Menu: StackHeaderMenu_1.StackHeaderMenu,
-    MenuAction: StackHeaderMenu_1.StackHeaderMenuAction,
-    View: StackHeaderView_1.StackHeaderView,
-    Spacer: StackHeaderSpacer_1.StackHeaderSpacer,
-});
+exports.StackHeader = StackHeaderComponent_1.StackHeaderComponent;
+__exportStar(require("./toolbar"), exports);
+__exportStar(require("./screen"), exports);
 var StackScreen_1 = require("./StackScreen");
 Object.defineProperty(exports, "StackScreen", { enumerable: true, get: function () { return StackScreen_1.StackScreen; } });
 Object.defineProperty(exports, "appendScreenStackPropsToOptions", { enumerable: true, get: function () { return StackScreen_1.appendScreenStackPropsToOptions; } });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/index.tsx"],"names":[],"mappings":";;;AAAA,mEAAiG;AA6C/F,sGA7CO,6CAAqB,OA6CP;AA5CvB,2DAAqF;AAuDnF,kGAvDO,qCAAiB,OAuDP;AAtDnB,iEAAqF;AACrF,iEAKgC;AAwC9B,gGA5CA,sCAAe,OA4CA;AAEf,iGA5CA,uCAAgB,OA4CA;AAzClB,uDAK2B;AAkDzB,gGAtDA,iCAAe,OAsDA;AAEf,sGAvDA,uCAAqB,OAuDA;AAnDvB,2DAAqF;AAuDnF,kGAvDO,qCAAiB,OAuDP;AAtDnB,yDAAkF;AAsChF,iGAtCO,mCAAgB,OAsCP;AArClB,uDAA+E;AAmD7E,gGAnDO,iCAAe,OAmDP;AAlDjB,qDAA4E;AAkC1E,+FAlCO,+BAAc,OAkCP;AAjChB,2DAO6B;AAgC3B,iGAtCA,oCAAgB,OAsCA;AAIhB,gGAzCA,mCAAe,OAyCA;AAFf,iGAtCA,oCAAgB,OAsCA;AA/BL,QAAA,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,2CAAoB,EAAE;IAC7D,IAAI,EAAE,sCAAe;IACrB,KAAK,EAAE,uCAAgB;IACvB,UAAU,EAAE,6CAAqB;IACjC,KAAK,EAAE,mCAAgB;IACvB,MAAM,EAAE,qCAAiB;IACzB,KAAK,EAAE,oCAAgB;IACvB,KAAK,EAAE,oCAAgB;IACvB,IAAI,EAAE,mCAAe;IACrB,IAAI,EAAE,iCAAe;IACrB,UAAU,EAAE,uCAAqB;IACjC,IAAI,EAAE,iCAAe;IACrB,MAAM,EAAE,qCAAiB;CAC1B,CAAC,CAAC;AAiCH,6CAAoG;AAA3F,0GAAA,WAAW,OAAA;AAAE,8HAAA,+BAA+B,OAAA","sourcesContent":["import { StackHeaderBackButton, type StackHeaderBackButtonProps } from './StackHeaderBackButton';\nimport { StackHeaderButton, type StackHeaderButtonProps } from './StackHeaderButton';\nimport { StackHeaderComponent, type StackHeaderProps } from './StackHeaderComponent';\nimport {\n  StackHeaderLeft,\n  type StackHeaderLeftProps,\n  StackHeaderRight,\n  type StackHeaderRightProps,\n} from './StackHeaderLeftRight';\nimport {\n  StackHeaderMenu,\n  StackHeaderMenuAction,\n  type StackHeaderMenuActionProps,\n  type StackHeaderMenuProps,\n} from './StackHeaderMenu';\nimport { StackHeaderSpacer, type StackHeaderSpacerProps } from './StackHeaderSpacer';\nimport { StackHeaderTitle, type StackHeaderTitleProps } from './StackHeaderTitle';\nimport { StackHeaderView, type StackHeaderViewProps } from './StackHeaderView';\nimport { StackSearchBar, type StackSearchBarProps } from './StackSearchBar';\nimport {\n  StackHeaderBadge,\n  StackHeaderIcon,\n  StackHeaderLabel,\n  type StackHeaderBadgeProps,\n  type StackHeaderIconProps,\n  type StackHeaderLabelProps,\n} from './common-primitives';\nimport type { StackHeaderItemSharedProps } from './shared';\n\nexport const StackHeader = Object.assign(StackHeaderComponent, {\n  Left: StackHeaderLeft,\n  Right: StackHeaderRight,\n  BackButton: StackHeaderBackButton,\n  Title: StackHeaderTitle,\n  Button: StackHeaderButton,\n  Badge: StackHeaderBadge,\n  Label: StackHeaderLabel,\n  Icon: StackHeaderIcon,\n  Menu: StackHeaderMenu,\n  MenuAction: StackHeaderMenuAction,\n  View: StackHeaderView,\n  Spacer: StackHeaderSpacer,\n});\n\nexport {\n  StackHeaderBackButton,\n  type StackHeaderBackButtonProps,\n  type StackHeaderProps,\n  StackHeaderLeft,\n  type StackHeaderLeftProps,\n  StackHeaderRight,\n  type StackHeaderRightProps,\n  StackSearchBar,\n  type StackSearchBarProps,\n  StackHeaderTitle,\n  type StackHeaderTitleProps,\n  StackHeaderButton,\n  type StackHeaderButtonProps,\n  StackHeaderBadge,\n  type StackHeaderBadgeProps,\n  StackHeaderLabel,\n  type StackHeaderLabelProps,\n  StackHeaderIcon,\n  type StackHeaderIconProps,\n  StackHeaderMenu,\n  type StackHeaderMenuProps,\n  StackHeaderMenuAction,\n  type StackHeaderMenuActionProps,\n  StackHeaderView,\n  type StackHeaderViewProps,\n  StackHeaderSpacer,\n  type StackHeaderSpacerProps,\n  type StackHeaderItemSharedProps,\n};\n\nexport { StackScreen, appendScreenStackPropsToOptions, type StackScreenProps } from './StackScreen';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,iEAAqF;AACrF,qDAA4E;AAO1E,+FAPO,+BAAc,OAOP;AAJH,QAAA,WAAW,GAAG,2CAAoB,CAAC;AAShD,4CAA0B;AAC1B,2CAAyB;AAEzB,6CAAoG;AAA3F,0GAAA,WAAW,OAAA;AAAE,8HAAA,+BAA+B,OAAA","sourcesContent":["import { StackHeaderComponent, type StackHeaderProps } from './StackHeaderComponent';\nimport { StackSearchBar, type StackSearchBarProps } from './StackSearchBar';\nimport type { StackHeaderItemSharedProps } from './shared';\n\nexport const StackHeader = StackHeaderComponent;\n\nexport {\n  type StackHeaderProps,\n  StackSearchBar,\n  type StackSearchBarProps,\n  type StackHeaderItemSharedProps,\n};\n\nexport * from './toolbar';\nexport * from './screen';\n\nexport { StackScreen, appendScreenStackPropsToOptions, type StackScreenProps } from './StackScreen';\n"]}

package/build/layouts/stack-utils/screen/StackScreenBackButton.d.ts

@@ -0,0 +1,68 @@
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
+import type { ImageSourcePropType } from 'react-native';
+import type { ScreenStackHeaderConfigProps } from 'react-native-screens';
+export interface StackScreenBackButtonProps {
+    /**
+     * The title to display for the back button.
+     */
+    children?: string;
+    /**
+     * Style for the back button title.
+     */
+    style?: NativeStackNavigationOptions['headerBackTitleStyle'];
+    /**
+     * Whether to show a context menu when long pressing the back button.
+     */
+    withMenu?: boolean;
+    /**
+     * The display mode for the back button.
+     */
+    displayMode?: ScreenStackHeaderConfigProps['backButtonDisplayMode'];
+    /**
+     * Whether to hide the back button.
+     */
+    hidden?: boolean;
+    /**
+     * Custom image source for the back button.
+     */
+    src?: ImageSourcePropType;
+}
+/**
+ * Component to configure the back button.
+ *
+ * Can be used inside Stack.Screen in a layout or directly inside a screen component.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Layout() {
+ *   return (
+ *     <Stack>
+ *       <Stack.Screen name="detail">
+ *         <Stack.Screen.BackButton displayMode="minimal">Back</Stack.Screen.BackButton>
+ *       </Stack.Screen>
+ *     </Stack>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Screen.BackButton hidden />
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform ios
+ */
+export declare function StackScreenBackButton(props: StackScreenBackButtonProps): import("react").JSX.Element;
+export declare function appendStackScreenBackButtonPropsToOptions(options: NativeStackNavigationOptions, props: StackScreenBackButtonProps): NativeStackNavigationOptions;
+//# sourceMappingURL=StackScreenBackButton.d.ts.map

package/build/layouts/stack-utils/screen/StackScreenBackButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackScreenBackButton.d.ts","sourceRoot":"","sources":["../../../../src/layouts/stack-utils/screen/StackScreenBackButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAE9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAIzE,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,4BAA4B,CAAC,sBAAsB,CAAC,CAAC;IAC7D;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,4BAA4B,CAAC,uBAAuB,CAAC,CAAC;IACpE;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,mBAAmB,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,+BAMtE;AAED,wBAAgB,yCAAyC,CACvD,OAAO,EAAE,4BAA4B,EACrC,KAAK,EAAE,0BAA0B,GAChC,4BAA4B,CAU9B"}