@momo-kits/foundation 0.167.1-duo.12 → 0.167.1-duo.14

package/Application/BottomTab/DuoTabBar.tsx

@@ -36,37 +36,45 @@ const RAIL_GAP = Spacing.XXS;
 // selection bubble overflows the 48 rail cell by 5 above and below (Figma MT2)
 const RAIL_BUBBLE_WIDTH = 44;
 const RAIL_BUBBLE_HEIGHT = 58;
-const FLOATING_HEIGHT = 62;
+const FLOATING_HEIGHT = DuoMetrics.floatingTabBarHeight;
 const FLOATING_PADDING = Spacing.XS;
-const FLOATING_QR_SIZE = 44;
-// floating bar spans 6 of the 8 portrait grid columns, like the content
-const GRID_COLUMNS = 8;
-const GRID_SPAN = 6;
+// the system bar sizes its pill to the tabs instead of stretching it across the display
+const FLOATING_ITEM_WIDTH = 80;
+// while pressed the selection bubble becomes the iOS 26 glass lens, growing past the
+// pill's edges, wider and taller (80x54 to about 96x70)
+const LENS_SCALE_X = 1.2;
+const LENS_SCALE_Y = 1.3;
+const FLOATING_BUBBLE_RADIUS = (FLOATING_HEIGHT - 2 * FLOATING_PADDING) / 2;
 const SPRING = { damping: 18, stiffness: 220, mass: 0.8 };
 
+/**
+ * distance from the screen bottom to the floating tab bar, overlapping the home
+ * indicator inset like the system tab bar
+ */
+const getFloatingTabBarBottom = (bottomInset: number) =>
+  Math.max(bottomInset - DuoMetrics.floatingTabBarInsetOverlap, Spacing.S);
+
 /**
  * space tab content leaves under the Duo floating tab bar, 0 elsewhere
  */
 const useDuoTabBarInset = () => {
   const { isIPhoneDuo, sideBar, insets } = useScreenLayout();
   return isIPhoneDuo && !sideBar
-    ? FLOATING_HEIGHT + Spacing.M + insets.bottom
+    ? FLOATING_HEIGHT + getFloatingTabBarBottom(insets.bottom)
     : 0;
 };
 
-const gridSpanWidth = (width: number) => {
-  const columnWidth =
-    (width - 2 * Spacing.M - (GRID_COLUMNS - 1) * Spacing.M) / GRID_COLUMNS;
-  return columnWidth * GRID_SPAN + (GRID_SPAN - 1) * Spacing.M;
-};
-
-const BarMaterial: React.FC<{ radius: number }> = ({ radius }) => {
+const BarMaterial: React.FC<{ radius: number; interactive?: boolean }> = ({
+  radius,
+  interactive,
+}) => {
   const { theme } = useContext(ApplicationContext);
   if (GlassView) {
     return (
       <GlassView
         pointerEvents={'none'}
         effect={'glass'}
+        interactive={interactive}
         cornerRadius={radius}
         useShadow
         style={StyleSheet.absoluteFill}
@@ -89,6 +97,37 @@ const BarMaterial: React.FC<{ radius: number }> = ({ radius }) => {
   );
 };
 
+// Figma Home-2026 tab bar "Selection": brand pink at 8% over glass
+const SELECTION_TINT_ALPHA = '14';
+
+/**
+ * translucent glass capsule under the selected floating tab with the Figma pink tint on
+ * top; the tint is a separate layer since a glass tint color renders opaque
+ */
+const SelectionMaterial: React.FC = () => {
+  const { theme } = useContext(ApplicationContext);
+  return (
+    <>
+      {GlassView && (
+        <GlassView
+          pointerEvents={'none'}
+          effect={'glass'}
+          cornerRadius={FLOATING_BUBBLE_RADIUS}
+          style={StyleSheet.absoluteFill}
+        />
+      )}
+      <View
+        pointerEvents={'none'}
+        style={[
+          StyleSheet.absoluteFill,
+          styles.floatingBubbleFill,
+          { backgroundColor: theme.colors.primary + SELECTION_TINT_ALPHA },
+        ]}
+      />
+    </>
+  );
+};
+
 const getTabItems = ({
   state,
   descriptors,
@@ -267,65 +306,106 @@ const DuoRailTabBar: React.FC<Props> = props => {
 };
 
 /**
- * floating labelled bar for the unfolded portrait display, QR in the middle cell (Figma MT1-M)
+ * floating labelled glass bar for the unfolded portrait display, QR pinned in its own
+ * platter on the trailing side, like the host app's iOS 26 system tab bar
  */
 const DuoFloatingTabBar: React.FC<Props> = props => {
   const { theme } = useContext(ApplicationContext);
-  const { width, insets } = useScreenLayout();
+  const { insets } = useScreenLayout();
   const { state, floatingButton, activeTintColor, inactiveTintColor } = props;
   const items = getTabItems(props);
   const [rowWidth, setRowWidth] = useState(0);
-  const barWidth = gridSpanWidth(width);
-
-  const useQr = !!floatingButton && state.routes.length % 2 === 0;
-  const middle = state.routes.length / 2;
-  const cellWidth = rowWidth / (state.routes.length + (useQr ? 1 : 0));
-  const visualIndex =
-    useQr && state.index >= middle ? state.index + 1 : state.index;
+  const cellWidth = rowWidth / state.routes.length;
 
   const bubbleOffset = useSharedValue(0);
+  const lens = useSharedValue(0);
   const measured = useRef(false);
 
   useEffect(() => {
-    const target = visualIndex * cellWidth;
+    const target = state.index * cellWidth;
     // snap on first layout so the bubble doesn't slide in from the left edge
     bubbleOffset.value = measured.current ? withSpring(target, SPRING) : target;
     measured.current = cellWidth > 0;
-  }, [visualIndex, cellWidth, bubbleOffset]);
+  }, [state.index, cellWidth, bubbleOffset]);
 
   const bubbleStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: bubbleOffset.value }],
+    transform: [
+      { translateX: bubbleOffset.value },
+      { scaleX: 1 + lens.value * (LENS_SCALE_X - 1) },
+      { scaleY: 1 + lens.value * (LENS_SCALE_Y - 1) },
+    ],
   }));
 
   const onRowLayout = (e: LayoutChangeEvent) =>
     setRowWidth(e.nativeEvent.layout.width);
 
-  const cells = items.map(item => (
-    <TouchableOpacity
-      key={item.route.key}
-      accessibilityRole={'tab'}
-      accessibilityLabel={item.label}
-      accessibilityState={{ selected: item.focused }}
-      onPress={item.onPress}
-      onLongPress={item.onLongPress}
-      style={styles.floatingItem}
+  return (
+    <View
+      pointerEvents={'box-none'}
+      style={[
+        styles.floating,
+        {
+          left: insets.left + DuoMetrics.floatingTabBarMargin,
+          right: insets.right + DuoMetrics.floatingTabBarMargin,
+          bottom: getFloatingTabBarBottom(insets.bottom),
+        },
+      ]}
     >
-      {item.icon}
-      <Text
-        numberOfLines={1}
-        typography={'label_xs_medium'}
-        color={item.focused ? activeTintColor : inactiveTintColor}
+      <View
+        style={[
+          styles.floatingBar,
+          {
+            width:
+              state.routes.length * FLOATING_ITEM_WIDTH + 2 * FLOATING_PADDING,
+          },
+        ]}
+        accessibilityLabel={'bottom_tab_bar'}
       >
-        {item.label}
-      </Text>
-    </TouchableOpacity>
-  ));
-
-  if (useQr && floatingButton) {
-    cells.splice(
-      middle,
-      0,
-      <View key={'duo_tab_qr'} style={styles.floatingItem}>
+        <BarMaterial radius={FLOATING_HEIGHT / 2} interactive />
+        <View style={styles.floatingRow} onLayout={onRowLayout}>
+          {rowWidth > 0 && (
+            <Animated.View
+              pointerEvents={'none'}
+              style={[styles.floatingBubble, { width: cellWidth }, bubbleStyle]}
+            >
+              <SelectionMaterial />
+            </Animated.View>
+          )}
+          {items.map((item, index) => (
+            <TouchableOpacity
+              key={item.route.key}
+              accessibilityRole={'tab'}
+              accessibilityLabel={item.label}
+              accessibilityState={{ selected: item.focused }}
+              activeOpacity={1}
+              onPressIn={() => {
+                // the lens jumps to the pressed tab, not only the selected one
+                bubbleOffset.value = withSpring(index * cellWidth, SPRING);
+                lens.value = withSpring(1, SPRING);
+              }}
+              onPressOut={() => {
+                // onPress follows synchronously, a tab switch re-targets the bubble
+                bubbleOffset.value = withSpring(state.index * cellWidth, SPRING);
+                lens.value = withSpring(0, SPRING);
+              }}
+              onPress={item.onPress}
+              onLongPress={item.onLongPress}
+              style={styles.floatingItem}
+            >
+              {item.icon}
+              {/* Text scales with the 669pt wide display, the smaller token lands near the system bar's label */}
+              <Text
+                numberOfLines={1}
+                typography={'label_xxs'}
+                color={item.focused ? activeTintColor : inactiveTintColor}
+              >
+                {item.label}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </View>
+      {floatingButton && (
         <TouchableOpacity
           accessibilityRole={'button'}
           accessibilityLabel={floatingButton.label}
@@ -334,39 +414,7 @@ const DuoFloatingTabBar: React.FC<Props> = props => {
         >
           <QrIcon icon={floatingButton.icon} size={QR_ICON_SIZE} />
         </TouchableOpacity>
-      </View>,
-    );
-  }
-
-  return (
-    <View
-      style={[
-        styles.floating,
-        {
-          width: barWidth,
-          left: (width - barWidth) / 2,
-          bottom: insets.bottom + Spacing.M,
-        },
-      ]}
-      accessibilityLabel={'bottom_tab_bar'}
-    >
-      <BarMaterial radius={FLOATING_HEIGHT / 2} />
-      <View style={styles.floatingRow} onLayout={onRowLayout}>
-        {rowWidth > 0 && (
-          <Animated.View
-            pointerEvents={'none'}
-            style={[
-              styles.floatingBubble,
-              {
-                width: cellWidth,
-                backgroundColor: theme.colors.background.selected,
-              },
-              bubbleStyle,
-            ]}
-          />
-        )}
-        {cells}
-      </View>
+      )}
     </View>
   );
 };
@@ -430,6 +478,12 @@ const styles = StyleSheet.create({
   },
   floating: {
     position: 'absolute',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: Spacing.S,
+  },
+  floatingBar: {
+    flexShrink: 1,
     height: FLOATING_HEIGHT,
     padding: FLOATING_PADDING,
   },
@@ -442,7 +496,9 @@ const styles = StyleSheet.create({
     top: 0,
     bottom: 0,
     left: 0,
-    borderRadius: (FLOATING_HEIGHT - 2 * FLOATING_PADDING) / 2,
+  },
+  floatingBubbleFill: {
+    borderRadius: FLOATING_BUBBLE_RADIUS,
   },
   floatingItem: {
     flex: 1,
@@ -450,12 +506,17 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     gap: Spacing.XXS,
   },
+  // pink fills the whole pinned platter like the host app, shadow matches the glass bar
   floatingQr: {
-    width: FLOATING_QR_SIZE,
-    height: FLOATING_QR_SIZE,
-    borderRadius: FLOATING_QR_SIZE / 2,
+    width: FLOATING_HEIGHT,
+    height: FLOATING_HEIGHT,
+    borderRadius: FLOATING_HEIGHT / 2,
     alignItems: 'center',
     justifyContent: 'center',
+    shadowColor: Colors.black_20,
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.16,
+    shadowRadius: 16,
   },
 });
 

package/Application/BottomTab/index.tsx

@@ -31,6 +31,7 @@ import { DuoTabBar } from './DuoTabBar';
 import { DuoBarCompressionProvider } from './DuoBarCompression';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { useScreenLayout } from '../../Layout';
+import { getHeaderRowOptions } from '../../Layout/utils';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -39,13 +40,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const { nested, options, screen, initialParams } = route?.params;
-  const { headerHeight, headerStatusBarHeight } = useScreenLayout();
-  const headerStyleOptions = {
-    headerStyle: {
-      height: headerHeight,
-    },
-    headerStatusBarHeight,
-  };
+  const headerStyleOptions = getHeaderRowOptions(useScreenLayout());
 
   const opacityValue = 0.3;
   const scaleValue = 0.97;
@@ -321,7 +316,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             <DuoTabBar
               {...props}
               floatingButton={floatingButton}
-              inactiveTintColor={theme.colors.text.default}
+              inactiveTintColor={theme.colors.text.secondary}
               activeTintColor={theme.colors.primary}
             />
           ) : (

package/Application/Components/HeaderExtendHeader.tsx

@@ -16,7 +16,7 @@ import { SearchHeaderProps } from '../types';
 import BackgroundImageView from './BackgroundImageView';
 import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
 import { useScreenLayout } from '../../Layout';
-import { HeaderMetrics } from '../../Layout/utils';
+import { DuoMetrics, HeaderMetrics } from '../../Layout/utils';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
@@ -51,17 +51,27 @@ const HeaderExtendHeader: React.FC<{
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const layout = useScreenLayout();
 
+  // the iPhone Duo status bar row keeps side bar sized back and toolkit
+  const backWidth = layout.statusBarClearance
+    ? DuoMetrics.controlSize
+    : BACK_WIDTH;
+  const toolkitWidth = layout.statusBarClearance
+    ? DuoMetrics.itemPitch * 2 + SCREEN_PADDING
+    : TOOLKIT_WIDTH;
   const leftPosition =
     inputSearchProps?.leftPosition ||
-    (layout.sideBar ? SCREEN_PADDING : BACK_WIDTH + 20);
+    (layout.sideBar ? SCREEN_PADDING : backWidth + 20);
   const headerRightWidth =
-    customHeaderRightWidth ?? (layout.sideBar ? 0 : TOOLKIT_WIDTH);
+    customHeaderRightWidth ?? (layout.sideBar ? 0 : toolkitWidth);
   const contentLeft = layout.insetLeft + SCREEN_PADDING;
   const contentRight = layout.insetLeft + layout.contentWidth;
-  const collapsedLeft = layout.insetLeft + leftPosition;
+  // collapsed on the status bar row, the search stays between its clusters
+  const collapsedLeft =
+    layout.insetLeft + leftPosition + (layout.statusBarClearance?.left ?? 0);
+  const collapsedRight = contentRight - (layout.statusBarClearance?.right ?? 0);
   const searchWidth = layout.contentWidth - SCREEN_PADDING * 2;
   const collapsedSearchWidth =
-    contentRight - collapsedLeft - SCREEN_PADDING - headerRightWidth;
+    collapsedRight - collapsedLeft - SCREEN_PADDING - headerRightWidth;
   // a row taller than barHeight (iPhone Duo) centers the collapsed search on the title
   const collapsedRaise =
     (layout.headerHeight -

package/Application/Components/HeaderLeft.tsx

@@ -6,7 +6,7 @@ import { PopupNotify } from '../../Popup';
 import { NavigationButton } from './NavigationButton';
 import { SideBarButton } from './SideBarButton';
 import Animated from 'react-native-reanimated';
-import { useSideBarItemStyle } from '../../Layout/utils';
+import { useScreenLayout, useSideBarItemStyle } from '../../Layout/utils';
 import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
 
 /**
@@ -23,6 +23,7 @@ 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?.();
@@ -95,6 +96,20 @@ 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

package/Application/Components/HeaderRight.tsx

@@ -14,7 +14,7 @@ import { Tool, ToolGroup } from '../types';
 import { Icon } from '../../Icon';
 import { Text } from '../../Text';
 import Animated from 'react-native-reanimated';
-import { useSideBarItemStyle } from '../../Layout/utils';
+import { useScreenLayout, useSideBarItemStyle } from '../../Layout/utils';
 import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
 import { SideBarButton, SideBarGroup, SideBarGroupItem } from './SideBarButton';
 import { useDuoBarCompression } from '../BottomTab/DuoBarCompression';
@@ -85,6 +85,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   const context = useContext<any>(MiniAppContext);
   const { toolbarCompressed, toolbarHidden, expandToolbar, setToolbarHeight } =
     useDuoBarCompression();
+  const { statusBarClearance } = useScreenLayout();
 
   const [isFavorite, setIsFavorite] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -358,6 +359,39 @@ 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>
+          {useHelpCenter && (
+            <SideBarGroupItem
+              accessibilityLabel={'btn_navigation_help_center'}
+              icon={'help_center'}
+              tintColor={tintColor}
+              onPress={onPressHelpCenter}
+            />
+          )}
+          <SideBarGroupItem
+            accessibilityLabel={'btn_navigation_close'}
+            icon={closeIcon}
+            tintColor={tintColor}
+            onPress={onClose}
+          />
+        </SideBarGroup>
+      </View>
+    );
+  }
+
   return (
     <View style={Styles.row}>
       {useShortcut && (
@@ -471,6 +505,10 @@ const styles = StyleSheet.create({
   sideBarColumn: {
     gap: Spacing.M,
   },
+  sideBarRow: {
+    flexDirection: 'row',
+    gap: Spacing.M,
+  },
   headerLeft: {
     marginLeft: 12,
   },

package/Application/Components/HeaderTitle.tsx

@@ -33,15 +33,29 @@ const useHeaderFontFamily = (): string => {
  */
 const HEADER_ACTIONS_WIDTH = 172;
 
+/**
+ * extra width the 48pt back and toolkit take on the iPhone Duo status bar row
+ */
+const STATUS_BAR_ROW_ACTIONS_EXTRA = 55;
+
 /**
  * max title width, the iPhone Duo side bar takes back and toolkit out of the bar
  */
 const useTitleMaxWidth = () => {
-  const { width, contentWidth, sideBar } = useScreenLayout();
+  const { width, contentWidth, sideBar, statusBarClearance } =
+    useScreenLayout();
+  const clearance = statusBarClearance
+    ? statusBarClearance.left + statusBarClearance.right
+    : 0;
   if (sideBar) {
-    return contentWidth - Spacing.M * 2;
+    return contentWidth - Spacing.M * 2 - clearance;
   }
-  return width - HEADER_ACTIONS_WIDTH;
+  return (
+    width -
+    HEADER_ACTIONS_WIDTH -
+    (statusBarClearance ? STATUS_BAR_ROW_ACTIONS_EXTRA : 0) -
+    clearance
+  );
 };
 
 type HeaderTitleInterpolate = {

package/Application/Components/SearchHeader.tsx

@@ -8,6 +8,7 @@ import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
 import { useNormalizedSharedValue } from '../utils';
 import { useScreenLayout } from '../../Layout';
+import { DuoMetrics } from '../../Layout/utils';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
@@ -22,8 +23,9 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   ) => {
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
-    const BACK_WIDTH = 28;
     const layout = useScreenLayout();
+    // the iPhone Duo status bar row keeps a side bar sized back button
+    const BACK_WIDTH = layout.statusBarClearance ? DuoMetrics.controlSize : 28;
 
     const sharedValue = useNormalizedSharedValue(animatedValue);
     const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
@@ -34,6 +36,10 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     if (layout.sideBar) {
       searchMaxWidth = layout.contentWidth - Spacing.M * 2 - headerRightWidth;
     }
+    if (layout.statusBarClearance) {
+      searchMaxWidth -=
+        layout.statusBarClearance.left + layout.statusBarClearance.right;
+    }
 
     const backgroundStyle = useAnimatedStyle(() => {
       const t = Math.min(Math.max(sharedValue.value / 100, 0), 1);

package/Application/Components/SideBarButton.tsx

@@ -54,19 +54,30 @@ const SideBarButton: React.FC<NavigationButtonProps> = ({
 };
 
 /**
- * 48pt wide glass capsule grouping related controls, one item per 50pt
+ * 48pt glass capsule grouping related controls, one item per 50pt, laid out vertically
+ * in the side bar or horizontally on a header row
  */
 const SideBarGroup: React.FC<{
   tintColor?: string;
+  horizontal?: boolean;
   style?: StyleProp<ViewStyle>;
   children: ReactNode;
-}> = ({ tintColor, style, children }) => {
+}> = ({ tintColor, horizontal = false, style, children }) => {
   const count = React.Children.toArray(children).length;
-  const height =
+  const length =
     count > 1 ? count * DuoMetrics.itemPitch : DuoMetrics.controlSize;
 
   return (
-    <View style={[styles.control, getGlassStyle(tintColor), { height }, style]}>
+    <View
+      style={[
+        styles.control,
+        getGlassStyle(tintColor),
+        horizontal
+          ? { width: length, flexDirection: 'row' }
+          : { height: length },
+        style,
+      ]}
+    >
       {children}
     </View>
   );

package/Application/NavigationContainer.tsx

@@ -31,6 +31,7 @@ import { HeaderTitle } from './Components/HeaderTitle';
 import { HeaderBackground } from './Components/HeaderBackground';
 import { type EdgeInsets } from 'react-native-safe-area-context';
 import { useScreenLayout } from '../Layout';
+import { getHeaderRowOptions } from '../Layout/utils';
 import { ReservedRegionsProvider } from '../Layout/ReservedRegions';
 
 const Stack = createStackNavigator();
@@ -107,7 +108,7 @@ const Navigation: React.FC<any> = ({
   const navigationRef = useRef<any>(null);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
-  const { headerHeight, headerStatusBarHeight } = useScreenLayout();
+  const headerRowOptions = getHeaderRowOptions(useScreenLayout());
   const syncCanGoBack = useNativeCanGoBack();
   const isWhiteList = isWhiteListDesignSystem(context);
   const fontFamily = isWhiteList ? 'MomoTrustSans' : 'SFProText';
@@ -204,10 +205,7 @@ const Navigation: React.FC<any> = ({
               gestureEnabled: false,
               headerTitleAlign: 'center',
               headerTintColor: theme.colors.text.default,
-              headerStyle: {
-                height: headerHeight,
-              },
-              headerStatusBarHeight,
+              ...headerRowOptions,
             }}
           >
             <Stack.Screen

package/Layout/Screen.tsx

@@ -525,6 +525,10 @@ const Screen = forwardRef(
         searchWidth = layout.contentWidth - Spacing.M * 2;
         searchLeft = Spacing.M - getHeaderMargin(layout.width);
       }
+      if (layout.statusBarClearance) {
+        searchWidth -=
+          layout.statusBarClearance.left + layout.statusBarClearance.right;
+      }
       const options: StackNavigationOptions = {
         headerRight: undefined,
         headerTitleContainerStyle: {

package/Layout/utils.ts

@@ -77,6 +77,14 @@ const HeaderMetrics = {
  * - edgeInset: on the outer display in landscape the strip holds no status bar, so its
  *   controls start this far from the top and stay this far above the bottom, unless a
  *   reserved region (the camera at either end) asks for more
+ * - innerStatusBarCenterY / innerStatusBarWidth: on the inner display in portrait the
+ *   clock and connectivity cluster sits at the top right corner (x 550–643 of 669, clock
+ *   digits centered on y 47); its reserved region, when reported, is taller than the glyphs
+ * - floatingTabBarHeight / floatingTabBarMargin / floatingTabBarInsetOverlap: the host
+ *   app's iOS 26 system tab bar on the inner display in portrait, a 62pt Liquid Glass pill
+ *   sized to its tabs with the QR as a pinned 62pt platter beside it, centered and at
+ *   least 20pt from the side edges; it overlaps the home indicator inset by 13pt (21pt
+ *   above the screen bottom with a 34pt inset)
  */
 const DuoMetrics = {
   maxAspectRatio: 1.6,
@@ -88,6 +96,11 @@ const DuoMetrics = {
   outerHeaderHeight: 76,
   outerCameraCenterY: 45,
   edgeInset: 24,
+  innerStatusBarCenterY: 47,
+  innerStatusBarWidth: 120,
+  floatingTabBarHeight: 62,
+  floatingTabBarMargin: 20,
+  floatingTabBarInsetOverlap: 13,
 };
 
 const NO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
@@ -124,6 +137,39 @@ const getStripOcclusion = (
     { top: 0, topCenter: 0, bottom: 0 },
   );
 
+/**
+ * how far the clock and battery clusters of a status bar on the top edge reach in from
+ * each side. `undefined` without reserved regions there
+ */
+const getStatusBarClusters = (
+  regions: ReservedRegion[],
+  windowWidth: number,
+  topInset: number,
+) => {
+  const midX = windowWidth / 2;
+  const clusters = regions.filter(
+    region =>
+      region.y < topInset &&
+      region.y + region.height <= topInset &&
+      (region.x + region.width <= midX || region.x >= midX),
+  );
+  if (!clusters.length) {
+    return undefined;
+  }
+
+  return clusters.reduce(
+    (result, region) => {
+      if (region.x < midX) {
+        result.left = Math.max(result.left, region.x + region.width);
+      } else {
+        result.right = Math.max(result.right, windowWidth - region.x);
+      }
+      return result;
+    },
+    { left: 0, right: 0 },
+  );
+};
+
 const isIPhone = () =>
   Platform.OS === 'ios' && Platform.constants.interfaceIdiom === 'phone';
 
@@ -232,6 +278,17 @@ export type ScreenLayout = {
    * bars to the side. `undefined` while the bars stay horizontal.
    */
   sideBar?: SideBarLayout;
+
+  /**
+   * Room the header row keeps from each side for the clock and battery clusters, when
+   * iPhone Duo puts the row on the status bar (inner display in portrait).
+   */
+  statusBarClearance?: StatusBarClearance;
+};
+
+export type StatusBarClearance = {
+  left: number;
+  right: number;
 };
 
 /**
@@ -280,6 +337,23 @@ const useScreenLayout = (): ScreenLayout => {
     };
   }
 
+  let statusBarClearance: StatusBarClearance | undefined;
+  const isInnerPortrait = height > width && width >= DuoMetrics.innerMinHeight;
+  if (isInnerPortrait && insets.top >= HeaderMetrics.statusBarMinInset) {
+    // the row shares the status bar band, between its clusters
+    const clusters = getStatusBarClusters(
+      reservedRegions,
+      width,
+      insets.top,
+    ) ?? { left: 0, right: DuoMetrics.innerStatusBarWidth + Spacing.S };
+    // center on the clock digits, the region center sits above them
+    headerLayout = {
+      headerHeight: DuoMetrics.innerStatusBarCenterY * 2,
+      headerStatusBarHeight: 0,
+    };
+    statusBarClearance = clusters;
+  }
+
   const sideInset = Math.max(insets.left, insets.right);
   let sideBar: SideBarLayout | undefined;
   // narrower strips cannot host a control 12pt from the inner edge
@@ -295,7 +369,9 @@ const useScreenLayout = (): ScreenLayout => {
       height,
     );
 
-    let top = insets.top + HeaderMetrics.barHeight + Spacing.M;
+    let top = statusBarClearance
+      ? headerLayout.headerHeight + Spacing.M
+      : insets.top + HeaderMetrics.barHeight + Spacing.M;
     if (insets.top < HeaderMetrics.statusBarMinInset) {
       // status bar lives in the strip: start under its cluster, as the native bar does
       const isLandscape = width > height;
@@ -342,9 +418,30 @@ const useScreenLayout = (): ScreenLayout => {
     contentWidth: width - insets.left - insets.right,
     ...headerLayout,
     sideBar,
+    statusBarClearance,
   };
 };
 
+/**
+ * Header row options for react-navigation: its height, the room for the status bar, and
+ * on iPhone Duo inner portrait the buttons kept clear of the clock and battery clusters
+ */
+const getHeaderRowOptions = ({
+  headerHeight,
+  headerStatusBarHeight,
+  statusBarClearance,
+  sideBar,
+}: ScreenLayout) => ({
+  headerStyle: { height: headerHeight },
+  headerStatusBarHeight,
+  // side bar controls are absolute within the containers, padding would not move them
+  ...(statusBarClearance &&
+    !sideBar && {
+      headerLeftContainerStyle: { paddingLeft: statusBarClearance.left },
+      headerRightContainerStyle: { paddingRight: statusBarClearance.right },
+    }),
+});
+
 /**
  * Side margin @react-navigation/elements Header adds to its content row
  */
@@ -410,6 +507,7 @@ export {
   DuoMetrics,
   HeaderMetrics,
   getHeaderMargin,
+  getHeaderRowOptions,
   useGridSystem,
   useScreenLayout,
   useSideBarItemStyle,

package/package.json

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