@momo-kits/foundation 0.169.5 → 0.169.6

package/Application/BottomTab/BottomTabBar.tsx

@@ -17,7 +17,6 @@ import { CurvedContainer } from './CurvedContainer';
 import { ActiveIndicator } from './ActiveIndicator';
 import { getHorizontalBarWidth, TabBarMetrics, TabBarMotion } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
-import { FixedScaleText } from './TabBarIcon';
 import { styles } from './BottomTabBar.styles';
 
 type Props = BottomTabBarProps & {
@@ -68,27 +67,17 @@ const useCenterActionPress = () => {
 };
 
 /**
- * Center action (.Nav/CTA): a button rising out of the notch, its label below.
+ * Center action (.Nav/CTA): a button rising out of the notch, its label below
+ * (growing downward when scaled).
  */
-const CenterAction: React.FC<{
-  floatingButton: FloatingButtonProps;
-  fixedFontScale?: boolean;
-}> = ({ floatingButton, fixedFontScale }) => {
+const CenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
+  floatingButton,
+}) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
   const { icon, label, onPress, labelContent } = floatingButton;
   const { buttonStyle, onPressIn, onPressOut } = useCenterActionPress();
-  const labelText = (
-    <Text
-      numberOfLines={1}
-      typography={'label_s_medium'}
-      color={theme.colors.text.secondary}
-    >
-      {label}
-    </Text>
-  );
-
   let iconNode = icon;
   if (typeof icon === 'string') {
     iconNode = (
@@ -100,11 +89,6 @@ const CenterAction: React.FC<{
     );
   }
 
-  let labelNode = labelText;
-  if (fixedFontScale) {
-    labelNode = <FixedScaleText>{labelText}</FixedScaleText>;
-  }
-
   return (
     <View style={[styles.ctaSlot, showBaseLineDebug && styles.debugBaseLine]}>
       <Pressable
@@ -125,7 +109,13 @@ const CenterAction: React.FC<{
           {iconNode}
         </Animated.View>
         <View style={styles.ctaLabel}>
-          {labelNode}
+          <Text
+            numberOfLines={1}
+            typography={'label_s_medium'}
+            color={theme.colors.text.secondary}
+          >
+            {label}
+          </Text>
           {labelContent && (
             <View pointerEvents={'none'} style={styles.ctaLabelOverlay}>
               {labelContent}
@@ -147,15 +137,7 @@ const HorizontalTabBar: React.FC<{
   activeTintColor: string;
   inactiveTintColor: string;
   floatingButton?: FloatingButtonProps;
-  fixedFontScale?: boolean;
-}> = ({
-  items,
-  width,
-  activeTintColor,
-  inactiveTintColor,
-  floatingButton,
-  fixedFontScale,
-}) => {
+}> = ({ items, width, activeTintColor, inactiveTintColor, floatingButton }) => {
   const withCta = hasCenterAction(floatingButton, items.length);
   const [layouts, setLayouts] = useState<
     Record<string, { x: number; y: number; width: number }>
@@ -181,7 +163,6 @@ const HorizontalTabBar: React.FC<{
         onLongPress={item.onLongPress}
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}
-        fixedFontScale={fixedFontScale}
       />
     ));
   };
@@ -192,10 +173,7 @@ const HorizontalTabBar: React.FC<{
       return (
         <>
           {renderItems(items.slice(0, middle))}
-          <CenterAction
-            floatingButton={floatingButton}
-            fixedFontScale={fixedFontScale}
-          />
+          <CenterAction floatingButton={floatingButton} />
           {renderItems(items.slice(middle))}
         </>
       );

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -10,7 +10,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { FixedScaleText, TabBarIcon } from './TabBarIcon';
+import { TabBarIcon } from './TabBarIcon';
 import { Text } from '../../Text';
 import { MiniAppContext } from '../../Context';
 import { Colors, Spacing } from '../../Consts';
@@ -31,14 +31,12 @@ type TabItemContentProps = {
   badge?: string | number;
   // rail item (.Nav/Duo/Item) instead of the horizontal one (.Nav/itemTab)
   vertical?: boolean;
-  // keep the label at its design size, the Duo displays otherwise scale it up
-  fixedFontScale?: boolean;
   hideLabel?: boolean;
 };
 
 /**
- * Tab item body: the icon in its indicator slot with the label under it. The bar slides one
- * shared active indicator behind the slots; icon and label tints cross-fade on focus.
+ * Tab item body: the icon in its indicator slot, the label in a fixed slot under it so a
+ * scaled label grows down. The bar slides one shared active indicator behind the icon slots.
  */
 const TabItemContent: React.FC<TabItemContentProps> = ({
   label,
@@ -48,7 +46,6 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
   icon,
   badge,
   vertical,
-  fixedFontScale,
   hideLabel,
 }) => {
   const progress = useSharedValue(focused ? 1 : 0);
@@ -72,9 +69,9 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
     </Text>
   );
 
-  // The active label fades in over the inactive one.
-  const text = (
-    <View style={!vertical && styles.labelBox}>
+  // Active label fades in over the inactive one; a scaled label overflows down.
+  const labelNode = (
+    <View style={vertical ? styles.railLabelSlot : styles.labelSlot}>
       {renderText(inactiveTintColor)}
       <Animated.View
         pointerEvents={'none'}
@@ -85,11 +82,6 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
     </View>
   );
 
-  let labelNode = text;
-  if (fixedFontScale) {
-    labelNode = <FixedScaleText>{text}</FixedScaleText>;
-  }
-
   return (
     <>
       <View style={vertical ? styles.railSlot : styles.slot}>
@@ -168,9 +160,13 @@ const styles = StyleSheet.create({
     paddingVertical: TabBarMetrics.railIndicatorPaddingVertical,
     paddingHorizontal: TabBarMetrics.indicatorPaddingHorizontal,
   },
-  labelBox: {
+  labelSlot: {
+    height: TabBarMetrics.labelHeight,
     alignSelf: 'stretch',
   },
+  railLabelSlot: {
+    height: TabBarMetrics.railLabelHeight,
+  },
   label: {
     textAlign: 'center',
   },

package/Application/BottomTab/DuoRailTabBar.tsx

@@ -13,7 +13,6 @@ import { TabItemContent } from './CustomBottomTabItem';
 import { CurvedContainer } from './CurvedContainer';
 import { TabBarMetrics } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
-import { FixedScaleText } from './TabBarIcon';
 import { usePressLift } from './usePressLift';
 import { ActiveIndicator } from './ActiveIndicator';
 import {
@@ -76,7 +75,6 @@ const Rail: React.FC<{
       >
         <TabItemContent
           vertical
-          fixedFontScale
           label={item.label}
           focused={item.focused}
           icon={item.icon}
@@ -116,15 +114,13 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
         <CtaIcon icon={floatingButton.icon} />
       </Animated.View>
       <View style={styles.railCtaLabel}>
-        <FixedScaleText>
-          <Text
-            numberOfLines={1}
-            typography={'label_xs_medium'}
-            color={theme.colors.text.secondary}
-          >
-            {floatingButton.label}
-          </Text>
-        </FixedScaleText>
+        <Text
+          numberOfLines={1}
+          typography={'label_xs_medium'}
+          color={theme.colors.text.secondary}
+        >
+          {floatingButton.label}
+        </Text>
         {floatingButton.labelContent && (
           <View pointerEvents={'none'} style={styles.railCtaLabelOverlay}>
             {floatingButton.labelContent}

package/Application/BottomTab/DuoTabBar.tsx

@@ -44,7 +44,6 @@ const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
       ]}
     >
       <HorizontalTabBar
-        fixedFontScale
         items={getTabItems(props)}
         width={getHorizontalBarWidth(width, height, insets.left, insets.right)}
         floatingButton={floatingButton}

package/Application/BottomTab/TabBarIcon.tsx

@@ -7,9 +7,10 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { Colors, Spacing } from '../../Consts';
-import { ApplicationContext, MiniAppContext } from '../../Context';
+import { ApplicationContext } from '../../Context';
 import { BadgeDot } from '../../Badge';
 import { Text } from '../../Text';
+import ScaleSizeProvider from '../ScaleSizeProvider';
 import { TabBarMetrics, TabBarMotion } from './metrics';
 
 type Props = {
@@ -52,29 +53,9 @@ export const getTabBadge = (
   return text;
 };
 
-/**
- * Keeps text at its design size: like the system tab bar it doesn't grow with the OS font
- * scale or the wide Duo displays, which Text otherwise scales up to 5pt.
- */
-export const FixedScaleText: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const context = useContext<any>(MiniAppContext);
-  return (
-    <MiniAppContext.Provider
-      value={{
-        ...context,
-        fontScale: { useOSScaleRate: false, userScaleRate: 1 },
-      }}
-    >
-      {children}
-    </MiniAppContext.Provider>
-  );
-};
-
 /**
  * Label badge of a tab: numbers use the error color, text the warning color (Figma Badge
- * round numeric / text).
+ * round numeric / text). The text keeps its design size to fit the 16 height.
  */
 const TabBadge: React.FC<{ label: string; vertical?: boolean }> = ({
   label,
@@ -96,7 +77,7 @@ const TabBadge: React.FC<{ label: string; vertical?: boolean }> = ({
         },
       ]}
     >
-      <FixedScaleText>
+      <ScaleSizeProvider scaleSizeMaxRate={1}>
         <Text
           numberOfLines={1}
           typography={'action_xxs_bold'}
@@ -104,7 +85,7 @@ const TabBadge: React.FC<{ label: string; vertical?: boolean }> = ({
         >
           {label}
         </Text>
-      </FixedScaleText>
+      </ScaleSizeProvider>
     </View>
   );
   if (vertical) {

package/Application/BottomTab/index.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-native';
 import { Icon } from '../../Icon';
 import { BottomTabProps } from '../types';
+import ScaleSizeProvider from '../ScaleSizeProvider';
 import BottomTabBar, { hasCenterAction } from './BottomTabBar';
 import { TabBarMetrics } from './metrics';
 import { getTabBadge } from './TabBarIcon';
@@ -131,24 +132,18 @@ const BottomTab: React.FC<BottomTabProps> = ({
     },
   };
 
+  // One cap for the whole bar (labels, CTA, custom content) so it fits the fixed bar and notch.
   const renderTabBar = (props: BottomTabBarProps) => {
-    if (isIPhoneDuo) {
-      return (
-        <DuoTabBar
+    const TabBar = isIPhoneDuo ? DuoTabBar : BottomTabBar;
+    return (
+      <ScaleSizeProvider scaleSizeMaxRate={TabBarMetrics.labelMaxScale}>
+        <TabBar
           {...props}
           floatingButton={floatingButton}
           inactiveTintColor={theme.colors.text.secondary}
           activeTintColor={theme.colors.primary}
         />
-      );
-    }
-    return (
-      <BottomTabBar
-        {...props}
-        floatingButton={floatingButton}
-        inactiveTintColor={theme.colors.text.secondary}
-        activeTintColor={theme.colors.primary}
-      />
+      </ScaleSizeProvider>
     );
   };
 

package/Application/BottomTab/metrics.ts

@@ -19,16 +19,15 @@ const TabBarMetrics = {
   indicatorPaddingHorizontal: Spacing.M,
   indicatorRadius: Radius.XL,
   indicatorHeight: 32,
-  // home indicator / gesture bar area under the container
+  labelMaxScale: 1.2,
+  labelHeight: 18,
+  railLabelHeight: 14,
   systemIndicatorHeight: 24,
-  // Unfolded foldables (short side from 600) use 65% of it, centered; others fill the window
   foldableMinShortSide: 600,
   foldableWidthRatio: 0.65,
   ctaSlotWidth: 92,
   ctaSize: 48,
-  // the icon sits 10 inside the 48 button (prototype .cta: 28 icon), 12 inside the 52 rail one
   ctaIconSize: 28,
-  // the button rises 22 above the container top edge
   ctaLift: 22,
   ctaLabelGap: Spacing.M,
   ctaLabelHeight: 18,

package/Application/ScaleSizeProvider.tsx

@@ -1,16 +1,23 @@
-import React, { FC } from 'react';
-import { ScaleSizeContext } from '../Context';
+import React, { FC, useContext, useMemo } from 'react';
+import { MiniAppContext } from '../Context';
 import { ScaleSizeProviderProps } from './types';
 
-/** @deprecated Max font scale is fixed at 1.5; this provider no longer affects scaling. */
+/**
+ * Caps the font scale of its subtree at `scaleSizeMaxRate` × the design size
+ * (`useScaleSize`), passed down in MiniAppContext. The nearest provider wins;
+ * an undefined rate lifts an outer cap.
+ */
 const ScaleSizeProvider: FC<ScaleSizeProviderProps> = ({
   scaleSizeMaxRate,
   children,
 }) => {
+  const context = useContext<object | undefined>(MiniAppContext);
+  const value = useMemo(() => {
+    return { ...context, scaleSizeMaxRate };
+  }, [context, scaleSizeMaxRate]);
+
   return (
-    <ScaleSizeContext.Provider value={{ scaleSizeMaxRate }}>
-      {children}
-    </ScaleSizeContext.Provider>
+    <MiniAppContext.Provider value={value}>{children}</MiniAppContext.Provider>
   );
 };
 

package/Context/index.ts

@@ -10,7 +10,10 @@ const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
 const ScreenContext = (Platform as any).ScreenContext ?? Context;
 const ComponentContext = (Platform as any).ComponentContext ?? Context;
 const SkeletonContext = createContext({ loading: false });
-/** @deprecated Max font scale is fixed at 1.5; this context is no longer read. */
+/**
+ * @deprecated Not read: wrap the subtree in `ScaleSizeProvider`, which caps the
+ * font scale through MiniAppContext. Kept for mini apps built on older kits.
+ */
 const ScaleSizeContext = createContext<{ scaleSizeMaxRate?: number }>({
   scaleSizeMaxRate: undefined,
 });

package/Text/utils.ts

@@ -6,21 +6,28 @@ const DEFAULT_SCREEN_SIZE = 375;
 const MAX_FONT_SCALE = 1.5;
 const MAX_DEVICE_SCALE = 5;
 
+type MiniAppScale = {
+  scaleSizeMaxRate?: number;
+  fontScale?: { useOSScaleRate?: boolean; userScaleRate?: number };
+};
+
 /**
- * Scales `size` by screen width (at most +5) and OS font scale (at most
- * `scaleRate`, default 1.5), taking the larger; a mini app can opt out of the
- * OS rate and use its own `fontScale.userScaleRate` instead.
+ * Scales `size` by screen width (+5 max) and OS font scale (max `scaleRate`,
+ * else the ScaleSizeProvider rate, else 1.5), taking the larger, or by the mini
+ * app `fontScale.userScaleRate`; a provider rate caps both at `size × rate`.
  */
 const useScaleSize = (size: number, scaleRate?: number) => {
   const { width } = useWindowDimensions();
-  const context = useContext<any>(MiniAppContext);
+  const context = useContext<MiniAppScale | undefined>(MiniAppContext);
+  const scaleSizeMaxRate = context?.scaleSizeMaxRate;
+  const maxSize = scaleSizeMaxRate ? size * scaleSizeMaxRate : Infinity;
   if (context?.fontScale?.useOSScaleRate === false) {
-    return size * (context.fontScale.userScaleRate ?? 1);
+    return Math.min(size * (context.fontScale.userScaleRate ?? 1), maxSize);
   }
   const fontScale = PixelRatio.getFontScale();
   const deviceScale = width / DEFAULT_SCREEN_SIZE;
 
-  const maxScaleRate = scaleRate ?? MAX_FONT_SCALE;
+  const maxScaleRate = scaleRate ?? scaleSizeMaxRate ?? MAX_FONT_SCALE;
 
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;
@@ -39,7 +46,7 @@ const useScaleSize = (size: number, scaleRate?: number) => {
     );
   }
 
-  return Math.max(fontSizeDeviceScale, fontSizeOSScale);
+  return Math.min(Math.max(fontSizeDeviceScale, fontSizeOSScale), maxSize);
 };
 
 /**

package/package.json

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