@momo-kits/foundation 0.162.2-test.5 → 0.162.2-test.8

package/Application/NavigationContainer.tsx

@@ -29,7 +29,7 @@ import { HeaderBackground } from './Components/HeaderBackground';
 
 const Stack = createStackNavigator();
 
-// Key observer storage host app ghi FontScaleConfig. Native lowercase key.
+// Observer storage key the host app writes FontScaleConfig to. Lowercased natively.
 const FONT_SCALE_OBSERVER_KEY = 'font_scale_config';
 
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
@@ -48,10 +48,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const [currentContext, setCurrentContext] = useState<any>({});
-  // FontScaleConfig host ghi xuống observer storage (single source of truth khi có).
+  // 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
-  >(undefined);
+  >(context?.fontScaleConfig);
 
   const mergedContext = {
     ...context,
@@ -63,15 +64,10 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   };
 
   useEffect(() => {
-    if (!maxApi) return;
-    // getDataObserver = snapshot lúc mount; observer = subscribe các lần host ghi sau đó.
-    maxApi.getDataObserver?.(
-      FONT_SCALE_OBSERVER_KEY,
-      (data: FontScaleConfig) => {
-        if (data) setObserverFontScaleConfig(data);
-      },
-    );
-    const sub = maxApi.observer?.(
+    // 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);
@@ -86,7 +82,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     <SafeAreaProvider>
       <MiniAppContext.Provider value={mergedContext}>
         <ScaleSizeProvider
-          fontScaleConfig={observerFontScaleConfig ?? mergedContext?.fontScaleConfig}
+          fontScaleConfig={observerFontScaleConfig}
         >
           <Navigation
             screen={screen}

package/Application/ScaleSizeProvider.tsx

@@ -6,7 +6,7 @@ const ScaleSizeProvider: FC<ScaleSizeProviderProps> = ({
   fontScaleConfig,
   children,
 }) => {
-  // Kế thừa config từ tầng trên (vd app root) khi host không set qua MiniAppContext.
+  // 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={fontScaleConfig ?? parent}>

package/Context/index.ts

@@ -9,7 +9,7 @@ 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 });
-// Single source of truth: chứa cả flag OS lẫn rate user tự chỉnh.
+// Single source of truth: holds both the OS flag and the user-adjusted rate.
 export type FontScaleConfig = {
   useOSFontScale?: boolean;
   userScaleRate?: number;

package/Text/utils.ts

@@ -14,10 +14,10 @@ const useScaleSize = (size: number, userScaleRate?: number) => {
   const { width } = useWindowDimensions();
   const deviceScale = width / DEFAULT_SCREEN_SIZE;
 
-  // rate user tự chỉnh: param override > config > 1 (không scale)
+  // user-adjusted rate: param override > config > 1 (no scaling)
   const customRate = userScaleRate ?? ctxRate ?? 1;
-  // useOSFontScale bật -> lấy scale OS đè lên, ignore custom rate;
-  // tắt -> dùng custom rate. Cap cứng MAX_FONT_SCALE (150%) cả hai.
+  // useOSFontScale on -> apply the OS scale, ignore the custom rate;
+  // off -> use the custom rate. Both hard-capped at MAX_FONT_SCALE (150%).
   const appliedRate = useOSFontScale ? fontScale : customRate;
 
   let fontSizeDeviceScale = size;

package/package.json

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