@momo-kits/foundation 0.168.1-rn862.1 → 0.169.2

package/Layout/screenQuickReturn.tsx

@@ -0,0 +1,67 @@
+import React, { useMemo } from 'react';
+import { StackNavigationOptions } from '@react-navigation/stack';
+import {
+  SharedValue,
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { DuoQuickReturnHeader } from '../Application/Components/DuoQuickReturnHeader';
+
+export const useScreenQuickReturn = (
+  sharedValue: SharedValue<number>,
+  useQuickReturn: boolean,
+  heightHeader: number,
+) => {
+  const headerHide = useSharedValue(0);
+  const lastScrollY = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => sharedValue.value,
+    y => {
+      const delta = y - lastScrollY.value;
+      lastScrollY.value = y;
+      if (!useQuickReturn || y <= 0) {
+        headerHide.value = 0;
+        return;
+      }
+      headerHide.value = Math.min(
+        Math.max(headerHide.value + delta, 0),
+        heightHeader,
+      );
+    },
+    [useQuickReturn, heightHeader],
+  );
+
+  const quickReturnOptions: StackNavigationOptions = useMemo(
+    () =>
+      useQuickReturn
+        ? {
+            header: (props: any) => (
+              <DuoQuickReturnHeader {...props} offset={headerHide} />
+            ),
+          }
+        : { header: undefined },
+    [useQuickReturn, headerHide],
+  );
+
+  /**
+   * a half-shown quick return header settles fully in or out
+   */
+  const snapQuickReturnHeader = (offsetY: number) => {
+    const hide = headerHide.value;
+    if (
+      !useQuickReturn ||
+      offsetY < heightHeader ||
+      hide <= 0 ||
+      hide >= heightHeader
+    ) {
+      return;
+    }
+    headerHide.value = withTiming(hide > heightHeader / 2 ? heightHeader : 0, {
+      duration: 200,
+    });
+  };
+
+  return { quickReturnOptions, snapQuickReturnHeader };
+};

package/Layout/screenScroll.ts

@@ -0,0 +1,110 @@
+import { MutableRefObject } from 'react';
+import {
+  Animated,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollViewProps,
+  StatusBar,
+  StatusBarStyle,
+} from 'react-native';
+import { withTiming } from 'react-native-reanimated';
+import Navigation from '../Application/Navigation';
+import { AnimatedHeader, SearchHeaderProps } from '../Application/types';
+import { Colors } from '../Consts';
+
+type ScrollHandlerParams = {
+  scrollable: boolean;
+  animatedValue: Animated.Value;
+  sharedValue: any;
+  scrollViewProps?: ScrollViewProps;
+  animatedHeader?: AnimatedHeader;
+  inputSearchProps?: SearchHeaderProps;
+  currentTint: MutableRefObject<string | undefined>;
+  navigation?: Navigation;
+  snapQuickReturnHeader: (offsetY: number) => void;
+  ref: any;
+};
+
+export const createScrollHandlers = ({
+  scrollable,
+  animatedValue,
+  sharedValue,
+  scrollViewProps,
+  animatedHeader,
+  inputSearchProps,
+  currentTint,
+  navigation,
+  snapQuickReturnHeader,
+  ref,
+}: ScrollHandlerParams) => {
+  let handleScroll;
+
+  /**
+   * animated when use scroll && animated value
+   */
+  if (scrollable) {
+    handleScroll = Animated.event(
+      [
+        {
+          nativeEvent: {
+            contentOffset: { y: animatedValue as Animated.Value },
+          },
+        },
+      ],
+      {
+        useNativeDriver: true,
+        listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+          const offsetY = e.nativeEvent.contentOffset.y;
+          sharedValue.value = offsetY;
+          scrollViewProps?.onScroll?.(e);
+          if (animatedHeader) {
+            let color = animatedHeader?.headerTintColor ?? Colors.black_17;
+            if (offsetY > 50) {
+              color = Colors.black_17;
+            }
+            if (color !== currentTint.current) {
+              currentTint.current = color;
+              navigation?.setOptions({
+                headerTintColor: color,
+              });
+
+              let barStyle: StatusBarStyle = 'dark-content';
+              if (currentTint.current === Colors.black_01) {
+                barStyle = 'light-content';
+              }
+              StatusBar.setBarStyle(barStyle, true);
+            }
+          }
+        },
+      },
+    );
+  }
+
+  /**
+   * handle scroll end
+   * @param e
+   */
+  const handleMomentumScrollEnd = (
+    e: NativeSyntheticEvent<NativeScrollEvent>,
+  ) => {
+    snapQuickReturnHeader(e.nativeEvent.contentOffset.y);
+    scrollViewProps?.onMomentumScrollEnd?.(e);
+  };
+
+  const handleScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const offsetY = e.nativeEvent.contentOffset.y;
+    snapQuickReturnHeader(offsetY);
+    if (inputSearchProps && offsetY < 100 && offsetY > 0) {
+      Animated.timing(animatedValue, {
+        toValue: 0,
+        useNativeDriver: true,
+        duration: 300,
+      }).start();
+      sharedValue.value = withTiming(0, { duration: 300 });
+      ref?.scrollTo?.({ y: 0, animated: true });
+    }
+    scrollViewProps?.onScrollEndDrag?.(e);
+  };
+
+  return { handleScroll, handleScrollEnd, handleMomentumScrollEnd };
+};

package/Layout/screenTypes.ts

@@ -0,0 +1,134 @@
+import React, { ReactNode, Ref } from 'react';
+import { Animated, ScrollViewProps, ViewProps } from 'react-native';
+import Navigation from '../Application/Navigation';
+import {
+  AnimatedHeader,
+  ScreenTrackingParams,
+  SearchHeaderProps,
+} from '../Application/types';
+import { FloatingButtonProps } from './FloatingButton';
+import { HeaderType } from './types';
+import { InputRef } from '../Input';
+
+export const ANIMATED_BANNER_HEIGHT = 210;
+
+export interface ScreenProps extends ViewProps {
+  /**
+   * ReactNode representing the content of the screen.
+   */
+  children: React.ReactNode;
+  /**
+   * Optional. Navigation object for handling navigation actions.
+   */
+  navigation?: Navigation;
+
+  /**
+   * Optional. If `true`, enable keyboard avoiding view for the screen.
+   */
+  enableKeyboardAvoidingView?: boolean;
+
+  /**
+   * Optional. If `true`, the screen content is scrollable.
+   */
+  scrollable?: boolean;
+
+  /**
+   * Optional. Set type of header.
+   */
+  headerType?: HeaderType;
+
+  /**
+   * Optional. Props for the animated component or bool used top navigation animated.
+   */
+  animatedHeader?: AnimatedHeader;
+
+  /**
+   * Optional. Props for the underlying ScrollView component when `scrollable` is `true`.
+   */
+  scrollViewProps?: ScrollViewProps;
+
+  /**
+   * Optional. ReactNode representing the header component of the screen.
+   */
+  headerComponent?: ReactNode;
+
+  /**
+   * Optional. ReactNode representing the footer component of the screen.
+   */
+  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.
+   */
+  backgroundColor?: string;
+
+  /**
+   * Optional. layout card offset overlap header banner.
+   */
+  layoutOffset?: -8 | -24 | -56 | number;
+
+  /**
+   * Optional. Width of the right header. Defaults to the toolkit width (73), or 0 when
+   * iPhone Duo floats the toolkit into its side bar.
+   */
+  headerRightWidth?: 0 | 73 | 110 | number;
+
+  /**
+   * Optional. Props for the floating action button.
+   */
+  floatingButtonProps?: Omit<FloatingButtonProps, 'animatedValue' | 'bottom'>;
+
+  /**
+   * Optional. Keyboard vertical offset.
+   */
+  keyboardVerticalOffset?: number;
+
+  /**
+   * Optional. If `true`, the screen content is using grid layout by span.
+   */
+  useGridLayout?: boolean;
+
+  /**
+   * Optional. specs for input search.
+   */
+  inputSearchProps?: SearchHeaderProps;
+
+  /**
+   * Optional. Ref for input search.
+   */
+  inputSearchRef?: Ref<InputRef>;
+
+  /**
+   * Optional. React Native animated value for header.
+   * Internally, Screen mirrors it into a reanimated shared value.
+   */
+  animatedValue?: Animated.Value;
+
+  /**
+   * Optional. If `true`, use shadow header.
+   */
+  useShadowHeader?: boolean;
+
+  /**
+   * Optional. Custom header Gradient Color.
+   */
+  gradientColor?: string;
+
+  /**
+   * Optional. Custom headerBackground Image
+   */
+  headerBackground?: string;
+
+  /**
+   * Optional. Custom tracking params
+   */
+  trackingParams?: ScreenTrackingParams;
+}

package/Layout/styles.ts

@@ -97,4 +97,6 @@ export default StyleSheet.create({
     overflow: 'hidden',
   },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+  expanded: { flex: 1 },
+  rowWrap: { flexDirection: 'row', flexWrap: 'wrap' },
 });

package/Layout/utils.ts

@@ -5,6 +5,13 @@ import {
   SafeAreaInsetsContext,
 } from 'react-native-safe-area-context';
 import { Spacing } from '../Consts';
+import { HeaderMetrics, DuoMetrics } from './layoutMetrics';
+import {
+  ScreenLayout,
+  SideBarEdge,
+  SideBarLayout,
+  StatusBarClearance,
+} from './layoutTypes';
 import { ReservedRegion, ReservedRegionsContext } from './ReservedRegions';
 
 /**
@@ -44,65 +51,6 @@ const validateChildren = (
   }
 };
 
-/**
- * Header geometry
- * - barHeight: navigation bar row below the status bar
- * - iPhoneMinHeight: header never shorter than this on iPhone (landscape, iPhone Duo)
- * - statusBarMinInset: a smaller top inset means the status bar is not on the top edge
- * - largeWidth / largeMargin: @react-navigation/elements Header gives its content row
- *   5pt side margins on iOS from 414pt wide
- */
-const HeaderMetrics = {
-  barHeight: 52,
-  iPhoneMinHeight: 72,
-  statusBarMinInset: 20,
-  largeWidth: 414,
-  largeMargin: 5,
-};
-
-/**
- * iPhone Duo geometry, iOS 27.1 (Xcode 27.1 simulator)
- * - maxAspectRatio: both displays are near 1.42 (inner) and 1.45 (outer), every slab
- *   iPhone is 1.77 or taller
- * - innerMinHeight: window height from which the inner display is in use (outer display
- *   is 466pt tall in landscape, inner display 669pt)
- * - controlSize / itemPitch: vertical bar of 48pt circular controls, item groups as 48pt
- *   wide capsules at a 50pt pitch, 12pt from the strip's inner edge and 12pt apart
- * - firstItemTop: with the status bar in the strip, the first control sits under the
- *   camera, clock and connectivity cluster (cluster ends near y 151 on the outer display,
- *   y 98 on the inner display in landscape)
- * - outerHeaderHeight / outerCameraCenterY: on the outer display in portrait the header
- *   is 4pt taller than iPhoneMinHeight and its title lines up with the camera punchout
- *   (y 24–66 at the top of the strip)
- * - edgeInset: on the outer display in landscape the strip holds no status bar, so its
- *   controls start this far from the top and stay this far above the bottom, unless a
- *   reserved region (the camera at either end) asks for more
- * - innerStatusBarCenterY / innerStatusBarWidth: on the inner display in portrait the
- *   clock and connectivity cluster sits at the top right corner (x 550–643 of 669, clock
- *   digits centered on y 47); its reserved region, when reported, is taller than the glyphs
- * - floatingTabBarHeight / floatingTabBarMargin / floatingTabBarInsetOverlap: the host
- *   app's iOS 26 system tab bar on the inner display in portrait, a 62pt Liquid Glass pill
- *   sized to its tabs with the QR as a pinned 62pt platter beside it, centered and at
- *   least 20pt from the side edges; it overlaps the home indicator inset by 13pt (21pt
- *   above the screen bottom with a 34pt inset)
- */
-const DuoMetrics = {
-  maxAspectRatio: 1.6,
-  innerMinHeight: 600,
-  controlSize: 48,
-  itemPitch: 50,
-  firstItemTop: 170,
-  firstItemTopLandscape: 120,
-  outerHeaderHeight: 76,
-  outerCameraCenterY: 45,
-  edgeInset: 24,
-  innerStatusBarCenterY: 47,
-  innerStatusBarWidth: 120,
-  floatingTabBarHeight: 62,
-  floatingTabBarMargin: 20,
-  floatingTabBarInsetOverlap: 13,
-};
-
 const NO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
 
 /**
@@ -206,91 +154,6 @@ const getCenteredHeaderLayout = (centerY: number) => {
   };
 };
 
-export type SideBarEdge = 'left' | 'right';
-
-export type SideBarLayout = {
-  /**
-   * Edge holding the side bar, the one with the larger safe-area inset.
-   */
-  edge: SideBarEdge;
-
-  /**
-   * Width of the side bar column, the safe-area inset on that edge.
-   */
-  width: number;
-
-  /**
-   * Window y of the first side bar item, below the navigation bar and the side status bar.
-   */
-  top: number;
-
-  /**
-   * Room to keep free above the window bottom, clear of a camera at the bottom end.
-   */
-  bottom: number;
-};
-
-export type ScreenLayout = {
-  /**
-   * Window width, from useWindowDimensions.
-   */
-  width: number;
-
-  /**
-   * Window height, from useWindowDimensions.
-   */
-  height: number;
-
-  /**
-   * `true` when running on iPhone Duo, outer or inner display.
-   */
-  isIPhoneDuo: boolean;
-
-  /**
-   * Raw safe-area insets.
-   */
-  insets: EdgeInsets;
-
-  /**
-   * Horizontal insets the screen content keeps clear of. 0 outside iPhone Duo.
-   */
-  insetLeft: number;
-  insetRight: number;
-
-  /**
-   * Width available to the screen content: window width minus the horizontal insets.
-   */
-  contentWidth: number;
-
-  /**
-   * Header height: the top safe-area inset plus the navigation bar row, at least 72pt on iPhone.
-   */
-  headerHeight: number;
-
-  /**
-   * Room above the navigation bar row for the status bar, the rest of headerHeight is
-   * the row, which centers the title vertically. 0 when the status bar is not on top.
-   */
-  headerStatusBarHeight: number;
-
-  /**
-   * Side column holding the back button and the toolkit, when iPhone Duo moves the
-   * bars to the side. `undefined` while the bars stay horizontal.
-   */
-  sideBar?: SideBarLayout;
-
-  /**
-   * Room the header row keeps from each side for the clock and battery clusters, when
-   * iPhone Duo puts the row on the status bar (inner display in portrait).
-   */
-  statusBarClearance?: StatusBarClearance;
-};
-
-export type StatusBarClearance = {
-  left: number;
-  right: number;
-};
-
 /**
  * Detect iPhone Duo from the window shape and the safe area: a phone idiom window
  * near square, or a phone with asymmetric side insets (slab iPhones report equal
@@ -507,9 +370,12 @@ const useGridSystem = () => {
   return { numberOfColumns };
 };
 
+export type { ScreenLayout, SideBarEdge, SideBarLayout, StatusBarClearance };
+
 export {
   DuoMetrics,
   HeaderMetrics,
+  InnerEdgeStyles,
   getHeaderMargin,
   getHeaderRowOptions,
   useGridSystem,

package/Loader/DotLoader.tsx

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

package/Loader/ProgressBar.tsx

@@ -8,7 +8,6 @@ import Animated, {
 import styles from './styles';
 import { ProgressBarProps } from './types';
 import { ApplicationContext } from '../Context';
-import { Radius } from '../Consts';
 
 const ProgressBar: FC<ProgressBarProps> = ({ percent = 0, style }) => {
   const { theme } = useContext(ApplicationContext);
@@ -32,11 +31,8 @@ const ProgressBar: FC<ProgressBarProps> = ({ percent = 0, style }) => {
     >
       <Animated.View
         style={[
-          {
-            height: 4,
-            borderRadius: Radius.XXS,
-            backgroundColor: theme.colors.primary,
-          },
+          styles.progressBar,
+          { backgroundColor: theme.colors.primary },
           animatedStyle,
         ]}
       />

package/Loader/Spinner.tsx

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

package/Loader/styles.ts

@@ -7,4 +7,8 @@ export default StyleSheet.create({
     height: 4,
     borderRadius: Radius.XXS,
   },
+  progressBar: {
+    height: 4,
+    borderRadius: Radius.XXS,
+  },
 });