@momo-kits/foundation 0.167.1-duotest.3 → 0.167.1-duotest.4

package/Application/StackScreen.tsx

@@ -75,13 +75,15 @@ const StackScreen: React.FC<any> = props => {
    */
   const canAutoLayout = Platform.OS === 'ios' && !bottomTab;
   const Observer: React.ComponentType<any> = ScrollObserverView ?? View;
-  const headerClaimed = useRef(false);
+  // screens that drive the header themselves: a root <Screen>, a BottomTab
+  const [headerClaims] = useState(() => new Set<object>());
+  const contentRef = useRef<View>(null);
   const [autoHeader, setAutoHeader] = useState(false);
   const syncHeader = useCallback(() => {
     setAutoHeader(
-      canAutoLayout && layout.isIPhoneDuo && !headerClaimed.current,
+      canAutoLayout && layout.isIPhoneDuo && headerClaims.size === 0,
     );
-  }, [canAutoLayout, layout.isIPhoneDuo]);
+  }, [canAutoLayout, layout.isIPhoneDuo, headerClaims]);
   // parent effects run after the screen's, so a claim made on mount is already in
   useEffect(syncHeader, [syncHeader]);
   const headerScroll = useHeaderScrollState({ navigation }, autoHeader);
@@ -441,10 +443,16 @@ const StackScreen: React.FC<any> = props => {
         onSetParams: (item: ScreenTrackingParams) => {
           tracking.current.params = item;
         },
-        claimHeader: () => {
-          headerClaimed.current = true;
+        claimHeader: (owner: object = headerClaims) => {
+          headerClaims.add(owner);
+        },
+        releaseHeader: (owner: object) => {
+          if (headerClaims.delete(owner)) {
+            syncHeader();
+          }
         },
         syncHeader,
+        contentRef,
       }}
     >
       <TooltipPortalProvider>
@@ -458,7 +466,9 @@ const StackScreen: React.FC<any> = props => {
           >
             {headerScroll.background}
             <Animated.View style={[styles.flex, headerScroll.contentStyle]}>
-              <Component heightHeader={heightHeader} {...data} />
+              <View ref={contentRef} collapsable={false} style={styles.flex}>
+                <Component heightHeader={heightHeader} {...data} />
+              </View>
             </Animated.View>
           </Observer>
         ) : (

package/Layout/Screen.tsx

@@ -10,6 +10,7 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
+  useState,
 } from 'react';
 import {
   Animated,
@@ -213,9 +214,28 @@ const Screen = forwardRef(
     ref: any,
   ) => {
     const screenRef = useRef<View | ScrollView>(null);
-    const layout = useScreenLayout();
+    const rootRef = useRef<View>(null);
     const { theme } = useContext(ApplicationContext);
     const screen: any = useContext(ScreenContext);
+    const screenLayout = useScreenLayout();
+
+    /**
+     * iPhone Duo: a Screen nested in the route's content (e.g. a TabView page) is not
+     * the route's screen. The route keeps clear of the side bar and drives the header,
+     * the nested Screen lays out as plain content.
+     */
+    const [headerOwner] = useState(() => ({}));
+    const nested = useRef(false);
+    const [isNested, setIsNested] = useState(false);
+    const layout = isNested
+      ? {
+          ...screenLayout,
+          insetLeft: 0,
+          insetRight: 0,
+          sideBar: undefined,
+          statusBarClearance: undefined,
+        }
+      : screenLayout;
     const insets = useSafeAreaInsets();
     const frame = useSafeAreaFrame();
     const heightHeader = useHeaderHeight();
@@ -293,9 +313,30 @@ const Screen = forwardRef(
      */
     screen?.onSetParams?.(trackingParams);
     // the screen drives its header, the stack screen's scroll observer stays off
-    screen?.claimHeader?.();
+    if (!nested.current) {
+      screen?.claimHeader?.(headerOwner);
+    }
     useEffect(() => {
+      // passive: the stack screen's content ref attaches after this screen's layout
+      const content = screen?.contentRef?.current;
+      if (!screenLayout.sideBar || !content || !rootRef.current) {
+        return;
+      }
+      rootRef.current.measureLayout(content, (x, y) => {
+        if (Math.abs(x) > 1 || Math.abs(y) > 1) {
+          nested.current = true;
+          setIsNested(true);
+          screen?.releaseHeader?.(headerOwner);
+        }
+      });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [!!screenLayout.sideBar]);
+    useEffect(() => {
+      if (!nested.current) {
+        screen?.claimHeader?.(headerOwner);
+      }
       screen?.syncHeader?.();
+      return () => screen?.releaseHeader?.(headerOwner);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -536,7 +577,9 @@ const Screen = forwardRef(
         StatusBar.setBarStyle(barStyle, true);
       });
 
-      if (animatedHeader) {
+      if (nested.current) {
+        // the route drives the header
+      } else if (animatedHeader) {
         setAnimatedHeader(animatedHeader);
       } else if (inputSearchProps) {
         setAnimatedSearch();
@@ -556,6 +599,7 @@ const Screen = forwardRef(
       setAnimatedHeader,
       setAnimatedSearch,
       setHeaderType,
+      isNested,
     ]);
 
     /**
@@ -596,7 +640,7 @@ const Screen = forwardRef(
               if (offsetY > 50) {
                 color = Colors.black_17;
               }
-              if (color !== currentTint.current) {
+              if (!nested.current && color !== currentTint.current) {
                 currentTint.current = color;
                 navigation?.setOptions({
                   headerTintColor: color,
@@ -734,6 +778,7 @@ const Screen = forwardRef(
 
     return (
       <View
+        ref={rootRef}
         style={[
           Styles.flex,
           {
@@ -754,18 +799,20 @@ const Screen = forwardRef(
             followScroll={useQuickReturn}
           />
         ) : (
-          <HeaderExtendHeader
-            headerType={headerType}
-            heightHeader={heightHeader}
-            headerRightWidth={headerRightWidth}
-            animatedValue={sharedValue}
-            inputSearchProps={inputSearchProps}
-            navigation={navigation}
-            inputSearchRef={inputSearchRef}
-            useShadowHeader={useShadowHeader}
-            gradientColor={gradientColor}
-            headerBackground={headerBackground}
-          />
+          !isNested && (
+            <HeaderExtendHeader
+              headerType={headerType}
+              heightHeader={heightHeader}
+              headerRightWidth={headerRightWidth}
+              animatedValue={sharedValue}
+              inputSearchProps={inputSearchProps}
+              navigation={navigation}
+              inputSearchRef={inputSearchRef}
+              useShadowHeader={useShadowHeader}
+              gradientColor={gradientColor}
+              headerBackground={headerBackground}
+            />
+          )
         )}
 
         <KeyboardAvoidingView

package/package.json

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