@momo-kits/foundation 0.162.2-test.1 → 0.162.2-test.10

package/Application/BottomSheet.tsx

@@ -37,8 +37,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   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 keyboardOffset = heightHeader - bottomInset;
+  const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -312,7 +311,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           {useBottomInset && (
             <View
               style={{
-                height: bottomInset,
+                height: Math.min(insets.bottom, 21),
                 backgroundColor: backgroundColor,
               }}
             />

package/Application/BottomTab/index.tsx

@@ -320,7 +320,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
           activeTintColor={theme.colors.primary}
           style={[
             {
-              height: 64 + (Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom),
+              height: 64 + Math.min(insets.bottom, 21),
             },
           ]}
         />

package/Application/Components/HeaderLeft.tsx

@@ -86,7 +86,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
 const styles = StyleSheet.create({
   headerLeft: {
-    marginLeft: 12,
+    marginLeft: 8,
   },
 });
 

package/Application/NavigationContainer.tsx

@@ -19,7 +19,7 @@ import Navigator from './Navigator';
 import ScaleSizeProvider from './ScaleSizeProvider';
 import { getModalOptions, getStackOptions } from './utils';
 import { NavigationContainerProps } from './types';
-import { ApplicationContext, MiniAppContext } from '../Context';
+import { ApplicationContext, FontScaleConfig, MiniAppContext } from '../Context';
 import Localize from './Localize';
 import { Colors, defaultTheme } from '../Consts';
 import { HeaderLeft } from './Components/HeaderLeft';
@@ -29,6 +29,9 @@ import { HeaderBackground } from './Components/HeaderBackground';
 
 const Stack = createStackNavigator();
 
+// Observer storage key the host app writes FontScaleConfig to. Lowercased natively.
+const FONT_SCALE_OBSERVER_KEY = 'font_scale_config';
+
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme = defaultTheme,
@@ -45,6 +48,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const [currentContext, setCurrentContext] = useState<any>({});
+  // Default = the host-seeded fontScaleConfig from MiniAppContext, so the first frame is already
+  // scaled (no flash). The observer below overwrites it on later host writes (live rate changes).
+  const [observerFontScaleConfig, setObserverFontScaleConfig] = useState<
+    FontScaleConfig | undefined
+  >(context?.fontScaleConfig);
 
   const mergedContext = {
     ...context,
@@ -55,10 +63,27 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     },
   };
 
+  useEffect(() => {
+    // The initial value is seeded by the host into MiniAppContext and used as this state's default
+    // above, so the first frame is already scaled (no flash). Here we only subscribe to later host
+    // writes so a rate change applies live while the miniapp is open.
+    const sub = maxApi?.observer?.(
+      FONT_SCALE_OBSERVER_KEY,
+      (data: FontScaleConfig) => {
+        setObserverFontScaleConfig(data ?? undefined);
+      },
+    );
+    return () => {
+      sub?.remove?.();
+    };
+  }, [maxApi]);
+
   return (
     <SafeAreaProvider>
       <MiniAppContext.Provider value={mergedContext}>
-        <ScaleSizeProvider scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}>
+        <ScaleSizeProvider
+          fontScaleConfig={observerFontScaleConfig}
+        >
           <Navigation
             screen={screen}
             theme={theme}

package/Application/ScaleSizeProvider.tsx

@@ -1,13 +1,15 @@
-import React, { FC } from 'react';
+import React, { FC, useContext } from 'react';
 import { ScaleSizeContext } from '../Context';
 import { ScaleSizeProviderProps } from './types';
 
 const ScaleSizeProvider: FC<ScaleSizeProviderProps> = ({
-  scaleSizeMaxRate,
+  fontScaleConfig,
   children,
 }) => {
+  // Inherit the config from an upper layer (e.g. app root) when the host doesn't set it via MiniAppContext.
+  const parent = useContext(ScaleSizeContext);
   return (
-    <ScaleSizeContext.Provider value={{ scaleSizeMaxRate }}>
+    <ScaleSizeContext.Provider value={fontScaleConfig ?? parent}>
       {children}
     </ScaleSizeContext.Provider>
   );

package/Application/WidgetContainer.tsx

@@ -78,7 +78,7 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
       <SafeAreaProvider>
         <MiniAppContext.Provider value={mergedContext}>
           <ScaleSizeProvider
-            scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}
+            fontScaleConfig={mergedContext?.fontScaleConfig}
           >
           <ApplicationContext.Provider
             value={{

package/Application/types.ts

@@ -9,6 +9,7 @@ import {
 } from 'react-native';
 import { PopupNotifyProps } from '../Popup/types';
 import { InputRef, InputSearchProps } from '../Input';
+import { FontScaleConfig } from '../Context';
 import Navigation from './Navigation';
 
 export type NavigationProps = {
@@ -108,7 +109,7 @@ export type Theme = {
 };
 
 export type ScaleSizeProviderProps = {
-  scaleSizeMaxRate?: number;
+  fontScaleConfig?: FontScaleConfig;
   children: ViewProps['children'];
 };
 

package/Context/index.ts

@@ -9,9 +9,12 @@ 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 });
-const ScaleSizeContext = createContext<{ scaleSizeMaxRate?: number }>({
-  scaleSizeMaxRate: undefined,
-});
+// Single source of truth: holds both the OS flag and the user-adjusted rate.
+export type FontScaleConfig = {
+  useOSFontScale?: boolean;
+  userScaleRate?: number;
+};
+const ScaleSizeContext = createContext<FontScaleConfig>({});
 const TrackingScopeContext = createContext<{ scopeName?: string }>({
   scopeName: undefined,
 });

package/Layout/Screen.tsx

@@ -204,10 +204,9 @@ const Screen = forwardRef(
     let handleScroll;
     let Component: any = View;
 
-    const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
-    let keyboardOffset = heightHeader - bottomInset;
+    let keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
     if (headerType === 'extended' || animatedHeader || inputSearchProps) {
-      keyboardOffset = -bottomInset;
+      keyboardOffset = -Math.min(insets.bottom, 21);
     }
 
     /**
@@ -617,7 +616,7 @@ const Screen = forwardRef(
                 {...floatingButtonProps}
                 animatedValue={animatedValue.current}
                 bottom={
-                  Footer || isTab ? 12 : bottomInset + Spacing.S
+                  Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
                 }
               />
             </View>
@@ -628,7 +627,7 @@ const Screen = forwardRef(
               style={[
                 styles.shadow,
                 {
-                  paddingBottom: bottomInset + Spacing.S,
+                  paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
                   backgroundColor: theme.colors.background.surface,
                 },
               ]}

package/Text/utils.ts

@@ -7,14 +7,24 @@ const DEFAULT_SCREEN_SIZE = 375;
 const MAX_FONT_SCALE = 1.5;
 const MAX_DEVICE_SCALE = 5;
 
-const useScaleSize = (size: number, scaleRate?: number) => {
-  const { scaleSizeMaxRate = MAX_FONT_SCALE } = useContext(ScaleSizeContext);
+const useScaleSize = (size: number, userScaleRate?: number) => {
+  const { useOSFontScale = true, userScaleRate: ctxRate } =
+    useContext(ScaleSizeContext);
   const fontScale = PixelRatio.getFontScale();
   const { width } = useWindowDimensions();
   const deviceScale = width / DEFAULT_SCREEN_SIZE;
 
-  const maxScaleRate = scaleRate ?? scaleSizeMaxRate;
+  // rate precedence: per-call param override > host config (ctxRate) > 1 (no scaling)
+  const customRate = userScaleRate ?? ctxRate ?? 1;
 
+  // useOSFontScale off -> the user has full control via customRate; skip device-width scaling
+  // entirely and apply only the custom rate (capped at MAX_FONT_SCALE).
+  if (!useOSFontScale) {
+    // custom rate is uncapped (full user control); only the OS-follow path below caps at MAX_FONT_SCALE.
+    return customRate > 1 ? customRate * size : size;
+  }
+
+  // useOSFontScale on -> device-width scale + OS font scale, take the larger.
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;
 
@@ -27,8 +37,8 @@ const useScaleSize = (size: number, scaleRate?: number) => {
 
   if (fontScale > 1) {
     fontSizeOSScale = Math.min(
-      fontSizeOSScale * fontScale,
-      fontSizeOSScale * maxScaleRate,
+      fontScale * fontSizeOSScale,
+      fontSizeOSScale * MAX_FONT_SCALE,
     );
   }
 

package/package.json

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