@momo-kits/foundation 0.168.1-beta.20 → 0.168.1-beta.21

package/Application/Components/DuoGlassBackground.tsx

@@ -10,12 +10,10 @@ import { ApplicationContext } from '../../Context';
 import { Shadow } from '../../Consts';
 import { Image } from '../../Image';
 import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
+import { useScreenLayout } from '../../Layout';
 
-// extended headers run their gradient this far below the header, as off Duo
 const EXTENDED_GRADIENT_EXTRA = 52;
-// scroll distance over which the extended gradient collapses to the header
 const EXTENDED_COLLAPSE_DISTANCE = 100;
-// scroll distance over which the bar material fades in
 const FADE_DISTANCE = 16;
 const TRANSLUCENT_ALPHA = 'CC';
 
@@ -25,11 +23,12 @@ const TRANSLUCENT_ALPHA = 'CC';
  */
 const DuoGlassBackground: React.FC<{
   animatedValue?: AnimatedCompatValue;
-  // scroll offset where the bar starts to show, e.g. below an animated banner
-  fadeStart?: number;
-}> = ({ animatedValue, fadeStart = 0 }) => {
+  bannerBottom?: number;
+}> = ({ animatedValue, bannerBottom = 0 }) => {
   const { theme } = useContext(ApplicationContext);
+  const { headerHeight } = useScreenLayout();
   const sharedValue = useNormalizedSharedValue(animatedValue);
+  const fadeStart = Math.max(bannerBottom - headerHeight, 0);
 
   const fadeStyle = useAnimatedStyle(() => ({
     opacity: interpolate(
@@ -68,7 +67,6 @@ const DuoScrollGradient: React.FC<{
   headerBackground?: string;
   heightHeader: number;
   extended?: boolean;
-  // quick return header: the gradient leaves with the content instead of fading
   followScroll?: boolean;
 }> = ({
   animatedValue,
@@ -147,7 +145,6 @@ const styles = StyleSheet.create({
     right: 0,
     overflow: 'hidden',
   },
-  // banner image keeps its 375:154 shape, the gradient box clips it
   gradientFill: {
     width: '100%',
     position: 'absolute',

package/Application/utils.tsx

@@ -32,6 +32,8 @@ import { HeaderBackground } from './Components/HeaderBackground';
 import { HeaderLeft } from './Components/HeaderLeft';
 import { HeaderRight } from './Components/HeaderRight';
 
+const SWIPE_BACK_HAPTIC_THRESHOLD = 50;
+
 const forStackTransitionWithOverlay = (
   props: StackCardInterpolationProps,
 ): StackCardInterpolatedStyle => {
@@ -374,13 +376,6 @@ const useNormalizedSharedValue = (
   return fallback;
 };
 
-/**
- * Travel, in points, at which the swipe back gesture ticks. Flat and well short of
- * react-navigation's own `distance / 2` commit rule: the tick marks "the gesture is
- * recognised", not "you are past the point of no return".
- */
-const SWIPE_BACK_HAPTIC_THRESHOLD = 50;
-
 /**
  * `current.progress` is `gesture.interpolate(...)` built by CardStack
  * (@react-navigation/stack 7.4.2, views/Stack/CardStack.tsx `getProgressFromGesture`).
@@ -478,8 +473,9 @@ const SwipeBackHaptic = () => {
   return null;
 };
 
-const isWhiteListDesignSystem = (context: any): boolean =>
-  context?.designSystemConfig?.isWhiteListDesignSystem === true;
+const isWhiteListDesignSystem = (context: any): boolean => {
+  return context?.designSystemConfig?.isWhiteListDesignSystem === true;
+};
 
 export {
   getStackOptions,

package/Layout/Screen.tsx

@@ -64,6 +64,8 @@ import {
 import { DuoQuickReturnHeader } from '../Application/Components/DuoQuickReturnHeader';
 import { useDuoTabBarInset } from '../Application/BottomTab/DuoTabBar';
 
+const ANIMATED_BANNER_HEIGHT = 210;
+
 export interface ScreenProps extends ViewProps {
   /**
    * ReactNode representing the content of the screen.
@@ -222,19 +224,6 @@ const Screen = forwardRef(
     const frame = useSafeAreaFrame();
     const heightHeader = useHeaderHeight();
 
-    /**
-     * Dual animation source:
-     * - `animatedValue` is a react-native `Animated.Value` driven natively by the
-     *   scroll event. It is what legacy consumers receive (`animatedValue`).
-     * - `sharedValue` is a reanimated `SharedValue` consumed by every internal
-     *   foundation component (and offered to modern consumers). It is kept in
-     *   sync from the scroll `listener` (see below), which fires on the JS
-     *   thread even when the scroll uses the native driver.
-     *   If a legacy value is driven outside of Screen, its listener also
-     *   mirrors JS-driven updates into the shared value.
-     * Consumers pass only `Animated.Value`; the reanimated shared value stays
-     * an internal implementation detail.
-     */
     const animatedValue = useRef<Animated.Value>(
       customAnimatedValue ?? new Animated.Value(0),
     );
@@ -258,7 +247,6 @@ const Screen = forwardRef(
     const currentTint = useRef<string | undefined>(undefined);
 
     const isTab = !!screen?.bottomTab;
-    // Duo floating tab bar overlays the tab content instead of taking layout space
     const duoTabInset = useDuoTabBarInset();
 
     let handleScroll;
@@ -267,14 +255,12 @@ const Screen = forwardRef(
     const isIOS = Platform.OS === 'ios';
     const bottomInset = isIOS ? Math.min(insets.bottom, 21) : insets.bottom;
     const hasSideBar = !!layout.sideBar;
-    // iPhone Duo: content scrolls under a glass header instead of starting below it
     const useDuoGlass =
       hasSideBar &&
       (headerType === 'default' || headerType === 'extended') &&
       !animatedHeader &&
       !inputSearchProps;
 
-    // iPhone Duo: the header leaves with the content and returns on a reverse scroll
     const useQuickReturn =
       hasSideBar && scrollable && (useDuoGlass || !!animatedHeader);
     const headerHide = useSharedValue(0);
@@ -324,12 +310,14 @@ const Screen = forwardRef(
      */
     screen?.onSetParams?.(trackingParams);
 
+    const appliedHeaderMode = useRef<string | undefined>(undefined);
+
     /**
      * export options for screen
      * @param headerType
      */
     const setHeaderType = useCallback(
-      (headerType: HeaderType) => {
+      (headerType: HeaderType, keepTitle = false) => {
         let options: StackNavigationOptions;
         switch (headerType) {
           case 'none':
@@ -418,6 +406,10 @@ const Screen = forwardRef(
             }
         }
 
+        if (keepTitle) {
+          delete options.headerTitle;
+        }
+
         navigation?.instance?.setOptions({ header: undefined, ...options });
       },
       [
@@ -449,10 +441,9 @@ const Screen = forwardRef(
           headerTransparent: true,
           headerBackground: (props: any) =>
             hasSideBar ? (
-              // glass shows once the banner has scrolled under the header
               <DuoGlassBackground
                 animatedValue={sharedValue}
-                fadeStart={Math.max(210 + layoutOffset - heightHeader, 0)}
+                bannerBottom={ANIMATED_BANNER_HEIGHT + layoutOffset}
               />
             ) : (
               <HeaderBackground
@@ -486,7 +477,6 @@ const Screen = forwardRef(
         useShadowHeader,
         hasSideBar,
         layoutOffset,
-        heightHeader,
         quickReturnOptions,
       ],
     );
@@ -521,7 +511,6 @@ const Screen = forwardRef(
       let searchWidth = layout.width - 24;
       let searchLeft = Spacing.M;
       if (layout.sideBar) {
-        // back floats in the side bar: the search spans the content width
         searchWidth = layout.contentWidth - Spacing.M * 2;
         searchLeft = Spacing.M - getHeaderMargin(layout.width);
       }
@@ -563,10 +552,13 @@ const Screen = forwardRef(
 
       if (animatedHeader) {
         setAnimatedHeader(animatedHeader);
+        appliedHeaderMode.current = 'animated';
       } else if (inputSearchProps) {
         setAnimatedSearch();
+        appliedHeaderMode.current = 'search';
       } else {
-        setHeaderType(headerType);
+        setHeaderType(headerType, appliedHeaderMode.current === headerType);
+        appliedHeaderMode.current = headerType;
       }
 
       return () => {
@@ -613,7 +605,6 @@ const Screen = forwardRef(
           useNativeDriver: true,
           listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
             const offsetY = e.nativeEvent.contentOffset.y;
-            // keep the reanimated source in sync for the internal components.
             sharedValue.value = offsetY;
             scrollViewProps?.onScroll?.(e);
             if (animatedHeader) {
@@ -648,7 +639,6 @@ const Screen = forwardRef(
      */
     const snapQuickReturnHeader = (offsetY: number) => {
       const hide = headerHide.value;
-      // above heightHeader the header still sits on the content
       if (
         !useQuickReturn ||
         offsetY < heightHeader ||
@@ -692,11 +682,12 @@ const Screen = forwardRef(
       if (typeof animatedHeader?.component === 'function') {
         return (
           <View
-            style={[styles.screenBanner, { maxHeight: 210 + layoutOffset }]}
+            style={[
+              styles.screenBanner,
+              { maxHeight: ANIMATED_BANNER_HEIGHT + layoutOffset },
+            ]}
           >
             {animatedHeader?.component({
-              // legacy consumers read `animatedValue` (Animated.Value),
-              // modern consumers read `sharedValue` (SharedValue).
               animatedValue: animatedValue.current,
               sharedValue: sharedValue,
             })}
@@ -756,11 +747,6 @@ 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) {
@@ -772,8 +758,6 @@ const Screen = forwardRef(
       return newHeight;
     };
 
-    // without the grid, the content container keeps clear of the horizontal insets.
-    // Only set when there are insets, so a caller's paddingHorizontal is never overridden.
     const hasContentInset = layout.insetLeft > 0 || layout.insetRight > 0;
     const needsContentInset = !useGridLayout && hasContentInset;
     const contentInsetStyle = needsContentInset && {
@@ -796,8 +780,6 @@ const Screen = forwardRef(
           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,
           },
         ]}
@@ -882,7 +864,6 @@ const Screen = forwardRef(
           )}
 
           {Footer && (
-            // with side insets, the clip keeps the shadow off the side bar, only the top one shows
             <View
               pointerEvents={'box-none'}
               style={[
@@ -904,8 +885,6 @@ const Screen = forwardRef(
                   },
                 ]}
               >
-                {/* 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>
             </View>

package/package.json

@@ -1,38 +1,38 @@
 {
-    "name": "@momo-kits/foundation",
-    "version": "0.168.1-beta.20",
-    "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.2.2",
-        "react-native-worklets": "0.6.1",
-        "react-native-safe-area-context": "5.5.2",
-        "react-native-reserved-regions": "0.2.0",
-        "@shopify/flash-list": "2.1.0",
-        "lottie-react-native": "7.2.4"
-    },
-    "peerDependencies": {
-        "react-native": "*",
-        "react-native-worklets": "0.6.1"
-    },
-    "devDependencies": {
-        "@types/color": "3.0.6"
-    },
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "license": "MoMo"
-}
+  "name": "@momo-kits/foundation",
+  "version": "0.168.1-beta.21",
+  "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.2.2",
+    "react-native-worklets": "0.6.1",
+    "react-native-safe-area-context": "5.5.2",
+    "react-native-reserved-regions": "0.2.0",
+    "@shopify/flash-list": "2.1.0",
+    "lottie-react-native": "7.2.4"
+  },
+  "peerDependencies": {
+    "react-native": "*",
+    "react-native-worklets": "0.6.1"
+  },
+  "devDependencies": {
+    "@types/color": "3.0.6"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "MoMo"
+}