@momo-kits/foundation 0.162.3-test.2 → 0.163.1-beta.2

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, FontScaleConfig, MiniAppContext } from '../Context';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import Localize from './Localize';
 import { Colors, defaultTheme } from '../Consts';
 import { HeaderLeft } from './Components/HeaderLeft';
@@ -29,29 +29,6 @@ import { HeaderBackground } from './Components/HeaderBackground';
 
 const Stack = createStackNavigator();
 
-const FONT_SCALE_OBSERVER_KEY = 'font_scale_config';
-
-// AI-GENERATED START: parse the font_scale_config first-frame seed read straight from async storage (string | {response} | object)
-const parseSeedFontScaleConfig = (raw: any): FontScaleConfig | undefined => {
-  let data = raw;
-  if (typeof data === 'string') {
-    try {
-      data = JSON.parse(data);
-    } catch {
-      return undefined;
-    }
-  }
-  data = data?.response ?? data;
-  if (!data || (data.useOSFontScale === undefined && data.userScaleRate === undefined)) {
-    return undefined;
-  }
-  return {
-    useOSFontScale: data.useOSFontScale,
-    userScaleRate: data.userScaleRate,
-  };
-};
-// AI-GENERATED END: parse the font_scale_config first-frame seed read straight from async storage (string | {response} | object)
-
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme = defaultTheme,
@@ -68,11 +45,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const [currentContext, setCurrentContext] = useState<any>({});
-  // AI-GENERATED START: self-seed first-frame font scale by reading font_scale_config straight from async storage
-  const [observerFontScaleConfig, setObserverFontScaleConfig] = useState<
-    FontScaleConfig | undefined
-  >(() => parseSeedFontScaleConfig(maxApi?.getItem?.(FONT_SCALE_OBSERVER_KEY)) ?? context?.fontScaleConfig);
-  // AI-GENERATED END: self-seed first-frame font scale by reading font_scale_config straight from async storage
 
   const mergedContext = {
     ...context,
@@ -83,24 +55,10 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     },
   };
 
-  useEffect(() => {
-    const sub = maxApi?.observer?.(
-      FONT_SCALE_OBSERVER_KEY,
-      (data: FontScaleConfig) => {
-        setObserverFontScaleConfig(data ?? undefined);
-      },
-    );
-    return () => {
-      sub?.remove?.();
-    };
-  }, [maxApi]);
-
   return (
     <SafeAreaProvider>
       <MiniAppContext.Provider value={mergedContext}>
-        <ScaleSizeProvider
-          fontScaleConfig={observerFontScaleConfig}
-        >
+        <ScaleSizeProvider scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}>
           <Navigation
             screen={screen}
             theme={theme}

package/Application/ScaleSizeProvider.tsx

@@ -1,15 +1,13 @@
-import React, { FC, useContext } from 'react';
+import React, { FC } from 'react';
 import { ScaleSizeContext } from '../Context';
 import { ScaleSizeProviderProps } from './types';
 
 const ScaleSizeProvider: FC<ScaleSizeProviderProps> = ({
-  fontScaleConfig,
+  scaleSizeMaxRate,
   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={fontScaleConfig ?? parent}>
+    <ScaleSizeContext.Provider value={{ scaleSizeMaxRate }}>
       {children}
     </ScaleSizeContext.Provider>
   );

package/Application/WidgetContainer.tsx

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

package/Application/types.ts

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

package/Context/index.ts

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

package/Input/Input.tsx

@@ -77,7 +77,8 @@ const Input = forwardRef(
     const scaledFontSize = useScaleSize(14);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
     const [focused, setFocused] = useState(false);
-    const haveValue = !!value || !!defaultValue;
+    const [internalText, setInternalText] = useState(defaultValue || '');
+    const haveValue = value !== undefined ? !!value : !!internalText;
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'Input';
 
@@ -95,6 +96,9 @@ const Input = forwardRef(
     };
 
     const _onChangeText = (text: string) => {
+      if (value === undefined) {
+        setInternalText(text);
+      }
       onChangeText?.(text);
     };
 
@@ -109,6 +113,13 @@ const Input = forwardRef(
     };
 
     const _setText = (text: string) => {
+      if (__DEV__ && value !== undefined) {
+        console.error(
+          `${componentName}: calling ref.setText() on a controlled input (\`value\` is provided) is an anti-pattern. ` +
+            'It creates two sources of truth: setText will be overridden by React on the next render. ' +
+            'Update the state behind `value` instead.',
+        );
+      }
       inputRef?.current?.setNativeProps({ text });
       _onChangeText(text);
     };

package/Input/InputPhoneNumber.tsx

@@ -69,7 +69,8 @@ const InputPhoneNumber = forwardRef(
     const context = useContext<any>(MiniAppContext);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
     const [focused, setFocused] = useState(false);
-    const haveValue = !!value || !!defaultValue;
+    const [internalText, setInternalText] = useState(defaultValue || '');
+    const haveValue = value !== undefined ? !!value : !!internalText;
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'InputPhoneNumber';
 
@@ -86,6 +87,9 @@ const InputPhoneNumber = forwardRef(
     };
 
     const _onChangeText = (text: string) => {
+      if (value === undefined) {
+        setInternalText(text);
+      }
       onChangeText?.(text);
     };
 
@@ -100,6 +104,13 @@ const InputPhoneNumber = forwardRef(
     };
 
     const _setText = (text: string) => {
+      if (__DEV__ && value !== undefined) {
+        console.error(
+          `${componentName}: calling ref.setText() on a controlled input (\`value\` is provided) is an anti-pattern. ` +
+            'It creates two sources of truth: setText will be overridden by React on the next render. ' +
+            'Update the state behind `value` instead.',
+        );
+      }
       inputRef?.current?.setNativeProps({ text });
       _onChangeText(text);
     };

package/Layout/Screen.tsx

@@ -650,7 +650,14 @@ const Screen = forwardRef(
             onScroll={handleScroll}
             onScrollEndDrag={handleScrollEnd}
             scrollEventThrottle={16}
-            style={Styles.flex}
+            style={[
+              Styles.flex,
+              !scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
+            ]}
+            contentContainerStyle={[
+              scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
+              scrollViewProps?.contentContainerStyle,
+            ]}
           >
             {renderAnimatedHeader()}
 

package/Text/utils.ts

@@ -7,18 +7,13 @@ const DEFAULT_SCREEN_SIZE = 375;
 const MAX_FONT_SCALE = 1.5;
 const MAX_DEVICE_SCALE = 5;
 
-const useScaleSize = (size: number, userScaleRate?: number) => {
-  const { useOSFontScale = true, userScaleRate: ctxRate } =
-    useContext(ScaleSizeContext);
+const useScaleSize = (size: number, scaleRate?: number) => {
+  const { scaleSizeMaxRate = MAX_FONT_SCALE } = useContext(ScaleSizeContext);
   const fontScale = PixelRatio.getFontScale();
   const { width } = useWindowDimensions();
   const deviceScale = width / DEFAULT_SCREEN_SIZE;
 
-  const customRate = userScaleRate ?? ctxRate ?? 1;
-
-  if (!useOSFontScale) {
-    return customRate > 1 ? customRate * size : size;
-  }
+  const maxScaleRate = scaleRate ?? scaleSizeMaxRate;
 
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;
@@ -32,8 +27,8 @@ const useScaleSize = (size: number, userScaleRate?: number) => {
 
   if (fontScale > 1) {
     fontSizeOSScale = Math.min(
-      fontScale * fontSizeOSScale,
-      fontSizeOSScale * MAX_FONT_SCALE,
+      fontSizeOSScale * fontScale,
+      fontSizeOSScale * maxScaleRate,
     );
   }
 

package/package.json

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