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

package/Application/BottomSheet.tsx

@@ -1,14 +1,24 @@
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {
   BackHandler,
   Dimensions,
+  Keyboard,
   KeyboardAvoidingView,
+  KeyboardEvent,
+  LayoutAnimation,
   Modal,
   PanResponder,
   Platform,
   Pressable,
   StyleSheet,
   TouchableOpacity,
+  useWindowDimensions,
   View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -29,15 +39,31 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import layoutStyles from '../Layout/styles';
+import { getDuoTopInset, isIPhoneDuo } from './device';
+
+// iPhone Duo inner display: center the sheet instead of spanning the width
+const DUO_REGULAR_MIN_WIDTH = 600;
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const heightDevice = Dimensions.get('screen').height;
+  const windowSize = useWindowDimensions();
+  const isDuo = isIPhoneDuo();
+  const isDuoCentered = isDuo && windowSize.width >= DUO_REGULAR_MIN_WIDTH;
+  const isPortrait = windowSize.height > windowSize.width;
+  // 'screen' is the outer display on iPhone Duo, even when unfolded
+  const heightDevice = isDuo
+    ? windowSize.height
+    : Dimensions.get('screen').height;
   const action = useRef<undefined | string>(undefined);
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
-  const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
+  const topGap = Math.max(
+    getDuoTopInset(insets, windowSize.width, windowSize.height),
+    Spacing.XL,
+  );
+  const bottomInset =
+    Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
   const keyboardOffset = heightHeader - bottomInset;
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -58,6 +84,43 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }: BottomSheetParams = props.route.params;
 
   const translateY = useSharedValue(heightDevice);
+  const [keyboardLift, setKeyboardLift] = useState(0);
+
+  // KeyboardAvoidingView lifts the whole sheet past the top on iPhone Duo,
+  // so lift it here and shrink maxHeight by the same amount instead
+  useEffect(() => {
+    if (!isDuo || !useKeyboardAvoidingView) {
+      return;
+    }
+    const onKeyboardChange = (e: KeyboardEvent) => {
+      const overlap = windowSize.height - e.endCoordinates.screenY;
+      const lift = Math.max(
+        overlap - bottomInset - (keyboardVerticalOffset ?? 0),
+        0,
+      );
+      if (e.duration) {
+        LayoutAnimation.configureNext({
+          duration: e.duration,
+          update: {
+            duration: e.duration,
+            type: LayoutAnimation.Types[e.easing] || 'keyboard',
+          },
+        });
+      }
+      setKeyboardLift(lift);
+    };
+    const subscriptions = [
+      Keyboard.addListener('keyboardWillChangeFrame', onKeyboardChange),
+      Keyboard.addListener('keyboardWillHide', onKeyboardChange),
+    ];
+    return () => subscriptions.forEach(sub => sub.remove());
+  }, [
+    bottomInset,
+    isDuo,
+    keyboardVerticalOffset,
+    useKeyboardAvoidingView,
+    windowSize.height,
+  ]);
 
   const openAnimation = useCallback(() => {
     translateY.value = withTiming(0, {
@@ -248,6 +311,23 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     };
   });
 
+  // landscape side buttons span the full height, so inset the content; in
+  // portrait the side status bar only covers the top corner
+  const sideInsetStyle = isDuo &&
+    !isDuoCentered &&
+    !isPortrait && {
+      paddingLeft: insets.left,
+      paddingRight: insets.right,
+    };
+
+  const screen = (
+    <Screen
+      {...props}
+      {...props.route.params}
+      onRequestClose={onRequestClose}
+    />
+  );
+
   return (
     <Container
       transparent
@@ -264,7 +344,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           android: undefined,
         })}
         keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
-        enabled={useKeyboardAvoidingView}
+        enabled={useKeyboardAvoidingView && !isDuo}
         contentContainerStyle={styles.container}
         style={styles.container}
       >
@@ -287,15 +367,34 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               borderTopRightRadius: Radius.M,
               overflow: 'hidden',
             },
+            isDuo && {
+              maxHeight: windowSize.height - topGap - keyboardLift,
+              marginBottom: keyboardLift,
+            },
+            isDuoCentered && {
+              // keeps the portrait width in landscape, like system sheets
+              width: Math.min(
+                Math.min(windowSize.width, windowSize.height) - Spacing.L * 2,
+                windowSize.width -
+                  Math.max(insets.left, insets.right, Spacing.L) * 2,
+              ),
+              alignSelf: 'center',
+            },
             showBaseLineDebug && styles.debugBaseLine,
           ]}
         >
-          {renderHeader()}
-          <Screen
-            {...props}
-            {...props.route.params}
-            onRequestClose={onRequestClose}
-          />
+          {isDuo ? (
+            // content shrinks so a tall sheet keeps its header and footer
+            <View style={[styles.shrink, sideInsetStyle]}>
+              {renderHeader()}
+              <View style={styles.shrink}>{screen}</View>
+            </View>
+          ) : (
+            <>
+              {renderHeader()}
+              {screen}
+            </>
+          )}
           {footerComponent && (
             <View
               style={[
@@ -304,6 +403,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                   paddingBottom: Spacing.S,
                   backgroundColor: theme.colors.background.surface,
                 },
+                sideInsetStyle,
               ]}
             >
               {footerComponent}
@@ -353,6 +453,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginHorizontal: Spacing.M,
   },
+  shrink: { flexShrink: 1 },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 

package/Application/BottomTab/DuoTabBar.tsx

@@ -0,0 +1,410 @@
+import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import { CommonActions, Route } from '@react-navigation/native';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import {
+  LayoutChangeEvent,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { Colors, Radius, Spacing } from '../../Consts';
+import { ApplicationContext } from '../../Context';
+import { Icon } from '../../Icon';
+import { DuoMetrics, useScreenLayout } from '../../Layout/utils';
+import { Text } from '../../Text';
+import { GlassView } from '../Components/OptionalGlassView';
+import { FloatingButtonProps } from '../types';
+import { TabBarIcon } from './TabBarIcon';
+
+type Props = BottomTabBarProps & {
+  activeTintColor: string;
+  inactiveTintColor: string;
+  floatingButton?: FloatingButtonProps;
+};
+
+const ITEM_SIZE = DuoMetrics.controlSize;
+const ICON_SIZE = 28;
+const QR_ICON_SIZE = 24;
+const RAIL_PADDING = 6;
+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_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;
+const SPRING = { damping: 18, stiffness: 220, mass: 0.8 };
+
+/**
+ * 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
+    : 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 { theme } = useContext(ApplicationContext);
+  if (GlassView) {
+    return (
+      <GlassView
+        pointerEvents={'none'}
+        effect={'glass'}
+        cornerRadius={radius}
+        useShadow
+        style={StyleSheet.absoluteFill}
+      />
+    );
+  }
+  return (
+    <View
+      pointerEvents={'none'}
+      style={[
+        StyleSheet.absoluteFill,
+        styles.fallbackMaterial,
+        {
+          borderRadius: radius,
+          backgroundColor: theme.colors.background.surface,
+          borderColor: theme.colors.border.default,
+        },
+      ]}
+    />
+  );
+};
+
+const getTabItems = ({
+  state,
+  descriptors,
+  navigation,
+  activeTintColor,
+  inactiveTintColor,
+}: Props) => {
+  return state.routes.map((route: Route<string>, index: number) => {
+    const { options } = descriptors[route.key];
+    const focused = index === state.index;
+    const label = options.title ?? route.name;
+
+    const onPress = () => {
+      const event = navigation.emit({
+        type: 'tabPress',
+        target: route.key,
+        canPreventDefault: true,
+      });
+      if (!focused && !event.defaultPrevented) {
+        navigation.dispatch({
+          ...CommonActions.navigate(route.name),
+          target: state.key,
+        });
+      }
+    };
+
+    const onLongPress = () => {
+      navigation.emit({ type: 'tabLongPress', target: route.key });
+    };
+
+    const icon = options.tabBarIcon && (
+      <TabBarIcon
+        route={route}
+        badge={options.tabBarBadge}
+        badgeStyle={options.tabBarBadgeStyle}
+        activeOpacity={focused ? 1 : 0}
+        inactiveOpacity={focused ? 0 : 1}
+        activeTintColor={activeTintColor}
+        inactiveTintColor={inactiveTintColor}
+        renderIcon={options.tabBarIcon}
+        style={styles.icon}
+      />
+    );
+
+    return { route, focused, label, onPress, onLongPress, icon };
+  });
+};
+
+const QrIcon: React.FC<{ icon: FloatingButtonProps['icon']; size: number }> = ({
+  icon,
+  size,
+}) => {
+  if (typeof icon === 'string') {
+    return <Icon source={icon} size={size} color={Colors.black_01} />;
+  }
+  return <>{icon}</>;
+};
+
+/**
+ * vertical bar anchored to the bottom of the Duo side bar, QR button below it (Figma MT1-C/E)
+ */
+const DuoRailTabBar: React.FC<Props> = props => {
+  const { theme } = useContext(ApplicationContext);
+  const { sideBar } = useScreenLayout();
+  const { state, floatingButton } = props;
+  const items = getTabItems(props);
+  const bubbleOffset = useSharedValue(state.index * (ITEM_SIZE + RAIL_GAP));
+
+  useEffect(() => {
+    bubbleOffset.value = withSpring(
+      state.index * (ITEM_SIZE + RAIL_GAP),
+      SPRING,
+    );
+  }, [state.index, bubbleOffset]);
+
+  const bubbleStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: bubbleOffset.value }],
+  }));
+
+  if (!sideBar) {
+    return null;
+  }
+
+  return (
+    <View
+      pointerEvents={'box-none'}
+      style={[
+        styles.railColumn,
+        { [sideBar.edge]: 0, width: sideBar.width },
+        sideBar.edge === 'right'
+          ? { alignItems: 'flex-start', paddingLeft: Spacing.M }
+          : { alignItems: 'flex-end', paddingRight: Spacing.M },
+      ]}
+    >
+      <View style={styles.rail} accessibilityLabel={'bottom_tab_bar'}>
+        <BarMaterial radius={Radius.XL} />
+        <Animated.View
+          pointerEvents={'none'}
+          style={[
+            styles.railBubble,
+            { backgroundColor: theme.colors.background.selected },
+            bubbleStyle,
+          ]}
+        />
+        {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.railItem}
+          >
+            {item.icon}
+          </TouchableOpacity>
+        ))}
+      </View>
+      {floatingButton && (
+        <TouchableOpacity
+          accessibilityRole={'button'}
+          accessibilityLabel={floatingButton.label}
+          onPress={floatingButton.onPress}
+          style={[styles.railQr, { backgroundColor: theme.colors.primary }]}
+        >
+          <QrIcon icon={floatingButton.icon} size={QR_ICON_SIZE} />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+/**
+ * floating labelled bar for the unfolded portrait display, QR in the middle cell (Figma MT1-M)
+ */
+const DuoFloatingTabBar: React.FC<Props> = props => {
+  const { theme } = useContext(ApplicationContext);
+  const { width, 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 bubbleOffset = useSharedValue(0);
+  const measured = useRef(false);
+
+  useEffect(() => {
+    const target = visualIndex * 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]);
+
+  const bubbleStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: bubbleOffset.value }],
+  }));
+
+  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}
+    >
+      {item.icon}
+      <Text
+        numberOfLines={1}
+        typography={'label_xs_medium'}
+        color={item.focused ? activeTintColor : inactiveTintColor}
+      >
+        {item.label}
+      </Text>
+    </TouchableOpacity>
+  ));
+
+  if (useQr && floatingButton) {
+    cells.splice(
+      middle,
+      0,
+      <View key={'duo_tab_qr'} style={styles.floatingItem}>
+        <TouchableOpacity
+          accessibilityRole={'button'}
+          accessibilityLabel={floatingButton.label}
+          onPress={floatingButton.onPress}
+          style={[styles.floatingQr, { backgroundColor: theme.colors.primary }]}
+        >
+          <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>
+  );
+};
+
+/**
+ * iPhone Duo tab bar: glass rail in the side bar, or a floating glass bar when unfolded portrait
+ */
+const DuoTabBar: React.FC<Props> = props => {
+  const { sideBar } = useScreenLayout();
+  return sideBar ? (
+    <DuoRailTabBar {...props} />
+  ) : (
+    <DuoFloatingTabBar {...props} />
+  );
+};
+
+const styles = StyleSheet.create({
+  fallbackMaterial: {
+    borderWidth: 1,
+  },
+  icon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+  },
+  railColumn: {
+    position: 'absolute',
+    bottom: Spacing.XL,
+    gap: Spacing.M,
+  },
+  rail: {
+    width: ITEM_SIZE,
+    paddingVertical: RAIL_PADDING,
+    gap: RAIL_GAP,
+  },
+  railBubble: {
+    position: 'absolute',
+    top: RAIL_PADDING - (RAIL_BUBBLE_HEIGHT - ITEM_SIZE) / 2,
+    left: (ITEM_SIZE - RAIL_BUBBLE_WIDTH) / 2,
+    width: RAIL_BUBBLE_WIDTH,
+    height: RAIL_BUBBLE_HEIGHT,
+    borderRadius: RAIL_BUBBLE_WIDTH / 2,
+  },
+  railItem: {
+    width: ITEM_SIZE,
+    height: ITEM_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  railQr: {
+    width: ITEM_SIZE,
+    height: ITEM_SIZE,
+    borderRadius: ITEM_SIZE / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  floating: {
+    position: 'absolute',
+    height: FLOATING_HEIGHT,
+    padding: FLOATING_PADDING,
+  },
+  floatingRow: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  floatingBubble: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: (FLOATING_HEIGHT - 2 * FLOATING_PADDING) / 2,
+  },
+  floatingItem: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: Spacing.XXS,
+  },
+  floatingQr: {
+    width: FLOATING_QR_SIZE,
+    height: FLOATING_QR_SIZE,
+    borderRadius: FLOATING_QR_SIZE / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export { DuoTabBar, useDuoTabBarInset };

package/Application/BottomTab/index.tsx

@@ -27,6 +27,7 @@ import StackScreen from '../StackScreen';
 import { BottomTabProps } from '../types';
 import { getOptions, getStackOptions, useAppState } from '../utils';
 import BottomTabBar from './BottomTabBar';
+import { DuoTabBar } from './DuoTabBar';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { useScreenLayout } from '../../Layout';
 
@@ -206,6 +207,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
   floatingButton,
 }) => {
   const { theme, navigator } = useContext(ApplicationContext);
+  const { isIPhoneDuo } = useScreenLayout();
   const dimensions = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const initialIndex = tabs.findIndex(i => i.name === initialRouteName);
@@ -305,23 +307,32 @@ const BottomTab: React.FC<BottomTabProps> = ({
           </View>
         ),
       }}
-      tabBar={props => (
-        <BottomTabBar
-          {...props}
-          floatingButton={floatingButton}
-          inactiveTintColor={theme.colors.text.hint}
-          activeTintColor={theme.colors.primary}
-          style={[
-            {
-              height:
-                64 +
-                (Platform.OS === 'ios'
-                  ? Math.min(insets.bottom, 21)
-                  : insets.bottom),
-            },
-          ]}
-        />
-      )}
+      tabBar={props =>
+        isIPhoneDuo ? (
+          <DuoTabBar
+            {...props}
+            floatingButton={floatingButton}
+            inactiveTintColor={theme.colors.text.default}
+            activeTintColor={theme.colors.primary}
+          />
+        ) : (
+          <BottomTabBar
+            {...props}
+            floatingButton={floatingButton}
+            inactiveTintColor={theme.colors.text.hint}
+            activeTintColor={theme.colors.primary}
+            style={[
+              {
+                height:
+                  64 +
+                  (Platform.OS === 'ios'
+                    ? Math.min(insets.bottom, 21)
+                    : insets.bottom),
+              },
+            ]}
+          />
+        )
+      }
       initialRouteName={initialRouteName}
     >
       {tabs.map((item, index) => {

package/Application/Components/DuoGlassBackground.tsx

@@ -0,0 +1,177 @@
+import React, { useContext, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import { ApplicationContext } from '../../Context';
+import { Shadow } from '../../Consts';
+import { Image } from '../../Image';
+import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
+import { GlassView } from './OptionalGlassView';
+
+// extended headers run their gradient this far below the header, as off Duo
+const EXTENDED_GRADIENT_EXTRA = 52;
+// scroll distance over which the extended gradient collapses to the header
+const EXTENDED_COLLAPSE_DISTANCE = 100;
+// scroll distance over which the bar material fades in
+const FADE_DISTANCE = 16;
+const TRANSLUCENT_ALPHA = 'CC';
+
+/**
+ * iPhone Duo header background: glass running edge to edge, behind the status bar
+ * column too, shown once content scrolls under it
+ */
+const DuoGlassBackground: React.FC<{
+  animatedValue?: AnimatedCompatValue;
+  // scroll offset where the bar starts to show, e.g. below an animated banner
+  fadeStart?: number;
+}> = ({ animatedValue, fadeStart = 0 }) => {
+  const { theme } = useContext(ApplicationContext);
+  const sharedValue = useNormalizedSharedValue(animatedValue);
+  const [scrolled, setScrolled] = useState(false);
+
+  useAnimatedReaction(
+    () => sharedValue.value > fadeStart,
+    (isScrolled, wasScrolled) => {
+      if (GlassView && isScrolled !== wasScrolled) {
+        runOnJS(setScrolled)(isScrolled);
+      }
+    },
+    [fadeStart],
+  );
+
+  const fadeStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(
+      sharedValue.value,
+      [fadeStart, fadeStart + FADE_DISTANCE],
+      [0, 1],
+      Extrapolation.CLAMP,
+    ),
+  }));
+
+  return (
+    <View pointerEvents={'none'} style={StyleSheet.absoluteFill}>
+      {GlassView ? (
+        // UIVisualEffectView breaks under alpha, so glass toggles its effect instead
+        <GlassView
+          effect={scrolled ? 'glass' : 'none'}
+          useShadow
+          style={StyleSheet.absoluteFill}
+        />
+      ) : (
+        <Animated.View
+          style={[
+            StyleSheet.absoluteFill,
+            styles.translucentBar,
+            {
+              backgroundColor:
+                theme.colors.background.surface + TRANSLUCENT_ALPHA,
+              borderBottomColor: theme.colors.border.default,
+            },
+            fadeStyle,
+          ]}
+        />
+      )}
+    </View>
+  );
+};
+
+/**
+ * pink header gradient drawn under the content: header-high for default headers
+ * (scrolls away), 52 taller for extended ones (collapses and fades, as off Duo)
+ */
+const DuoScrollGradient: React.FC<{
+  animatedValue?: AnimatedCompatValue;
+  gradientColor?: string;
+  headerBackground?: string;
+  heightHeader: number;
+  extended?: boolean;
+}> = ({
+  animatedValue,
+  gradientColor,
+  headerBackground,
+  heightHeader,
+  extended,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const sharedValue = useNormalizedSharedValue(animatedValue);
+  const color = gradientColor ?? theme.colors.gradient;
+  const image = headerBackground ?? theme.assets?.headerBackground;
+
+  const scrollStyle = useAnimatedStyle(() => {
+    if (!extended) {
+      return {
+        height: heightHeader,
+        transform: [{ translateY: -Math.max(sharedValue.value, 0) }],
+      };
+    }
+    return {
+      height: interpolate(
+        sharedValue.value,
+        [0, EXTENDED_COLLAPSE_DISTANCE],
+        [heightHeader + EXTENDED_GRADIENT_EXTRA, heightHeader],
+        Extrapolation.CLAMP,
+      ),
+      opacity: interpolate(
+        sharedValue.value,
+        [0, EXTENDED_GRADIENT_EXTRA],
+        [1, 0],
+        Extrapolation.CLAMP,
+      ),
+    };
+  });
+
+  if (!color) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      pointerEvents={'none'}
+      style={[styles.gradient, scrollStyle]}
+    >
+      {/* extended squeezes the whole fade into its box like main; default clips it */}
+      <View style={extended ? StyleSheet.absoluteFill : styles.gradientFill}>
+        <LinearGradient
+          colors={[color, color + '00']}
+          style={StyleSheet.absoluteFill}
+        >
+          {!!image && (
+            <Image
+              style={styles.gradientFill}
+              source={{ uri: image }}
+              loading={false}
+            />
+          )}
+        </LinearGradient>
+      </View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  translucentBar: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    ...Shadow.Light,
+  },
+  gradient: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    overflow: 'hidden',
+  },
+  // default header gradient keeps the off-Duo 375:154 shape, the header clips it
+  gradientFill: {
+    width: '100%',
+    position: 'absolute',
+    aspectRatio: 375 / 154,
+  },
+});
+
+export { DuoGlassBackground, DuoScrollGradient };

package/Application/Components/OptionalGlassView.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+
+// native glass is optional so apps without @momo-kits/glass-view still bundle
+let GlassView: React.ComponentType<any> | undefined;
+try {
+  GlassView = require('@momo-kits/glass-view').GlassView;
+} catch {
+  GlassView = undefined;
+}
+
+export { GlassView };

package/Application/ModalScreen.tsx

@@ -8,14 +8,17 @@ import {
   Platform,
   Pressable,
   StyleSheet,
+  useWindowDimensions,
   View,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
+import { getDuoTopInset, isIPhoneDuo } from './device';
 import { scheduleOnRN } from 'react-native-worklets';
 
 const ModalScreen: React.FC<any> = props => {
@@ -37,6 +40,8 @@ const Modal: React.FC<ModalParams> = props => {
     title,
   } = props.route.params;
   const Component = useRef(screen).current;
+  const insets = useSafeAreaInsets();
+  const windowSize = useWindowDimensions();
 
   /**
    * Fire auto_popup_displayed tracking event on mount
@@ -147,6 +152,15 @@ const Modal: React.FC<ModalParams> = props => {
               opacity,
               transform: [{ scale }],
             },
+            // center below the side status bar and above the home indicator
+            isIPhoneDuo() && {
+              marginTop: getDuoTopInset(
+                insets,
+                windowSize.width,
+                windowSize.height,
+              ),
+              marginBottom: insets.bottom,
+            },
             modalStyle,
           ]}
         >

package/Application/device.ts

@@ -0,0 +1,29 @@
+import { Dimensions, Platform, ScaledSize } from 'react-native';
+import type { EdgeInsets } from 'react-native-safe-area-context';
+
+// widest short side of any single-display iPhone
+const IPHONE_MAX_SHORT_SIDE = 440;
+
+// iPhone Duo reports idiom "phone"; 'screen' stays on the outer display, so it
+// still matches when Split View narrows the window
+const isIPhoneDuo = () => {
+  if (Platform.OS !== 'ios' || Platform.isPad) {
+    return false;
+  }
+  const shortSide = (size: ScaledSize) => Math.min(size.width, size.height);
+  return (
+    Math.max(
+      shortSide(Dimensions.get('screen')),
+      shortSide(Dimensions.get('window')),
+    ) > IPHONE_MAX_SHORT_SIDE
+  );
+};
+
+// portrait side status bar is about twice as tall as its inset is wide
+const getDuoTopInset = (insets: EdgeInsets, width: number, height: number) =>
+  Math.max(
+    insets.top,
+    height > width ? Math.max(insets.left, insets.right) * 2 : 0,
+  );
+
+export { isIPhoneDuo, getDuoTopInset };

package/Layout/Screen.tsx

@@ -52,6 +52,11 @@ import {
   HeaderTitle,
   SearchHeader,
 } from '../Application';
+import {
+  DuoGlassBackground,
+  DuoScrollGradient,
+} from '../Application/Components/DuoGlassBackground';
+import { useDuoTabBarInset } from '../Application/BottomTab/DuoTabBar';
 
 export interface ScreenProps extends ViewProps {
   /**
@@ -247,13 +252,29 @@ const Screen = forwardRef(
     const currentTint = useRef<string | undefined>(undefined);
 
     const isTab = !!screen?.bottomTab;
+    // Duo floating tab bar overlays the tab content instead of taking layout space
+    const duoTabInset = useDuoTabBarInset();
 
     let handleScroll;
     let Component: any = View;
 
-    const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
+    const bottomInset =
+      Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
+    const hasSideBar = !!layout.sideBar;
+    // iPhone Duo: content scrolls under a glass header instead of starting below it
+    const useDuoGlass =
+      hasSideBar &&
+      (headerType === 'default' || headerType === 'extended') &&
+      !animatedHeader &&
+      !inputSearchProps;
+
     let keyboardOffset = heightHeader - bottomInset;
-    if (headerType === 'extended' || animatedHeader || inputSearchProps) {
+    if (
+      headerType === 'extended' ||
+      animatedHeader ||
+      inputSearchProps ||
+      useDuoGlass
+    ) {
       keyboardOffset = -bottomInset;
     }
 
@@ -282,7 +303,10 @@ const Screen = forwardRef(
             options = {
               headerShown: true,
               headerTransparent: true,
-              headerBackground: () => null,
+              headerBackground: () =>
+                hasSideBar ? (
+                  <DuoGlassBackground animatedValue={sharedValue} />
+                ) : null,
               headerTitle: (props: any) => <HeaderTitle {...props} />,
             };
             if (inputSearchProps) {
@@ -305,6 +329,18 @@ const Screen = forwardRef(
             break;
 
           default:
+            if (hasSideBar && !inputSearchProps) {
+              options = {
+                headerTransparent: true,
+                headerTintColor: Colors.black_17,
+                headerShown: true,
+                headerBackground: () => (
+                  <DuoGlassBackground animatedValue={sharedValue} />
+                ),
+                headerTitle: (props: any) => <HeaderTitle {...props} />,
+              };
+              break;
+            }
             options = {
               headerTransparent: false,
               headerTintColor: Colors.black_17,
@@ -348,6 +384,7 @@ const Screen = forwardRef(
         navigation?.instance,
         sharedValue,
         useShadowHeader,
+        hasSideBar,
       ],
     );
 
@@ -365,16 +402,23 @@ const Screen = forwardRef(
         options = {
           headerTintColor: currentTint.current ?? Colors.black_17,
           headerTransparent: true,
-          headerBackground: (props: any) => (
-            <HeaderBackground
-              {...props}
-              animatedValue={sharedValue}
-              useGradient={false}
-              useShadowHeader={useShadowHeader}
-              headerBackground={headerBackground}
-              gradientColor={gradientColor}
-            />
-          ),
+          headerBackground: (props: any) =>
+            hasSideBar ? (
+              // glass shows once the banner has scrolled under the header
+              <DuoGlassBackground
+                animatedValue={sharedValue}
+                fadeStart={Math.max(210 + layoutOffset - heightHeader, 0)}
+              />
+            ) : (
+              <HeaderBackground
+                {...props}
+                animatedValue={sharedValue}
+                useGradient={false}
+                useShadowHeader={useShadowHeader}
+                headerBackground={headerBackground}
+                gradientColor={gradientColor}
+              />
+            ),
           headerTitle: (props: any) => {
             return <HeaderTitle {...props} />;
           },
@@ -395,6 +439,9 @@ const Screen = forwardRef(
         navigation?.instance,
         sharedValue,
         useShadowHeader,
+        hasSideBar,
+        layoutOffset,
+        heightHeader,
       ],
     );
 
@@ -668,21 +715,35 @@ const Screen = forwardRef(
           },
         ]}
       >
-        <HeaderExtendHeader
-          headerType={headerType}
-          heightHeader={heightHeader}
-          headerRightWidth={headerRightWidth}
-          animatedValue={sharedValue}
-          inputSearchProps={inputSearchProps}
-          navigation={navigation}
-          inputSearchRef={inputSearchRef}
-          useShadowHeader={useShadowHeader}
-          gradientColor={gradientColor}
-          headerBackground={headerBackground}
-        />
+        {useDuoGlass ? (
+          <DuoScrollGradient
+            animatedValue={sharedValue}
+            gradientColor={gradientColor}
+            headerBackground={headerBackground}
+            heightHeader={heightHeader}
+            extended={headerType === 'extended'}
+          />
+        ) : (
+          <HeaderExtendHeader
+            headerType={headerType}
+            heightHeader={heightHeader}
+            headerRightWidth={headerRightWidth}
+            animatedValue={sharedValue}
+            inputSearchProps={inputSearchProps}
+            navigation={navigation}
+            inputSearchRef={inputSearchRef}
+            useShadowHeader={useShadowHeader}
+            gradientColor={gradientColor}
+            headerBackground={headerBackground}
+          />
+        )}
 
         <KeyboardAvoidingView
-          style={Styles.flex}
+          style={[
+            Styles.flex,
+            useDuoGlass &&
+              (!scrollable || !!Header) && { paddingTop: heightHeader },
+          ]}
           enabled={enableKeyboardAvoidingView}
           keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
           behavior={Platform.select({
@@ -699,10 +760,22 @@ const Screen = forwardRef(
             onScroll={handleScroll}
             onScrollEndDrag={handleScrollEnd}
             scrollEventThrottle={16}
-            style={[Styles.flex, !scrollable && contentInsetStyle]}
+            style={[
+              Styles.flex,
+              !scrollable && contentInsetStyle,
+              !scrollable &&
+                !Footer &&
+                isTab &&
+                !!duoTabInset && { paddingBottom: duoTabInset },
+            ]}
             contentContainerStyle={[
               scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
+              scrollable &&
+                !Footer &&
+                isTab &&
+                !!duoTabInset && { paddingBottom: duoTabInset },
               scrollable && contentInsetStyle,
+              useDuoGlass && !Header && { paddingTop: heightHeader },
               scrollViewProps?.contentContainerStyle,
             ]}
           >
@@ -721,7 +794,11 @@ const Screen = forwardRef(
               <FloatingButton
                 {...floatingButtonProps}
                 animatedValue={sharedValue}
-                bottom={Footer || isTab ? 12 : bottomInset + Spacing.S}
+                bottom={
+                  Footer || isTab
+                    ? 12 + (Footer ? 0 : duoTabInset)
+                    : bottomInset + Spacing.S
+                }
               />
             </View>
           )}
@@ -731,7 +808,9 @@ const Screen = forwardRef(
               style={[
                 styles.shadow,
                 {
-                  paddingBottom: bottomInset + Spacing.S,
+                  paddingBottom:
+                    (isTab && duoTabInset ? duoTabInset : bottomInset) +
+                    Spacing.S,
                   paddingLeft: layout.insetLeft,
                   paddingRight: layout.insetRight,
                   backgroundColor: theme.colors.background.surface,

package/Popup/PopupNotify.tsx

@@ -1,11 +1,5 @@
 import React, { useContext, useRef, useState } from 'react';
-import {
-  Dimensions,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Button } from '../Button';
 import { Colors, Radius, Spacing, Styles } from '../Consts';
@@ -14,6 +8,7 @@ import { Image } from '../Image';
 import { Text, useScaleSize } from '../Text';
 import { PopupNotifyProps } from './types';
 import { scheduleOnRN } from 'react-native-worklets';
+import { usePopupMaxHeight, usePopupWidth } from './utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
@@ -29,7 +24,8 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator, translate } = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
-  const { width: widthDevice } = Dimensions.get('window');
+  const popupWidth = usePopupWidth();
+  const maxHeight = usePopupMaxHeight();
   const scaledMaxHeight = useScaleSize(172);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -172,18 +168,8 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     }
   };
 
-  return (
-    <View
-      accessibilityLabel={'popup_notify'}
-      style={[
-        styles.container,
-        {
-          backgroundColor: theme.colors.background.surface,
-          width: widthDevice - Spacing.XL * 2,
-        },
-        showBaseLineDebug && styles.debugBaseLine,
-      ]}
-    >
+  const body = (
+    <>
       {!!image && <Image source={{ uri: image }} style={styles.image} />}
       <View style={styles.content}>
         <Text
@@ -225,6 +211,30 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
           </View>
         )}
       </View>
+    </>
+  );
+
+  return (
+    <View
+      accessibilityLabel={'popup_notify'}
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.colors.background.surface,
+          width: popupWidth,
+          maxHeight,
+        },
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
+    >
+      {maxHeight === undefined ? (
+        body
+      ) : (
+        // scrolls when iPhone Duo landscape is too short; actions stay visible
+        <ScrollView style={styles.body} bounces={false}>
+          {body}
+        </ScrollView>
+      )}
       <View style={styles.contentAction}>{buildAction()}</View>
       {buildCloseIcon()}
     </View>
@@ -242,6 +252,7 @@ const styles = StyleSheet.create({
     aspectRatio: 1.7777,
     overflow: 'hidden',
   },
+  body: { flexShrink: 1 },
   content: { padding: Spacing.XL },
   description: {
     marginTop: Spacing.S,

package/Popup/PopupPromotion.tsx

@@ -1,10 +1,16 @@
 import React, { useContext, useRef } from 'react';
-import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { PopupPromotionProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Image } from '../Image';
 import { Colors, Radius, Spacing } from '../Consts';
 import { Icon } from '../Icon';
+import { usePopupMaxHeight, usePopupWidth } from './utils';
+
+const ASPECT_RATIO = 0.72;
+const ICON_CLOSE_SIZE = 20;
+// close button row under the image: marginTop + vertical padding + icon
+const CLOSE_ROW_HEIGHT = Spacing.S * 3 + ICON_CLOSE_SIZE;
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   image,
@@ -14,7 +20,13 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator } = useContext(ApplicationContext);
-  const { width: widthDevice } = Dimensions.get('window');
+  const popupWidth = usePopupWidth();
+  const maxHeight = usePopupMaxHeight();
+  // fit the portrait image by height when iPhone Duo leaves too little room
+  const imageWidth =
+    maxHeight === undefined
+      ? popupWidth
+      : Math.min(popupWidth, (maxHeight - CLOSE_ROW_HEIGHT) * ASPECT_RATIO);
   const closeAction = useRef('touch_outside');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -69,7 +81,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   return (
     <View
       accessibilityLabel={'popup_promotion'}
-      style={showBaseLineDebug && styles.debugBaseLine}
+      style={[{ width: imageWidth }, showBaseLineDebug && styles.debugBaseLine]}
     >
       <TouchableOpacity onPress={() => onAction(onActionClick)}>
         <Image
@@ -80,7 +92,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
           style={[
             styles.container,
             {
-              width: widthDevice - Spacing.XL * 2,
+              width: imageWidth,
             },
           ]}
         />
@@ -92,7 +104,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    aspectRatio: 0.72,
+    aspectRatio: ASPECT_RATIO,
     width: '100%',
   },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
@@ -103,11 +115,11 @@ const styles = StyleSheet.create({
     marginTop: Spacing.S,
   },
   iconButton: {
-    padding: 8,
+    padding: Spacing.S,
   },
   iconClose: {
-    width: 20,
-    height: 20,
+    width: ICON_CLOSE_SIZE,
+    height: ICON_CLOSE_SIZE,
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: Radius.M,

package/Popup/utils.ts

@@ -0,0 +1,32 @@
+import { Dimensions, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Spacing } from '../Consts';
+import { getDuoTopInset, isIPhoneDuo } from '../Application/device';
+
+// width of a system alert on the iPhone Duo inner display, in both orientations
+const DUO_POPUP_MAX_WIDTH = 440;
+
+const usePopupWidth = () => {
+  const windowSize = useWindowDimensions();
+  if (!isIPhoneDuo()) {
+    return Dimensions.get('window').width - Spacing.XL * 2;
+  }
+  return Math.min(windowSize.width - Spacing.XL * 2, DUO_POPUP_MAX_WIDTH);
+};
+
+// room left for a popup on iPhone Duo, where landscape is too short for it
+const usePopupMaxHeight = () => {
+  const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
+  if (!isIPhoneDuo()) {
+    return undefined;
+  }
+  return (
+    height -
+    getDuoTopInset(insets, width, height) -
+    insets.bottom -
+    Spacing.XL * 2
+  );
+};
+
+export { usePopupWidth, usePopupMaxHeight };

package/package.json

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