@momo-kits/foundation 0.167.1-duotest.2 → 0.167.1-duotest.3

package/Application/BottomSheet.tsx

@@ -18,7 +18,6 @@ import {
   Pressable,
   StyleSheet,
   TouchableOpacity,
-  useWindowDimensions,
   View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -40,6 +39,7 @@ import Animated, {
 import { scheduleOnRN } from 'react-native-worklets';
 import layoutStyles from '../Layout/styles';
 import { getDuoTopInset, isIPhoneDuo } from './device';
+import { useWindowLayout } from '../Layout/utils';
 
 // iPhone Duo inner display: center the sheet instead of spanning the width
 const DUO_REGULAR_MIN_WIDTH = 600;
@@ -47,7 +47,7 @@ const DUO_REGULAR_MIN_WIDTH = 600;
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const windowSize = useWindowDimensions();
+  const windowSize = useWindowLayout();
   const isDuo = isIPhoneDuo();
   const isDuoCentered = isDuo && windowSize.width >= DUO_REGULAR_MIN_WIDTH;
   const isPortrait = windowSize.height > windowSize.width;

package/Application/BottomTab/BottomTabBar.tsx

@@ -5,7 +5,6 @@ import {
   Platform,
   StyleSheet,
   TouchableOpacity,
-  useWindowDimensions,
   View,
 } from 'react-native';
 import Animated, {
@@ -19,6 +18,7 @@ import { Icon } from '../../Icon';
 import { Text } from '../../Text';
 import { FloatingButtonProps } from '../types';
 import CustomBottomTabItem from './CustomBottomTabItem';
+import { useWindowLayout } from '../../Layout/utils';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 
 type Props = BottomTabBarProps & {
@@ -57,7 +57,7 @@ export default function BottomTabBar({
 }: Props) {
   const { theme } = useContext(ApplicationContext);
   const { routes } = state;
-  const widthDevice = useWindowDimensions()?.width;
+  const widthDevice = useWindowLayout()?.width;
   const insets = useSafeAreaInsets();
   const useFloating = floatingButton && state.routes.length % 2 === 0;
   const itemWidth =

package/Application/BottomTab/DuoBarCompression.tsx

@@ -34,8 +34,6 @@ const DEFAULT_TOOLBAR_HEIGHT =
   DuoMetrics.controlSize + Spacing.M + 2 * DuoMetrics.itemPitch;
 // Back, then the single button the toolbar folds into
 const COMPRESSED_TOOLBAR_HEIGHT = 2 * DuoMetrics.controlSize + Spacing.M;
-// Back alone, while a rail opened from the compressed state takes the toolbar slot
-const BACK_ONLY_HEIGHT = DuoMetrics.controlSize;
 
 const NO_COMPRESSION: DuoBarCompression = {
   toolbarCompressed: false,
@@ -107,7 +105,9 @@ const DuoBarCompressionProvider: React.FC<{
       expandTabBar: () => setOpened('tabBar'),
       setToolbarHeight,
     };
-    if (opened === 'tabBar' && fits(BACK_ONLY_HEIGHT, tabBar)) {
+    // an opened rail always shows, even when only the gap between the groups is short:
+    // it closes again once a tab is picked
+    if (opened === 'tabBar') {
       return {
         ...open,
         toolbarCompressed: true,

package/Application/BottomTab/DuoTabBar.tsx

@@ -13,7 +13,7 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 import { Colors, Radius, Spacing } from '../../Consts';
-import { ApplicationContext } from '../../Context';
+import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Icon } from '../../Icon';
 import { DuoMetrics, useScreenLayout } from '../../Layout/utils';
 import { Text } from '../../Text';
@@ -33,40 +33,49 @@ const ICON_SIZE = 28;
 const QR_ICON_SIZE = 24;
 const RAIL_PADDING = 6;
 const RAIL_GAP = Spacing.XXS;
+const RAIL_PITCH = ITEM_SIZE + RAIL_GAP;
 // 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 +98,67 @@ 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<{ radius: number }> = ({ radius }) => {
+  const { theme } = useContext(ApplicationContext);
+  return (
+    <>
+      {GlassView && (
+        <GlassView
+          pointerEvents={'none'}
+          effect={'glass'}
+          cornerRadius={radius}
+          style={StyleSheet.absoluteFill}
+        />
+      )}
+      <View
+        pointerEvents={'none'}
+        style={[
+          StyleSheet.absoluteFill,
+          {
+            borderRadius: radius,
+            backgroundColor: theme.colors.primary + SELECTION_TINT_ALPHA,
+          },
+        ]}
+      />
+    </>
+  );
+};
+
+/**
+ * tab label at its design size: like the system tab bar it doesn't grow with the wide
+ * Duo displays, which Text otherwise scales up to 5pt
+ */
+const TabLabel: React.FC<{
+  label: string;
+  color: string;
+  typography: 'label_xs_medium';
+}> = ({ label, color, typography }) => {
+  const context = useContext<any>(MiniAppContext);
+  return (
+    <MiniAppContext.Provider
+      value={{
+        ...context,
+        fontScale: { useOSScaleRate: false, userScaleRate: 1 },
+      }}
+    >
+      <Text
+        numberOfLines={1}
+        typography={typography}
+        color={color}
+      >
+        {label}
+      </Text>
+    </MiniAppContext.Provider>
+  );
+};
+
 const getTabItems = ({
   state,
   descriptors,
@@ -150,41 +220,52 @@ const QrIcon: React.FC<{ icon: FloatingButtonProps['icon']; size: number }> = ({
 type TabItem = ReturnType<typeof getTabItems>[number];
 
 /**
- * glass column of tab items with the sliding selection bubble
+ * glass column of icon-only tab items with the sliding selection bubble
  */
 const Rail: React.FC<{
   items: TabItem[];
   index: number;
   onItemPress?: () => void;
 }> = ({ items, index, onItemPress }) => {
-  const { theme } = useContext(ApplicationContext);
-  const bubbleOffset = useSharedValue(index * (ITEM_SIZE + RAIL_GAP));
+  const bubbleOffset = useSharedValue(index * RAIL_PITCH);
+  const lens = useSharedValue(0);
 
   useEffect(() => {
-    bubbleOffset.value = withSpring(index * (ITEM_SIZE + RAIL_GAP), SPRING);
+    bubbleOffset.value = withSpring(index * RAIL_PITCH, SPRING);
   }, [index, bubbleOffset]);
 
   const bubbleStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: bubbleOffset.value }],
+    transform: [
+      { translateY: bubbleOffset.value },
+      { scaleX: 1 + lens.value * (LENS_SCALE_X - 1) },
+      { scaleY: 1 + lens.value * (LENS_SCALE_Y - 1) },
+    ],
   }));
 
   return (
     <View style={styles.rail} accessibilityLabel={'bottom_tab_bar'}>
-      <BarMaterial radius={Radius.XL} />
+      <BarMaterial radius={ITEM_SIZE / 2} interactive />
       <Animated.View
         pointerEvents={'none'}
-        style={[
-          styles.railBubble,
-          { backgroundColor: theme.colors.background.selected },
-          bubbleStyle,
-        ]}
-      />
-      {items.map(item => (
+        style={[styles.railBubble, bubbleStyle]}
+      >
+        <SelectionMaterial radius={RAIL_BUBBLE_WIDTH / 2} />
+      </Animated.View>
+      {items.map((item, itemIndex) => (
         <TouchableOpacity
           key={item.route.key}
           accessibilityRole={'tab'}
           accessibilityLabel={item.label}
           accessibilityState={{ selected: item.focused }}
+          activeOpacity={1}
+          onPressIn={() => {
+            bubbleOffset.value = withSpring(itemIndex * RAIL_PITCH, SPRING);
+            lens.value = withSpring(1, SPRING);
+          }}
+          onPressOut={() => {
+            bubbleOffset.value = withSpring(index * RAIL_PITCH, SPRING);
+            lens.value = withSpring(0, SPRING);
+          }}
           onPress={() => {
             item.onPress();
             onItemPress?.();
@@ -267,65 +348,103 @@ 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 radius={FLOATING_BUBBLE_RADIUS} />
+            </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}
+              <TabLabel
+                label={item.label}
+                typography={'label_xs_medium'}
+                color={item.focused ? activeTintColor : inactiveTintColor}
+              />
+            </TouchableOpacity>
+          ))}
+        </View>
+      </View>
+      {floatingButton && (
         <TouchableOpacity
           accessibilityRole={'button'}
           accessibilityLabel={floatingButton.label}
@@ -334,39 +453,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>
   );
 };
@@ -413,7 +500,6 @@ const styles = StyleSheet.create({
     left: (ITEM_SIZE - RAIL_BUBBLE_WIDTH) / 2,
     width: RAIL_BUBBLE_WIDTH,
     height: RAIL_BUBBLE_HEIGHT,
-    borderRadius: RAIL_BUBBLE_WIDTH / 2,
   },
   railItem: {
     width: ITEM_SIZE,
@@ -430,6 +516,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 +534,6 @@ const styles = StyleSheet.create({
     top: 0,
     bottom: 0,
     left: 0,
-    borderRadius: (FLOATING_HEIGHT - 2 * FLOATING_PADDING) / 2,
   },
   floatingItem: {
     flex: 1,
@@ -450,12 +541,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

@@ -12,7 +12,6 @@ import {
   Platform,
   StatusBar,
   StyleSheet,
-  useWindowDimensions,
   View,
 } from 'react-native';
 import Animated, {
@@ -35,7 +34,7 @@ import {
   ScreenContext,
 } from '../../Context';
 import { useScreenLayout } from '../../Layout';
-import { getHeaderRowOptions } from '../../Layout/utils';
+import { getHeaderRowOptions, useWindowLayout } from '../../Layout/utils';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -216,7 +215,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
     screen?.syncHeader?.();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const dimensions = useWindowDimensions();
+  const dimensions = useWindowLayout();
   const insets = useSafeAreaInsets();
   const initialIndex = tabs.findIndex(i => i.name === initialRouteName);
   const indicatorAnimated = useSharedValue(0);
@@ -327,7 +326,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             <DuoTabBar
               {...props}
               floatingButton={floatingButton}
-              inactiveTintColor={theme.colors.text.default}
+              inactiveTintColor={theme.colors.text.hint}
               activeTintColor={theme.colors.primary}
             />
           ) : (

package/Application/ModalScreen.tsx

@@ -8,7 +8,6 @@ import {
   Platform,
   Pressable,
   StyleSheet,
-  useWindowDimensions,
   View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -19,6 +18,7 @@ import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
 import { getDuoTopInset, isIPhoneDuo } from './device';
+import { useWindowLayout } from '../Layout/utils';
 import { scheduleOnRN } from 'react-native-worklets';
 
 const ModalScreen: React.FC<any> = props => {
@@ -41,7 +41,7 @@ const Modal: React.FC<ModalParams> = props => {
   } = props.route.params;
   const Component = useRef(screen).current;
   const insets = useSafeAreaInsets();
-  const windowSize = useWindowDimensions();
+  const windowSize = useWindowLayout();
 
   /**
    * Fire auto_popup_displayed tracking event on mount

package/Application/NavigationContainer.tsx

@@ -31,7 +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 { getHeaderRowOptions, useSideInsetsSync } from '../Layout/utils';
 import { ReservedRegionsProvider } from '../Layout/ReservedRegions';
 
 const Stack = createStackNavigator();
@@ -108,6 +108,7 @@ const Navigation: React.FC<any> = ({
   const navigationRef = useRef<any>(null);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
+  useSideInsetsSync();
   const headerRowOptions = getHeaderRowOptions(useScreenLayout());
   const syncCanGoBack = useNativeCanGoBack();
   const isWhiteList = isWhiteListDesignSystem(context);

package/Layout/utils.ts

@@ -1,5 +1,13 @@
-import React, { Fragment, ReactElement, useContext } from 'react';
-import { Platform, useWindowDimensions, ViewStyle } from 'react-native';
+import React, {
+  Fragment,
+  ReactElement,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+import { Dimensions, Platform, ScaledSize, ViewStyle } from 'react-native';
 import {
   EdgeInsets,
   SafeAreaInsetsContext,
@@ -80,6 +88,11 @@ const HeaderMetrics = {
  * - 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,
@@ -93,6 +106,9 @@ const DuoMetrics = {
   edgeInset: 24,
   innerStatusBarCenterY: 47,
   innerStatusBarWidth: 120,
+  floatingTabBarHeight: 62,
+  floatingTabBarMargin: 20,
+  floatingTabBarInsetOverlap: 13,
 };
 
 const NO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
@@ -224,12 +240,12 @@ export type SideBarLayout = {
 
 export type ScreenLayout = {
   /**
-   * Window width, from useWindowDimensions.
+   * Window width, side strips included.
    */
   width: number;
 
   /**
-   * Window height, from useWindowDimensions.
+   * Window height.
    */
   height: number;
 
@@ -304,13 +320,91 @@ const isIPhoneDuoLayout = (
   return isSquare || insets.left !== insets.right;
 };
 
+/**
+ * On iPhone Duo the side strips belong to the side bar, so the 'window' every screen
+ * reads (Dimensions, useWindowDimensions) is narrowed to the content width. Mini-apps
+ * that size views from the window then fit without code changes. Kits parts that span
+ * the real window (side bar, header, sheets, popups) read useWindowLayout instead.
+ */
+let realWindow: ScaledSize = Dimensions.get('window');
+let sideInsets = { left: 0, right: 0 };
+const windowListeners = new Set<() => void>();
+let sideInsetsOwner: object | undefined;
+
+const toContentWindow = (window: ScaledSize): ScaledSize => {
+  const isIPhoneDuo = isIPhoneDuoLayout(window.width, window.height, {
+    ...NO_INSETS,
+    ...sideInsets,
+  });
+  return isIPhoneDuo
+    ? { ...window, width: window.width - sideInsets.left - sideInsets.right }
+    : window;
+};
+
+if (Platform.OS === 'ios') {
+  const setDimensions = Dimensions.set;
+  // native rotation / fold updates come through Dimensions.set
+  Dimensions.set = (dims: { window: ScaledSize; screen: ScaledSize }) => {
+    if (dims.window !== realWindow) {
+      realWindow = dims.window;
+      windowListeners.forEach(listener => listener());
+    }
+    setDimensions({ ...dims, window: toContentWindow(dims.window) });
+  };
+}
+
+// the outermost NavigationContainer reports the side insets, they follow the window
+const useSideInsetsSync = () => {
+  const insets = useContext(SafeAreaInsetsContext);
+  const [owner] = useState({});
+  const left = insets?.left ?? 0;
+  const right = insets?.right ?? 0;
+
+  useLayoutEffect(() => {
+    sideInsetsOwner = sideInsetsOwner ?? owner;
+    if (
+      Platform.OS !== 'ios' ||
+      sideInsetsOwner !== owner ||
+      (sideInsets.left === left && sideInsets.right === right)
+    ) {
+      return;
+    }
+    sideInsets = { left, right };
+    Dimensions.set({ window: realWindow, screen: Dimensions.get('screen') });
+  }, [owner, left, right]);
+
+  useEffect(
+    () => () => {
+      if (sideInsetsOwner === owner) {
+        sideInsetsOwner = undefined;
+      }
+    },
+    [owner],
+  );
+};
+
+const subscribeWindow = (listener: () => void) => {
+  windowListeners.add(listener);
+  return () => {
+    windowListeners.delete(listener);
+  };
+};
+
+const getWindowLayout = () => realWindow;
+
+/**
+ * The real window, side strips included. useWindowDimensions is narrowed on iPhone Duo.
+ */
+const useWindowLayout = () =>
+  useSyncExternalStore(subscribeWindow, getWindowLayout);
+
 /**
  * Screen layout for the current window: iPhone Duo detection, horizontal content insets,
  * content width and the side bar. Follows the window through fold, unfold, rotation and
- * Split View since it reads useWindowDimensions and the safe-area context.
+ * Split View since it reads the real window and the safe-area context.
  */
 const useScreenLayout = (): ScreenLayout => {
-  const { width, height } = useWindowDimensions();
+  const { width, height } = useWindowLayout();
   const insets = useContext(SafeAreaInsetsContext) ?? NO_INSETS;
   const reservedRegions = useContext(ReservedRegionsContext);
 
@@ -500,8 +594,11 @@ export {
   HeaderMetrics,
   getHeaderMargin,
   getHeaderRowOptions,
+  getWindowLayout,
   useGridSystem,
   useScreenLayout,
+  useSideInsetsSync,
   useSideBarItemStyle,
+  useWindowLayout,
   validateChildren,
 };

package/Popup/utils.ts

@@ -1,4 +1,4 @@
-import { Dimensions, useWindowDimensions } from 'react-native';
+import { getWindowLayout, useWindowLayout } from '../Layout/utils';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Spacing } from '../Consts';
 import { getDuoTopInset, isIPhoneDuo } from '../Application/device';
@@ -7,9 +7,9 @@ import { getDuoTopInset, isIPhoneDuo } from '../Application/device';
 const DUO_POPUP_MAX_WIDTH = 440;
 
 const usePopupWidth = () => {
-  const windowSize = useWindowDimensions();
+  const windowSize = useWindowLayout();
   if (!isIPhoneDuo()) {
-    return Dimensions.get('window').width - Spacing.XL * 2;
+    return getWindowLayout().width - Spacing.XL * 2;
   }
   return Math.min(windowSize.width - Spacing.XL * 2, DUO_POPUP_MAX_WIDTH);
 };
@@ -17,7 +17,7 @@ const usePopupWidth = () => {
 // room left for a popup on iPhone Duo, where landscape is too short for it
 const usePopupMaxHeight = () => {
   const insets = useSafeAreaInsets();
-  const { width, height } = useWindowDimensions();
+  const { width, height } = useWindowLayout();
   if (!isIPhoneDuo()) {
     return undefined;
   }

package/Text/utils.ts

@@ -1,6 +1,7 @@
-import { Dimensions, PixelRatio, useWindowDimensions } from 'react-native';
+import { PixelRatio } from 'react-native';
 import { useContext } from 'react';
 import { MiniAppContext } from '../Context';
+import { getWindowLayout, useWindowLayout } from '../Layout/utils';
 
 const DEFAULT_SCREEN_SIZE = 375;
 const MAX_FONT_SCALE = 1.5;
@@ -8,11 +9,11 @@ const MAX_DEVICE_SCALE = 5;
 
 const useScaleSize = (size: number, scaleRate?: number) => {
   const context = useContext<any>(MiniAppContext);
+  const { width } = useWindowLayout();
   if (context?.fontScale?.useOSScaleRate === false) {
     return size * (context.fontScale.userScaleRate ?? 1);
   }
   const fontScale = PixelRatio.getFontScale();
-  const { width } = useWindowDimensions();
   const deviceScale = width / DEFAULT_SCREEN_SIZE;
 
   const maxScaleRate = scaleRate ?? MAX_FONT_SCALE;
@@ -39,7 +40,7 @@ const useScaleSize = (size: number, scaleRate?: number) => {
 
 const scaleSize = (size: number) => {
   const fontScale = PixelRatio.getFontScale();
-  const deviceScale = Dimensions.get('window').width / DEFAULT_SCREEN_SIZE;
+  const deviceScale = getWindowLayout().width / DEFAULT_SCREEN_SIZE;
 
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;

package/package.json

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