@momo-kits/foundation 0.165.1-sp.4 → 0.165.2-beta.1

package/Application/BottomTab/index.tsx

@@ -233,18 +233,17 @@ const BottomTab: React.FC<BottomTabProps> = ({
     });
   }, [itemWidth, indicatorAnimated]);
 
-  // TEMP: commented out to test whether the blur reset is needed on a real host.
-  // Without it, pushing a screen from a tab other than the first leaves the flag true, so that
-  // pushed screen gets the host floating-arrow instead of its own card swipe-back.
-  // useFocusEffect(
-  //   React.useCallback(() => {
-  //     NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(
-  //       activeIndex.current !== 0,
-  //     );
-  //     return () =>
-  //       NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(false);
-  //   }, []),
-  // );
+  // Focus, not mount: pushing a screen from a tab leaves BottomTab mounted but blurred, and
+  // onFocus only fires on tab changes.
+  useFocusEffect(
+    React.useCallback(() => {
+      NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(
+        activeIndex.current !== 0,
+      );
+      return () =>
+        NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(false);
+    }, []),
+  );
 
   const onFocus = (e: any) => {
     activeIndex.current = tabs.findIndex(i => e.target.includes(i.name));

package/Application/Components/HeaderAnimated.tsx

@@ -10,10 +10,20 @@ import { Image } from '../../Image';
 import { Colors } from '../../Consts';
 import { useNormalizedSharedValue } from '../utils';
 
+const ASPECT_RATIOS: Record<
+  NonNullable<HeaderAnimatedProps['aspectRatio']>,
+  number
+> = {
+  '16/9': 16 / 9,
+  '3/2': 3 / 2,
+  '1/1': 1 / 1,
+};
+
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
   useScale = true,
+  aspectRatio = '16/9',
   children,
 }) => {
   const sharedValue = useNormalizedSharedValue(animatedValue);
@@ -40,7 +50,13 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   });
 
   return (
-    <Animated.View style={[styles.container, animatedStyle]}>
+    <Animated.View
+      style={[
+        styles.container,
+        { aspectRatio: ASPECT_RATIOS[aspectRatio] },
+        animatedStyle,
+      ]}
+    >
       {children ?? (
         <Image
           source={{
@@ -54,7 +70,7 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
 };
 
 const styles = StyleSheet.create({
-  container: { width: '100%', aspectRatio: 16 / 9 },
+  container: { width: '100%' },
   verifiedDot: {
     width: 4,
     height: 4,

package/Application/Components/HeaderLeft.tsx

@@ -1,5 +1,5 @@
 import { BackHandler, StyleSheet, View } from 'react-native';
-import { HeaderBackProps } from '../types';
+import type { HeaderBackProps } from '../types';
 import React, { useCallback, useContext, useEffect } from 'react';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { PopupNotify } from '../../Popup';

package/Application/Components/HeaderTitle.tsx

@@ -1,10 +1,5 @@
 import React, { useContext } from 'react';
-import {
-  Dimensions,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -21,10 +16,7 @@ import {
 import { Image } from '../../Image';
 import { Icon } from '../../Icon';
 import { Skeleton } from '../../Skeleton';
-import {
-  AnimatedCompatValue,
-  useNormalizedSharedValue,
-} from '../utils';
+import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
 
 type HeaderTitleInterpolate = {
   inputRange: number[];
@@ -41,7 +33,9 @@ type HeaderTitleExtraProps = {
 /**
  * default header title used for nav
  */
-const HeaderTitle: React.FC<HeaderTitleExtraProps & { [key: string]: any }> = props => {
+const HeaderTitle: React.FC<
+  HeaderTitleExtraProps & { [key: string]: any }
+> = props => {
   const context = useContext<any>(MiniAppContext);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -86,10 +80,13 @@ const HeaderTitle: React.FC<HeaderTitleExtraProps & { [key: string]: any }> = pr
           {
             fontSize: useScaleSize(15),
             lineHeight: useScaleSize(22),
-            fontWeight: 'bold',
           },
           {
-            fontFamily: exportFontFamily('bold', 'action_xs_bold'),
+            fontFamily: exportFontFamily(
+              'bold',
+              'action_xs_bold',
+              'MoMoTrustDisplay',
+            ),
             color: props.tintColor,
           },
           animatedStyle,
@@ -381,6 +378,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
           <View style={Styles.row}>
             <Text
               typography="action_xs_bold"
+              fontFamily='MoMoTrustDisplay'
               color={tintColor}
               numberOfLines={1}
             >
@@ -450,7 +448,9 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
         </Text>
       )}
       <View style={Styles.row}>
-        <Text typography="action_xs_bold" color={tintColor} numberOfLines={1}>
+        <Text typography="action_xs_bold" 
+          fontFamily='MoMoTrustDisplay'
+         color={tintColor} numberOfLines={1}>
           {location}
         </Text>
         <Icon
@@ -512,6 +512,8 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
             style={{ maxWidth: startWidth }}
             color={tintColor}
             numberOfLines={1}
+          fontFamily='MoMoTrustDisplay'
+
           >
             {start}
           </Text>
@@ -527,6 +529,8 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
               typography="action_xs_bold"
               color={tintColor}
               numberOfLines={1}
+          fontFamily='MoMoTrustDisplay'
+
             >
               {end}
             </Text>

package/Application/NavigationContainer.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import {
+  SafeAreaInsetsContext,
   SafeAreaProvider,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
@@ -19,12 +20,14 @@ import Navigator from './Navigator';
 import { getModalOptions, getStackOptions, useNativeCanGoBack } from './utils';
 import { NavigationContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
+import { useDefaultRegularFontFamily } from '../Consts/designSystemFont';
 import Localize from './Localize';
 import { Colors, defaultTheme } from '../Consts';
 import { HeaderLeft } from './Components/HeaderLeft';
 import { HeaderRight } from './Components/HeaderRight';
 import { HeaderTitle } from './Components/HeaderTitle';
 import { HeaderBackground } from './Components/HeaderBackground';
+import { type EdgeInsets } from 'react-native-safe-area-context';
 
 const Stack = createStackNavigator();
 
@@ -61,8 +64,15 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     },
   };
 
+  const parentInsets = useContext(SafeAreaInsetsContext);
+
   return (
-    <SafeAreaProvider>
+    <SafeAreaProvider
+      initialMetrics={{
+        insets: parentInsets as EdgeInsets,
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+      }}
+    >
       <MiniAppContext.Provider value={mergedContext}>
         <Navigation
           screen={screen}
@@ -93,8 +103,8 @@ const Navigation: React.FC<any> = ({
   const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
   const insets = useSafeAreaInsets();
+  const defaultRegularFontFamily = useDefaultRegularFontFamily();
   const syncCanGoBack = useNativeCanGoBack();
-
   let headerBackground = context?.designSystemConfig?.config?.headerBar;
   let headerGradient = theme.colors?.gradient;
 
@@ -173,19 +183,19 @@ const Navigation: React.FC<any> = ({
             },
             fonts: {
               regular: {
-                fontFamily: 'SFProText',
+                fontFamily: defaultRegularFontFamily,
                 fontWeight: '400',
               },
               medium: {
-                fontFamily: 'SFProText',
+                fontFamily: defaultRegularFontFamily,
                 fontWeight: '400',
               },
               bold: {
-                fontFamily: 'SFProText',
+                fontFamily: defaultRegularFontFamily,
                 fontWeight: '400',
               },
               heavy: {
-                fontFamily: 'SFProText',
+                fontFamily: defaultRegularFontFamily,
                 fontWeight: '400',
               },
             },

package/Application/WidgetContainer.tsx

@@ -3,6 +3,7 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Navigator from './Navigator';
 import { WidgetContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
+import { useDefaultRegularFontFamily } from '../Consts/designSystemFont';
 import Localize from './Localize';
 import { defaultTheme } from '../Consts';
 import {
@@ -42,6 +43,7 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady, true));
   const [currentContext, setCurrentContext] = useState({});
+  const defaultRegularFontFamily = useDefaultRegularFontFamily();
 
   useEffect(() => {
     const sub = maxApi?.observer?.('font_scale_config', (data: any) => {
@@ -114,19 +116,19 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
                   },
                   fonts: {
                     regular: {
-                      fontFamily: 'SFProText',
+                      fontFamily: defaultRegularFontFamily,
                       fontWeight: '400',
                     },
                     medium: {
-                      fontFamily: 'SFProText',
+                      fontFamily: defaultRegularFontFamily,
                       fontWeight: '400',
                     },
                     bold: {
-                      fontFamily: 'SFProText',
+                      fontFamily: defaultRegularFontFamily,
                       fontWeight: '400',
                     },
                     heavy: {
-                      fontFamily: 'SFProText',
+                      fontFamily: defaultRegularFontFamily,
                       fontWeight: '400',
                     },
                   },

package/Application/types.ts

@@ -229,6 +229,8 @@ export type HeaderTitleProps = {
   data: TitleUserProps | TitleLocationProps | TitleJourneyProps;
 };
 
+export type HeaderType = 'default' | 'extended' | 'none';
+
 export interface NavigationOptions
   extends Omit<StackNavigationOptions, 'headerRight' | 'headerTitle'> {
   preventBack?: PopupNotifyProps;
@@ -302,6 +304,7 @@ export interface HeaderAnimatedProps extends ViewProps {
   animatedValue: Animated.Value | SharedValue<number>;
   image: string;
   useScale?: boolean;
+  aspectRatio?: '16/9' | '3/2' | '1/1';
 }
 
 export type BottomTabItemProps = {

package/Button/index.tsx

@@ -1,5 +1,6 @@
 import React, { FC, useContext, useRef } from 'react';
 import {
+  Platform,
   StyleSheet,
   TouchableOpacity,
   TouchableOpacityProps,
@@ -283,6 +284,17 @@ const Button: FC<ButtonProps> = ({
             { keypath: 'base pink 2.Ellipse 1.Stroke 1', color: textColor },
           ]}
           style={[style, { borderRadius: Spacing.M }]}
+          webStyle={
+            Platform.OS === 'web'
+              ? {
+                  width: iconSize,
+                  height: iconSize,
+                  marginRight: isLeft ? space : 0,
+                  marginLeft: isLeft ? 0 : space,
+                  borderRadius: Spacing.M,
+                }
+              : undefined
+          }
         />
       );
     }

package/Consts/designSystemFont.ts

@@ -0,0 +1,38 @@
+import { useContext } from 'react';
+import { MiniAppContext } from '../Context';
+
+export const NEW_DEFAULT_FONT_FAMILY = 'MomoTrustSans';
+export const LEGACY_DEFAULT_FONT_FAMILY = 'SFProText';
+
+/**
+ * Font thuoc bo design system moi. Ngoai whitelist thi ha het ve font cu:
+ * MoMoTrustDisplay chi duoc dung tu commit header title 5bfde6251 (DS-791),
+ * truoc do header lay font theo theme.
+ */
+const NEW_FONT_FAMILIES = [NEW_DEFAULT_FONT_FAMILY, 'MoMoTrustDisplay'];
+
+/**
+ * Cờ whitelist design system, host đẩy xuống qua `decorateProps`
+ * (`designSystemConfig.isWhiteListDesignSystem`). Ngoài whitelist thì kit giữ
+ * nguyên font cũ.
+ */
+export const useIsDesignSystemWhiteList = (): boolean => {
+  const context = useContext<any>(MiniAppContext);
+  return context?.designSystemConfig?.isWhiteListDesignSystem === true;
+};
+
+/**
+ * Hạ font mặc định mới về font cũ khi user không nằm trong whitelist.
+ * Font do caller chỉ định tường minh (MoMoSignature, AlegreyaSans...) giữ nguyên.
+ */
+export const useResolvedFontFamily = (font: string): string => {
+  const isWhiteList = useIsDesignSystemWhiteList();
+  if (NEW_FONT_FAMILIES.includes(font) && !isWhiteList) {
+    return LEGACY_DEFAULT_FONT_FAMILY;
+  }
+  return font;
+};
+
+/** Tên file font Regular tương ứng với nhánh whitelist đang áp dụng. */
+export const useDefaultRegularFontFamily = (): string =>
+  `${useResolvedFontFamily(NEW_DEFAULT_FONT_FAMILY)}-Regular`;

package/Consts/index.ts

@@ -2,3 +2,4 @@ export * from './colors+spacing+radius';
 export * from './theme';
 export * from './styles';
 export const GRIDVIEW = false;
+export * from './designSystemFont';

package/Consts/theme.ts

@@ -1,4 +1,4 @@
-import {Context, Theme} from '../Application/types';
+import type {Context, Theme} from '../Application/types';
 import {Colors} from './colors+spacing+radius';
 
 const defaultTheme: Theme = {
@@ -51,7 +51,7 @@ const defaultTheme: Theme = {
       container: Colors.blue_08,
     },
   },
-  font: 'SFProText',
+  font: 'MomoTrustSans',
   assets: {},
 };
 
@@ -105,7 +105,7 @@ const defaultDarkTheme: Theme = {
       container: Colors.blue_08,
     },
   },
-  font: 'SFProText',
+  font: 'MomoTrustSans',
   assets: {},
 };
 

package/Input/InputMoney.tsx

@@ -21,7 +21,7 @@ import {
   MiniAppContext,
 } from '../Context';
 import { Icon } from '../Icon';
-import { useScaleSize } from '../Text';
+import { useScaleSize, exportFontFamily } from '../Text';
 import { Spacing } from '../Consts';
 import {
   ErrorView,
@@ -69,6 +69,7 @@ const InputMoney = forwardRef(
     const context = useContext<any>(MiniAppContext);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
     const scaledFontSize = useScaleSize(20);
+    const inputFontFamily = exportFontFamily('bold');
     const [focused, setFocused] = useState(false);
     const [displayValue, setDisplayValue] = useState('');
     const [numericValue, setNumericValue] = useState('');
@@ -236,7 +237,7 @@ const InputMoney = forwardRef(
                   height: '100%',
                   fontSize: scaledFontSize,
                   paddingVertical: Spacing.S,
-                  fontWeight: 'bold',
+                  fontFamily: inputFontFamily,
                 },
                 {
                   color: textColor,

package/Input/InputPhoneNumber.tsx

@@ -21,7 +21,7 @@ import {
 } from '../Context';
 import { Colors, Spacing, Styles } from '../Consts';
 import { Icon } from '../Icon';
-import { useScaleSize, Text } from '../Text';
+import { useScaleSize, Text, exportFontFamily } from '../Text';
 import {
   ErrorView,
   getBorderColor,
@@ -128,13 +128,21 @@ const InputPhoneNumber = forwardRef(
     let dividerHeight = 24;
     let size14 = useScaleSize(14);
     let size18 = useScaleSize(18);
+    const semiboldFontFamily = exportFontFamily('semibold');
+    const boldFontFamily = exportFontFamily('bold');
     let typography: Typography;
     if (size === 'small') {
-      inputTextStyles = { fontSize: size14, fontWeight: '600' };
+      inputTextStyles = {
+        fontSize: size14,
+        fontFamily: semiboldFontFamily,
+      };
       dividerHeight = 24;
       typography = 'header_s_semibold';
     } else {
-      inputTextStyles = { fontSize: size18, fontWeight: '700' };
+      inputTextStyles = {
+        fontSize: size18,
+        fontFamily: boldFontFamily,
+      };
       dividerHeight = 32;
       typography = 'header_m_bold';
     }

package/Input/InputSearch.tsx

@@ -23,7 +23,7 @@ import {
   MiniAppContext,
 } from '../Context';
 import { Icon } from '../Icon';
-import { Text, useScaleSize } from '../Text';
+import { Text, useScaleSize, exportFontFamily } from '../Text';
 import { InputRef, InputSearchProps } from './index';
 import styles from './styles';
 import { Styles } from '../Consts';
@@ -36,6 +36,7 @@ const TextTyping: FC<any> = ({
 }) => {
   const textRef = useRef<TextInput>(null);
   const scaledFontSize = useScaleSize(12);
+  const typingFontFamily = exportFontFamily('regular');
 
   const currentIndex = useRef<number>(0);
   const currentCharIndex = useRef<number>(0);
@@ -108,7 +109,10 @@ const TextTyping: FC<any> = ({
 
   return (
     <TextInput
-      style={[styles.inputStyle, { fontSize: scaledFontSize }]}
+      style={[
+        styles.inputStyle,
+        { fontSize: scaledFontSize, fontFamily: typingFontFamily },
+      ]}
       ref={textRef}
       editable={false}
       autoCorrect={false}
@@ -145,6 +149,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const scaledFontSize = useScaleSize(14);
+  const searchFontFamily = exportFontFamily('regular');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -231,6 +236,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
           {
             fontSize: scaledFontSize,
             color: theme.colors.text.default,
+            fontFamily: searchFontFamily,
           },
         ]}
         value={value}

package/Input/InputTextArea.tsx

@@ -15,7 +15,7 @@ import {
 } from 'react-native';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Icon } from '../Icon';
-import { Text, useScaleSize } from '../Text';
+import { Text, useScaleSize, exportFontFamily } from '../Text';
 import { Spacing } from '../Consts';
 import { ErrorView, FloatingView, getBorderColor, MAX_LENGTH } from './common';
 import { InputTextAreaProps } from './index';
@@ -59,6 +59,7 @@ const InputTextArea = forwardRef(
 
     const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
     const scaledFontSize = useScaleSize(14);
+    const inputFontFamily = exportFontFamily('regular');
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = useRef<TextInput | null>(null);
@@ -164,6 +165,7 @@ const InputTextArea = forwardRef(
                     paddingRight: Spacing.XS,
                     paddingVertical: Spacing.XS,
                     fontSize: scaledFontSize,
+                    fontFamily: inputFontFamily,
                   },
                   {
                     color: textColor,

package/Input/TextTyping.tsx

@@ -2,7 +2,7 @@
 import React, { FC, memo, useEffect, useRef } from 'react';
 import { Platform, TextInput, TextStyle } from 'react-native';
 import { Colors } from '../Consts';
-import { useScaleSize } from '../Text';
+import { useScaleSize, exportFontFamily } from '../Text';
 
 export interface TextTypingProps {
   data: string[];
@@ -19,6 +19,7 @@ const TextTyping: FC<TextTypingProps> = ({
 }) => {
   const textRef = useRef<TextInput>(null);
   const scaledFontSize = useScaleSize(12);
+  const inputFontFamily = exportFontFamily('regular');
 
   const currentIndex = useRef<number>(0);
   const currentCharIndex = useRef<number>(0);
@@ -95,6 +96,7 @@ const TextTyping: FC<TextTypingProps> = ({
         {
           color: Colors.black_12,
           fontSize: scaledFontSize,
+          fontFamily: inputFontFamily,
           height: Platform.select({
             android: 60,
             ios: 36,

package/Layout/FloatingButton.tsx

@@ -14,7 +14,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
-import { useScaleSize } from '../Text';
+import { useScaleSize, exportFontFamily } from '../Text';
 import {
   AnimatedCompatValue,
   useNormalizedSharedValue,
@@ -48,6 +48,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const sharedValue = useNormalizedSharedValue(animatedValue);
   const scaledFontSize = useScaleSize(16);
   const scaledLineHeight = useScaleSize(22);
+  const labelFontFamily = exportFontFamily('bold');
   const maxWidth = useSharedValue(0);
   const minWidth = size === 'small' ? 36 : 48;
   const opacityAnimated = useSharedValue(0);
@@ -63,7 +64,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
 
   useAnimatedReaction(
     () => sharedValue.value,
-    (value) => {
+    value => {
       'worklet';
       if (!label || !enabled) return;
       if (value !== lastOffset.value && value > 0) {
@@ -76,7 +77,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
             widthAnimated.value = withTiming(
               minWidth,
               { duration: 100 },
-              (finished) => {
+              finished => {
                 if (finished) runOnJS(setShowText)(false);
               },
             );
@@ -85,7 +86,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
             widthAnimated.value = withTiming(
               maxWidth.value,
               { duration: 100 },
-              (finished) => {
+              finished => {
                 if (finished) runOnJS(setShowText)(true);
               },
             );
@@ -162,6 +163,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
                 fontSize: scaledFontSize,
                 lineHeight: scaledLineHeight,
                 color: 'white',
+                fontFamily: labelFontFamily,
               },
               labelStyle,
             ]}
@@ -188,6 +190,5 @@ const styles = StyleSheet.create({
   },
   label: {
     marginLeft: 8,
-    fontWeight: '700',
   },
 });

package/Layout/Screen.tsx

@@ -26,7 +26,10 @@ import {
   ViewProps,
 } from 'react-native';
 import { useSharedValue, withTiming } from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 import { ApplicationContext, ScreenContext } from '../Context';
 import Navigation from '../Application/Navigation';
 import {
@@ -96,6 +99,14 @@ export interface ScreenProps extends ViewProps {
    */
   footerComponent?: ReactNode;
 
+  /**
+   * Optional. If `true`, the footer is inset by the standard horizontal margin
+   * (12pt each side). Set `false` for a footer that should span the full width —
+   * e.g. one that already carries its own horizontal padding.
+   * Defaults to `true`, on every platform.
+   */
+  marginFooter?: boolean;
+
   /**
    * Optional. Background color of the screen.
    */
@@ -104,7 +115,7 @@ export interface ScreenProps extends ViewProps {
   /**
    * Optional. layout card offset overlap header banner.
    */
-  layoutOffset?: -8 | -24 | -56;
+  layoutOffset?: -8 | -24 | -56 | number;
 
   /**
    * Optional. Width of the right header.
@@ -174,6 +185,7 @@ const Screen = forwardRef(
       scrollViewProps,
       headerComponent: Header,
       footerComponent: Footer,
+      marginFooter = true,
       layoutOffset = -56,
       headerRightWidth = 73,
       backgroundColor,
@@ -196,6 +208,7 @@ const Screen = forwardRef(
     const { theme, navigator } = useContext(ApplicationContext);
     const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
+    const frame = useSafeAreaFrame();
     const heightHeader = useHeaderHeight();
 
     /**
@@ -608,12 +621,31 @@ const Screen = forwardRef(
       }
     };
 
+    // Cap the screen container height so a scrollable body with a sticky footer
+    // can't push the footer past the visible frame (web previews measure the
+    // safe-area frame from the seeded SafeAreaProvider metrics). Subtract the
+    // bottom tab bar when present and the header unless it's an animated/extended
+    // header (those overlay rather than offset the body).
+    const getHeight = () => {
+      let newHeight = frame.height;
+      if (isTab) {
+        newHeight -= 64 + Math.min(insets.bottom, 21);
+      }
+      if (!animatedHeader && headerType !== 'extended') {
+        newHeight -= heightHeader;
+      }
+      return newHeight;
+    };
+
     return (
       <View
         style={[
           Styles.flex,
           {
             backgroundColor: backgroundColor ?? theme.colors.background.default,
+            // Web-only cap so a scrollable body with a sticky footer can't push
+            // the footer past the frame. Native handles this without a cap.
+            maxHeight: Platform.OS === 'web' ? getHeight() : undefined,
           },
         ]}
       >
@@ -679,7 +711,9 @@ const Screen = forwardRef(
                 },
               ]}
             >
-              <Section>{Footer}</Section>
+              {/* The footer inset is a caller decision, not a platform one — a footer
+                  that carries its own horizontal padding passes `marginFooter={false}`. */}
+              <Section useMargin={marginFooter}>{Footer}</Section>
             </View>
           )}
         </KeyboardAvoidingView>

package/Loader/DotLoader.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useContext } from 'react';
+import { Platform } from 'react-native';
 import AnimatedLottieView from 'lottie-react-native';
 import animation from '../Assets/DotAnimation.json';
 import { ApplicationContext } from '../Context';
@@ -29,6 +30,7 @@ const DotLoader: FC<LoaderProps> = ({ color, style }) => {
     <AnimatedLottieView
       source={source}
       style={[{ width: 52, height: 18 }, style]}
+      webStyle={Platform.OS === 'web' ? { width: 52, height: 18 } : undefined}
       autoPlay
     />
   );

package/Loader/Spinner.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useContext } from 'react';
+import { Platform } from 'react-native';
 import AnimatedLottieView from 'lottie-react-native';
 import animation from '../Assets/SpinnerAnimation.json';
 import { hexToRGBA } from './utils';
@@ -21,6 +22,7 @@ const Spinner: FC<LoaderProps> = ({ color, style }) => {
     <AnimatedLottieView
       source={source}
       style={[{ width: 24, height: 24 }, style]}
+      webStyle={Platform.OS === 'web' ? { width: 24, height: 24 } : undefined}
       autoPlay
     />
   );

package/Text/index.tsx

@@ -7,6 +7,10 @@ import {
   MiniAppContext,
   SkeletonContext,
 } from '../Context';
+import {
+  NEW_DEFAULT_FONT_FAMILY,
+  useResolvedFontFamily,
+} from '../Consts/designSystemFont';
 import { scaleSize, useScaleSize } from './utils';
 import { Skeleton } from '../Skeleton';
 
@@ -52,6 +56,20 @@ const BarlowCondensed: TypographyWeight = {
   bold: 'Bold',
 };
 
+const MomoTrustSans: TypographyWeight = {
+  100: 'ExtraLight',
+  200: 'ExtraLight',
+  300: 'Light',
+  400: 'Regular',
+  500: 'Medium',
+  600: 'SemiBold',
+  700: 'Bold',
+  800: 'ExtraBold',
+  900: 'ExtraBold',
+  normal: 'Regular',
+  bold: 'Bold',
+};
+
 const FontStyle: { [key: string]: string } = {
   italic: 'Italic',
   normal: '',
@@ -100,7 +118,8 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
   const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
   const { fontWeight, fontSize, fontStyle, lineHeight } = typoStyle;
   const style = FontStyle[fontStyle ?? 'normal'];
-  const font = newFontFamily ?? theme.font;
+  const font = useResolvedFontFamily(newFontFamily ?? theme.font);
+  const resolvedDefaultFamily = useResolvedFontFamily(NEW_DEFAULT_FONT_FAMILY);
   let fontFamily: string;
 
   switch (font) {
@@ -108,6 +127,10 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
       fontFamily = `${font}-${SFProText[fontWeight]}${style}`;
       break;
     }
+    case 'MomoTrustSans': {
+      fontFamily = `${font}-${MomoTrustSans[fontWeight]}`;
+      break;
+    }
     case 'AlegreyaSans': {
       fontFamily = `${font}-${AlegreyaSans[fontWeight]}${style}`;
       break;
@@ -125,7 +148,11 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
       break;
     }
     default: {
-      fontFamily = `SFProText-${SFProText[fontWeight]}${style}`;
+      fontFamily = `${resolvedDefaultFamily}-${
+        resolvedDefaultFamily === NEW_DEFAULT_FONT_FAMILY
+          ? MomoTrustSans[fontWeight]
+          : SFProText[fontWeight]
+      }`;
     }
   }
 
@@ -135,7 +162,10 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
     fontSize: useScaleSize(fontSize),
     lineHeight: useScaleSize(lineHeight),
     fontStyle,
-    fontWeight,
+    // fontFamily da mang san weight. Tren Android, ReactFontManager doi
+    // `fonts/<family>_bold.ttf` khi fontWeight >= 700; file do khong ton tai nen
+    // font se roi ve font he thong. Bo fontWeight de Android dung dung file.
+    fontWeight: undefined,
   };
 };
 
@@ -216,6 +246,12 @@ const exportFontFamily = (
       typography = 'body_default_regular';
       break;
 
+    case 'semibold':
+    case 'Semibold':
+    case 'SemiBold':
+      typography = 'header_s_semibold';
+      break;
+
     default: {
       typography = 'body_default_regular';
       break;

package/Title/index.tsx

@@ -6,7 +6,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import { Icon } from '../Icon';
-import { useScaleSize, Text } from '../Text';
+import { useScaleSize, Text, exportFontFamily } from '../Text';
 import { useComponentId } from '../Application';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Badge } from '../Badge';
@@ -75,6 +75,7 @@ const Title: FC<TitleProps> = ({
     [key: string]: any;
   } = { ...styles, ...dynamicStyles };
   const typography = `${type}_${size}`;
+  const titleFontFamily = exportFontFamily('bold');
   const isSection = type === 'section';
   const numberOfLines = showTrailingAction || !!badgeLabel ? 1 : 2;
   const buttonTypo: Typography =
@@ -129,6 +130,7 @@ const Title: FC<TitleProps> = ({
             numberOfLines={numberOfLines}
             style={[
               styleSheet[typography],
+              { fontFamily: titleFontFamily },
               styles.title,
               {
                 maxWidth:
@@ -256,7 +258,11 @@ const Title: FC<TitleProps> = ({
           allowFontScaling={false}
           accessibilityLabel={componentId + '|title-text'}
           numberOfLines={numberOfLines}
-          style={[styleSheet[typography], styles.title]}
+          style={[
+            styleSheet[typography],
+            { fontFamily: titleFontFamily },
+            styles.title,
+          ]}
         >
           {title}
         </RNText>

package/Title/styles.ts

@@ -42,7 +42,6 @@ export default StyleSheet.create({
   },
   contentView: { marginRight: Spacing.S, flex: 1 },
   title: {
-    fontWeight: 'bold',
     color: Colors.black_17,
   },
   badge: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.165.1-sp.4",
+    "version": "0.165.2-beta.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},