@momo-kits/foundation 0.162.3-fontscale.1 → 0.162.3-rn.86.2

package/Application/BottomSheet.tsx

@@ -255,7 +255,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       onRequestClose={() => {
         onDismiss();
       }}
-      style={StyleSheet.absoluteFillObject}
+      style={StyleSheet.absoluteFill}
       isModalKit={true}
     >
       <KeyboardAvoidingView
@@ -269,7 +269,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         style={styles.container}
       >
         <Pressable
-          style={StyleSheet.absoluteFillObject}
+          style={StyleSheet.absoluteFill}
           onPress={() => {
             action.current = 'touch';
             onDismiss();

package/Application/ModalScreen.tsx

@@ -128,7 +128,7 @@ const Modal: React.FC<ModalParams> = props => {
       transparent
       visible={true}
       onRequestClose={onDismiss}
-      style={StyleSheet.absoluteFillObject}
+      style={StyleSheet.absoluteFill}
       isModalKit={true}
     >
       <KeyboardAvoidingView
@@ -136,7 +136,7 @@ const Modal: React.FC<ModalParams> = props => {
         behavior={Platform.OS === 'ios' ? 'padding' : undefined}
       >
         <Pressable
-          style={StyleSheet.absoluteFillObject}
+          style={StyleSheet.absoluteFill}
           onPress={() => onDismiss(undefined, barrierDismissible)}
         >
           <Animated.View style={[styles.overlayContent, { opacity }]} />

package/Application/NavigationContainer.tsx

@@ -16,7 +16,6 @@ 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, MiniAppContext } from '../Context';
@@ -46,6 +45,13 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const context = useContext<any>(MiniAppContext);
   const [currentContext, setCurrentContext] = useState<any>({});
 
+  useEffect(() => {
+    const sub = maxApi?.observer?.('font_scale_config', (data: any) => {
+      setCurrentContext((prev: any) => ({ ...prev, fontScale: data }));
+    });
+    return () => sub?.remove?.();
+  }, [maxApi]);
+
   const mergedContext = {
     ...context,
     ...currentContext,
@@ -58,17 +64,15 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   return (
     <SafeAreaProvider>
       <MiniAppContext.Provider value={mergedContext}>
-        <ScaleSizeProvider scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}>
-          <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>
   );
@@ -117,12 +121,6 @@ const Navigation: React.FC<any> = ({
       },
     );
 
-    // TEMP: verify FontScale MaxApi end-to-end — remove after test
-    // @ts-ignore getFontScale added in newer @momo-platform/api
-    maxApi?.getFontScale?.((scale: any) =>
-      console.log('[FontScale][momo-kit] getFontScale ->', scale),
-    );
-
     return () => {
       subscription?.remove?.();
     };

package/Application/ScaleSizeProvider.tsx

@@ -2,6 +2,7 @@ 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> = ({
   scaleSizeMaxRate,
   children,

package/Application/StackScreen.tsx

@@ -315,6 +315,7 @@ const StackScreen: React.FC<any> = props => {
     <ScreenContext.Provider
       value={{
         screenName,
+        bottomTab: !!bottomTab,
         onElementLoad: (item: any) => {
           /**
            * widget handle

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
-            scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}
-          >
           <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/Context/index.ts

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

package/Divider/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { View, ViewStyle } from 'react-native';
+import { StyleProp, View, ViewStyle } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Spacing } from '../Consts';
 import { DashDivider } from './DashDivider';
@@ -8,7 +8,7 @@ export interface DividerProps {
   /**
    * Custom styles for divider
    */
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
 
   /**
    * Enable margin vertical 4px
@@ -30,13 +30,13 @@ const Divider: React.FC<DividerProps> = ({
   return (
     <View
       style={[
-        style,
         {
           height: 1,
           width: '100%',
           backgroundColor: theme.colors.border.default,
           marginVertical: useMargin ? Spacing.XS : 0,
         },
+        style,
       ]}
     />
   );

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/Image/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Image as RNImage, StyleSheet, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import styles from './styles';
 import {
@@ -23,6 +23,10 @@ export const getImageName = (source: any): string => {
   return '';
 };
 
+const isDataUriSource = (source: any): boolean => {
+  return typeof source?.uri === 'string' && source.uri.startsWith('data:');
+};
+
 const Image: React.FC<ImageProps> = ({
   style,
   source,
@@ -43,6 +47,7 @@ const Image: React.FC<ImageProps> = ({
   const [status, setStatus] = useState<Status>('success');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const useFastImage = !isDataUriSource(source);
 
   let accessibilityLabel: any = `img|${getImageName(source)}`;
   if (component?.componentId) {
@@ -79,6 +84,46 @@ const Image: React.FC<ImageProps> = ({
     return children;
   };
 
+  if (!useFastImage) {
+    return (
+      <RNImage
+        {...rest}
+        {...{
+          accessibilityLabel: rest.accessibilityLabel ?? accessibilityLabel,
+        }}
+        source={source}
+        style={[
+          styles.container,
+          style,
+          showBaseLineDebug && styles.debugBaseLine,
+        ]}
+        onLoadStart={() => {
+          error.current = false;
+          if (status !== 'loading' && loading) {
+            setStatus('loading');
+          }
+        }}
+        onLoad={() => {
+          error.current = false;
+        }}
+        onLoadEnd={() => {
+          let current: Status = 'success';
+          if (error.current) {
+            current = 'error';
+          }
+          setStatus(prevState =>
+            prevState !== current ? current : prevState,
+          );
+        }}
+        onError={() => {
+          error.current = true;
+        }}
+      >
+        {renderContent()}
+      </RNImage>
+    );
+  }
+
   return (
     <FastImage
       {...rest}

package/Layout/Screen.tsx

@@ -25,10 +25,7 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import {
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ApplicationContext, ScreenContext } from '../Context';
 import Navigation from '../Application/Navigation';
@@ -196,7 +193,7 @@ const Screen = forwardRef(
   ) => {
     const screenRef = useRef<View | ScrollView>(null);
     const { width: widthDevice } = useWindowDimensions();
-    const { theme } = useContext(ApplicationContext);
+    const { theme, navigator } = useContext(ApplicationContext);
     const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
@@ -235,7 +232,8 @@ const Screen = forwardRef(
     }, [customAnimatedValue, internalShared]);
 
     const currentTint = useRef<string | undefined>(undefined);
-    const isTab = navigation?.instance?.getState?.()?.type === 'tab';
+    
+    const isTab = !!screen?.bottomTab;
 
     let handleScroll;
     let Component: any = View;
@@ -650,10 +648,7 @@ const Screen = forwardRef(
             onScroll={handleScroll}
             onScrollEndDrag={handleScrollEnd}
             scrollEventThrottle={16}
-            style={[
-              Styles.flex,
-              !scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
-            ]}
+            style={[Styles.flex]}
             contentContainerStyle={[
               scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
               scrollViewProps?.contentContainerStyle,
@@ -669,9 +664,7 @@ const Screen = forwardRef(
               <FloatingButton
                 {...floatingButtonProps}
                 animatedValue={sharedValue}
-                bottom={
-                  Footer || isTab ? 12 : bottomInset + Spacing.S
-                }
+                bottom={Footer || isTab ? 12 : bottomInset + Spacing.S}
               />
             </View>
           )}

package/Text/utils.ts

@@ -1,6 +1,6 @@
 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;
@@ -8,12 +8,15 @@ 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 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 maxScaleRate = scaleRate ?? scaleSizeMaxRate;
+  const maxScaleRate = scaleRate ?? MAX_FONT_SCALE;
 
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;

package/package.json

@@ -1,35 +1,39 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.162.3-fontscale.1",
+    "version": "0.162.3-rn.86.2",
     "description": "React Native Component Kits",
-    "main": "index.ts",
-    "scripts": {},
     "keywords": [
         "@momo-kits/foundation"
     ],
+    "license": "MoMo",
+    "main": "index.ts",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "scripts": {},
     "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-navigation/bottom-tabs": "7.4.2",
         "@react-navigation/core": "7.12.1",
         "@react-navigation/elements": "2.5.2",
         "@react-navigation/native": "7.1.14",
         "@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-reanimated": "4.2.2",
-        "react-native-safe-area-context": "5.5.2",
         "@shopify/flash-list": "2.1.0",
-        "lottie-react-native": "7.2.4"
-    },
-    "peerDependencies": {
-        "react-native": "*"
+        "lottie-react-native": "7.3.6",
+        "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-native-gesture-handler": "2.31.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.5.3",
+        "react-native-safe-area-context": "5.7.0"
     },
     "devDependencies": {
-        "@types/color": "3.0.6"
-    },
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
+        "@types/color": "3.0.6",
+        "react-native-reanimated": "4.5.3",
+        "react-native-worklets": "0.11.3"
     },
-    "license": "MoMo"
+    "peerDependencies": {
+        "react-native": "*",
+        "react-native-reanimated": ">=4.5.0",
+        "react-native-worklets": ">=0.11.0"
+    }
 }