@momo-kits/foundation 0.167.1-beta.5 → 0.167.1-duo-test.1

package/Layout/Card.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
-import { Dimensions, View, ViewProps } from 'react-native';
-import { useGridSystem } from './utils';
+import { View, ViewProps } from 'react-native';
+import { useGridSystem, useScreenLayout } from './utils';
 import { GridContextProps } from './types';
-import { GridContext, GridSystem } from './index';
+import { GridContext } from './index';
 import { Image } from '../Image';
-import { ApplicationContext, MiniAppContext } from '../Context';
+import { ApplicationContext } from '../Context';
 import styles from './styles';
-import { Colors, Radius, Shadow, Spacing } from '../Consts';
+import { Radius, Shadow, Spacing } from '../Consts';
 
 export interface CardProps extends ViewProps {
   /**
@@ -27,12 +27,13 @@ const Card: React.FC<CardProps> = ({
   useShadow = false,
   ...props
 }) => {
-  const { showGrid, theme } = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const { numberOfColumns } = useGridSystem();
+  const { contentWidth } = useScreenLayout();
 
   const gutterSize = 8;
   const margin = 12;
-  const widthSection = Dimensions.get('window').width - margin * 2;
+  const widthSection = contentWidth - margin * 2;
   let sizePerSpan =
     (widthSection - margin * 2 - gutterSize * (numberOfColumns - 1)) /
       numberOfColumns -
@@ -47,23 +48,6 @@ const Card: React.FC<CardProps> = ({
     },
   };
 
-  /**
-   * render overlay only dev mode
-   */
-  const renderOverlay = () => {
-    return (
-      <>
-        <GridSystem
-          width={widthSection}
-          gutterSize={Spacing.S}
-          screenGrid={false}
-          gridColor={Colors.red_01}
-        />
-        <View pointerEvents={'none'} style={styles.boxGridCard} />
-      </>
-    );
-  };
-
   return (
     <GridContext.Provider value={gridContext}>
       <View
@@ -95,9 +79,7 @@ const Card: React.FC<CardProps> = ({
             ]}
           />
         )}
-        {/* Render only allowed children as valid React elements */}
         {children}
-        {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>
   );

package/Layout/FloatingButton.tsx

@@ -10,8 +10,8 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
-  runOnJS,
 } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
 import { useScaleSize, exportFontFamily } from '../Text';
@@ -78,7 +78,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
               minWidth,
               { duration: 100 },
               finished => {
-                if (finished) runOnJS(setShowText)(false);
+                if (finished) scheduleOnRN(setShowText, false);
               },
             );
           } else {
@@ -87,7 +87,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
               maxWidth.value,
               { duration: 100 },
               finished => {
-                if (finished) runOnJS(setShowText)(true);
+                if (finished) scheduleOnRN(setShowText, true);
               },
             );
           }

package/Layout/Item.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { View, ViewProps } from 'react-native';
 import { GridContext } from './index';
-import { ApplicationContext, MiniAppContext } from '../Context';
+import { MiniAppContext } from '../Context';
 import styles from './styles';
 import { SpanNumber } from './types';
 
@@ -23,19 +23,11 @@ const Item: React.FC<ItemProps> = ({
   children,
   style,
 }) => {
-  const { showGrid } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const grid = useContext(GridContext);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  /**
-   * render overlay view only dev mode
-   */
-  const renderOverlay = () => {
-    return <View pointerEvents={'none'} style={styles.boxGrid} />;
-  };
-
   return (
     <View
       style={[
@@ -49,7 +41,6 @@ const Item: React.FC<ItemProps> = ({
       ]}
     >
       {children}
-      {showGrid && renderOverlay()}
     </View>
   );
 };

package/Layout/ReservedRegions.tsx

@@ -0,0 +1,47 @@
+import React, { createContext, ReactNode, useState } from 'react';
+import { Platform, StyleSheet } from 'react-native';
+
+export type ReservedRegion = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+// native probe is optional so apps without @momo-kits/reserved-regions still bundle
+let ReservedRegionsView: React.ComponentType<any> | undefined;
+try {
+  ReservedRegionsView =
+    require('@momo-kits/reserved-regions').ReservedRegionsView;
+} catch {
+  ReservedRegionsView = undefined;
+}
+
+/**
+ * screen regions the system currently occludes, in window coordinates
+ */
+const ReservedRegionsContext = createContext<ReservedRegion[]>([]);
+
+/**
+ * tracks the system occlusion regions (iOS 27.1+), e.g. the iPhone Duo status bar
+ * cluster growing for a call or a Live Activity
+ */
+const ReservedRegionsProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [regions, setRegions] = useState<ReservedRegion[]>([]);
+
+  return (
+    <ReservedRegionsContext.Provider value={regions}>
+      {children}
+      {Platform.OS === 'ios' && !!ReservedRegionsView && (
+        <ReservedRegionsView
+          style={StyleSheet.absoluteFill}
+          onRegionsChange={setRegions}
+        />
+      )}
+    </ReservedRegionsContext.Provider>
+  );
+};
+
+export { ReservedRegionsContext, ReservedRegionsProvider };

package/Layout/Screen.tsx

@@ -21,7 +21,6 @@ import {
   ScrollViewProps,
   StatusBar,
   StatusBarStyle,
-  useWindowDimensions,
   View,
   ViewProps,
 } from 'react-native';
@@ -43,8 +42,12 @@ import { FloatingButton, FloatingButtonProps } from './FloatingButton';
 import styles from './styles';
 import { HeaderType } from './types';
 import { InputRef } from '../Input';
-import { exportHeaderTitle, getOptions } from '../Application/utils';
-import { validateChildren } from './utils';
+import {
+  exportHeaderTitle,
+  getOptions,
+  useDuoQuickReturn,
+} from '../Application/utils';
+import { getHeaderMargin, useScreenLayout, validateChildren } from './utils';
 import Section from './Section';
 import {
   HeaderBackground,
@@ -53,6 +56,11 @@ import {
   HeaderTitle,
   SearchHeader,
 } from '../Application';
+import {
+  DuoGlassBackground,
+  DuoScrollGradient,
+} from '../Application/Components/DuoGlassBackground';
+import { useDuoTabBarInset } from '../Application/BottomTab/DuoTabBar';
 
 export interface ScreenProps extends ViewProps {
   /**
@@ -118,7 +126,8 @@ export interface ScreenProps extends ViewProps {
   layoutOffset?: -8 | -24 | -56 | number;
 
   /**
-   * Optional. Width of the right header.
+   * 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;
 
@@ -187,7 +196,7 @@ const Screen = forwardRef(
       footerComponent: Footer,
       marginFooter = true,
       layoutOffset = -56,
-      headerRightWidth = 73,
+      headerRightWidth,
       backgroundColor,
       headerType = 'default',
       floatingButtonProps,
@@ -204,8 +213,8 @@ const Screen = forwardRef(
     ref: any,
   ) => {
     const screenRef = useRef<View | ScrollView>(null);
-    const { width: widthDevice } = useWindowDimensions();
-    const { theme, navigator } = useContext(ApplicationContext);
+    const layout = useScreenLayout();
+    const { theme } = useContext(ApplicationContext);
     const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const frame = useSafeAreaFrame();
@@ -245,15 +254,37 @@ const Screen = forwardRef(
     }, [customAnimatedValue, internalShared]);
 
     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;
     let Component: any = View;
 
-    const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
+    const bottomInset =
+      Platform.OS === 'ios' ? 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 { quickReturnOptions, snap: snapQuickReturnHeader } =
+      useDuoQuickReturn(sharedValue, useQuickReturn, heightHeader);
+
     let keyboardOffset = heightHeader - bottomInset;
-    if (headerType === 'extended' || animatedHeader || inputSearchProps) {
+    if (
+      headerType === 'extended' ||
+      animatedHeader ||
+      inputSearchProps ||
+      useDuoGlass
+    ) {
       keyboardOffset = -bottomInset;
     }
 
@@ -261,6 +292,12 @@ const Screen = forwardRef(
      * inject params for screen tracking
      */
     screen?.onSetParams?.(trackingParams);
+    // the screen drives its header, the stack screen's scroll observer stays off
+    screen?.claimHeader?.();
+    useEffect(() => {
+      screen?.syncHeader?.();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     /**
      * export options for screen
@@ -280,9 +317,13 @@ const Screen = forwardRef(
 
           case 'extended':
             options = {
+              ...quickReturnOptions,
               headerShown: true,
               headerTransparent: true,
-              headerBackground: () => null,
+              headerBackground: () =>
+                hasSideBar ? (
+                  <DuoGlassBackground animatedValue={sharedValue} />
+                ) : null,
               headerTitle: (props: any) => <HeaderTitle {...props} />,
             };
             if (inputSearchProps) {
@@ -305,6 +346,19 @@ const Screen = forwardRef(
             break;
 
           default:
+            if (hasSideBar && !inputSearchProps) {
+              options = {
+                ...quickReturnOptions,
+                headerTransparent: true,
+                headerTintColor: Colors.black_17,
+                headerShown: true,
+                headerBackground: () => (
+                  <DuoGlassBackground animatedValue={sharedValue} />
+                ),
+                headerTitle: (props: any) => <HeaderTitle {...props} />,
+              };
+              break;
+            }
             options = {
               headerTransparent: false,
               headerTintColor: Colors.black_17,
@@ -339,7 +393,7 @@ const Screen = forwardRef(
             }
         }
 
-        navigation?.instance?.setOptions(options);
+        navigation?.instance?.setOptions({ header: undefined, ...options });
       },
       [
         gradientColor,
@@ -348,6 +402,8 @@ const Screen = forwardRef(
         navigation?.instance,
         sharedValue,
         useShadowHeader,
+        hasSideBar,
+        quickReturnOptions,
       ],
     );
 
@@ -363,18 +419,26 @@ const Screen = forwardRef(
         }
 
         options = {
+          ...quickReturnOptions,
           headerTintColor: currentTint.current ?? Colors.black_17,
           headerTransparent: true,
-          headerBackground: (props: any) => (
-            <HeaderBackground
-              {...props}
-              animatedValue={sharedValue}
-              useGradient={false}
-              useShadowHeader={useShadowHeader}
-              headerBackground={headerBackground}
-              gradientColor={gradientColor}
-            />
-          ),
+          headerBackground: (props: any) =>
+            hasSideBar ? (
+              // glass shows once the banner has scrolled under the header
+              <DuoGlassBackground
+                animatedValue={sharedValue}
+                fadeStart={Math.max(210 + layoutOffset - heightHeader, 0)}
+              />
+            ) : (
+              <HeaderBackground
+                {...props}
+                animatedValue={sharedValue}
+                useGradient={false}
+                useShadowHeader={useShadowHeader}
+                headerBackground={headerBackground}
+                gradientColor={gradientColor}
+              />
+            ),
           headerTitle: (props: any) => {
             return <HeaderTitle {...props} />;
           },
@@ -395,6 +459,10 @@ const Screen = forwardRef(
         navigation?.instance,
         sharedValue,
         useShadowHeader,
+        hasSideBar,
+        layoutOffset,
+        heightHeader,
+        quickReturnOptions,
       ],
     );
 
@@ -418,14 +486,24 @@ const Screen = forwardRef(
         ),
       };
 
-      navigation?.instance?.setOptions(options);
+      navigation?.instance?.setOptions({ header: undefined, ...options });
     }, [navigation?.instance, sharedValue]);
 
     /**
      * export search header
      */
     const setSearchHeader = (params: SearchHeaderProps) => {
-      const searchWidth = widthDevice - 24;
+      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);
+      }
+      if (layout.statusBarClearance) {
+        searchWidth -=
+          layout.statusBarClearance.left + layout.statusBarClearance.right;
+      }
       const options: StackNavigationOptions = {
         headerRight: undefined,
         headerTitleContainerStyle: {
@@ -437,10 +515,10 @@ const Screen = forwardRef(
           marginHorizontal: 0,
           marginVertical: 0,
           margin: 0,
-          left: Spacing.M,
+          left: searchLeft,
         },
         headerLeft: (props: any) =>
-          params?.hiddenBack ? null : <HeaderLeft {...props} />,
+          params?.hiddenBack ? null : <HeaderLeft {...props} floating />,
         headerTitle: () => (
           <SearchHeader {...params} animatedValue={sharedValue} />
         ),
@@ -536,12 +614,16 @@ const Screen = forwardRef(
       );
     }
 
-    /**
-     * 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.current, {
           toValue: 0,
@@ -591,6 +673,8 @@ const Screen = forwardRef(
                 key={`ScreenItem${index}`}
                 style={{
                   marginTop: space,
+                  marginLeft: layout.insetLeft,
+                  marginRight: layout.insetRight,
                   flex: item.props?.expanded ? 1 : undefined,
                 }}
                 onLayout={item.props?.onLayout}
@@ -611,6 +695,8 @@ const Screen = forwardRef(
             key={`ScreenItem`}
             style={{
               marginTop: space,
+              marginLeft: layout.insetLeft,
+              marginRight: layout.insetRight,
               flex: item?.props?.expanded ? 1 : undefined,
             }}
             onLayout={item?.props?.onLayout}
@@ -637,6 +723,15 @@ 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 contentInsetStyle = !useGridLayout &&
+      hasContentInset && {
+        paddingLeft: layout.insetLeft,
+        paddingRight: layout.insetRight,
+      };
+
     return (
       <View
         style={[
@@ -649,21 +744,36 @@ const Screen = forwardRef(
           },
         ]}
       >
-        <HeaderExtendHeader
-          headerType={headerType}
-          heightHeader={heightHeader}
-          headerRightWidth={headerRightWidth}
-          animatedValue={sharedValue}
-          inputSearchProps={inputSearchProps}
-          navigation={navigation}
-          inputSearchRef={inputSearchRef}
-          useShadowHeader={useShadowHeader}
-          gradientColor={gradientColor}
-          headerBackground={headerBackground}
-        />
+        {useDuoGlass ? (
+          <DuoScrollGradient
+            animatedValue={sharedValue}
+            gradientColor={gradientColor}
+            headerBackground={headerBackground}
+            heightHeader={heightHeader}
+            extended={headerType === 'extended'}
+            followScroll={useQuickReturn}
+          />
+        ) : (
+          <HeaderExtendHeader
+            headerType={headerType}
+            heightHeader={heightHeader}
+            headerRightWidth={headerRightWidth}
+            animatedValue={sharedValue}
+            inputSearchProps={inputSearchProps}
+            navigation={navigation}
+            inputSearchRef={inputSearchRef}
+            useShadowHeader={useShadowHeader}
+            gradientColor={gradientColor}
+            headerBackground={headerBackground}
+          />
+        )}
 
         <KeyboardAvoidingView
-          style={Styles.flex}
+          style={[
+            Styles.flex,
+            useDuoGlass &&
+              (!scrollable || !!Header) && { paddingTop: heightHeader },
+          ]}
           enabled={enableKeyboardAvoidingView}
           keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
           behavior={Platform.select({
@@ -679,10 +789,24 @@ const Screen = forwardRef(
             showsVerticalScrollIndicator={false}
             onScroll={handleScroll}
             onScrollEndDrag={handleScrollEnd}
+            onMomentumScrollEnd={handleMomentumScrollEnd}
             scrollEventThrottle={16}
-            style={[Styles.flex]}
+            style={[
+              Styles.flex,
+              !scrollable && contentInsetStyle,
+              !scrollable &&
+                !Footer &&
+                isTab &&
+                !!duoTabInset && { paddingBottom: duoTabInset },
+            ]}
             contentContainerStyle={[
               scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
+              scrollable &&
+                !Footer &&
+                isTab &&
+                !!duoTabInset && { paddingBottom: duoTabInset },
+              scrollable && contentInsetStyle,
+              useDuoGlass && !Header && { paddingTop: heightHeader },
               scrollViewProps?.contentContainerStyle,
             ]}
           >
@@ -692,28 +816,51 @@ const Screen = forwardRef(
           </Component>
 
           {floatingButtonProps && (
-            <View>
+            <View
+              style={{
+                marginLeft: layout.insetLeft,
+                marginRight: layout.insetRight,
+              }}
+            >
               <FloatingButton
                 {...floatingButtonProps}
                 animatedValue={sharedValue}
-                bottom={Footer || isTab ? 12 : bottomInset + Spacing.S}
+                bottom={
+                  Footer || isTab
+                    ? 12 + (Footer ? 0 : duoTabInset)
+                    : bottomInset + Spacing.S
+                }
               />
             </View>
           )}
 
           {Footer && (
+            // with side insets, the clip keeps the shadow off the side bar, only the top one shows
             <View
+              pointerEvents={'box-none'}
               style={[
-                styles.shadow,
+                hasContentInset && styles.footerClip,
                 {
-                  paddingBottom: bottomInset + Spacing.S,
-                  backgroundColor: theme.colors.background.surface,
+                  marginLeft: layout.insetLeft,
+                  marginRight: layout.insetRight,
                 },
               ]}
             >
-              {/* 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
+                style={[
+                  styles.shadow,
+                  {
+                    paddingBottom:
+                      (isTab && duoTabInset ? duoTabInset : bottomInset) +
+                      Spacing.S,
+                    backgroundColor: theme.colors.background.surface,
+                  },
+                ]}
+              >
+                {/* 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>
           )}
         </KeyboardAvoidingView>

package/Layout/Section.tsx

@@ -1,9 +1,8 @@
-import React, { useContext } from 'react';
-import { Dimensions, View, ViewProps } from 'react-native';
-import { useGridSystem } from './utils';
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+import { useGridSystem, useScreenLayout } from './utils';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
-import { ApplicationContext, MiniAppContext } from '../Context';
 import styles from './styles';
 import { Image } from '../Image';
 import { Spacing } from '../Consts';
@@ -34,18 +33,15 @@ const Section: React.FC<SectionProps> = ({
   style,
   ...props
 }) => {
-  const { showGrid } = useContext(ApplicationContext);
   const { numberOfColumns } = useGridSystem();
+  const { contentWidth } = useScreenLayout();
 
   const gutterSize = 12;
   let margin = 0;
   if (useMargin) {
     margin = 12;
   }
-  let widthSection = Dimensions.get('window').width;
-  if (useMargin) {
-    widthSection = widthSection - margin * 2;
-  }
+  const widthSection = contentWidth - margin * 2;
 
   const sizePerSpan =
     (widthSection - gutterSize * (numberOfColumns - 1)) / numberOfColumns -
@@ -60,13 +56,6 @@ const Section: React.FC<SectionProps> = ({
     },
   };
 
-  /**
-   * render overlay only dev mode
-   */
-  const renderOverlay = () => {
-    return <View pointerEvents={'none'} style={styles.boxGridSection} />;
-  };
-
   return (
     <GridContext.Provider value={gridContext}>
       <View
@@ -90,9 +79,7 @@ const Section: React.FC<SectionProps> = ({
             style={styles.imageBackground}
           />
         )}
-        {/* Render only allowed children as valid React elements */}
         {children}
-        {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>
   );