@momo-kits/foundation 0.168.1-beta.15 → 0.168.1-beta.17

package/Application/BottomSheet.tsx

@@ -16,6 +16,7 @@ import {
   PanResponder,
   Platform,
   Pressable,
+  StatusBar,
   StyleSheet,
   TouchableOpacity,
   useWindowDimensions,
@@ -39,18 +40,37 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import layoutStyles from '../Layout/styles';
+import { DuoMetrics, InnerEdgeStyles, useScreenLayout } from '../Layout/utils';
 import { getDuoTopInset, isIPhoneDuo } from './device';
+import { SideBarButton } from './Components/SideBarButton';
 
 // iPhone Duo inner display: center the sheet instead of spanning the width
 const DUO_REGULAR_MIN_WIDTH = 600;
 
+const INDICATOR_HEIGHT = 16;
+const HEADER_HEIGHT = 56;
+const DUO_ORIENTATIONS = ['portrait', 'landscape'];
+const SIDE_COLUMN_OFFSET =
+  INDICATOR_HEIGHT + (HEADER_HEIGHT - DuoMetrics.controlSize) / 2;
+
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const windowSize = useWindowDimensions();
   const isDuo = isIPhoneDuo();
-  const isDuoCentered = isDuo && windowSize.width >= DUO_REGULAR_MIN_WIDTH;
-  const isPortrait = windowSize.height > windowSize.width;
+  const isDuoCentered =
+    isDuo &&
+    Math.min(windowSize.width, windowSize.height) >= DUO_REGULAR_MIN_WIDTH;
+  const isDuoFloating = isDuo && !isDuoCentered;
+  const { sideBar } = useScreenLayout();
+  const sideColumnWidth = (sideBar?.width ?? 0) - Spacing.M;
+  const sideColumn =
+    isDuoFloating &&
+    sideColumnWidth >= DuoMetrics.controlSize + Spacing.M &&
+    sideBar
+      ? sideBar
+      : undefined;
+  const hasSideColumn = !!sideColumn;
   // 'screen' is the outer display on iPhone Duo, even when unfolded
   const screenHeight = Dimensions.get('screen').height;
   const heightDevice = isDuo ? windowSize.height : screenHeight;
@@ -58,7 +78,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
   const topGap = Math.max(
-    getDuoTopInset(insets, windowSize.width, windowSize.height),
+    sideColumn
+      ? insets.top
+      : getDuoTopInset(insets, windowSize.width, windowSize.height),
     Spacing.XL,
   );
   const isIOS = Platform.OS === 'ios';
@@ -83,7 +105,10 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }: BottomSheetParams = props.route.params;
 
   const translateY = useSharedValue(heightDevice);
+  const onDismissRef = useRef(props.route.params?.onDismiss);
+  onDismissRef.current = props.route.params?.onDismiss;
   const [keyboardLift, setKeyboardLift] = useState(0);
+  const [sheetTop, setSheetTop] = useState(windowSize.height);
 
   // KeyboardAvoidingView lifts the whole sheet past the top on iPhone Duo,
   // so lift it here and shrink maxHeight by the same amount instead
@@ -179,15 +204,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }
 
   /**
-   * emit dismiss event
+   * emit dismiss event, once: folding or rotating iPhone Duo changes the
+   * window height while the sheet stays open
    */
   useEffect(() => {
-    translateY.value = heightDevice;
     openAnimation();
     return () => {
-      props.route.params?.onDismiss?.(action.current);
+      onDismissRef.current?.(action.current);
     };
-  }, [heightDevice, openAnimation, props.route.params, translateY]);
+  }, [openAnimation]);
 
   /**
    * handler dismiss
@@ -228,13 +253,42 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     return () => backHandler.remove();
   }, [barrierDismissible, onDismiss]);
 
+  const onPressBack = useCallback(() => {
+    onDismiss(true, leftOptions?.onPressIconLeft);
+  }, [leftOptions, onDismiss]);
+
+  const onPressClose = useCallback(() => {
+    action.current = 'icon_close';
+    onDismiss(true);
+  }, [onDismiss]);
+
+  const showBack = !!leftOptions?.onPressIconLeft;
+  const iconBack = leftOptions?.iconLeft ?? 'ic_back';
+  const sideColumnCount = showBack ? 2 : 1;
+  const sideColumnHeight =
+    sideColumnCount * DuoMetrics.controlSize +
+    (sideColumnCount - 1) * Spacing.M;
+  const coversStatusBar = !!sideColumn && sheetTop < sideColumn.top;
+
+  useEffect(() => {
+    if (!coversStatusBar) {
+      return;
+    }
+    const entry = StatusBar.pushStackEntry({
+      barStyle: theme.dark ? 'light-content' : 'dark-content',
+      animated: true,
+    });
+    return () => StatusBar.popStackEntry(entry);
+  }, [coversStatusBar, theme.dark]);
+
   /**
    * render header
    */
   const renderHeader = useCallback(() => {
+    const showButtons = !hasSideColumn;
     return (
       <View {...panResponder.panHandlers}>
-        <View style={{ height: 16 }}>
+        <View style={{ height: INDICATOR_HEIGHT }}>
           <View style={styles.indicator} />
         </View>
         <View
@@ -246,14 +300,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             },
           ]}
         >
-          {leftOptions?.onPressIconLeft ? (
-            <TouchableOpacity
-              style={styles.iconButton}
-              onPress={() => {
-                onDismiss(true, leftOptions.onPressIconLeft);
-              }}
-            >
-              <Icon source={leftOptions.iconLeft ?? 'ic_back'} />
+          {showButtons && showBack ? (
+            <TouchableOpacity style={styles.iconButton} onPress={onPressBack}>
+              <Icon source={iconBack} />
             </TouchableOpacity>
           ) : null}
 
@@ -261,9 +310,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             <View style={Styles.flex}>{options.header}</View>
           ) : (
             <>
-              {!leftOptions ? <View style={styles.iconButton} /> : null}
+              {showButtons && !leftOptions ? (
+                <View style={styles.iconButton} />
+              ) : null}
               <Text
-                style={[Styles.flex, { textAlign: 'center' }]}
+                style={[
+                  Styles.flex,
+                  styles.title,
+                  !showButtons && styles.titleInset,
+                ]}
                 numberOfLines={1}
                 typography="header_default_bold"
               >
@@ -271,28 +326,63 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               </Text>
             </>
           )}
-          <TouchableOpacity
-            style={styles.iconButton}
-            onPress={() => {
-              action.current = 'icon_close';
-              onDismiss(true);
-            }}
-          >
-            <Icon source="navigation_close" />
-          </TouchableOpacity>
+          {showButtons ? (
+            <TouchableOpacity style={styles.iconButton} onPress={onPressClose}>
+              <Icon source="navigation_close" />
+            </TouchableOpacity>
+          ) : null}
         </View>
       </View>
     );
   }, [
-    onDismiss,
+    hasSideColumn,
+    iconBack,
     leftOptions,
+    onPressBack,
+    onPressClose,
     options.header,
     options.title,
     panResponder.panHandlers,
+    showBack,
     theme.colors.border.default,
     useDivider,
   ]);
 
+  /**
+   * iPhone Duo folded: back and close move to the side bar column, drawn on
+   * the part of the sheet under the side safe area. They line up with the
+   * header row, stay below the status bar cluster on a tall sheet and above a
+   * camera at the bottom end of the strip.
+   */
+  const renderSideColumn = () => {
+    if (!sideColumn) {
+      return null;
+    }
+    const lowestTop =
+      windowSize.height - sideColumn.bottom - sideColumnHeight - sheetTop;
+    const top = Math.min(
+      Math.max(sideColumn.top - sheetTop, SIDE_COLUMN_OFFSET),
+      lowestTop,
+    );
+
+    return (
+      <View
+        pointerEvents={'box-none'}
+        style={[
+          styles.sideColumn,
+          sideColumn.edge === 'right' ? styles.alignRight : styles.alignLeft,
+          InnerEdgeStyles[sideColumn.edge],
+          { top, width: sideColumnWidth },
+        ]}
+      >
+        {showBack ? (
+          <SideBarButton icon={iconBack} onPress={onPressBack} />
+        ) : null}
+        <SideBarButton icon="navigation_close" onPress={onPressClose} />
+      </View>
+    );
+  };
+
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{ translateY: translateY.value }],
@@ -310,12 +400,9 @@ 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 needsSideInset = isDuo && !isDuoCentered && !isPortrait;
-  const sideInsetStyle = needsSideInset && {
-    paddingLeft: insets.left,
-    paddingRight: insets.right,
+  const sideInsetStyle = isDuoFloating && {
+    paddingLeft: Math.max(insets.left - Spacing.M, 0),
+    paddingRight: Math.max(insets.right - Spacing.M, 0),
   };
 
   const screen = (
@@ -335,6 +422,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       }}
       style={StyleSheet.absoluteFillObject}
       isModalKit={true}
+      supportedOrientations={isDuo ? DUO_ORIENTATIONS : undefined}
     >
       <KeyboardAvoidingView
         behavior={Platform.select({
@@ -357,18 +445,26 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         </Pressable>
 
         <Animated.View
+          onLayout={
+            isDuoFloating ? e => setSheetTop(e.nativeEvent.layout.y) : undefined
+          }
           style={[
             animatedStyle,
             {
               backgroundColor,
-              borderTopLeftRadius: Radius.M,
-              borderTopRightRadius: Radius.M,
+              borderTopLeftRadius: isDuo ? Radius.XL : Radius.M,
+              borderTopRightRadius: isDuo ? Radius.XL : Radius.M,
               overflow: 'hidden',
             },
             isDuo && {
               maxHeight: windowSize.height - topGap - keyboardLift,
               marginBottom: keyboardLift,
             },
+            isDuoFloating && { marginHorizontal: Spacing.M },
+            sideColumn && {
+              minHeight:
+                SIDE_COLUMN_OFFSET + sideColumnHeight + sideColumn.bottom,
+            },
             isDuoCentered && {
               // keeps the portrait width in landscape, like system sheets
               width: Math.min(
@@ -415,6 +511,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               }}
             />
           )}
+          {renderSideColumn()}
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>
@@ -440,10 +537,12 @@ const styles = StyleSheet.create({
     top: Spacing.S,
   },
   header: {
-    height: 56,
+    height: HEADER_HEIGHT,
     flexDirection: 'row',
     alignItems: 'center',
   },
+  title: { textAlign: 'center' },
+  titleInset: { paddingHorizontal: Spacing.M },
   iconButton: {
     width: 24,
     height: 24,
@@ -452,6 +551,12 @@ const styles = StyleSheet.create({
     marginHorizontal: Spacing.M,
   },
   shrink: { flexShrink: 1 },
+  sideColumn: {
+    position: 'absolute',
+    gap: Spacing.M,
+  },
+  alignRight: { right: 0 },
+  alignLeft: { left: 0 },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 

package/Application/BottomTab/DuoTabBar.tsx

@@ -1,17 +1,16 @@
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import { CommonActions, Route } from '@react-navigation/native';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, useContext, useMemo, useRef, useState } from 'react';
 import {
   LayoutChangeEvent,
+  StyleProp,
   StyleSheet,
   TouchableOpacity,
   View,
+  ViewStyle,
 } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
+import { GestureDetector } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
 import { Colors, Radius, Spacing } from '../../Consts';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Icon } from '../../Icon';
@@ -20,6 +19,12 @@ import { Text } from '../../Text';
 import { useDuoBarCompression } from './DuoBarCompression';
 import { FloatingButtonProps } from '../types';
 import { TabBarIcon } from './TabBarIcon';
+import {
+  LiquidSelection,
+  useLiquidItem,
+  useLiquidSelection,
+  usePressLift,
+} from './useLiquidSelection';
 
 type Props = BottomTabBarProps & {
   activeTintColor: string;
@@ -40,11 +45,7 @@ const FLOATING_HEIGHT = DuoMetrics.floatingTabBarHeight;
 const FLOATING_PADDING = Spacing.XS;
 // 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 grows into a lens 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
@@ -121,11 +122,7 @@ const TabLabel: React.FC<{
         fontScale: { useOSScaleRate: false, userScaleRate: 1 },
       }}
     >
-      <Text
-        numberOfLines={1}
-        typography={typography}
-        color={color}
-      >
+      <Text numberOfLines={1} typography={typography} color={color}>
         {label}
       </Text>
     </MiniAppContext.Provider>
@@ -162,21 +159,22 @@ const getTabItems = ({
       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 renderIcon = (active: boolean) =>
+      options.tabBarIcon && (
+        <TabBarIcon
+          route={route}
+          badge={options.tabBarBadge}
+          badgeStyle={options.tabBarBadgeStyle}
+          activeOpacity={active ? 1 : 0}
+          inactiveOpacity={active ? 0 : 1}
+          activeTintColor={activeTintColor}
+          inactiveTintColor={inactiveTintColor}
+          renderIcon={options.tabBarIcon}
+          style={styles.icon}
+        />
+      );
+
+    return { route, focused, label, onPress, onLongPress, renderIcon };
   });
 };
 
@@ -192,6 +190,58 @@ const QrIcon: React.FC<{ icon: FloatingButtonProps['icon']; size: number }> = ({
 
 type TabItem = ReturnType<typeof getTabItems>[number];
 
+/**
+ * tab item: a tap is handled here as before, a drag over the bar is handled by the bar's
+ * gesture. The active layer fades in as the lens passes over it
+ */
+const LiquidTabItem: React.FC<{
+  item: TabItem;
+  itemIndex: number;
+  selection: LiquidSelection;
+  onSelect: () => void;
+  renderContent: (active: boolean) => ReactNode;
+  style: StyleProp<ViewStyle>;
+}> = ({ item, itemIndex, selection, onSelect, renderContent, style }) => {
+  const { activeStyle, popStyle } = useLiquidItem(selection, itemIndex);
+  const activeLayerStyle = useMemo(
+    () => [StyleSheet.absoluteFill, styles.itemLayer, activeStyle],
+    [activeStyle],
+  );
+  // like the system tab bar, a held tab is still picked when released
+  const longPressed = useRef(false);
+
+  return (
+    <TouchableOpacity
+      accessibilityRole={'tab'}
+      accessibilityLabel={item.label}
+      accessibilityState={{ selected: item.focused }}
+      activeOpacity={1}
+      onPressIn={() => {
+        longPressed.current = false;
+        selection.pressIn(itemIndex);
+      }}
+      onPressOut={() => {
+        if (selection.pressOut() && longPressed.current) {
+          onSelect();
+        }
+      }}
+      onPress={onSelect}
+      onLongPress={() => {
+        longPressed.current = true;
+        item.onLongPress();
+      }}
+      style={style}
+    >
+      <Animated.View style={popStyle}>
+        <View style={styles.itemLayer}>{renderContent(false)}</View>
+        <Animated.View style={activeLayerStyle}>
+          {renderContent(true)}
+        </Animated.View>
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};
+
 /**
  * column of icon-only tab items with the sliding selection bubble
  */
@@ -200,56 +250,47 @@ const Rail: React.FC<{
   index: number;
   onItemPress?: () => void;
 }> = ({ items, index, onItemPress }) => {
-  const bubbleOffset = useSharedValue(index * RAIL_PITCH);
-  const lens = useSharedValue(0);
-
-  useEffect(() => {
-    bubbleOffset.value = withSpring(index * RAIL_PITCH, SPRING);
-  }, [index, bubbleOffset]);
-
-  const bubbleStyle = useAnimatedStyle(() => ({
-    transform: [
-      { translateY: bubbleOffset.value },
-      { scaleX: 1 + lens.value * (LENS_SCALE_X - 1) },
-      { scaleY: 1 + lens.value * (LENS_SCALE_Y - 1) },
-    ],
-  }));
+  const onSelect = (itemIndex: number) => {
+    items[itemIndex]?.onPress();
+    onItemPress?.();
+  };
+  const selection = useLiquidSelection({
+    count: items.length,
+    pitch: RAIL_PITCH,
+    firstCenter: RAIL_PADDING + ITEM_SIZE / 2,
+    axis: 'y',
+    index,
+    onSelect,
+  });
+  const { barStyle, bubbleStyle } = selection;
+  // stable style arrays: the tab switch re-renders the rail while the lens is still
+  // springing back, a new array would re-attach the animated style mid animation
+  const railStyle = useMemo(() => [styles.rail, barStyle], [barStyle]);
+  const railBubbleStyle = useMemo(
+    () => [styles.railBubble, bubbleStyle],
+    [bubbleStyle],
+  );
 
   return (
-    <View style={styles.rail} accessibilityLabel={'bottom_tab_bar'}>
-      <BarMaterial radius={ITEM_SIZE / 2} />
-      <Animated.View
-        pointerEvents={'none'}
-        style={[styles.railBubble, bubbleStyle]}
-      >
-        <SelectionMaterial radius={RAIL_BUBBLE_WIDTH / 2} />
+    <GestureDetector gesture={selection.gesture}>
+      <Animated.View style={railStyle} accessibilityLabel={'bottom_tab_bar'}>
+        <BarMaterial radius={ITEM_SIZE / 2} />
+        <Animated.View pointerEvents={'none'} style={railBubbleStyle}>
+          <SelectionMaterial radius={RAIL_BUBBLE_WIDTH / 2} />
+        </Animated.View>
+        {items.map((item, itemIndex) => (
+          <LiquidTabItem
+            key={item.route.key}
+            item={item}
+            itemIndex={itemIndex}
+            selection={selection}
+            onSelect={() => onSelect(itemIndex)}
+            renderContent={item.renderIcon}
+            style={styles.railItem}
+          />
+        ))}
       </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?.();
-          }}
-          onLongPress={item.onLongPress}
-          style={styles.railItem}
-        >
-          {item.icon}
-        </TouchableOpacity>
-      ))}
-    </View>
+    </GestureDetector>
   );
 };
 
@@ -263,6 +304,7 @@ const DuoRailTabBar: React.FC<Props> = props => {
   const { sideBar } = useScreenLayout();
   const { tabBarCompressed, expandTabBar, onTabSelected } =
     useDuoBarCompression();
+  const compactLift = usePressLift();
   const { state, floatingButton } = props;
   const items = getTabItems(props);
   const current = items[state.index];
@@ -303,16 +345,21 @@ const DuoRailTabBar: React.FC<Props> = props => {
 
   return (
     <View pointerEvents={'box-none'} style={columnStyle}>
-      <TouchableOpacity
-        accessibilityRole={'button'}
-        accessibilityLabel={current?.label}
-        accessibilityHint={'bottom_tab_bar'}
-        onPress={expandTabBar}
-        style={styles.railCompact}
-      >
-        <BarMaterial radius={Radius.XL} />
-        {current?.icon}
-      </TouchableOpacity>
+      <Animated.View style={compactLift.style}>
+        <TouchableOpacity
+          accessibilityRole={'button'}
+          accessibilityLabel={current?.label}
+          accessibilityHint={'bottom_tab_bar'}
+          activeOpacity={1}
+          onPressIn={compactLift.onPressIn}
+          onPressOut={compactLift.onPressOut}
+          onPress={expandTabBar}
+          style={styles.railCompact}
+        >
+          <BarMaterial radius={Radius.XL} />
+          {current?.renderIcon(true)}
+        </TouchableOpacity>
+      </Animated.View>
       {qr}
     </View>
   );
@@ -330,24 +377,29 @@ const DuoFloatingTabBar: React.FC<Props> = props => {
   const [rowWidth, setRowWidth] = useState(0);
   const cellWidth = rowWidth / state.routes.length;
 
-  const bubbleOffset = useSharedValue(0);
-  const lens = useSharedValue(0);
-  const measured = useRef(false);
-
-  useEffect(() => {
-    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;
-  }, [state.index, cellWidth, bubbleOffset]);
-
-  const bubbleStyle = useAnimatedStyle(() => ({
-    transform: [
-      { translateX: bubbleOffset.value },
-      { scaleX: 1 + lens.value * (LENS_SCALE_X - 1) },
-      { scaleY: 1 + lens.value * (LENS_SCALE_Y - 1) },
+  const selection = useLiquidSelection({
+    count: items.length,
+    pitch: cellWidth,
+    firstCenter: cellWidth / 2,
+    axis: 'x',
+    index: state.index,
+    onSelect: itemIndex => items[itemIndex]?.onPress(),
+  });
+  const { barStyle, bubbleStyle } = selection;
+  const tabCount = state.routes.length;
+  // stable style arrays, see Rail
+  const floatingBarStyle = useMemo(
+    () => [
+      styles.floatingBar,
+      { width: tabCount * FLOATING_ITEM_WIDTH + 2 * FLOATING_PADDING },
+      barStyle,
     ],
-  }));
+    [tabCount, barStyle],
+  );
+  const floatingBubbleStyle = useMemo(
+    () => [styles.floatingBubble, { width: cellWidth }, bubbleStyle],
+    [cellWidth, bubbleStyle],
+  );
 
   const onRowLayout = (e: LayoutChangeEvent) =>
     setRowWidth(e.nativeEvent.layout.width);
@@ -364,57 +416,41 @@ const DuoFloatingTabBar: React.FC<Props> = props => {
         },
       ]}
     >
-      <View
-        style={[
-          styles.floatingBar,
-          {
-            width:
-              state.routes.length * FLOATING_ITEM_WIDTH + 2 * FLOATING_PADDING,
-          },
-        ]}
+      <Animated.View
+        style={floatingBarStyle}
         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 }, 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}
+        <GestureDetector gesture={selection.gesture}>
+          <View style={styles.floatingRow} onLayout={onRowLayout}>
+            {rowWidth > 0 && (
+              <Animated.View pointerEvents={'none'} style={floatingBubbleStyle}>
+                <SelectionMaterial radius={FLOATING_BUBBLE_RADIUS} />
+              </Animated.View>
+            )}
+            {items.map((item, index) => (
+              <LiquidTabItem
+                key={item.route.key}
+                item={item}
+                itemIndex={index}
+                selection={selection}
+                onSelect={item.onPress}
+                renderContent={active => (
+                  <>
+                    {item.renderIcon(active)}
+                    <TabLabel
+                      label={item.label}
+                      typography={'label_xs_medium'}
+                      color={active ? activeTintColor : inactiveTintColor}
+                    />
+                  </>
+                )}
+                style={styles.floatingItem}
               />
-            </TouchableOpacity>
-          ))}
-        </View>
-      </View>
+            ))}
+          </View>
+        </GestureDetector>
+      </Animated.View>
       {floatingButton && (
         <TouchableOpacity
           accessibilityRole={'button'}
@@ -518,6 +554,10 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+  },
+  itemLayer: {
+    alignItems: 'center',
+    justifyContent: 'center',
     gap: Spacing.XXS,
   },
   // pink fills the whole pinned platter

package/Application/BottomTab/useLiquidSelection.ts

@@ -0,0 +1,374 @@
+import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import {
+  clamp,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+import { ApplicationContext } from '../../Context';
+
+type Axis = 'x' | 'y';
+
+type Options = {
+  count: number;
+  // distance between two neighbouring tab centers
+  pitch: number;
+  // position of the first tab's center inside the gesture view
+  firstCenter: number;
+  axis: Axis;
+  index: number;
+  onSelect: (index: number) => void;
+};
+
+const SPRING = { damping: 18, stiffness: 220, mass: 0.8 };
+// the lens trails the finger a little while dragged, like the system tab bar
+const DRAG_SPRING = { damping: 24, stiffness: 600, mass: 0.6 };
+const REDUCED_TIMING = { duration: 200 };
+// while pressed the selection bubble grows into a lens past the bar's edges (80x54 to about 96x70)
+const LENS_SCALE_X = 1.2;
+const LENS_SCALE_Y = 1.3;
+// a moving lens stretches along its path and thins across it, eased per frame so the
+// shape follows the speed smoothly
+const STRETCH_PER_POINT = 0.012;
+const MAX_STRETCH = 0.25;
+const STRETCH_EASING = 0.25;
+// once eased below this the lens is round again
+const REST_STRETCH = 0.002;
+// a tap is shorter than the lift: the lens finishes rising, then settles, one smooth pulse
+const TAP_LIFT_DURATION = 120;
+// the bar swells a little under the finger
+const BAR_SWELL = 0.04;
+// the tab the lens lands on pops
+const ICON_POP = 1.15;
+// movement before a press turns into a drag, below it the tab's touchable handles the tap
+const DRAG_SLOP = 10;
+// UIScrollView rubber band constant
+const RUBBER_BAND = 0.55;
+// a cancelled press or a prevented switch: the lens returns to the selected tab after this
+const RESYNC_DELAY = 100;
+
+/**
+ * resistance past the first and last tab, the further the finger goes the less the lens follows
+ */
+const rubberBand = (value: number, max: number, dimension: number) => {
+  'worklet';
+  const band = (overshoot: number) =>
+    (1 - 1 / ((overshoot * RUBBER_BAND) / dimension + 1)) * dimension;
+  if (value < 0) {
+    return -band(-value);
+  }
+  if (value > max) {
+    return max + band(value - max);
+  }
+  return value;
+};
+
+/**
+ * iOS 26 tab bar selection motion, without the glass material:
+ * - press lifts the selection into a lens over the pressed tab and swells the bar, release
+ *   settles it back (the tab's touchable drives this through pressIn / pressOut)
+ * - dragging slides the lens under the finger, stretched by its speed and rubber banded
+ *   past the ends, with a tick on each tab it enters; releasing selects the tab under it.
+ *   The drag cancels the touchable once it activates, so a press is either a tap or a drag
+ */
+const useLiquidSelection = ({
+  count,
+  pitch,
+  firstCenter,
+  axis,
+  index,
+  onSelect,
+}: Options) => {
+  const { navigator } = useContext<any>(ApplicationContext);
+  const reduceMotion = useReducedMotion();
+
+  const offset = useSharedValue(index * pitch);
+  // where the lens is heading, so a re-render doesn't restart a spring already going there
+  const destination = useSharedValue(index * pitch);
+  const selected = useSharedValue(index);
+  const hovered = useSharedValue(index);
+  const lift = useSharedValue(0);
+  const dragging = useSharedValue(false);
+  const stretch = useSharedValue(0);
+  const metrics = useSharedValue({ count, pitch, firstCenter });
+  const measured = useRef(pitch > 0);
+
+  const indexRef = useRef(index);
+  const pitchRef = useRef(pitch);
+  // read through refs so the gesture is never rebuilt mid drag
+  const callbacks = useRef({ onSelect, navigator });
+  indexRef.current = index;
+  pitchRef.current = pitch;
+  callbacks.current = { onSelect, navigator };
+
+  useEffect(() => {
+    metrics.value = { count, pitch, firstCenter };
+  }, [count, pitch, firstCenter, metrics]);
+
+  const move = useCallback(
+    (target: number, velocity: number, config: typeof SPRING) => {
+      'worklet';
+      if (destination.value === target && velocity === 0) {
+        return;
+      }
+      destination.value = target;
+      offset.value = reduceMotion
+        ? withTiming(target, REDUCED_TIMING)
+        : withSpring(target, { ...config, velocity });
+    },
+    [offset, destination, reduceMotion],
+  );
+
+  useEffect(() => {
+    const target = index * pitch;
+    selected.value = index;
+    // snap on first layout so the lens doesn't slide in from the leading edge
+    if (measured.current) {
+      move(target, 0, SPRING);
+    } else {
+      destination.value = target;
+      offset.value = target;
+    }
+    measured.current = pitch > 0;
+  }, [index, pitch, offset, destination, selected, move]);
+
+  useAnimatedReaction(
+    () => offset.value,
+    (current, previous) => {
+      if (previous === null || reduceMotion) {
+        return;
+      }
+      const target = Math.min(
+        Math.abs(current - previous) * STRETCH_PER_POINT,
+        MAX_STRETCH,
+      );
+      // eased both ways: a slow frame (e.g. the spring turning at its overshoot) must not
+      // snap the shape
+      const next = stretch.value + (target - stretch.value) * STRETCH_EASING;
+      stretch.value = next < REST_STRETCH ? 0 : next;
+    },
+    [reduceMotion],
+  );
+
+  /**
+   * returns the lens to the selected tab unless a switch to where it is heading happened
+   */
+  const resync = useCallback(() => {
+    setTimeout(() => {
+      const target = indexRef.current * pitchRef.current;
+      if (!dragging.value && destination.value !== target) {
+        move(target, 0, SPRING);
+      }
+    }, RESYNC_DELAY);
+  }, [destination, dragging, move]);
+
+  const pressIn = (itemIndex: number) => {
+    // the lens heads to the pressed tab, not only the selected one
+    move(itemIndex * pitch, 0, SPRING);
+    if (!reduceMotion) {
+      lift.value = withSpring(1, SPRING);
+    }
+  };
+
+  /**
+   * false when a drag took the press over
+   */
+  const pressOut = () => {
+    // a drag taking over cancels the touchable, the drag owns the lens from there
+    if (dragging.value) {
+      return false;
+    }
+    if (!reduceMotion) {
+      lift.value = withSequence(
+        withTiming(1, { duration: TAP_LIFT_DURATION }),
+        withSpring(0, SPRING),
+      );
+    }
+    // the lens keeps heading to the pressed tab: onPress switches to it, and a cancelled
+    // press brings it back
+    resync();
+    return true;
+  };
+
+  const tick = useCallback(() => {
+    callbacks.current.navigator?.maxApi?.triggerEventVibration?.('light');
+  }, []);
+
+  const select = useCallback(
+    (target: number) => {
+      callbacks.current.onSelect(target);
+      resync();
+    },
+    [resync],
+  );
+
+  const gesture = useMemo(() => {
+    const position = (e: { x: number; y: number }) => {
+      'worklet';
+      return (axis === 'x' ? e.x : e.y) - metrics.value.firstCenter;
+    };
+    const nearest = (value: number) => {
+      'worklet';
+      const { count: tabs, pitch: step } = metrics.value;
+      return step > 0 ? clamp(Math.round(value / step), 0, tabs - 1) : 0;
+    };
+
+    return Gesture.Pan()
+      .minDistance(DRAG_SLOP)
+      .shouldCancelWhenOutside(false)
+      .onStart(e => {
+        dragging.value = true;
+        hovered.value = nearest(position(e));
+        if (!reduceMotion) {
+          lift.value = withSpring(1, SPRING);
+        }
+      })
+      .onUpdate(e => {
+        const { count: tabs, pitch: step } = metrics.value;
+        const value = position(e);
+        const target = nearest(value);
+        if (target !== hovered.value) {
+          hovered.value = target;
+          scheduleOnRN(tick);
+        }
+        const follow = rubberBand(value, (tabs - 1) * step, step);
+        if (reduceMotion) {
+          destination.value = follow;
+          offset.value = follow;
+        } else {
+          move(follow, 0, DRAG_SPRING);
+        }
+      })
+      .onEnd((e, success) => {
+        dragging.value = false;
+        lift.value = reduceMotion ? 0 : withSpring(0, SPRING);
+        const raw = axis === 'x' ? e.velocityX : e.velocityY;
+        const velocity = Number.isFinite(raw) ? raw : 0;
+        if (!success) {
+          move(selected.value * metrics.value.pitch, velocity, SPRING);
+          return;
+        }
+        const target = nearest(position(e));
+        move(target * metrics.value.pitch, velocity, SPRING);
+        scheduleOnRN(select, target);
+      });
+  }, [
+    axis,
+    reduceMotion,
+    offset,
+    destination,
+    selected,
+    hovered,
+    lift,
+    dragging,
+    metrics,
+    move,
+    tick,
+    select,
+  ]);
+
+  const bubbleStyle = useAnimatedStyle(() => {
+    const along = 1 + stretch.value;
+    const across = 1 - stretch.value * 0.5;
+    const lensX = 1 + lift.value * (LENS_SCALE_X - 1);
+    const lensY = 1 + lift.value * (LENS_SCALE_Y - 1);
+    return {
+      transform:
+        axis === 'x'
+          ? [
+              { translateX: offset.value },
+              { scaleX: lensX * along },
+              { scaleY: lensY * across },
+            ]
+          : [
+              { translateY: offset.value },
+              { scaleX: lensX * across },
+              { scaleY: lensY * along },
+            ],
+    };
+  });
+
+  const barStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 + lift.value * BAR_SWELL }],
+  }));
+
+  return {
+    gesture,
+    bubbleStyle,
+    barStyle,
+    pressIn,
+    pressOut,
+    offset,
+    selected,
+    pitch,
+    reduceMotion,
+  };
+};
+
+type LiquidSelection = ReturnType<typeof useLiquidSelection>;
+
+/**
+ * active tint of a tab follows the lens over it, and the tab the lens lands on pops
+ */
+const useLiquidItem = (
+  { offset, selected, pitch, reduceMotion }: LiquidSelection,
+  itemIndex: number,
+) => {
+  const pop = useSharedValue(1);
+
+  useAnimatedReaction(
+    () => selected.value === itemIndex,
+    (isSelected, wasSelected) => {
+      if (isSelected && wasSelected === false && !reduceMotion) {
+        pop.value = withSequence(
+          withTiming(ICON_POP, { duration: 120 }),
+          withSpring(1, SPRING),
+        );
+      }
+    },
+    [itemIndex, reduceMotion],
+  );
+
+  const activeStyle = useAnimatedStyle(() => {
+    if (pitch <= 0) {
+      return { opacity: selected.value === itemIndex ? 1 : 0 };
+    }
+    const distance = Math.abs(offset.value - itemIndex * pitch) / pitch;
+    return { opacity: clamp(1 - distance, 0, 1) };
+  });
+
+  const popStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: pop.value }],
+  }));
+
+  return { activeStyle, popStyle };
+};
+
+/**
+ * lift for a single button, e.g. the compressed rail
+ */
+const usePressLift = () => {
+  const reduceMotion = useReducedMotion();
+  const lift = useSharedValue(0);
+  const style = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 + lift.value * (LENS_SCALE_X - 1) * 0.5 }],
+  }));
+  const onPressIn = () => {
+    if (!reduceMotion) {
+      lift.value = withSpring(1, SPRING);
+    }
+  };
+  const onPressOut = () => {
+    lift.value = withSpring(0, SPRING);
+  };
+  return { style, onPressIn, onPressOut };
+};
+
+export type { LiquidSelection };
+export { useLiquidSelection, useLiquidItem, usePressLift };

package/Application/ModalScreen.tsx

@@ -18,7 +18,7 @@ import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
-import { getDuoTopInset, isIPhoneDuo } from './device';
+import { getDuoModalBounds, isIPhoneDuo } from './device';
 import { scheduleOnRN } from 'react-native-worklets';
 
 const ModalScreen: React.FC<any> = props => {
@@ -42,6 +42,7 @@ const Modal: React.FC<ModalParams> = props => {
   const Component = useRef(screen).current;
   const insets = useSafeAreaInsets();
   const windowSize = useWindowDimensions();
+  const isDuo = isIPhoneDuo();
 
   /**
    * Fire auto_popup_displayed tracking event on mount
@@ -135,6 +136,7 @@ const Modal: React.FC<ModalParams> = props => {
       onRequestClose={onDismiss}
       style={StyleSheet.absoluteFillObject}
       isModalKit={true}
+      supportedOrientations={isDuo ? DUO_ORIENTATIONS : undefined}
     >
       <KeyboardAvoidingView
         style={Styles.flexCenter}
@@ -152,14 +154,13 @@ 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,
-              ),
+            isDuo && styles.shrink,
+            isDuo && {
+              marginTop: insets.top,
               marginBottom: insets.bottom,
+              marginLeft: insets.left,
+              marginRight: insets.right,
+              ...getDuoModalBounds(insets, windowSize.width, windowSize.height),
             },
             modalStyle,
           ]}
@@ -171,11 +172,14 @@ const Modal: React.FC<ModalParams> = props => {
   );
 };
 
+const DUO_ORIENTATIONS = ['portrait', 'landscape'];
+
 const styles = StyleSheet.create({
   overlayContent: {
     flex: 1,
     backgroundColor: 'rgba(0, 0, 0, 0.6)',
   },
+  shrink: { flexShrink: 1 },
 });
 
 export default ModalScreen;

package/Application/device.ts

@@ -1,9 +1,13 @@
 import { Dimensions, Platform, ScaledSize } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
+import { Spacing } from '../Consts';
 
 // widest short side of any single-display iPhone
 const IPHONE_MAX_SHORT_SIDE = 440;
 
+const DUO_MODAL_MAX_WIDTH = 440;
+const DUO_MODAL_MAX_HEIGHT = 640;
+
 // iPhone Duo reports idiom "phone"; 'screen' stays on the outer display, so it
 // still matches when Split View narrows the window
 const isIPhoneDuo = () => {
@@ -26,4 +30,23 @@ const getDuoTopInset = (insets: EdgeInsets, width: number, height: number) =>
     height > width ? Math.max(insets.left, insets.right) * 2 : 0,
   );
 
-export { isIPhoneDuo, getDuoTopInset };
+/**
+ * Max modal size on iPhone Duo: inside the safe area, so clear of the side
+ * toolbar strip, and capped so it stays a dialog on the inner display.
+ */
+const getDuoModalBounds = (
+  insets: EdgeInsets,
+  width: number,
+  height: number,
+) => ({
+  maxWidth: Math.min(
+    width - insets.left - insets.right - Spacing.XL * 2,
+    DUO_MODAL_MAX_WIDTH,
+  ),
+  maxHeight: Math.min(
+    height - insets.top - insets.bottom - Spacing.XL * 2,
+    DUO_MODAL_MAX_HEIGHT,
+  ),
+});
+
+export { isIPhoneDuo, getDuoTopInset, getDuoModalBounds };

package/Layout/utils.ts

@@ -510,6 +510,7 @@ const useGridSystem = () => {
 export {
   DuoMetrics,
   HeaderMetrics,
+  InnerEdgeStyles,
   getHeaderMargin,
   getHeaderRowOptions,
   useGridSystem,

package/Popup/PopupNotify.tsx

@@ -8,7 +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';
+import { getPopupRadius, usePopupMaxHeight, usePopupWidth } from './utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
@@ -26,6 +26,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const [scrollContent, setScrollContent] = useState(false);
   const popupWidth = usePopupWidth();
   const maxHeight = usePopupMaxHeight();
+  const radius = getPopupRadius();
   const scaledMaxHeight = useScaleSize(172);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -170,7 +171,15 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   const body = (
     <>
-      {!!image && <Image source={{ uri: image }} style={styles.image} />}
+      {!!image && (
+        <Image
+          source={{ uri: image }}
+          style={[
+            styles.image,
+            { borderTopLeftRadius: radius, borderTopRightRadius: radius },
+          ]}
+        />
+      )}
       <View style={styles.content}>
         <Text
           typography={'header_default_bold'}
@@ -218,9 +227,9 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     <View
       accessibilityLabel={'popup_notify'}
       style={[
-        styles.container,
         {
           backgroundColor: theme.colors.background.surface,
+          borderRadius: radius,
           width: popupWidth,
           maxHeight,
         },
@@ -231,7 +240,13 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         body
       ) : (
         // scrolls when iPhone Duo landscape is too short; actions stay visible
-        <ScrollView style={styles.body} bounces={false}>
+        <ScrollView
+          style={[
+            styles.body,
+            { borderTopLeftRadius: radius, borderTopRightRadius: radius },
+          ]}
+          bounces={false}
+        >
           {body}
         </ScrollView>
       )}
@@ -242,17 +257,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 };
 
 const styles = StyleSheet.create({
-  container: {
-    borderRadius: Radius.L,
-  },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
   image: {
-    borderTopLeftRadius: Radius.L,
-    borderTopRightRadius: Radius.L,
     aspectRatio: 1.7777,
     overflow: 'hidden',
   },
-  body: { flexShrink: 1 },
+  body: { flexShrink: 1, overflow: 'hidden' },
   content: { padding: Spacing.XL },
   description: {
     marginTop: Spacing.S,

package/Popup/utils.ts

@@ -1,32 +1,26 @@
 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;
+import { Radius, Spacing } from '../Consts';
+import { getDuoModalBounds, isIPhoneDuo } from '../Application/device';
 
 const usePopupWidth = () => {
-  const windowSize = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
   if (!isIPhoneDuo()) {
     return Dimensions.get('window').width - Spacing.XL * 2;
   }
-  return Math.min(windowSize.width - Spacing.XL * 2, DUO_POPUP_MAX_WIDTH);
+  return getDuoModalBounds(insets, width, height).maxWidth;
 };
 
-// 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
-  );
+  return getDuoModalBounds(insets, width, height).maxHeight;
 };
 
-export { usePopupWidth, usePopupMaxHeight };
+const getPopupRadius = () => (isIPhoneDuo() ? Radius.XL : Radius.L);
+
+export { usePopupWidth, usePopupMaxHeight, getPopupRadius };

package/package.json

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