@momo-kits/foundation 0.158.1-beta.4 → 0.159.1-beta.2

package/Application/NavigationContainer.tsx

@@ -16,6 +16,7 @@ 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';
@@ -43,29 +44,31 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   },
 }) => {
   const context = useContext<any>(MiniAppContext);
-  const [currentContext, setCurrentContext] = useState({});
+  const [currentContext, setCurrentContext] = useState<any>({});
+
+  const mergedContext = {
+    ...context,
+    ...currentContext,
+    features: {
+      ...context?.features,
+      ...features,
+    },
+  };
 
   return (
     <SafeAreaProvider>
-      <MiniAppContext.Provider
-        value={{
-          ...context,
-          ...currentContext,
-          features: {
-            ...context?.features,
-            ...features,
-          },
-        }}
-      >
-        <Navigation
-          screen={screen}
-          theme={theme}
-          options={options}
-          maxApi={maxApi}
-          setCurrentContext={setCurrentContext}
-          initialParams={initialParams}
-          localize={localize}
-        />
+      <MiniAppContext.Provider value={mergedContext}>
+        <ScaleSizeProvider scaleSizeMaxRate={1.0}>
+          <Navigation
+            screen={screen}
+            theme={theme}
+            options={options}
+            maxApi={maxApi}
+            setCurrentContext={setCurrentContext}
+            initialParams={initialParams}
+            localize={localize}
+          />
+        </ScaleSizeProvider>
       </MiniAppContext.Provider>
     </SafeAreaProvider>
   );

package/Application/WidgetContainer.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useRef, useState } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Navigator from './Navigator';
+import ScaleSizeProvider from './ScaleSizeProvider';
 import { WidgetContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import Localize from './Localize';
@@ -67,15 +68,18 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
 
   navigator.current.setCurrentContext = setCurrentContext;
 
+  const mergedContext = {
+    ...context,
+    ...currentContext,
+  };
+
   return (
     <View style={{ height: height ?? '100%', minHeight:1 }}>
       <SafeAreaProvider>
-        <MiniAppContext.Provider
-          value={{
-            ...context,
-            ...currentContext,
-          }}
-        >
+        <MiniAppContext.Provider value={mergedContext}>
+          <ScaleSizeProvider
+            scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}
+          >
           <ApplicationContext.Provider
             value={{
               navigator: navigator.current,
@@ -153,6 +157,7 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
               </ReactNavigationContainer>
             </NavigationIndependentTree>
           </ApplicationContext.Provider>
+          </ScaleSizeProvider>
         </MiniAppContext.Provider>
       </SafeAreaProvider>
     </View>

package/Badge/styles.ts

@@ -1,6 +1,5 @@
 import {StyleSheet} from 'react-native';
 import {Colors, Radius, Spacing} from '../Consts';
-import {scaleSize} from '../Text';
 
 const DOT_SIZE = 16;
 
@@ -12,8 +11,8 @@ export default StyleSheet.create({
     borderRadius: Radius.M,
     justifyContent: 'center',
     alignItems: 'center',
-    height: scaleSize(16) - 2,
-    minWidth: scaleSize(16) - 2,
+    height: DOT_SIZE - 2,
+    minWidth: DOT_SIZE - 2,
     flexDirection: 'row',
     alignSelf: 'baseline',
   },
@@ -21,8 +20,8 @@ export default StyleSheet.create({
     borderRadius: Radius.M,
     justifyContent: 'center',
     alignItems: 'center',
-    height: scaleSize(16),
-    minWidth: scaleSize(16),
+    height: DOT_SIZE,
+    minWidth: DOT_SIZE,
     flexDirection: 'row',
     borderWidth: 1,
     borderColor: Colors.black_01,

package/Input/InputSearch.tsx

@@ -35,6 +35,7 @@ const TextTyping: FC<any> = ({
   timeDelayNextChar = 20,
 }) => {
   const textRef = useRef<TextInput>(null);
+  const scaledFontSize = useScaleSize(12);
 
   const currentIndex = useRef<number>(0);
   const currentCharIndex = useRef<number>(0);
@@ -107,7 +108,7 @@ const TextTyping: FC<any> = ({
 
   return (
     <TextInput
-      style={styles.inputStyle}
+      style={[styles.inputStyle, { fontSize: scaledFontSize }]}
       ref={textRef}
       editable={false}
       autoCorrect={false}

package/Input/styles.ts

@@ -1,13 +1,11 @@
 import { Platform, StyleSheet } from 'react-native';
 import { Colors, Radius, Spacing } from '../Consts';
-import { scaleSize } from '../Text';
 
 export default StyleSheet.create({
   //input style
   input: {
     flex: 1,
     paddingLeft: Spacing.M,
-    fontSize: scaleSize(14),
     height: '100%',
   },
   wrapper: {
@@ -76,7 +74,6 @@ export default StyleSheet.create({
     flex: 1,
     paddingRight: Spacing.XS,
     paddingVertical: Spacing.XS,
-    fontSize: scaleSize(14),
   },
   textAreaWrapper: {
     borderWidth: 1,
@@ -129,13 +126,11 @@ export default StyleSheet.create({
     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,
@@ -217,7 +212,7 @@ export default StyleSheet.create({
     borderRadius: Radius.XS,
     overflow: 'hidden',
   },
-  currency: { fontSize: scaleSize(20), fontWeight: 'bold' },
+  currency: { fontWeight: 'bold' },
   phoneNumberDivider: {
     width: 1,
     marginLeft: Spacing.M,

package/Layout/FloatingButton.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
+import { useScaleSize } from '../Text';
 
 export interface FloatingButtonProps {
   label?: string;
@@ -39,6 +40,8 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   bottom = 12,
 }: FloatingButtonProps) => {
   const { theme } = useContext(ApplicationContext);
+  const scaledFontSize = useScaleSize(16);
+  const scaledLineHeight = useScaleSize(22);
   const maxWidth = useRef(0);
   const minWidth = size === 'small' ? 36 : 48;
   const [opacityAnimated] = useState(new Animated.Value(0)); // Initial opacity set to 0
@@ -148,7 +151,15 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
         {showText && !!label && (
           <Animated.Text
             allowFontScaling={false}
-            style={[styles.label, { opacity: opacityAnimated, color: 'white' }]}
+            style={[
+              styles.label,
+              {
+                fontSize: scaledFontSize,
+                lineHeight: scaledLineHeight,
+                opacity: opacityAnimated,
+                color: 'white',
+              },
+            ]}
             numberOfLines={1}
           >
             {label}
@@ -172,8 +183,6 @@ const styles = StyleSheet.create({
   },
   label: {
     marginLeft: 8,
-    fontSize: 16,
-    lineHeight: 22,
     fontWeight: '700',
   },
 });

package/Text/utils.ts

@@ -8,13 +8,12 @@ const MAX_FONT_SCALE = 1.5;
 const MAX_DEVICE_SCALE = 5;
 
 const useScaleSize = (size: number, scaleRate?: number) => {
-  const scaleSizeContext = useContext<any>(ScaleSizeContext);
+  const { scaleSizeMaxRate = MAX_FONT_SCALE } = useContext(ScaleSizeContext);
   const fontScale = PixelRatio.getFontScale();
-  const windowSize = useWindowDimensions();
-  const deviceScale = windowSize.width / DEFAULT_SCREEN_SIZE;
+  const { width } = useWindowDimensions();
+  const deviceScale = width / DEFAULT_SCREEN_SIZE;
 
-  const maxScaleRate =
-    scaleRate || scaleSizeContext?.scaleSizeMaxRate || MAX_FONT_SCALE;
+  const maxScaleRate = scaleRate ?? scaleSizeMaxRate;
 
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;

package/package.json

@@ -1,35 +1,35 @@
 {
-  "name": "@momo-kits/foundation",
-  "version": "0.158.1-beta.4",
-  "description": "React Native Component Kits",
-  "main": "index.ts",
-  "scripts": {},
-  "keywords": [
-    "@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-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.1.0",
-    "react-native-safe-area-context": "5.5.2",
-    "@shopify/flash-list": "2.1.0",
-    "lottie-react-native": "7.2.4"
-  },
-  "peerDependencies": {
-    "react-native": "*"
-  },
-  "devDependencies": {
-    "@types/color": "3.0.6"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "license": "MoMo"
-}
+    "name": "@momo-kits/foundation",
+    "version": "0.159.1-beta.2",
+    "description": "React Native Component Kits",
+    "main": "index.ts",
+    "scripts": {},
+    "keywords": [
+        "@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-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.1.0",
+        "react-native-safe-area-context": "5.5.2",
+        "@shopify/flash-list": "2.1.0",
+        "lottie-react-native": "7.2.4"
+    },
+    "peerDependencies": {
+        "react-native": "*"
+    },
+    "devDependencies": {
+        "@types/color": "3.0.6"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "license": "MoMo"
+}