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

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,6 +33,7 @@ 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;
@@ -104,7 +105,7 @@ const SELECTION_TINT_ALPHA = '14';
  * translucent glass capsule under the selected floating tab with the Figma pink tint on
  * top; the tint is a separate layer since a glass tint color renders opaque
  */
-const SelectionMaterial: React.FC = () => {
+const SelectionMaterial: React.FC<{ radius: number }> = ({ radius }) => {
   const { theme } = useContext(ApplicationContext);
   return (
     <>
@@ -112,7 +113,7 @@ const SelectionMaterial: React.FC = () => {
         <GlassView
           pointerEvents={'none'}
           effect={'glass'}
-          cornerRadius={FLOATING_BUBBLE_RADIUS}
+          cornerRadius={radius}
           style={StyleSheet.absoluteFill}
         />
       )}
@@ -120,14 +121,44 @@ const SelectionMaterial: React.FC = () => {
         pointerEvents={'none'}
         style={[
           StyleSheet.absoluteFill,
-          styles.floatingBubbleFill,
-          { backgroundColor: theme.colors.primary + SELECTION_TINT_ALPHA },
+          {
+            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,
@@ -189,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?.();
@@ -368,7 +410,7 @@ const DuoFloatingTabBar: React.FC<Props> = props => {
               pointerEvents={'none'}
               style={[styles.floatingBubble, { width: cellWidth }, bubbleStyle]}
             >
-              <SelectionMaterial />
+              <SelectionMaterial radius={FLOATING_BUBBLE_RADIUS} />
             </Animated.View>
           )}
           {items.map((item, index) => (
@@ -393,14 +435,11 @@ const DuoFloatingTabBar: React.FC<Props> = props => {
               style={styles.floatingItem}
             >
               {item.icon}
-              {/* Text scales with the 669pt wide display, the smaller token lands near the system bar's label */}
-              <Text
-                numberOfLines={1}
-                typography={'label_xxs'}
+              <TabLabel
+                label={item.label}
+                typography={'label_xs_medium'}
                 color={item.focused ? activeTintColor : inactiveTintColor}
-              >
-                {item.label}
-              </Text>
+              />
             </TouchableOpacity>
           ))}
         </View>
@@ -461,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,
@@ -497,9 +535,6 @@ const styles = StyleSheet.create({
     bottom: 0,
     left: 0,
   },
-  floatingBubbleFill: {
-    borderRadius: FLOATING_BUBBLE_RADIUS,
-  },
   floatingItem: {
     flex: 1,
     alignItems: 'center',

package/Application/BottomTab/index.tsx

@@ -316,7 +316,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             <DuoTabBar
               {...props}
               floatingButton={floatingButton}
-              inactiveTintColor={theme.colors.text.secondary}
+              inactiveTintColor={theme.colors.text.hint}
               activeTintColor={theme.colors.primary}
             />
           ) : (

package/package.json

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