@momo-kits/foundation 0.169.9 → 0.169.10

package/Application/Components/HeaderAnimated.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -9,6 +10,7 @@ import React from 'react';
 import { Image } from '../../Image';
 import { Colors } from '../../Consts';
 import { useNormalizedSharedValue } from '../hooks';
+import { HeaderBarMetrics, useHeaderLayout } from '../headerLayout';
 
 const ASPECT_RATIOS: Record<
   NonNullable<HeaderAnimatedProps['aspectRatio']>,
@@ -21,16 +23,20 @@ const ASPECT_RATIOS: Record<
 
 /**
  * Parallax header image (or `children`): stretches when pulled down and fades out
- * as the content scrolls up.
+ * as the content scrolls up. Wide windows and the iPhone Duo inner display keep
+ * it at phone size, centered.
  */
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
   useScale = true,
   aspectRatio = '16/9',
+  bannerBackgroundColor,
   children,
 }) => {
   const sharedValue = useNormalizedSharedValue(animatedValue);
+  const { isBannerCentered, bannerWidth } = useHeaderLayout();
+  const ratio = ASPECT_RATIOS[aspectRatio];
   const animatedStyle = useAnimatedStyle(() => {
     let scale = 1;
     if (useScale) {
@@ -59,22 +65,36 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
     };
   });
 
+  const content = children ?? (
+    <Image
+      source={{
+        uri: image,
+      }}
+      style={styles.full}
+    />
+  );
+
+  if (!isBannerCentered) {
+    return (
+      <Animated.View
+        style={[styles.container, { aspectRatio: ratio }, animatedStyle]}
+      >
+        {content}
+      </Animated.View>
+    );
+  }
+
   return (
     <Animated.View
-      style={[
-        styles.container,
-        { aspectRatio: ASPECT_RATIOS[aspectRatio] },
-        animatedStyle,
-      ]}
+      style={[styles.container, { height: bannerWidth / ratio }, animatedStyle]}
     >
-      {children ?? (
-        <Image
-          source={{
-            uri: image,
-          }}
-          style={styles.full}
+      {!!bannerBackgroundColor && (
+        <LinearGradient
+          colors={[bannerBackgroundColor, bannerBackgroundColor + '00']}
+          style={StyleSheet.absoluteFill}
         />
       )}
+      <View style={styles.phoneBanner}>{content}</View>
     </Animated.View>
   );
 };
@@ -90,6 +110,11 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   full: { width: '100%', height: '100%' },
+  phoneBanner: {
+    width: HeaderBarMetrics.bannerWidth,
+    height: '100%',
+    alignSelf: 'center',
+  },
 });
 
 export { HeaderAnimated };

package/Application/Components/HeaderBackground.tsx

@@ -8,10 +8,12 @@ import { Colors, Styles } from '../../Consts';
 import { Image } from '../../Image';
 import BackgroundImageView from './BackgroundImageView';
 import { useNormalizedSharedValue } from '../hooks';
+import { HeaderBarMetrics, useHeaderLayout } from '../headerLayout';
 
 /**
  * Header background: surface and image that fade in on scroll, with an optional
- * gradient (custom or theme) on top. Outlined when `showBaseLineDebug` is on.
+ * gradient (custom or theme) on top, at phone height on wide windows. Outlined
+ * when `showBaseLineDebug` is on.
  */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue,
@@ -25,6 +27,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerImage = headerBackground ?? theme.assets?.headerBackground;
   const sharedValue = useNormalizedSharedValue(animatedValue);
+  const { isWide } = useHeaderLayout();
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -38,14 +41,19 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       />
       <View style={styles.gradientContainer}>
         {useGradient && !!gradientColor && (
-          <Animated.View style={styles.extendedHeader}>
+          <Animated.View
+            style={[styles.extendedHeader, isWide && styles.phoneHeight]}
+          >
             <LinearGradient
               colors={[gradientColor, gradientColor + '00']}
               style={StyleSheet.absoluteFill}
             >
               {!!headerImage && (
                 <Image
-                  style={styles.headerBackground}
+                  style={[
+                    styles.headerBackground,
+                    isWide && styles.phoneHeight,
+                  ]}
                   source={{ uri: headerImage }}
                   loading={false}
                 />
@@ -75,6 +83,11 @@ const styles = StyleSheet.create({
     position: 'absolute',
     aspectRatio: 375 / 154,
   },
+  // wide windows keep the phone gradient height instead of scaling with the width
+  phoneHeight: {
+    aspectRatio: undefined,
+    height: HeaderBarMetrics.gradientHeight,
+  },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 

package/Application/Components/HeaderExtendHeader.tsx

@@ -17,11 +17,16 @@ import BackgroundImageView from './BackgroundImageView';
 import { type AnimatedCompatValue } from '../utils';
 import { useNormalizedSharedValue } from '../hooks';
 import { useScreenLayout } from '../../Layout';
-import { DuoMetrics, HeaderMetrics } from '../../Layout/utils';
+import { HeaderMetrics } from '../../Layout/utils';
+import {
+  HeaderBarMetrics,
+  type HeaderContentLayout,
+  useHeaderLayout,
+} from '../headerLayout';
 
-const SCREEN_PADDING = 12;
-const BACK_WIDTH = 28;
-const TOOLKIT_WIDTH = 73;
+const { buttonSize, pillWidth, sidePadding, titleGap } = HeaderBarMetrics;
+const SCREEN_PADDING = sidePadding;
+const TOOLKIT_WIDTH = pillWidth + sidePadding;
 
 /**
  * Extended header background: a gradient that collapses on scroll and, with
@@ -38,6 +43,7 @@ const HeaderExtendHeader: React.FC<{
   useShadowHeader?: boolean;
   gradientColor?: string;
   headerBackground?: string;
+  contentLayout?: HeaderContentLayout;
 }> = ({
   headerType = 'default',
   animatedValue,
@@ -48,6 +54,7 @@ const HeaderExtendHeader: React.FC<{
   useShadowHeader: useShadowHeaderProp = true,
   gradientColor: customGradientColor,
   headerBackground: customBackground,
+  contentLayout,
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
@@ -55,29 +62,32 @@ const HeaderExtendHeader: React.FC<{
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const layout = useScreenLayout();
+  const headerLayout = useHeaderLayout(contentLayout);
+  // the stretch frame pulls the search in from both bar edges
+  const frameShift = headerLayout.frameInset - sidePadding;
 
-  // the iPhone Duo status bar row keeps side bar sized back and toolkit
-  const isStatusBarRow = !!layout.statusBarClearance;
-  const duoToolkitWidth = DuoMetrics.itemPitch * 2 + SCREEN_PADDING;
-  const backWidth = isStatusBarRow ? DuoMetrics.controlSize : BACK_WIDTH;
-  const toolkitWidth = isStatusBarRow ? duoToolkitWidth : TOOLKIT_WIDTH;
-  const defaultLeft = layout.sideBar ? SCREEN_PADDING : backWidth + 20;
+  const backLeft = buttonSize + sidePadding + titleGap;
+  const defaultLeft = layout.sideBar ? SCREEN_PADDING : backLeft;
   const leftPosition = inputSearchProps?.leftPosition || defaultLeft;
-  const defaultRightWidth = layout.sideBar ? 0 : toolkitWidth;
+  const defaultRightWidth = layout.sideBar ? 0 : TOOLKIT_WIDTH;
   const headerRightWidth = customHeaderRightWidth ?? defaultRightWidth;
-  const contentLeft = layout.insetLeft + SCREEN_PADDING;
-  const contentRight = layout.insetLeft + layout.contentWidth;
+  const contentLeft = layout.insetLeft + SCREEN_PADDING + frameShift;
+  const contentRight = layout.insetLeft + layout.contentWidth - frameShift;
   // collapsed on the status bar row, the search stays between its clusters
   const clearanceLeft = layout.statusBarClearance?.left ?? 0;
   const clearanceRight = layout.statusBarClearance?.right ?? 0;
-  const collapsedLeft = layout.insetLeft + leftPosition + clearanceLeft;
+  const searchLeft = leftPosition + clearanceLeft + frameShift;
+  const collapsedLeft = layout.insetLeft + searchLeft;
   const collapsedRight = contentRight - clearanceRight - headerRightWidth;
-  const searchWidth = layout.contentWidth - SCREEN_PADDING * 2;
+  const searchWidth = contentRight - contentLeft - SCREEN_PADDING;
   const collapsedSearchWidth = collapsedRight - collapsedLeft - SCREEN_PADDING;
   // a row taller than barHeight (iPhone Duo) centers the collapsed search on the title
   const titleRowHeight = layout.headerHeight - layout.headerStatusBarHeight;
   const collapsedRaise = (titleRowHeight - HeaderMetrics.barHeight) / 2;
 
+  // the iPhone Duo side bar keeps the content search size
+  const searchSize = layout.sideBar ? 'default' : 'header';
+
   let useShadowHeader = useShadowHeaderProp;
   if (inputSearchProps && Platform.OS === 'android') {
     useShadowHeader = false;
@@ -169,6 +179,7 @@ const HeaderExtendHeader: React.FC<{
             <Animated.View
               style={[
                 styles.extendedHeader,
+                headerLayout.isWide && styles.phoneHeight,
                 // fade out within the header box, as DuoScrollGradient does
                 !!layout.sideBar && styles.fillHeaderBox,
                 gradientOpacityStyle,
@@ -180,7 +191,10 @@ const HeaderExtendHeader: React.FC<{
               >
                 {!!theme.assets?.headerBackground && (
                   <Image
-                    style={styles.headerBackground}
+                    style={[
+                      styles.headerBackground,
+                      headerLayout.isWide && styles.phoneHeight,
+                    ]}
                     source={{ uri: theme.assets?.headerBackground }}
                     loading={false}
                   />
@@ -189,9 +203,7 @@ const HeaderExtendHeader: React.FC<{
             </Animated.View>
           )}
         </Animated.View>
-        <Animated.View
-          style={[styles.searchContainer, heightStyle]}
-        >
+        <Animated.View style={[styles.searchContainer, heightStyle]}>
           <Animated.View
             style={[{ marginVertical: Spacing.S }, searchTranslateStyle]}
           >
@@ -201,6 +213,7 @@ const HeaderExtendHeader: React.FC<{
               <InputSearch
                 {...inputSearchProps}
                 ref={inputSearchRef}
+                size={searchSize}
                 backgroundColor={'transparent'}
                 showButtonText={false}
               />
@@ -236,7 +249,10 @@ const HeaderExtendHeader: React.FC<{
             >
               {!!headerBackground && (
                 <Image
-                  style={styles.headerBackground}
+                  style={[
+                    styles.headerBackground,
+                    headerLayout.isWide && styles.phoneHeight,
+                  ]}
                   source={{ uri: headerBackground }}
                   loading={false}
                 />
@@ -264,6 +280,11 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
   },
+  // wide windows keep the phone gradient height instead of scaling with the width
+  phoneHeight: {
+    aspectRatio: undefined,
+    height: HeaderBarMetrics.gradientHeight,
+  },
   fillHeaderBox: {
     aspectRatio: undefined,
     height: '100%',
@@ -273,14 +294,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     overflow: 'hidden',
   },
-  verifiedDot: {
-    width: 4,
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: Colors.green_03,
-    position: 'absolute',
-    alignSelf: 'center',
-  },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
   container: {
     zIndex: 0,

package/Application/Components/HeaderLeft.tsx

@@ -6,12 +6,13 @@ import { PopupNotify } from '../../Popup';
 import { NavigationButton } from './NavigationButton';
 import { SideBarButton } from './SideBarButton';
 import Animated from 'react-native-reanimated';
-import { useScreenLayout, useSideBarItemStyle } from '../../Layout/utils';
+import { useSideBarItemStyle } from '../../Layout/utils';
 import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
+import { HeaderBarMetrics } from '../headerLayout';
 
 /**
  * Header back button, also bound to the Android hardware back. `preventBack`
- * confirms in a popup first; the iPhone Duo layouts use the 48pt side bar button.
+ * confirms in a popup first; the iPhone Duo side bar uses the 48pt side bar button.
  */
 const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
@@ -24,7 +25,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   const { navigator } = useContext(ApplicationContext);
   const sideBarStyle = useSideBarItemStyle('left', 0);
   const counterStyle = useSideBarCounterStyle();
-  const { statusBarClearance } = useScreenLayout();
 
   const goBack = useCallback(() => {
     const canGoBack = navigator?.ref?.current?.canGoBack?.();
@@ -97,20 +97,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     );
   }
 
-  // on the status bar row the controls keep the side bar size
-  if (statusBarClearance) {
-    return (
-      <View style={styles.headerLeft}>
-        <SideBarButton
-          accessibilityLabel="btn_navigation_back"
-          icon="arrow-back"
-          tintColor={tintColor}
-          onPress={goBackSafe}
-        />
-      </View>
-    );
-  }
-
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
@@ -125,7 +111,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
 const styles = StyleSheet.create({
   headerLeft: {
-    marginLeft: 12,
+    marginLeft: HeaderBarMetrics.sidePadding,
   },
 });
 

package/Application/Components/HeaderRight.styles.ts

@@ -1,11 +1,14 @@
 import { Platform, StyleSheet } from 'react-native';
 import { Colors, Spacing } from '../../Consts';
+import { HeaderBarMetrics } from '../headerLayout';
+
+const { buttonSize, pillWidth, pillHeight, sidePadding } = HeaderBarMetrics;
 
 export const styles = StyleSheet.create({
   navigationButton: {
-    height: 28,
-    width: 28,
-    borderRadius: 14,
+    height: buttonSize,
+    width: buttonSize,
+    borderRadius: buttonSize / 2,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: Colors.black_01 + '99',
@@ -45,11 +48,11 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingRight: Spacing.M,
+    paddingRight: sidePadding,
   },
   toolkitContainer: {
-    height: 28,
-    borderRadius: 14,
+    height: pillHeight,
+    borderRadius: pillHeight / 2,
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'row',
@@ -59,7 +62,10 @@ export const styles = StyleSheet.create({
     marginLeft: Spacing.S,
   },
   toolkitButton: {
-    padding: 4,
+    flex: 1,
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   divider: {
     width: 0.5,
@@ -68,10 +74,6 @@ export const styles = StyleSheet.create({
   sideBarColumn: {
     gap: Spacing.M,
   },
-  sideBarRow: {
-    flexDirection: 'row',
-    gap: Spacing.M,
-  },
   headerLeft: {
     marginLeft: 12,
   },
@@ -136,9 +138,9 @@ export const styles = StyleSheet.create({
     marginRight: Spacing.M,
   },
   toolkitWide: {
-    width: 65,
+    width: pillWidth,
   },
   toolkitNarrow: {
-    width: 28,
+    width: buttonSize,
   },
 });

package/Application/Components/HeaderTitle.shared.ts

@@ -3,6 +3,9 @@ import { MiniAppContext } from '../../Context';
 import { Spacing } from '../../Consts';
 import { isWhiteListDesignSystem } from '../utils';
 import { useScreenLayout } from '../../Layout';
+import { HeaderBarMetrics } from '../headerLayout';
+
+const { sidePadding, buttonSize, titleGap, clusterWidth } = HeaderBarMetrics;
 
 /**
  * Header title font: MoMoTrustDisplay for design-system whitelisted mini apps,
@@ -14,32 +17,28 @@ const useHeaderFontFamily = (): string => {
 };
 
 /**
- * back button and toolkit sharing the navigation bar with the title
- */
-const HEADER_ACTIONS_WIDTH = 172;
-
-/**
- * extra width the 48pt back and toolkit take on the iPhone Duo status bar row
+ * side paddings, back button, title gaps and right cluster sharing the
+ * navigation bar with the title
  */
-const STATUS_BAR_ROW_ACTIONS_EXTRA = 55;
+const HEADER_ACTIONS_WIDTH =
+  sidePadding * 2 + buttonSize + titleGap * 2 + clusterWidth;
 
 /**
  * Max header title width. The iPhone Duo side bar takes back and toolkit out of
- * the bar, so the title gets the content width; otherwise it shares the bar with them.
+ * the bar, so the title gets the content width; otherwise it shares the bar with
+ * them, minus the status bar clusters on the iPhone Duo inner portrait row.
  */
 const useTitleMaxWidth = () => {
   const layout = useScreenLayout();
   const { width, contentWidth, sideBar, statusBarClearance } = layout;
   let clearance = 0;
-  let rowActionsExtra = 0;
   if (statusBarClearance) {
     clearance = statusBarClearance.left + statusBarClearance.right;
-    rowActionsExtra = STATUS_BAR_ROW_ACTIONS_EXTRA;
   }
   if (sideBar) {
     return contentWidth - Spacing.M * 2 - clearance;
   }
-  return width - HEADER_ACTIONS_WIDTH - rowActionsExtra - clearance;
+  return width - HEADER_ACTIONS_WIDTH - clearance;
 };
 
 export { useHeaderFontFamily, HEADER_ACTIONS_WIDTH, useTitleMaxWidth };

package/Application/Components/HeaderToolkitAction.tsx

@@ -4,15 +4,15 @@ import { NavigationButton } from './NavigationButton';
 import { MiniAppContext } from '../../Context';
 import { Colors, Spacing, Styles } from '../../Consts';
 import { Icon } from '../../Icon';
-import { DuoMetrics, useScreenLayout } from '../../Layout/utils';
+import { DuoMetrics } from '../../Layout/utils';
 import { SideBarButton, SideBarGroup, SideBarGroupItem } from './SideBarButton';
 import { useDuoBarCompression } from '../BottomTab/DuoBarCompression';
 import { styles } from './HeaderRight.styles';
 import { useToolkitActions } from './useToolkitActions';
+import { HeaderBarMetrics } from '../headerLayout';
 
 const CLOSE_ICON = '16_navigation_close_circle';
 const HOME_ICON = '16_basic_home';
-const TOOLKIT_ICON_SIZE = 20;
 // the capsule's two buttons extend their touch area outward only
 const HELP_CENTER_HIT_SLOP = { top: 7, bottom: 7, left: 7, right: 0 };
 const CLOSE_HIT_SLOP = { top: 7, bottom: 7, left: 0, right: 7 };
@@ -35,7 +35,6 @@ const HeaderToolkitAction: React.FC<any> = ({
   const compression = useDuoBarCompression();
   const { toolbarCompressed, toolbarHidden } = compression;
   const { expandToolbar, setToolbarHeight } = compression;
-  const { statusBarClearance } = useScreenLayout();
   const {
     isLoading,
     iconShortcut,
@@ -135,39 +134,6 @@ const HeaderToolkitAction: React.FC<any> = ({
     );
   }
 
-  // on the status bar row the controls keep the side bar size
-  if (statusBarClearance) {
-    return (
-      <View style={styles.sideBarRow}>
-        {useShortcut && (
-          <SideBarButton
-            disabled={isLoading}
-            icon={iconShortcut}
-            onPress={shortcutOnPress}
-            tintColor={tintColor}
-            showBadge={showBadge}
-          />
-        )}
-        <SideBarGroup tintColor={tintColor} horizontal>
-          {hasHelpCenter && (
-            <SideBarGroupItem
-              accessibilityLabel={'btn_navigation_help_center'}
-              icon={'help_center'}
-              tintColor={tintColor}
-              onPress={handlePressHelpCenter}
-            />
-          )}
-          <SideBarGroupItem
-            accessibilityLabel={'btn_navigation_close'}
-            icon={closeIcon}
-            tintColor={tintColor}
-            onPress={handleClose}
-          />
-        </SideBarGroup>
-      </View>
-    );
-  }
-
   return (
     <View style={Styles.row}>
       {useShortcut && (
@@ -191,7 +157,7 @@ const HeaderToolkitAction: React.FC<any> = ({
               <Icon
                 color={tintColor}
                 source={'help_center'}
-                size={TOOLKIT_ICON_SIZE}
+                size={HeaderBarMetrics.iconSize}
               />
             </TouchableOpacity>
             <View style={[styles.divider, { backgroundColor: tintColor }]} />
@@ -203,7 +169,11 @@ const HeaderToolkitAction: React.FC<any> = ({
           style={styles.toolkitButton}
           hitSlop={CLOSE_HIT_SLOP}
         >
-          <Icon color={tintColor} source={closeIcon} size={TOOLKIT_ICON_SIZE} />
+          <Icon
+            color={tintColor}
+            source={closeIcon}
+            size={HeaderBarMetrics.iconSize}
+          />
         </TouchableOpacity>
       </View>
     </View>

package/Application/Components/NavigationButton.tsx

@@ -5,9 +5,12 @@ import { StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native';
 import { Colors, Spacing } from '../../Consts';
 import { Icon } from '../../Icon';
 import { BadgeDot } from '../../Badge';
+import { HeaderBarMetrics } from '../headerLayout';
+
+const { buttonSize, iconSize } = HeaderBarMetrics;
 
 /**
- * Round 28pt icon button of the header (back, shortcut) with an optional badge
+ * Round 32pt icon button of the header (back, shortcut) with an optional badge
  * dot; switches to a dark fill under a white tint so the icon stays readable.
  */
 const NavigationButton: React.FC<NavigationButtonProps> = ({
@@ -35,7 +38,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
         <Icon
           source={icon}
           color={tintColor ?? theme.colors.text.default}
-          size={20}
+          size={iconSize}
         />
       </TouchableOpacity>
       {showBadge && <BadgeDot size={'small'} style={styles.badgeDot} />}
@@ -45,12 +48,12 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    width: 28,
+    width: buttonSize,
   },
   navigationButton: {
-    height: 28,
-    width: 28,
-    borderRadius: 14,
+    height: buttonSize,
+    width: buttonSize,
+    borderRadius: buttonSize / 2,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: Colors.black_01 + '99',

package/Application/Components/SearchHeader.tsx

@@ -1,5 +1,5 @@
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
-import { InputRef, InputSearch } from '../../Input';
+import { InputRef, InputSearch, type InputSearchProps } from '../../Input';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import React, { useContext } from 'react';
@@ -8,7 +8,13 @@ import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
 import { useNormalizedSharedValue } from '../hooks';
 import { useScreenLayout } from '../../Layout';
-import { DuoMetrics } from '../../Layout/utils';
+import { HeaderBarMetrics } from '../headerLayout';
+
+const { buttonSize, pillWidth, sidePadding, titleGap } = HeaderBarMetrics;
+// help center | home pill and the bar padding right of it
+const TOOLKIT_WIDTH = pillWidth + sidePadding;
+// the iPhone Duo side bar keeps its right header width
+const DUO_TOOLKIT_WIDTH = 73;
 
 /**
  * Header search bar whose fill turns from surface to default once scrolled, with
@@ -28,15 +34,21 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const layout = useScreenLayout();
-    // the iPhone Duo status bar row keeps a side bar sized back button
-    const BACK_WIDTH = layout.statusBarClearance ? DuoMetrics.controlSize : 28;
+    let defaultRightWidth = TOOLKIT_WIDTH;
+    let searchSize: InputSearchProps['size'] = 'header';
+    if (layout.sideBar) {
+      defaultRightWidth = DUO_TOOLKIT_WIDTH;
+      searchSize = 'default';
+    }
 
     const sharedValue = useNormalizedSharedValue(animatedValue);
-    const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
-    const headerRightWidth = props?.headerRightWidth ?? 73;
+    const defaultLeft = buttonSize + sidePadding + titleGap;
+    const leftPosition = props?.leftPosition ?? defaultLeft;
+    const headerRightWidth = props?.headerRightWidth ?? defaultRightWidth;
 
     // iPhone Duo side bar holds back: the search shares the content width with the buttons only
-    let searchMaxWidth = layout.width - leftPosition - 12 - headerRightWidth;
+    const rowWidth = layout.width - leftPosition - sidePadding;
+    let searchMaxWidth = rowWidth - headerRightWidth;
     if (layout.sideBar) {
       searchMaxWidth = layout.contentWidth - Spacing.M * 2 - headerRightWidth;
     }
@@ -105,6 +117,7 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
             <InputSearch
               ref={ref}
               {...props}
+              size={searchSize}
               backgroundColor={'transparent'}
               showButtonText={false}
             />

package/Application/StackScreen.tsx

@@ -8,6 +8,7 @@ import { SwipeBackHaptic } from './Components/SwipeBackHaptic';
 import { useAppState } from './hooks';
 import { createScreenTracking } from './StackScreen.tracking';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
+import { useHeaderFrameOptions } from './headerLayout';
 
 const TRACKING_TIMEOUT = 5000;
 const ELEMENT_IDLE_TIMEOUT = 2000;
@@ -55,6 +56,7 @@ const StackScreen: React.FC<any> = props => {
   const navigation = useRef(new Navigation(props.navigation, context)).current;
   const heightHeader = useHeaderHeight();
   const { isBackgroundToForeground } = useAppState();
+  const headerFrameOptions = useHeaderFrameOptions(options?.contentLayout);
 
   const data = {
     ...initialParams,
@@ -73,6 +75,13 @@ const StackScreen: React.FC<any> = props => {
     }
   }, [navigation, options]);
 
+  // re-applied on fold, unfold and rotation, apart from the other options
+  useLayoutEffect(() => {
+    if (headerFrameOptions) {
+      navigation.instance.setOptions(headerFrameOptions);
+    }
+  }, [navigation, headerFrameOptions]);
+
   useEffect(() => {
     let focusScreen: any;
     let focusAppListener: { remove?: () => void } | undefined;

package/Application/headerLayout.ts

@@ -0,0 +1,165 @@
+import { useMemo } from 'react';
+import { useWindowDimensions, type ViewStyle } from 'react-native';
+import type { StackNavigationOptions } from '@react-navigation/stack';
+import { Spacing } from '../Consts';
+import { getHeaderMargin } from '../Layout/utils';
+import { FOLDABLE_MIN_WIDTH } from './modalLayout';
+import { isIPhoneDuo } from './utils';
+
+// Top navigation spec, shared with the Compose / SwiftUI kits
+const HEADER_FRAME_MAX_WIDTH = 600;
+
+/**
+ * Top navigation geometry on every device
+ * - buttonSize / iconSize: round back and shortcut buttons, icons inside them and the pill
+ * - pillWidth / pillHeight: help center | home capsule
+ * - clusterWidth: shortcut, gap and pill on the right of the bar
+ * - searchHeight: search field inside the header
+ * - titleGap: space between back and the title, and the title and the right cluster
+ * - sidePadding: bar edge to back and to the right cluster
+ * - gradientHeight: header gradient, kept at the phone height on wide windows
+ * - bannerWidth: animated banner image, kept at the phone width on wide windows
+ */
+const HeaderBarMetrics = {
+  buttonSize: 32,
+  iconSize: 20,
+  pillWidth: 72,
+  pillHeight: 32,
+  clusterWidth: 112,
+  searchHeight: 32,
+  titleGap: Spacing.S,
+  sidePadding: Spacing.M,
+  gradientHeight: 154,
+  bannerWidth: 375,
+};
+
+/**
+ * `grid` keeps the header row at the bar edges, `stretch` centers it in a 600pt
+ * frame on wide windows. Background and status bar always span the window.
+ */
+type HeaderContentLayout = 'grid' | 'stretch';
+
+type HeaderLayout = typeof HeaderBarMetrics & {
+  /**
+   * Window whose short side is at least 600 (Galaxy Z Fold / Pixel Fold inner
+   * display, tablets), iPhone Duo excluded. Phones, landscape included, are not.
+   */
+  isWide: boolean;
+  /**
+   * Banner kept at `bannerWidth`, centered: wide windows plus the iPhone Duo
+   * inner display, portrait and landscape.
+   */
+  isBannerCentered: boolean;
+  /**
+   * Window edge to back and to the right cluster: `sidePadding`, or centering the
+   * row in the 600pt frame with `stretch` on a wide window.
+   */
+  frameInset: number;
+  /**
+   * Header row width between the two `frameInset`s.
+   */
+  frameWidth: number;
+};
+
+type HeaderLayoutInput = {
+  width: number;
+  height: number;
+  isDuo: boolean;
+  contentLayout?: HeaderContentLayout;
+};
+
+/**
+ * Header geometry for a window, pure so it can be tested without a device.
+ */
+const getHeaderLayout = ({
+  width,
+  height,
+  isDuo,
+  contentLayout = 'grid',
+}: HeaderLayoutInput): HeaderLayout => {
+  const { sidePadding } = HeaderBarMetrics;
+  const isLargeWindow = Math.min(width, height) >= FOLDABLE_MIN_WIDTH;
+  const isWide = !isDuo && isLargeWindow;
+  let frameInset = sidePadding;
+  if (isWide && contentLayout === 'stretch') {
+    const centered = (width - HEADER_FRAME_MAX_WIDTH) / 2;
+    frameInset = Math.max(sidePadding, centered);
+  }
+  return {
+    ...HeaderBarMetrics,
+    isWide,
+    isBannerCentered: isLargeWindow,
+    frameInset,
+    frameWidth: width - frameInset * 2,
+  };
+};
+
+/**
+ * Widest a title can be between back and the right cluster of the header row.
+ */
+const getTitleBudget = (layout: HeaderLayout) => {
+  const { buttonSize, titleGap, clusterWidth } = layout;
+  return layout.frameWidth - buttonSize - titleGap * 2 - clusterWidth;
+};
+
+/**
+ * Header geometry for the current window; follows fold, unfold and rotation.
+ */
+const useHeaderLayout = (contentLayout?: HeaderContentLayout): HeaderLayout => {
+  const { width, height } = useWindowDimensions();
+  const isDuo = isIPhoneDuo();
+  return useMemo(() => {
+    return getHeaderLayout({ width, height, isDuo, contentLayout });
+  }, [width, height, isDuo, contentLayout]);
+};
+
+const TITLE_CONTAINER_RESET: ViewStyle = {
+  marginLeft: 0,
+  marginEnd: 0,
+  marginStart: 0,
+  marginHorizontal: 0,
+  marginVertical: 0,
+  margin: 0,
+};
+
+/**
+ * React Navigation container styles that keep back, title and the right cluster
+ * in the `stretch` frame. `undefined` for `grid`, and on iPhone Duo, which keeps
+ * its own header row.
+ */
+const useHeaderFrameOptions = (
+  contentLayout?: HeaderContentLayout,
+): StackNavigationOptions | undefined => {
+  const layout = useHeaderLayout(contentLayout);
+  const { width } = useWindowDimensions();
+  const isDuo = isIPhoneDuo();
+  return useMemo(() => {
+    if (contentLayout !== 'stretch' || isDuo) {
+      return undefined;
+    }
+    // the header content row already sits this far in on large iOS windows
+    const shift = layout.frameInset - layout.sidePadding;
+    const containerShift = Math.max(0, shift - getHeaderMargin(width));
+    return {
+      headerLeftContainerStyle: { paddingLeft: containerShift },
+      headerRightContainerStyle: { paddingRight: containerShift },
+      headerTitleContainerStyle: {
+        ...TITLE_CONTAINER_RESET,
+        left: layout.titleGap,
+        maxWidth: getTitleBudget(layout),
+      },
+    };
+  }, [contentLayout, isDuo, layout, width]);
+};
+
+export type { HeaderContentLayout, HeaderLayout };
+
+export {
+  HeaderBarMetrics,
+  HEADER_FRAME_MAX_WIDTH,
+  TITLE_CONTAINER_RESET,
+  getHeaderLayout,
+  getTitleBudget,
+  useHeaderLayout,
+  useHeaderFrameOptions,
+};

package/Application/index.ts

@@ -26,6 +26,13 @@ import {
   type ModalLayout,
   type ModalRect,
 } from './modalLayout';
+import {
+  HeaderBarMetrics,
+  getHeaderLayout,
+  useHeaderLayout,
+  type HeaderContentLayout,
+  type HeaderLayout,
+} from './headerLayout';
 
 export {
   NavigationContainer,
@@ -41,6 +48,9 @@ export {
   useTooltipPortal,
   getModalLayout,
   useModalLayout,
+  HeaderBarMetrics,
+  getHeaderLayout,
+  useHeaderLayout,
 };
 
-export type { ModalLayout, ModalRect };
+export type { ModalLayout, ModalRect, HeaderContentLayout, HeaderLayout };

package/Application/navigationOptions.tsx

@@ -8,11 +8,12 @@ import {
   TransitionPresets,
 } from '@react-navigation/stack';
 import type { SharedValue } from 'react-native-reanimated';
-import { Colors, Spacing } from '../Consts';
+import { Colors } from '../Consts';
 import { HeaderBackground } from './Components/HeaderBackground';
 import { HeaderLeft } from './Components/HeaderLeft';
 import { HeaderRight } from './Components/HeaderRight';
 import { HeaderTitle, TitleCustom } from './Components/HeaderTitle';
+import { HeaderBarMetrics, TITLE_CONTAINER_RESET } from './headerLayout';
 import type { HeaderTitleProps, NavigationOptions } from './types';
 
 const CARD_SHADOW_OPACITY = 0.3;
@@ -55,13 +56,8 @@ const getStackOptions = (): StackNavigationOptions => {
     headerTitleAlign: 'left',
     headerTitle: props => <HeaderTitle {...props} />,
     headerTitleContainerStyle: {
-      marginLeft: 0,
-      marginEnd: 0,
-      marginStart: 0,
-      marginHorizontal: 0,
-      marginVertical: 0,
-      margin: 0,
-      left: Spacing.S,
+      ...TITLE_CONTAINER_RESET,
+      left: HeaderBarMetrics.titleGap,
     },
     headerBackground: (props: any) => <HeaderBackground {...props} />,
     headerLeft: (props: any) => <HeaderLeft {...props} floating />,
@@ -172,13 +168,8 @@ const getOptions = (
     if (params.hiddenBack) {
       headerLeft = null;
       options.headerTitleContainerStyle = {
-        marginLeft: 0,
-        marginEnd: 0,
-        marginStart: 0,
-        marginHorizontal: 0,
-        marginVertical: 0,
-        margin: 0,
-        left: Spacing.M,
+        ...TITLE_CONTAINER_RESET,
+        left: HeaderBarMetrics.sidePadding,
       };
     }
     options = {

package/Application/types.header.ts

@@ -98,6 +98,11 @@ export interface HeaderAnimatedProps extends ViewProps {
   image: string;
   useScale?: boolean;
   aspectRatio?: '16/9' | '3/2' | '1/1';
+  /**
+   * Optional. On wide windows the image keeps its phone width, centered; this
+   * color fills the sides and fades to transparent downward. No fill when unset.
+   */
+  bannerBackgroundColor?: string;
 }
 
 export type AnimatedHeader = {
@@ -109,8 +114,8 @@ export type AnimatedHeader = {
 export interface SearchHeaderProps extends InputSearchProps {
   ref?: React.RefObject<InputRef>;
   animatedValue?: Animated.Value | SharedValue<number>;
-  headerRightWidth?: 0 | 74 | 110 | number;
-  leftPosition?: 12 | 48 | number;
+  headerRightWidth?: 0 | 84 | 124 | number;
+  leftPosition?: 12 | 52 | number;
   renderButtons?: () => ReactNode;
   hiddenBack?: boolean;
 }

package/Application/types.ts

@@ -9,6 +9,7 @@ import type {
   OnBoarding,
 } from './types.header';
 import type { LocalizeProps, Theme } from './types.theme';
+import type { HeaderContentLayout } from './headerLayout';
 
 export * from './types.theme';
 export * from './types.header';
@@ -128,4 +129,10 @@ export interface NavigationOptions
   hiddenBack?: boolean;
   headerTitle?: HeaderTitleProps | string;
   headerRight?: OnBoarding | HeaderRightToolkit | any;
+  /**
+   * Optional. `stretch` centers back, title and the right cluster in a 600pt
+   * frame on wide windows (foldable inner display, tablet); the background stays
+   * full width. Defaults to `grid`, the header row at the window edges.
+   */
+  contentLayout?: HeaderContentLayout;
 }

package/Input/InputSearch.tsx

@@ -13,6 +13,7 @@ import {
   View,
 } from 'react-native';
 import { useComponentId } from '../Application';
+import { HeaderBarMetrics } from '../Application/headerLayout';
 import {
   ApplicationContext,
   ComponentContext,
@@ -52,6 +53,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     backgroundColor,
     onPress,
     typingData,
+    size = 'default',
     ...props
   },
   ref,
@@ -62,6 +64,13 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   const searchFontFamily = exportFontFamily('regular');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const isHeaderSize = size === 'header';
+  const inputHeightStyle = isHeaderSize && {
+    height: HeaderBarMetrics.searchHeight,
+  };
+  const searchIconSize = isHeaderSize
+    ? HeaderBarMetrics.iconSize
+    : SEARCH_ICON_SIZE;
 
   const [isFocused, setIsFocused] = useState(false);
   const [internalText, setInternalText] = useState(defaultValue || '');
@@ -117,7 +126,11 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     if (typingData && typingData?.length > 0) {
       return (
         <TouchableOpacity
-          style={[styles.searchInput, styles.searchInputTyping]}
+          style={[
+            styles.searchInput,
+            styles.searchInputTyping,
+            inputHeightStyle,
+          ]}
           onPress={onPress}
           activeOpacity={onPress ? PRESSED_OPACITY : 1}
         >
@@ -135,6 +148,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         ref={inputRef}
         style={[
           styles.searchInput,
+          inputHeightStyle,
           {
             fontSize: scaledFontSize,
             color: theme.colors.text.default,
@@ -228,7 +242,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         >
           <Icon
             source={'navigation_search'}
-            size={SEARCH_ICON_SIZE}
+            size={searchIconSize}
             color={theme.colors.text.hint}
           />
           {renderInputView()}

package/Input/index.tsx

@@ -194,6 +194,12 @@ export interface InputSearchProps extends TextInputProps {
    */
   typingData?: string[];
 
+  /**
+   * Optional. `header` is the 32pt field with a 20pt search icon that sits in the
+   * navigation header. Defaults to `default`, the 36pt field for content.
+   */
+  size?: 'default' | 'header';
+
   /**
    * Optional. Called when the field is pressed while showing `typingData`.
    */
@@ -367,4 +373,4 @@ export {
   InputPhoneNumber,
 };
 
-export {checkValidPhoneNumber};
+export { checkValidPhoneNumber };

package/Layout/Screen.tsx

@@ -67,6 +67,7 @@ const Screen = forwardRef(
       headerBackground,
       gradientColor,
       trackingParams,
+      contentLayout,
     }: ScreenProps,
     ref: any,
   ) => {
@@ -144,6 +145,7 @@ const Screen = forwardRef(
       gradientColor,
       headerBackground,
       layoutOffset,
+      contentLayout,
     });
 
     // mutates the content node so callers keep its methods plus the header setters
@@ -223,6 +225,7 @@ const Screen = forwardRef(
           useShadowHeader={useShadowHeader}
           gradientColor={gradientColor}
           headerBackground={headerBackground}
+          contentLayout={contentLayout}
         />
       );
     };

package/Layout/screenHeader.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { StatusBar, StatusBarStyle } from 'react-native';
 import { StackNavigationOptions } from '@react-navigation/stack';
+import type { SharedValue } from 'react-native-reanimated';
 import Navigation from '../Application/Navigation';
 import { AnimatedHeader, SearchHeaderProps } from '../Application/types';
 import { exportHeaderTitle } from '../Application/navigationOptions';
@@ -12,6 +13,11 @@ import {
   SearchHeader,
 } from '../Application';
 import { DuoGlassBackground } from '../Application/Components/DuoGlassBackground';
+import {
+  type HeaderContentLayout,
+  useHeaderFrameOptions,
+  useHeaderLayout,
+} from '../Application/headerLayout';
 import { getHeaderMargin } from './utils';
 import { ANIMATED_BANNER_HEIGHT } from './screenTypes';
 import { HeaderType } from './types';
@@ -29,6 +35,31 @@ type ScreenHeaderParams = {
   gradientColor?: string;
   headerBackground?: string;
   layoutOffset: number;
+  contentLayout?: HeaderContentLayout;
+};
+
+/**
+ * Transparent header for an `inputSearchProps` Screen: its title fades out over the
+ * first 50pt of scroll while the search collapses into the bar.
+ */
+const getSearchTitleOptions = (
+  sharedValue: SharedValue<number>,
+): StackNavigationOptions => {
+  return {
+    headerShown: true,
+    headerTransparent: true,
+    headerBackground: () => null,
+    headerTitle: (props: any) => (
+      <HeaderTitle
+        {...props}
+        interpolate={{
+          inputRange: [0, 50],
+          outputRange: [1, 0],
+        }}
+        animatedValue={sharedValue}
+      />
+    ),
+  };
 };
 
 /**
@@ -48,9 +79,12 @@ export const useScreenHeader = ({
   gradientColor,
   headerBackground,
   layoutOffset,
+  contentLayout,
 }: ScreenHeaderParams) => {
   const currentTint = useRef<string | undefined>(undefined);
   const appliedHeaderMode = useRef<string | undefined>(undefined);
+  const headerLayout = useHeaderLayout(contentLayout);
+  const frameOptions = useHeaderFrameOptions(contentLayout);
 
   // keepTitle leaves a title the screen set itself when the same type is re-applied
   const setHeaderType = useCallback(
@@ -79,21 +113,7 @@ export const useScreenHeader = ({
             headerTitle: (props: any) => <HeaderTitle {...props} />,
           };
           if (inputSearchProps) {
-            options = {
-              headerShown: true,
-              headerTransparent: true,
-              headerBackground: () => null,
-              headerTitle: (props: any) => (
-                <HeaderTitle
-                  {...props}
-                  interpolate={{
-                    inputRange: [0, 50],
-                    outputRange: [1, 0],
-                  }}
-                  animatedValue={sharedValue}
-                />
-              ),
-            };
+            options = getSearchTitleOptions(sharedValue);
           }
           break;
 
@@ -127,21 +147,7 @@ export const useScreenHeader = ({
             headerTitle: (props: any) => <HeaderTitle {...props} />,
           };
           if (inputSearchProps) {
-            options = {
-              headerShown: true,
-              headerTransparent: true,
-              headerBackground: () => null,
-              headerTitle: (props: any) => (
-                <HeaderTitle
-                  {...props}
-                  interpolate={{
-                    inputRange: [0, 50],
-                    outputRange: [1, 0],
-                  }}
-                  animatedValue={sharedValue}
-                />
-              ),
-            };
+            options = getSearchTitleOptions(sharedValue);
           }
       }
 
@@ -149,7 +155,11 @@ export const useScreenHeader = ({
         delete options.headerTitle;
       }
 
-      navigation?.instance?.setOptions({ header: undefined, ...options });
+      navigation?.instance?.setOptions({
+        header: undefined,
+        ...frameOptions,
+        ...options,
+      });
     },
     [
       gradientColor,
@@ -160,6 +170,7 @@ export const useScreenHeader = ({
       useShadowHeader,
       hasSideBar,
       quickReturnOptions,
+      frameOptions,
     ],
   );
 
@@ -207,7 +218,7 @@ export const useScreenHeader = ({
         };
       }
 
-      navigation?.instance?.setOptions(options);
+      navigation?.instance?.setOptions({ ...frameOptions, ...options });
     },
     [
       gradientColor,
@@ -218,32 +229,23 @@ export const useScreenHeader = ({
       hasSideBar,
       layoutOffset,
       quickReturnOptions,
+      frameOptions,
     ],
   );
 
   const setAnimatedSearch = useCallback(() => {
-    const options: StackNavigationOptions = {
-      headerShown: true,
-      headerTransparent: true,
-      headerBackground: () => null,
-      headerTitle: (props: any) => (
-        <HeaderTitle
-          {...props}
-          interpolate={{
-            inputRange: [0, 50],
-            outputRange: [1, 0],
-          }}
-          animatedValue={sharedValue}
-        />
-      ),
-    };
-
-    navigation?.instance?.setOptions({ header: undefined, ...options });
-  }, [navigation?.instance, sharedValue]);
+    const options = getSearchTitleOptions(sharedValue);
+    navigation?.instance?.setOptions({
+      header: undefined,
+      ...frameOptions,
+      ...options,
+    });
+  }, [navigation?.instance, sharedValue, frameOptions]);
 
-  // the search field spans the content, clear of the side bar and status bar clusters
+  // the search field spans the content (or the stretch frame), clear of the side bar
+  // and status bar clusters
   const setSearchHeader = (params: SearchHeaderProps) => {
-    let searchWidth = layout.width - 24;
+    let searchWidth = headerLayout.frameWidth;
     let searchLeft = Spacing.M;
     if (layout.sideBar) {
       searchWidth = layout.contentWidth - Spacing.M * 2;
@@ -254,6 +256,7 @@ export const useScreenHeader = ({
       searchWidth -= clearance.left + clearance.right;
     }
     const options: StackNavigationOptions = {
+      ...frameOptions,
       headerRight: undefined,
       headerTitleContainerStyle: {
         width: searchWidth,

package/Layout/screenTypes.ts

@@ -9,6 +9,7 @@ import {
 import { FloatingButtonProps } from './FloatingButton';
 import { HeaderType } from './types';
 import { InputRef } from '../Input';
+import type { HeaderContentLayout } from '../Application/headerLayout';
 
 export const ANIMATED_BANNER_HEIGHT = 210;
 
@@ -76,10 +77,17 @@ export interface ScreenProps extends ViewProps {
   layoutOffset?: -8 | -24 | -56 | number;
 
   /**
-   * Optional. Width of the right header. Defaults to the toolkit width (73), or 0 when
+   * Optional. Width of the right header. Defaults to the toolkit width (84), or 0 when
    * iPhone Duo floats the toolkit into its side bar.
    */
-  headerRightWidth?: 0 | 73 | 110 | number;
+  headerRightWidth?: 0 | 84 | 124 | number;
+
+  /**
+   * Optional. `stretch` centers back, title or search and the right cluster of the
+   * header in a 600pt frame on wide windows (foldable inner display, tablet); the
+   * background and status bar stay full width. Defaults to `grid`.
+   */
+  contentLayout?: HeaderContentLayout;
 
   /**
    * Optional. Props for the floating action button.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.169.9",
+    "version": "0.169.10",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},