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

package/Application/BottomTab/BottomTabBar.tsx

@@ -58,11 +58,13 @@ export default function BottomTabBar({
   const { theme } = useContext(ApplicationContext);
   const { routes } = state;
   const widthDevice = useWindowDimensions()?.width;
+  const insets = useSafeAreaInsets();
   const useFloating = floatingButton && state.routes.length % 2 === 0;
-  const itemWidth = widthDevice / (state.routes.length + (useFloating ? 1 : 0));
+  const itemWidth =
+    (widthDevice - insets.left - insets.right) /
+    (state.routes.length + (useFloating ? 1 : 0));
   // const buildLink = useLinkBuilder();
   const indicatorAnimated = useSharedValue(0);
-  const insets = useSafeAreaInsets();
 
   const indicatorStyle = useAnimatedStyle(() => ({
     width: itemWidth,
@@ -246,7 +248,8 @@ export default function BottomTabBar({
         },
         {
           paddingBottom: paddingBottom,
-          paddingHorizontal: Math.max(insets.left, insets.right),
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
         },
         style,
       ]}

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));
@@ -253,10 +252,11 @@ const BottomTab: React.FC<BottomTabProps> = ({
     });
 
     const isFirstTab = activeIndex.current === 0;
+    const gestureEnabled = Platform.OS === 'ios' && isFirstTab;
     navigation?.setOptions({
-      gestureEnabled: Platform.OS === 'ios' && isFirstTab,
+      gestureEnabled: gestureEnabled,
     });
-    NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(!isFirstTab);
+    NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(!gestureEnabled);
   };
 
   const handler: {

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/HeaderExtendHeader.tsx

@@ -1,6 +1,6 @@
 import React, { Ref, useContext } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
-import { Dimensions, Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -18,12 +18,11 @@ import {
   AnimatedCompatValue,
   useNormalizedSharedValue,
 } from '../utils';
+import { useHorizontalLayout } from '../../Layout/utils';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
 
-const { width: screenWidth } = Dimensions.get('window');
-
 const HeaderExtendHeader: React.FC<{
   headerType?: HeaderType;
   animatedValue: AnimatedCompatValue;
@@ -52,6 +51,8 @@ const HeaderExtendHeader: React.FC<{
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
+  const layout = useHorizontalLayout(SCREEN_PADDING);
+  const { insets } = layout;
 
   let useShadowHeader = useShadowHeaderProp;
   if (inputSearchProps && Platform.OS === 'android') {
@@ -79,7 +80,7 @@ const HeaderExtendHeader: React.FC<{
         translateX: interpolate(
           sharedValue.value,
           [0, 100],
-          [SCREEN_PADDING, leftPosition],
+          [layout.marginLeft, leftPosition + insets.left],
           Extrapolation.CLAMP,
         ),
       },
@@ -88,8 +89,8 @@ const HeaderExtendHeader: React.FC<{
       sharedValue.value,
       [0, 100],
       [
-        screenWidth - SCREEN_PADDING * 2,
-        screenWidth - leftPosition - 12 - headerRightWidth,
+        layout.width,
+        layout.width + SCREEN_PADDING - leftPosition - headerRightWidth,
       ],
       Extrapolation.CLAMP,
     ),

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/SearchHeader.tsx

@@ -1,17 +1,13 @@
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import { InputRef, InputSearch } from '../../Input';
-import {
-  Dimensions,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import React, { useContext } from 'react';
 import { SearchHeaderProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
 import { useNormalizedSharedValue } from '../utils';
+import { useHorizontalLayout } from '../../Layout/utils';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
@@ -27,7 +23,7 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const BACK_WIDTH = 28;
-    const { width: screenWidth } = Dimensions.get('window');
+    const { width: safeWidth } = useHorizontalLayout(0);
 
     const sharedValue = useNormalizedSharedValue(animatedValue);
     const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
@@ -77,7 +73,7 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
           style={[
             Styles.flex,
             renderButtons && {
-              maxWidth: screenWidth - leftPosition - 12 - headerRightWidth,
+              maxWidth: safeWidth - leftPosition - 12 - headerRightWidth,
             },
           ]}
         >

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';
@@ -25,6 +26,7 @@ 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 +63,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}

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/colors+spacing+radius.ts

@@ -144,6 +144,14 @@ const Colors = {
   red_09: '#fee8ea',
   red_10: '#fef4f4',
   red_11: '#fef8f8',
+  opacity_white_20: '#ffffff33',
+  opacity_white_40: '#ffffff66',
+  opacity_white_60: '#ffffff99',
+  opacity_white_80: '#ffffffcc',
+  opacity_black_20: '#00000033',
+  opacity_black_40: '#00000066',
+  opacity_black_60: '#00000099',
+  opacity_black_80: '#000000cc',
 };
 const Spacing = {
   XXS: 2,

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 = {

package/Layout/Card.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { Dimensions, View, ViewProps } from 'react-native';
-import { useGridSystem } from './utils';
+import { View, ViewProps } from 'react-native';
+import { useGridSystem, useHorizontalLayout } from './utils';
 import { GridContextProps } from './types';
 import { GridContext, GridSystem } from './index';
 import { Image } from '../Image';
@@ -32,7 +32,8 @@ const Card: React.FC<CardProps> = ({
 
   const gutterSize = 8;
   const margin = 12;
-  const widthSection = Dimensions.get('window').width - margin * 2;
+  const layout = useHorizontalLayout(margin);
+  const widthSection = layout.width;
   let sizePerSpan =
     (widthSection - margin * 2 - gutterSize * (numberOfColumns - 1)) /
       numberOfColumns -
@@ -76,7 +77,8 @@ const Card: React.FC<CardProps> = ({
           styles.card,
           {
             width: widthSection,
-            marginHorizontal: margin,
+            marginLeft: layout.marginLeft,
+            marginRight: layout.marginRight,
             gap: gutterSize,
           },
           !!backgroundImage && { backgroundColor: undefined },

package/Layout/FloatingButton.tsx

@@ -19,6 +19,7 @@ import {
   AnimatedCompatValue,
   useNormalizedSharedValue,
 } from '../Application/utils';
+import { useHorizontalLayout } from './utils';
 
 export interface FloatingButtonProps {
   label?: string;
@@ -55,6 +56,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const lastOffset = useSharedValue(0);
   const lastDirection = useSharedValue<string | null>(null);
   const [showText, setShowText] = useState(true);
+  const { marginRight } = useHorizontalLayout(12);
 
   useEffect(() => {
     if (!label) return;
@@ -118,7 +120,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
         style={[
           styles.container,
           {
-            right: position === 'right' ? 12 : undefined,
+            right: position === 'right' ? marginRight : undefined,
             alignSelf: position === 'center' ? 'center' : 'flex-end',
             bottom,
           },
@@ -135,7 +137,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
       style={[
         styles.container,
         {
-          right: position === 'right' ? 12 : undefined,
+          right: position === 'right' ? marginRight : undefined,
           alignSelf: position === 'center' ? 'center' : 'flex-end',
           height: size === 'small' ? 36 : 48,
           backgroundColor: theme.colors.primary,

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/Layout/Section.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { Dimensions, View, ViewProps } from 'react-native';
-import { useGridSystem } from './utils';
+import { useWindowDimensions, View, ViewProps } from 'react-native';
+import { useGridSystem, useHorizontalLayout } from './utils';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
 import { ApplicationContext, MiniAppContext } from '../Context';
@@ -38,14 +38,9 @@ const Section: React.FC<SectionProps> = ({
   const { numberOfColumns } = useGridSystem();
 
   const gutterSize = 12;
-  let margin = 0;
-  if (useMargin) {
-    margin = 12;
-  }
-  let widthSection = Dimensions.get('window').width;
-  if (useMargin) {
-    widthSection = widthSection - margin * 2;
-  }
+  const layout = useHorizontalLayout(12);
+  const { width: windowWidth } = useWindowDimensions();
+  const widthSection = useMargin ? layout.width : windowWidth;
 
   const sizePerSpan =
     (widthSection - gutterSize * (numberOfColumns - 1)) / numberOfColumns -
@@ -77,7 +72,8 @@ const Section: React.FC<SectionProps> = ({
           styles.protectedStyle,
           {
             width: widthSection,
-            marginHorizontal: margin,
+            marginLeft: useMargin ? layout.marginLeft : 0,
+            marginRight: useMargin ? layout.marginRight : 0,
             flexDirection: 'row',
             flexWrap: 'wrap',
             gap: gutterSize,

package/Layout/utils.ts

@@ -1,5 +1,6 @@
 import React, { Fragment, ReactElement } from 'react';
 import { useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 /**
  * validate children type
@@ -44,4 +45,18 @@ const useGridSystem = () => {
   return { numberOfColumns };
 };
 
-export { useGridSystem, validateChildren };
+// Side insets are 0 on portrait iPhones; iPhone Duo and landscape report them
+const useHorizontalLayout = (margin: number) => {
+  const { width } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const marginLeft = margin + insets.left;
+  const marginRight = margin + insets.right;
+  return {
+    marginLeft,
+    marginRight,
+    width: width - marginLeft - marginRight,
+    insets,
+  };
+};
+
+export { useGridSystem, useHorizontalLayout, validateChildren };

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/package.json

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