@momo-kits/foundation 0.167.1-duo.2 → 0.167.1-duo.4

package/Application/ModalScreen.tsx

@@ -8,14 +8,17 @@ import {
   Platform,
   Pressable,
   StyleSheet,
+  useWindowDimensions,
   View,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
+import { getDuoTopInset, isIPhoneDuo } from './device';
 import { scheduleOnRN } from 'react-native-worklets';
 
 const ModalScreen: React.FC<any> = props => {
@@ -37,6 +40,8 @@ const Modal: React.FC<ModalParams> = props => {
     title,
   } = props.route.params;
   const Component = useRef(screen).current;
+  const insets = useSafeAreaInsets();
+  const windowSize = useWindowDimensions();
 
   /**
    * Fire auto_popup_displayed tracking event on mount
@@ -147,6 +152,15 @@ const Modal: React.FC<ModalParams> = props => {
               opacity,
               transform: [{ scale }],
             },
+            // center below the side status bar and above the home indicator
+            isIPhoneDuo() && {
+              marginTop: getDuoTopInset(
+                insets,
+                windowSize.width,
+                windowSize.height,
+              ),
+              marginBottom: insets.bottom,
+            },
             modalStyle,
           ]}
         >

package/Application/NavigationContainer.tsx

@@ -31,6 +31,7 @@ import { HeaderTitle } from './Components/HeaderTitle';
 import { HeaderBackground } from './Components/HeaderBackground';
 import { type EdgeInsets } from 'react-native-safe-area-context';
 import { useScreenLayout } from '../Layout';
+import { ReservedRegionsProvider } from '../Layout/ReservedRegions';
 
 const Stack = createStackNavigator();
 
@@ -76,17 +77,19 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
         frame: { x: 0, y: 0, width: 0, height: 0 },
       }}
     >
-      <MiniAppContext.Provider value={mergedContext}>
-        <Navigation
-          screen={screen}
-          theme={theme}
-          options={options}
-          maxApi={maxApi}
-          setCurrentContext={setCurrentContext}
-          initialParams={initialParams}
-          localize={localize}
-        />
-      </MiniAppContext.Provider>
+      <ReservedRegionsProvider>
+        <MiniAppContext.Provider value={mergedContext}>
+          <Navigation
+            screen={screen}
+            theme={theme}
+            options={options}
+            maxApi={maxApi}
+            setCurrentContext={setCurrentContext}
+            initialParams={initialParams}
+            localize={localize}
+          />
+        </MiniAppContext.Provider>
+      </ReservedRegionsProvider>
     </SafeAreaProvider>
   );
 };

package/Application/device.ts

@@ -0,0 +1,29 @@
+import { Dimensions, Platform, ScaledSize } from 'react-native';
+import type { EdgeInsets } from 'react-native-safe-area-context';
+
+// widest short side of any single-display iPhone
+const IPHONE_MAX_SHORT_SIDE = 440;
+
+// iPhone Duo reports idiom "phone"; 'screen' stays on the outer display, so it
+// still matches when Split View narrows the window
+const isIPhoneDuo = () => {
+  if (Platform.OS !== 'ios' || Platform.isPad) {
+    return false;
+  }
+  const shortSide = (size: ScaledSize) => Math.min(size.width, size.height);
+  return (
+    Math.max(
+      shortSide(Dimensions.get('screen')),
+      shortSide(Dimensions.get('window')),
+    ) > IPHONE_MAX_SHORT_SIDE
+  );
+};
+
+// portrait side status bar is about twice as tall as its inset is wide
+const getDuoTopInset = (insets: EdgeInsets, width: number, height: number) =>
+  Math.max(
+    insets.top,
+    height > width ? Math.max(insets.left, insets.right) * 2 : 0,
+  );
+
+export { isIPhoneDuo, getDuoTopInset };

package/Application/types.ts

@@ -333,6 +333,11 @@ export type BottomTabProps = {
     blur?: (e: EventArg<'blur', false, unknown>) => void;
   };
   floatingButton?: FloatingButtonProps;
+  /**
+   * iPhone Duo: when the side bar can't hold both bars, which one starts compressed;
+   * tapping the compressed one swaps them. Defaults to 'toolbar'
+   */
+  compressionBehavior?: 'toolbar' | 'tabBar';
 };
 
 export type FloatingButtonProps = {

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

@@ -9,6 +9,7 @@ import React, {
   useContext,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
 } from 'react';
 import {
@@ -24,7 +25,11 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import { useSharedValue, withTiming } from 'react-native-reanimated';
+import {
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import {
   useSafeAreaFrame,
   useSafeAreaInsets,
@@ -52,6 +57,12 @@ import {
   HeaderTitle,
   SearchHeader,
 } from '../Application';
+import {
+  DuoGlassBackground,
+  DuoScrollGradient,
+} from '../Application/Components/DuoGlassBackground';
+import { DuoQuickReturnHeader } from '../Application/Components/DuoQuickReturnHeader';
+import { useDuoTabBarInset } from '../Application/BottomTab/DuoTabBar';
 
 export interface ScreenProps extends ViewProps {
   /**
@@ -247,13 +258,64 @@ 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;
     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 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],
+    );
+
     let keyboardOffset = heightHeader - bottomInset;
-    if (headerType === 'extended' || animatedHeader || inputSearchProps) {
+    if (
+      headerType === 'extended' ||
+      animatedHeader ||
+      inputSearchProps ||
+      useDuoGlass
+    ) {
       keyboardOffset = -bottomInset;
     }
 
@@ -280,9 +342,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 +371,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 +418,7 @@ const Screen = forwardRef(
             }
         }
 
-        navigation?.instance?.setOptions(options);
+        navigation?.instance?.setOptions({ header: undefined, ...options });
       },
       [
         gradientColor,
@@ -348,6 +427,8 @@ const Screen = forwardRef(
         navigation?.instance,
         sharedValue,
         useShadowHeader,
+        hasSideBar,
+        quickReturnOptions,
       ],
     );
 
@@ -363,18 +444,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 +484,10 @@ const Screen = forwardRef(
         navigation?.instance,
         sharedValue,
         useShadowHeader,
+        hasSideBar,
+        layoutOffset,
+        heightHeader,
+        quickReturnOptions,
       ],
     );
 
@@ -418,7 +511,7 @@ const Screen = forwardRef(
         ),
       };
 
-      navigation?.instance?.setOptions(options);
+      navigation?.instance?.setOptions({ header: undefined, ...options });
     }, [navigation?.instance, sharedValue]);
 
     /**
@@ -546,8 +639,36 @@ const Screen = forwardRef(
      * handle scroll end
      * @param e
      */
+    /**
+     * a half-shown quick return header settles fully in or out
+     */
+    const snapQuickReturnHeader = (offsetY: number) => {
+      const hide = headerHide.value;
+      // above heightHeader the header still sits on the content
+      if (
+        !useQuickReturn ||
+        offsetY < heightHeader ||
+        hide <= 0 ||
+        hide >= heightHeader
+      ) {
+        return;
+      }
+      headerHide.value = withTiming(
+        hide > heightHeader / 2 ? heightHeader : 0,
+        { duration: 200 },
+      );
+    };
+
+    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,
@@ -668,21 +789,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({
@@ -698,11 +834,24 @@ const Screen = forwardRef(
             showsVerticalScrollIndicator={false}
             onScroll={handleScroll}
             onScrollEndDrag={handleScrollEnd}
+            onMomentumScrollEnd={handleMomentumScrollEnd}
             scrollEventThrottle={16}
-            style={[Styles.flex, !scrollable && contentInsetStyle]}
+            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,
             ]}
           >
@@ -721,7 +870,11 @@ const Screen = forwardRef(
               <FloatingButton
                 {...floatingButtonProps}
                 animatedValue={sharedValue}
-                bottom={Footer || isTab ? 12 : bottomInset + Spacing.S}
+                bottom={
+                  Footer || isTab
+                    ? 12 + (Footer ? 0 : duoTabInset)
+                    : bottomInset + Spacing.S
+                }
               />
             </View>
           )}
@@ -731,7 +884,9 @@ const Screen = forwardRef(
               style={[
                 styles.shadow,
                 {
-                  paddingBottom: bottomInset + Spacing.S,
+                  paddingBottom:
+                    (isTab && duoTabInset ? duoTabInset : bottomInset) +
+                    Spacing.S,
                   paddingLeft: layout.insetLeft,
                   paddingRight: layout.insetRight,
                   backgroundColor: theme.colors.background.surface,

package/Layout/utils.ts

@@ -5,6 +5,7 @@ import {
   SafeAreaInsetsContext,
 } from 'react-native-safe-area-context';
 import { Spacing } from '../Consts';
+import { ReservedRegion, ReservedRegionsContext } from './ReservedRegions';
 
 /**
  * validate children type
@@ -70,6 +71,12 @@ const HeaderMetrics = {
  * - 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
  */
 const DuoMetrics = {
   maxAspectRatio: 1.6,
@@ -78,10 +85,40 @@ const DuoMetrics = {
   itemPitch: 50,
   firstItemTop: 170,
   firstItemTopLandscape: 120,
+  outerHeaderHeight: 76,
+  outerCameraCenterY: 45,
+  edgeInset: 24,
 };
 
 const NO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
 
+/**
+ * how far system regions reach into a side strip from its top and from its bottom end
+ * (e.g. the camera, which sits at either end depending on the rotation)
+ */
+const getStripOcclusion = (
+  regions: ReservedRegion[],
+  stripLeft: number,
+  stripRight: number,
+  windowHeight: number,
+) =>
+  regions.reduce(
+    (occlusion, region) => {
+      const overlapsStrip =
+        region.x < stripRight && region.x + region.width > stripLeft;
+      if (!overlapsStrip) {
+        return occlusion;
+      }
+      if (region.y + region.height / 2 < windowHeight / 2) {
+        occlusion.top = Math.max(occlusion.top, region.y + region.height);
+      } else {
+        occlusion.bottom = Math.max(occlusion.bottom, windowHeight - region.y);
+      }
+      return occlusion;
+    },
+    { top: 0, bottom: 0 },
+  );
+
 const isIPhone = () =>
   Platform.OS === 'ios' && Platform.constants.interfaceIdiom === 'phone';
 
@@ -120,6 +157,11 @@ export type SideBarLayout = {
    * 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 = {
@@ -201,8 +243,9 @@ const isIPhoneDuoLayout = (
 const useScreenLayout = (): ScreenLayout => {
   const { width, height } = useWindowDimensions();
   const insets = useContext(SafeAreaInsetsContext) ?? NO_INSETS;
+  const reservedRegions = useContext(ReservedRegionsContext);
 
-  const headerLayout = getHeaderLayout(insets.top);
+  let headerLayout = getHeaderLayout(insets.top);
   const isIPhoneDuo = isIPhoneDuoLayout(width, height, insets);
   if (!isIPhoneDuo) {
     return {
@@ -224,17 +267,42 @@ const useScreenLayout = (): ScreenLayout => {
     let top = insets.top + HeaderMetrics.barHeight + Spacing.M;
     if (insets.top < HeaderMetrics.statusBarMinInset) {
       // status bar lives in the strip: start under its cluster, as the native bar does
-      const isInnerLandscape =
-        width > height && height >= DuoMetrics.innerMinHeight;
-      top = isInnerLandscape
-        ? DuoMetrics.firstItemTopLandscape
-        : DuoMetrics.firstItemTop;
+      const isLandscape = width > height;
+      if (!isLandscape) {
+        top = DuoMetrics.firstItemTop;
+      } else if (height >= DuoMetrics.innerMinHeight) {
+        top = DuoMetrics.firstItemTopLandscape;
+      } else {
+        // outer display in landscape: no status bar in the strip
+        top = DuoMetrics.edgeInset;
+      }
+
+      if (height > width && width < DuoMetrics.innerMinHeight) {
+        // outer display: the row starts below the top so the title centers on the camera
+        headerLayout = {
+          headerHeight: DuoMetrics.outerHeaderHeight,
+          headerStatusBarHeight:
+            DuoMetrics.outerCameraCenterY * 2 - DuoMetrics.outerHeaderHeight,
+        };
+      }
     }
 
+    const edge = insets.right >= insets.left ? 'right' : 'left';
+    const stripLeft = edge === 'right' ? width - sideInset : 0;
+    // keep controls clear of the camera and of the status bar cluster, which grows for
+    // calls and Live Activities. Region frames already include the system's margin
+    const occlusion = getStripOcclusion(
+      reservedRegions,
+      stripLeft,
+      stripLeft + sideInset,
+      height,
+    );
+
     sideBar = {
-      edge: insets.right >= insets.left ? 'right' : 'left',
+      edge,
       width: sideInset,
-      top,
+      top: Math.max(top, occlusion.top),
+      bottom: Math.max(DuoMetrics.edgeInset, occlusion.bottom),
     };
   }