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

package/Application/NavigationContainer.tsx

@@ -16,10 +16,9 @@ import { DeviceEventEmitter } from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 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,8 +28,6 @@ import { HeaderBackground } from './Components/HeaderBackground';
 
 const Stack = createStackNavigator();
 
-const FONT_SCALE_OBSERVER_KEY = 'font_scale_config';
-
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme = defaultTheme,
@@ -47,9 +44,13 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const [currentContext, setCurrentContext] = useState<any>({});
-  const [observerFontScaleConfig, setObserverFontScaleConfig] = useState<
-    FontScaleConfig | undefined
-  >(context?.fontScaleConfig);
+
+  useEffect(() => {
+    const sub = maxApi?.observer?.('font_scale_config', (data: any) => {
+      setCurrentContext((prev: any) => ({ ...prev, fontScale: data }));
+    });
+    return () => sub?.remove?.();
+  }, [maxApi]);
 
   const mergedContext = {
     ...context,
@@ -60,34 +61,18 @@ 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}
-        >
-          <Navigation
-            screen={screen}
-            theme={theme}
-            options={options}
-            maxApi={maxApi}
-            setCurrentContext={setCurrentContext}
-            initialParams={initialParams}
-            localize={localize}
-          />
-        </ScaleSizeProvider>
+        <Navigation
+          screen={screen}
+          theme={theme}
+          options={options}
+          maxApi={maxApi}
+          setCurrentContext={setCurrentContext}
+          initialParams={initialParams}
+          localize={localize}
+        />
       </MiniAppContext.Provider>
     </SafeAreaProvider>
   );

package/Application/ScaleSizeProvider.tsx

@@ -1,15 +1,14 @@
-import React, { FC, useContext } from 'react';
+import React, { FC } from 'react';
 import { ScaleSizeContext } from '../Context';
 import { ScaleSizeProviderProps } from './types';
 
+/** @deprecated Max font scale is fixed at 1.5; this provider no longer affects scaling. */
 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

@@ -1,4 +1,4 @@
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Navigator from './Navigator';
 import ScaleSizeProvider from './ScaleSizeProvider';
@@ -44,6 +44,13 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
   const navigator = useRef(new Navigator(navigationRef, isReady, true));
   const [currentContext, setCurrentContext] = useState({});
 
+  useEffect(() => {
+    const sub = maxApi?.observer?.('font_scale_config', (data: any) => {
+      setCurrentContext((prev: any) => ({ ...prev, fontScale: data }));
+    });
+    return () => sub?.remove?.();
+  }, [maxApi]);
+
   let headerBackground = context?.designConfig?.headerBar;
   let headerGradient = theme.colors?.gradient;
 
@@ -74,12 +81,9 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
   };
 
   return (
-    <View style={{ height: height ?? '100%', minHeight:1 }}>
+    <View style={{ height: height ?? '100%', minHeight: 1 }}>
       <SafeAreaProvider>
         <MiniAppContext.Provider value={mergedContext}>
-          <ScaleSizeProvider
-            fontScaleConfig={mergedContext?.fontScaleConfig}
-          >
           <ApplicationContext.Provider
             value={{
               navigator: navigator.current,
@@ -157,7 +161,6 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
               </ReactNavigationContainer>
             </NavigationIndependentTree>
           </ApplicationContext.Provider>
-          </ScaleSizeProvider>
         </MiniAppContext.Provider>
       </SafeAreaProvider>
     </View>

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,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 });
-// 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>({});
+/** @deprecated Max font scale is fixed at 1.5; this context is no longer read. */
+const ScaleSizeContext = createContext<{ scaleSizeMaxRate?: number }>({
+  scaleSizeMaxRate: undefined,
+});
 const TrackingScopeContext = createContext<{ scopeName?: string }>({
   scopeName: undefined,
 });

package/IconButton/index.tsx

@@ -28,7 +28,12 @@ export interface IconButtonProps extends TouchableOpacityProps {
   /**
    * Optional. Defines the size of the IconButton.
    */
-  size?: 'large' | 'small';
+  size?: 'large' | 'medium' | 'small';
+
+  /**
+   * Optional. Defines the shape of the IconButton.
+   */
+  shape?: 'circle' | 'square';
 
   /**
    * Optional. Params auto tracking component.
@@ -40,6 +45,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   type = 'primary',
   icon,
   size,
+  shape = 'circle',
   params,
   ...rest
 }) => {
@@ -52,10 +58,21 @@ const IconButton: React.FC<IconButtonProps> = ({
    * get size icon button
    */
   const getSizeStyle = () => {
-    if (size === 'small') {
-      return styles.small;
+    switch (size) {
+      case 'small':
+        return styles.small;
+      case 'medium':
+        return styles.medium;
+      default:
+        return styles.large;
     }
-    return styles.large;
+  };
+
+  /**
+   * get shape icon button
+   */
+  const getShapeStyle = () => {
+    return shape === 'square' ? styles.square : styles.circle;
   };
 
   /**
@@ -117,8 +134,13 @@ const IconButton: React.FC<IconButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-  const buttonStyle = StyleSheet.flatten([getTypeStyle(), getSizeStyle()]);
-  const iconSize = size === 'small' ? 16 : 24;
+  const buttonStyle = StyleSheet.flatten([
+    getTypeStyle(),
+    styles.base,
+    getSizeStyle(),
+    getShapeStyle(),
+  ]);
+  const iconSize = size === 'small' || size === 'medium' ? 16 : 24;
 
   return (
     <ComponentContext.Provider

package/IconButton/styles.ts

@@ -2,19 +2,27 @@ import { StyleSheet } from 'react-native';
 import { Radius, Colors } from '../Consts';
 
 export default StyleSheet.create({
+  base: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   large: {
     width: 48,
     height: 48,
-    borderRadius: Radius.XL,
-    justifyContent: 'center',
-    alignItems: 'center',
+  },
+  medium: {
+    width: 36,
+    height: 36,
   },
   small: {
-    width: 40,
-    height: 40,
+    width: 28,
+    height: 28,
+  },
+  circle: {
     borderRadius: Radius.XL,
-    justifyContent: 'center',
-    alignItems: 'center',
+  },
+  square: {
+    borderRadius: Radius.S,
   },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });

package/Input/Input.tsx

@@ -113,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

@@ -104,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

@@ -166,6 +166,13 @@ export interface ScreenProps extends ViewProps {
   trackingParams?: ScreenTrackingParams;
 }
 
+/**
+ * Scroll distance (px) over which the animated search header collapses from its
+ * expanded to its docked state — the input range consumed by `HeaderExtendHeader`
+ * and the settle threshold in `handleScrollEnd`.
+ */
+const SEARCH_HEADER_COLLAPSE_DISTANCE = 100;
+
 const Screen = forwardRef(
   (
     {
@@ -195,7 +202,7 @@ const Screen = forwardRef(
     ref: any,
   ) => {
     const screenRef = useRef<View | ScrollView>(null);
-    const { width: widthDevice } = useWindowDimensions();
+    const { width: widthDevice, height: heightDevice } = useWindowDimensions();
     const { theme } = useContext(ApplicationContext);
     const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
@@ -650,7 +657,25 @@ 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 },
+              // The animated search header collapses as the body scrolls. When the
+              // body is short (e.g. no search history) the ScrollView is barely
+              // scrollable, so overscroll bounce feeds the scroll-driven animation
+              // and the input jitters on its way up to the header. A ScrollView
+              // frame can never exceed the window, so forcing the content to be at
+              // least one screen plus the collapse distance guarantees the animation
+              // always has room to complete smoothly, independent of body content.
+              scrollable &&
+                inputSearchProps && {
+                  minHeight: heightDevice + SEARCH_HEADER_COLLAPSE_DISTANCE,
+                },
+              scrollViewProps?.contentContainerStyle,
+            ]}
           >
             {renderAnimatedHeader()}
 

package/Text/utils.ts

@@ -1,24 +1,22 @@
 import { Dimensions, PixelRatio, useWindowDimensions } from 'react-native';
 import { useContext } from 'react';
-import { ScaleSizeContext } from '../Context';
+import { MiniAppContext } from '../Context';
 
 const deviceWidth = Dimensions.get('window').width;
 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 context = useContext<any>(MiniAppContext);
+  if (context?.fontScale?.useOSScaleRate === false) {
+    return size * (context.fontScale.userScaleRate ?? 1);
+  }
   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 ?? MAX_FONT_SCALE;
 
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;
@@ -32,8 +30,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.1",
+    "version": "0.163.1-beta.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -8,7 +8,7 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
-        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
+        "react-native-fast-image": "git+https://oauth2:k_r5y_gV6sX9-TqQxgcd@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
         "@react-navigation/bottom-tabs": "7.4.2",
         "@react-navigation/core": "7.12.1",
         "@react-navigation/elements": "2.5.2",
@@ -16,7 +16,7 @@
         "@react-navigation/routers": "7.4.1",
         "@react-navigation/stack": "7.4.2",
         "react-native-gesture-handler": "2.27.1",
-        "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
+        "react-native-linear-gradient": "git+https://oauth2:k_r5y_gV6sX9-TqQxgcd@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
         "react-native-reanimated": "4.2.2",
         "react-native-safe-area-context": "5.5.2",
         "@shopify/flash-list": "2.1.0",