@momo-kits/foundation 0.153.2-beta.2 → 0.153.2-beta.3

package/Application/BottomTab/Badge.tsx

@@ -1,4 +1,4 @@
-import {useTheme} from '@react-navigation/native';
+import { useTheme } from '@react-navigation/native';
 import color from 'color';
 import * as React from 'react';
 import {
@@ -41,7 +41,7 @@ export function Badge({
   const [opacity] = React.useState(() => new Animated.Value(visible ? 1 : 0));
   const [rendered, setRendered] = React.useState(visible);
 
-  const {colors, fonts} = useTheme();
+  const { colors, fonts } = useTheme();
 
   React.useEffect(() => {
     if (!rendered) {
@@ -52,7 +52,7 @@ export function Badge({
       toValue: visible ? 1 : 0,
       duration: 150,
       useNativeDriver,
-    }).start(({finished}) => {
+    }).start(({ finished }) => {
       if (finished && !visible) {
         setRendered(false);
       }
@@ -70,7 +70,7 @@ export function Badge({
   }
 
   // @ts-expect-error: backgroundColor definitely exists
-  const {backgroundColor = colors.notification, ...restStyle} =
+  const { backgroundColor = colors.notification, ...restStyle } =
     StyleSheet.flatten(style) || {};
   const textColor = color(backgroundColor).isLight() ? 'black' : 'white';
 
@@ -91,6 +91,7 @@ export function Badge({
 
   return (
     <Animated.Text
+      allowFontScaling={false}
       numberOfLines={1}
       style={[
         {

package/Application/BottomTab/TabBarIcon.tsx

@@ -8,13 +8,13 @@ import {
   type ViewStyle,
 } from 'react-native';
 
-import { Badge } from './Badge';
 import { Colors } from '../../Consts';
+import { Badge, BadgeDot } from '../../Badge';
 
 type Props = {
   route: Route<string>;
   badge?: string | number;
-  badgeStyle?: StyleProp<TextStyle>;
+  badgeStyle?: StyleProp<TextStyle> | any;
   activeOpacity: number;
   inactiveOpacity: number;
   activeTintColor?: string;
@@ -43,11 +43,20 @@ export function TabBarIcon({
   activeTintColor,
   inactiveTintColor,
   renderIcon,
-  allowFontScaling,
   style,
 }: Props) {
   const iconSize = 25;
 
+  const renderBadge = () => {
+    if (badge == null) {
+      return;
+    }
+    if (badge === '') {
+      return <BadgeDot size={'small'} style={[styles.badge, badgeStyle]} />;
+    }
+    return <Badge style={[styles.badge, badgeStyle]} label={badge} />;
+  };
+
   // We render the icon twice at the same position on top of each other:
   // active and inactive one, so we can fade between them.
   return (
@@ -75,14 +84,7 @@ export function TabBarIcon({
           color: inactiveTintColor ?? Colors.black_04,
         })}
       </View>
-      <Badge
-        visible={badge != null}
-        size={badge === '' ? 12 : iconSize * 0.75}
-        allowFontScaling={allowFontScaling}
-        style={[styles.badge, badgeStyle]}
-      >
-        {badge}
-      </Badge>
+      {renderBadge()}
     </View>
   );
 }

package/Application/Components/HeaderRight.tsx

@@ -12,7 +12,7 @@ import { Colors, Spacing, Styles } from '../../Consts';
 import { PopupNotify } from '../../Popup';
 import { Tool, ToolGroup } from '../types';
 import { Icon } from '../../Icon';
-import { scaleSize, Text } from '../../Text';
+import { useScaleSize, Text } from '../../Text';
 
 const DID_SYNC_NEW_HOME = 'did_sync_new_home';
 
@@ -388,11 +388,6 @@ const styles = StyleSheet.create({
   headerLeft: {
     marginLeft: 12,
   },
-  title: {
-    fontSize: scaleSize(15),
-    lineHeight: scaleSize(22),
-    fontWeight: 'bold',
-  },
   badge: {
     position: 'absolute',
     top: -Spacing.S,

package/Application/Components/HeaderTitle.tsx

@@ -7,7 +7,7 @@ import {
   View,
 } from 'react-native';
 import { ApplicationContext, MiniAppContext } from '../../Context';
-import { exportFontFamily, scaleSize, Text } from '../../Text';
+import { exportFontFamily, useScaleSize, Text } from '../../Text';
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import {
   TitleJourneyProps,
@@ -31,12 +31,23 @@ const HeaderTitle: React.FC<any> = props => {
   );
 
   return (
-    <View pointerEvents={'none'} style={styles.headerTitleContainer}>
+    <View
+      pointerEvents={'none'}
+      style={{
+        justifyContent: 'center',
+        maxWidth: Dimensions.get('window').width - 172,
+      }}
+    >
       <Animated.Text
         {...props}
+        allowFontScaling={false}
         accessibilityLabel={'title_navigation_header'}
         style={[
-          styles.title,
+          {
+            fontSize: useScaleSize(15),
+            lineHeight: useScaleSize(22),
+            fontWeight: 'bold',
+          },
           {
             fontFamily: exportFontFamily('bold', 'action_xs_bold'),
             opacity,
@@ -83,7 +94,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
   isLoading,
 }) => {
   const { theme } = useContext(ApplicationContext);
-  const maxWidth = Dimensions.get('window').width - scaleSize(172);
+  const maxWidth = Dimensions.get('window').width - 172;
   const getShortName = (name: string) => {
     const words = name.split(' ');
     const lastTwoWords = words.slice(-2);
@@ -311,7 +322,10 @@ const TitleUser: React.FC<TitleUserProps> = ({
 
   return (
     <TouchableOpacity
-      style={styles.headerTitleContainer}
+      style={{
+        justifyContent: 'center',
+        maxWidth: maxWidth - (icons?.length ?? 0) * 16,
+      }}
       onPress={onPress}
       disabled={onPress === undefined}
     >
@@ -362,6 +376,7 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
   onPress,
   isLoading,
 }) => {
+  const maxWidth = Dimensions.get('window').width - 172;
   const renderShimmer = () => {
     return (
       <View style={Styles.flex}>
@@ -380,7 +395,11 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
   }
   return (
     <TouchableOpacity
-      style={[styles.headerTitleContainer, { alignItems: 'flex-start' }]}
+      style={{
+        justifyContent: 'center',
+        maxWidth: maxWidth,
+        alignItems: 'flex-start',
+      }}
       onPress={onPress}
     >
       {!!description && (
@@ -422,6 +441,7 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
   isLoading,
 }) => {
   const { width } = Dimensions.get('screen');
+  const maxWidth = Dimensions.get('window').width - 172;
   const startWidth = width * 0.25;
   const endWidth = width * 0.75 - 212;
   const renderShimmer = () => {
@@ -441,7 +461,13 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
     return renderShimmer();
   }
   return (
-    <TouchableOpacity style={styles.headerTitleContainer} onPress={onPress}>
+    <TouchableOpacity
+      style={{
+        justifyContent: 'center',
+        maxWidth: maxWidth,
+      }}
+      onPress={onPress}
+    >
       <View style={styles.rowJourney}>
         <View style={Styles.row}>
           <Text
@@ -501,11 +527,6 @@ const Verified: React.FC<any> = () => {
 };
 
 const styles = StyleSheet.create({
-  title: {
-    fontSize: scaleSize(15),
-    lineHeight: scaleSize(22),
-    fontWeight: 'bold',
-  },
   rowJourney: { flexDirection: 'row', width: '100%', alignItems: 'flex-start' },
   verifiedDot: {
     width: 4,
@@ -515,10 +536,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     alignSelf: 'center',
   },
-  headerTitleContainer: {
-    justifyContent: 'center',
-    maxWidth: Dimensions.get('window').width - scaleSize(172),
-  },
   circle: {
     width: 32,
     height: 32,

package/Badge/Badge.tsx

@@ -1,21 +1,46 @@
 import React, { FC, useContext } from 'react';
-import { View } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 
 import { useComponentId } from '../Application';
 import { ApplicationContext } from '../Context';
 import { BadgeProps } from './types';
-import styles from './styles';
-import { Colors } from '../Consts';
-import { Text } from '../Text';
+import { Colors, Radius, Spacing } from '../Consts';
+import { Text, useScaleSize } from '../Text';
 
 const Badge: FC<BadgeProps> = ({
-  label = 'Label',
+  label = '',
   style,
   backgroundColor,
   accessibilityLabel,
 }) => {
   const { theme } = useContext(ApplicationContext);
   const { componentId } = useComponentId('Badge', accessibilityLabel);
+  const scaledSize = useScaleSize(16);
+  
+  const styles = StyleSheet.create({
+    badge: {
+      paddingHorizontal: Spacing.XS,
+      borderRadius: Radius.M,
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: scaledSize - 2,
+      minWidth: scaledSize - 2,
+      flexDirection: 'row',
+      alignSelf: 'baseline',
+    },
+    badgeContainer: {
+      borderRadius: Radius.M,
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: scaledSize,
+      minWidth: scaledSize,
+      flexDirection: 'row',
+      borderWidth: 1,
+      borderColor: Colors.black_01,
+      backgroundColor: 'transparent',
+      alignSelf: 'baseline',
+    },
+  });
 
   const isValidatedColor = () => {
     const colorKeys = Object.keys(Colors);

package/Badge/BadgeRibbon.tsx

@@ -41,7 +41,10 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
         },
       ]}
     >
-      <View collapsable={false} style={{ transform: textTransform }}>
+      <View
+        collapsable={false}
+        style={{ transform: textTransform, marginVertical: -2 }}
+      >
         <Text
           style={styles.ribbonLabel}
           color={Colors.black_01}
@@ -62,7 +65,10 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
           { backgroundColor: theme.colors.warning.primary },
         ]}
       >
-        <View collapsable={false} style={{ transform: textTransform }}>
+        <View
+          collapsable={false}
+          style={{ transform: textTransform, marginVertical: -2 }}
+        >
           <Text
             style={styles.ribbonLabel}
             color={Colors.black_01}

package/Input/Input.tsx

@@ -14,7 +14,8 @@ import {
 } from 'react-native';
 import { useComponentId } from '../Application';
 import { Icon } from '../Icon';
-import { exportFontFamily } from '../Text';
+import { exportFontFamily, useScaleSize } from '../Text';
+import { Spacing } from '../Consts';
 import {
   ErrorView,
   FloatingView,
@@ -68,6 +69,7 @@ const Input = forwardRef(
     ref,
   ) => {
     const { theme } = useContext(ApplicationContext);
+    const scaledFontSize = useScaleSize(14);
     const [focused, setFocused] = useState(false);
     const haveValue = !!value || !!defaultValue;
     // TODO: CHECK THIS
@@ -176,7 +178,12 @@ const Input = forwardRef(
                 ...props.accessibilityState,
               }}
               style={[
-                styles.input,
+                {
+                  flex: 1,
+                  paddingLeft: Spacing.M,
+                  fontSize: scaledFontSize,
+                  height: '100%',
+                },
                 {
                   color: textColor,
                   fontFamily: exportFontFamily(fontWeight ?? 'regular'),

package/Input/InputMoney.tsx

@@ -17,6 +17,8 @@ import {
 import { useComponentId } from '../Application';
 import { ApplicationContext, ComponentContext } from '../Context';
 import { Icon } from '../Icon';
+import { useScaleSize } from '../Text';
+import { Spacing } from '../Consts';
 import {
   ErrorView,
   FloatingView,
@@ -60,6 +62,7 @@ const InputMoney = forwardRef(
     ref,
   ) => {
     const { theme } = useContext(ApplicationContext);
+    const scaledFontSize = useScaleSize(20);
     const [focused, setFocused] = useState(false);
     const [displayValue, setDisplayValue] = useState('');
     const [numericValue, setNumericValue] = useState('');
@@ -219,7 +222,14 @@ const InputMoney = forwardRef(
                 ...props.accessibilityState,
               }}
               style={[
-                styles.moneyInput,
+                {
+                  width: '100%',
+                  paddingLeft: Spacing.M,
+                  height: '100%',
+                  fontSize: scaledFontSize,
+                  paddingVertical: Spacing.S,
+                  fontWeight: 'bold',
+                },
                 {
                   color: textColor,
                 },

package/Input/InputOTP.tsx

@@ -16,7 +16,7 @@ import {
 } from 'react-native';
 import { useComponentId } from '../Application';
 import { Spacing, Styles } from '../Consts';
-import { scaleSize, Text } from '../Text';
+import { useScaleSize, Text } from '../Text';
 import { ErrorView, getBorderColor } from './common';
 import { CaretProps, InputOTPProps } from './index';
 import styles from './styles';
@@ -53,7 +53,7 @@ const OTPCaret: FC<CaretProps> = ({ index, length }) => {
     <View style={[Styles.rowCenter, spacingStyle]}>
       <Animated.View
         style={{
-          height: scaleSize(12),
+          height: useScaleSize(12),
           width: 1,
           backgroundColor: theme.colors.primary,
           opacity,

package/Input/InputPhoneNumber.tsx

@@ -17,7 +17,7 @@ import { useComponentId } from '../Application';
 import { ApplicationContext, ComponentContext } from '../Context';
 import { Colors, Spacing, Styles } from '../Consts';
 import { Icon } from '../Icon';
-import { scaleSize, Text } from '../Text';
+import { useScaleSize, Text } from '../Text';
 import {
   ErrorView,
   getBorderColor,
@@ -109,11 +109,11 @@ const InputPhoneNumber = forwardRef(
     let dividerHeight = 24;
     let typography: Typography;
     if (size === 'small') {
-      inputTextStyles = { fontSize: scaleSize(14), fontWeight: '600' };
+      inputTextStyles = { fontSize: useScaleSize(14), fontWeight: '600' };
       dividerHeight = 24;
       typography = 'header_s_semibold';
     } else {
-      inputTextStyles = { fontSize: scaleSize(18), fontWeight: '700' };
+      inputTextStyles = { fontSize: useScaleSize(18), fontWeight: '700' };
       dividerHeight = 32;
       typography = 'header_m_bold';
     }

package/Input/InputSearch.tsx

@@ -19,10 +19,10 @@ import {
 import { useComponentId } from '../Application';
 import { ApplicationContext, ComponentContext } from '../Context';
 import { Icon } from '../Icon';
-import { Text } from '../Text';
+import { Text, useScaleSize } from '../Text';
 import { InputRef, InputSearchProps } from './index';
 import styles from './styles';
-import { Styles } from '../Consts';
+import { Styles, Spacing } from '../Consts';
 import SystemTextInput from './SystemTextInput';
 
 const TextTyping: FC<any> = ({
@@ -138,6 +138,8 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   ref,
 ) => {
   const { theme } = useContext(ApplicationContext);
+  const scaledFontSize = useScaleSize(14);
+
   const [focused, setFocused] = useState(false);
   const [internalText, setInternalText] = useState(defaultValue || '');
   const currentValue = value !== undefined ? value : internalText;
@@ -196,7 +198,13 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
       return (
         <TouchableOpacity
           style={[
-            styles.searchInput,
+            {
+              height: 36,
+              marginLeft: Spacing.S,
+              flex: 1,
+              fontSize: scaledFontSize,
+              paddingVertical: Spacing.XS,
+            },
             {
               justifyContent: 'center',
             },
@@ -217,7 +225,13 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         allowFontScaling={false}
         ref={inputRef}
         style={[
-          styles.searchInput,
+          {
+            height: 36,
+            marginLeft: Spacing.S,
+            flex: 1,
+            fontSize: scaledFontSize,
+            paddingVertical: Spacing.XS,
+          },
           {
             color: theme.colors.text.default,
           },

package/Input/InputTextArea.tsx

@@ -15,9 +15,9 @@ import {
 } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
-import { Text } from '../Text';
+import { Text, useScaleSize } from '../Text';
+import { Spacing } from '../Consts';
 import {
-  DEFAULT_HEIGHT,
   ErrorView,
   FloatingView,
   getBorderColor,
@@ -61,6 +61,8 @@ const InputTextArea = forwardRef(
       props.accessibilityLabel,
     );
     const { theme } = useContext(ApplicationContext);
+    const DEFAULT_HEIGHT = useScaleSize(104);
+    const scaledFontSize = useScaleSize(14);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = useRef<TextInput | null>(null);
@@ -154,7 +156,13 @@ const InputTextArea = forwardRef(
                 textAlignVertical="top"
                 allowFontScaling={false}
                 style={[
-                  styles.textArea,
+                  {
+                    width: '100%',
+                    flex: 1,
+                    paddingRight: Spacing.XS,
+                    paddingVertical: Spacing.XS,
+                    fontSize: scaledFontSize,
+                  },
                   {
                     color: textColor,
                   },

package/Input/TextTyping.tsx

@@ -2,7 +2,7 @@
 import React, { FC, memo, useEffect, useRef } from 'react';
 import { Platform, StyleSheet, TextInput, TextStyle } from 'react-native';
 import { Colors } from '../Consts';
-import { scaleSize } from '../Text';
+import { useScaleSize } from '../Text';
 
 export interface TextTypingProps {
   data: string[];
@@ -18,6 +18,7 @@ const TextTyping: FC<TextTypingProps> = ({
   inputStyle = {},
 }) => {
   const textRef = useRef<TextInput>(null);
+  const scaledFontSize = useScaleSize(12);
 
   const currentIndex = useRef<number>(0);
   const currentCharIndex = useRef<number>(0);
@@ -90,7 +91,14 @@ const TextTyping: FC<TextTypingProps> = ({
 
   return (
     <TextInput
-      style={[styles.inputStyle, inputStyle]}
+      style={[{
+        color: Colors.black_12,
+        fontSize: scaledFontSize,
+        height: Platform.select({
+          android: 60,
+          ios: 36,
+        }),
+      }, inputStyle]}
       ref={textRef}
       editable={false}
       autoCorrect={false}
@@ -102,14 +110,3 @@ const TextTyping: FC<TextTypingProps> = ({
 };
 
 export default memo(TextTyping);
-
-const styles = StyleSheet.create({
-  inputStyle: {
-    color: Colors.black_12,
-    fontSize: scaleSize(12),
-    height: Platform.select({
-      android: 60,
-      ios: 36,
-    }),
-  },
-});

package/Input/common.tsx

@@ -9,7 +9,7 @@ import { ApplicationContext } from '../Context';
 import { Theme } from '../Application/types';
 import { Styles } from '../Consts';
 import { Icon } from '../Icon';
-import { scaleSize, Text } from '../Text';
+import { useScaleSize, Text } from '../Text';
 import styles from './styles';
 import { Loader } from '../Loader';
 import IconSources from '../Assets/icon.json';
@@ -33,7 +33,6 @@ type TrailingProps = {
   onPressIcon?: () => void;
 };
 
-export const DEFAULT_HEIGHT = scaleSize(104);
 export const MAX_LENGTH = 300;
 
 export const getBorderColor = (
@@ -142,6 +141,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
           {
             backgroundColor: theme.colors.background.surface,
             zIndex: 10,
+            top: -useScaleSize(10),
           },
           style,
         ]}

package/Input/styles.ts

@@ -1,15 +1,8 @@
-import { Platform, StyleSheet } from 'react-native';
-import { Colors, Radius, Spacing } from '../Consts';
-import { scaleSize } from '../Text';
+import { StyleSheet } from 'react-native';
+import { Radius, Spacing } from '../Consts';
 
 export default StyleSheet.create({
   //input style
-  input: {
-    flex: 1,
-    paddingLeft: Spacing.M,
-    fontSize: scaleSize(14),
-    height: '100%',
-  },
   wrapper: {
     width: '100%',
   },
@@ -71,13 +64,6 @@ export default StyleSheet.create({
   textAreaView: {
     flex: 1,
   },
-  textArea: {
-    width: '100%',
-    flex: 1,
-    paddingRight: Spacing.XS,
-    paddingVertical: Spacing.XS,
-    fontSize: scaleSize(14),
-  },
   textAreaWrapper: {
     borderWidth: 1,
     borderRadius: Radius.S,
@@ -105,13 +91,6 @@ export default StyleSheet.create({
     alignItems: 'center',
     flex: 1,
   },
-  searchInput: {
-    height: 36,
-    marginLeft: Spacing.S,
-    flex: 1,
-    fontSize: scaleSize(14),
-    paddingVertical: Spacing.XS,
-  },
   searchInputView: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -126,22 +105,6 @@ export default StyleSheet.create({
     height: 20,
     marginLeft: Spacing.XS,
   },
-  moneyInput: {
-    width: '100%',
-    paddingLeft: Spacing.M,
-    height: '100%',
-    fontSize: scaleSize(20),
-    paddingVertical: Spacing.S,
-    fontWeight: 'bold',
-  },
-  inputStyle: {
-    color: Colors.black_12,
-    fontSize: scaleSize(12),
-    height: Platform.select({
-      android: 60,
-      ios: 36,
-    }),
-  },
   //OTP
   otpWrapper: {
     width: '100%',
@@ -205,7 +168,7 @@ export default StyleSheet.create({
   },
   textViewDropDown: {
     flex: 1,
-    marginVertical: Spacing.M,
+    marginVertical: Spacing.S,
     marginRight: Spacing.S,
     justifyContent: 'center',
   },
@@ -217,9 +180,9 @@ export default StyleSheet.create({
     borderRadius: Radius.XS,
     overflow: 'hidden',
   },
-  currency: { fontSize: scaleSize(20), fontWeight: 'bold' },
   phoneNumberDivider: {
     width: 1,
-    marginLeft: Spacing.M
+    marginLeft: Spacing.M,
+    marginRight: Spacing.M,
   },
 });

package/Layout/FloatingButton.tsx

@@ -147,6 +147,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
         />
         {showText && !!label && (
           <Animated.Text
+            allowFontScaling={false}
             style={[styles.label, { opacity: opacityAnimated, color: 'white' }]}
             numberOfLines={1}
           >

package/Popup/PopupNotify.tsx

@@ -11,7 +11,7 @@ import { Button } from '../Button';
 import { Radius, Spacing, Styles } from '../Consts';
 import { Icon } from '../Icon';
 import { Image } from '../Image';
-import { scaleSize, Text } from '../Text';
+import { useScaleSize, Text } from '../Text';
 import { PopupNotifyProps } from './types';
 import { runOnJS } from 'react-native-reanimated';
 
@@ -31,13 +31,14 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const { theme, navigator, translate } = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
   const { width: widthDevice } = Dimensions.get('window');
+  const scaledMaxHeight = useScaleSize(172);
 
   const closeAction = useRef('touch_outside');
   let descriptionStyle = {};
   let Description: any = View;
   if (scrollContent) {
     Description = ScrollView;
-    descriptionStyle = { maxHeight: scaleSize(172) };
+    descriptionStyle = { maxHeight: scaledMaxHeight };
   }
   /**
    * tracking

package/Tag/index.tsx

@@ -1,10 +1,9 @@
 import React, {FC} from 'react';
-import {View} from 'react-native';
+import {View, StyleSheet} from 'react-native';
 import {TagProps} from './types';
-import styles from './styles';
-import {Colors} from '../Consts';
+import {Colors, Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
-import {Text} from '../Text';
+import {Text, useScaleSize} from '../Text';
 import {useComponentId} from '../Application';
 
 const backgroundColor = {
@@ -34,6 +33,31 @@ const Tag: FC<TagProps> = ({
   customColor,
   accessibilityLabel,
 }) => {
+  const scaledHeight24 = useScaleSize(24);
+  const scaledHeight18 = useScaleSize(18);
+  
+  const styles = StyleSheet.create({
+    container: {
+      paddingHorizontal: Spacing.S,
+      borderRadius: Radius.S,
+      flexDirection: 'row',
+      height: scaledHeight24,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    mediumContainer: {
+      paddingHorizontal: Spacing.S,
+      borderRadius: Radius.S,
+      height: scaledHeight18,
+      alignItems: 'center',
+      flexDirection: 'row',
+      justifyContent: 'center',
+    },
+    icon: {
+      marginRight: Spacing.XS,
+    },
+  });
+  
   let labelColor = textColor[color];
   let tagColor = backgroundColor[color];
   let sizeStyle = styles.mediumContainer;

package/Text/index.tsx

@@ -3,8 +3,9 @@ import { Text as RNText, TextProps as RNTextProps, View } from 'react-native';
 import styles from './styles';
 import { Typography, TypographyWeight } from './types';
 import { ApplicationContext, SkeletonContext } from '../Context';
-import { scaleSize } from './utils';
+import { scaleSize, useScaleSize } from './utils';
 import { Skeleton } from '../Skeleton';
+import { Colors } from '../Consts';
 
 const SFProText: TypographyWeight = {
   100: 'Thin',
@@ -164,6 +165,8 @@ const Text: React.FC<TextProps> = ({
         textStyle,
         {
           color: color ?? theme.colors.text.default,
+          borderWidth: 1,
+          borderColor: Colors.green_06,
         },
       ]}
     >
@@ -201,4 +204,4 @@ const exportFontFamily = (
   return newFontFamily;
 };
 
-export { Text, scaleSize, exportFontFamily };
+export { Text, scaleSize, useScaleSize, exportFontFamily };

package/Text/utils.ts

@@ -1,4 +1,4 @@
-import { Dimensions, PixelRatio } from 'react-native';
+import { Dimensions, PixelRatio, useWindowDimensions } from 'react-native';
 import { useContext } from 'react';
 import { MiniAppContext, ScaleSizeContext } from '../Context';
 
@@ -11,7 +11,9 @@ const useScaleSize = (size: number) => {
   const context = useContext<any>(MiniAppContext);
   const scaleSizeContext = useContext<any>(ScaleSizeContext);
   const fontScale = PixelRatio.getFontScale();
-  const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
+  const windowSize = useWindowDimensions();
+  const deviceScale = windowSize.width / DEFAULT_SCREEN_SIZE;
+
   const maxScaleRate =
     scaleSizeContext?.scaleSizeMaxRate ||
     context?.features?.scaleSizeMaxRate ||
@@ -23,7 +25,7 @@ const useScaleSize = (size: number) => {
   if (deviceScale > 1) {
     fontSizeDeviceScale = Math.min(
       fontSizeDeviceScale * deviceScale,
-      fontSizeDeviceScale + maxScaleRate,
+      fontSizeDeviceScale + MAX_DEVICE_SCALE,
     );
   }
 

package/Title/index.tsx

@@ -6,7 +6,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import { Icon } from '../Icon';
-import { scaleSize, Text } from '../Text';
+import { useScaleSize, Text } from '../Text';
 import { useComponentId } from '../Application';
 import { ApplicationContext } from '../Context';
 import { Badge } from '../Badge';
@@ -37,9 +37,38 @@ const Title: FC<TitleProps> = ({
   const { theme } = useContext(ApplicationContext);
   const [badgeWidth, setBadgeWidth] = useState(0);
   const [contentWidth, setContentWidth] = useState(0);
+  
+  // Dynamic styles using useScaleSize hook
+  const dynamicStyles = {
+    card_small: {
+      fontSize: useScaleSize(14),
+      lineHeight: useScaleSize(20),
+    },
+    card_medium: {
+      fontSize: useScaleSize(16),
+      lineHeight: useScaleSize(22),
+    },
+    card_large: {
+      fontSize: useScaleSize(18),
+      lineHeight: useScaleSize(26),
+    },
+    section_medium: {
+      fontSize: useScaleSize(20),
+      lineHeight: useScaleSize(28),
+    },
+    section_small: {
+      fontSize: useScaleSize(16),
+      lineHeight: useScaleSize(22),
+    },
+    section_large: {
+      fontSize: useScaleSize(24),
+      lineHeight: useScaleSize(34),
+    },
+  };
+  
   const styleSheet: {
     [key: string]: any;
-  } = styles;
+  } = { ...styles, ...dynamicStyles };
   const typography = `${type}_${size}`;
   const isSection = type === 'section';
   const numberOfLines = showTrailingAction || !!badgeLabel ? 1 : 2;
@@ -90,6 +119,7 @@ const Title: FC<TitleProps> = ({
           style={[styles.iconLeftView, flexStyle]}
         >
           <RNText
+            allowFontScaling={false}
             accessibilityLabel={componentId + '|title-text'}
             numberOfLines={numberOfLines}
             style={[
@@ -158,7 +188,7 @@ const Title: FC<TitleProps> = ({
           >
             <Icon
               source={'arrow_chevron_right_small'}
-              size={scaleSize(18)}
+              size={useScaleSize(18)}
               color={theme.colors.text.default}
             />
           </View>
@@ -192,7 +222,7 @@ const Title: FC<TitleProps> = ({
           >
             <Icon
               source={'arrow_chevron_right_small'}
-              size={scaleSize(22)}
+              size={useScaleSize(22)}
               color={theme.colors.primary}
             />
           </TouchableOpacity>

package/Title/styles.ts

@@ -1,32 +1,7 @@
 import {StyleSheet} from 'react-native';
-import {scaleSize} from '../Text';
 import {Colors, Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
-  card_small: {
-    fontSize: scaleSize(14),
-    lineHeight: scaleSize(20),
-  },
-  card_medium: {
-    fontSize: scaleSize(16),
-    lineHeight: scaleSize(22),
-  },
-  card_large: {
-    fontSize: scaleSize(18),
-    lineHeight: scaleSize(26),
-  },
-  section_medium: {
-    fontSize: scaleSize(20),
-    lineHeight: scaleSize(28),
-  },
-  section_small: {
-    fontSize: scaleSize(16),
-    lineHeight: scaleSize(22),
-  },
-  section_large: {
-    fontSize: scaleSize(24),
-    lineHeight: scaleSize(34),
-  },
   actionIcon: {
     borderRadius: Radius.M,
     alignItems: 'center',

package/package.json

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