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

package/Application/BottomTab/index.tsx

@@ -27,6 +27,8 @@ import StackScreen from '../StackScreen';
 import { BottomTabProps } from '../types';
 import { getOptions, getStackOptions, useAppState } from '../utils';
 import BottomTabBar from './BottomTabBar';
+import { DuoTabBar } from './DuoTabBar';
+import { DuoBarCompressionProvider } from './DuoBarCompression';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { useScreenLayout } from '../../Layout';
 
@@ -204,8 +206,10 @@ const BottomTab: React.FC<BottomTabProps> = ({
   navigation,
   initialRouteName,
   floatingButton,
+  compressionBehavior,
 }) => {
   const { theme, navigator } = useContext(ApplicationContext);
+  const { isIPhoneDuo } = useScreenLayout();
   const dimensions = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const initialIndex = tabs.findIndex(i => i.name === initialRouteName);
@@ -279,138 +283,156 @@ const BottomTab: React.FC<BottomTabProps> = ({
   };
 
   return (
-    <Tab.Navigator
-      screenOptions={{
-        headerShown: false,
-        headerTransparent: true,
-        headerBackground: undefined,
-        tabBarLabelPosition: 'below-icon',
-        tabBarBackground: () => (
-          <View
-            style={[
-              styles.container,
-              {
-                backgroundColor: theme.colors.background.surface,
-              },
-            ]}
-          >
-            <Animated.View style={[styles.indicatorContainer, indicatorStyle]}>
-              <View
-                style={[
-                  styles.indicator,
-                  { backgroundColor: theme.colors.primary },
-                ]}
-              />
-            </Animated.View>
-          </View>
-        ),
-      }}
-      tabBar={props => (
-        <BottomTabBar
-          {...props}
-          floatingButton={floatingButton}
-          inactiveTintColor={theme.colors.text.hint}
-          activeTintColor={theme.colors.primary}
-          style={[
-            {
-              height:
-                64 +
-                (Platform.OS === 'ios'
-                  ? Math.min(insets.bottom, 21)
-                  : insets.bottom),
-            },
-          ]}
-        />
-      )}
-      initialRouteName={initialRouteName}
+    <DuoBarCompressionProvider
+      behavior={compressionBehavior}
+      tabCount={tabs.length}
+      hasQr={!!floatingButton}
     >
-      {tabs.map((item, index) => {
-        const isNum = !isNaN(parseInt(`${item?.badgeLabel}`, 10));
-        const isDot = typeof item?.badgeLabel === 'string' && !item?.badgeLabel;
-        const isNumZero = isNum && Number(item.badgeLabel) === 0;
-
-        let badgeLabel = item?.badgeLabel;
-        if (isNumZero) {
-          badgeLabel = undefined;
+      <Tab.Navigator
+        screenOptions={{
+          headerShown: false,
+          headerTransparent: true,
+          headerBackground: undefined,
+          tabBarLabelPosition: 'below-icon',
+          tabBarBackground: () => (
+            <View
+              style={[
+                styles.container,
+                {
+                  backgroundColor: theme.colors.background.surface,
+                },
+              ]}
+            >
+              <Animated.View
+                style={[styles.indicatorContainer, indicatorStyle]}
+              >
+                <View
+                  style={[
+                    styles.indicator,
+                    { backgroundColor: theme.colors.primary },
+                  ]}
+                />
+              </Animated.View>
+            </View>
+          ),
+        }}
+        tabBar={props =>
+          isIPhoneDuo ? (
+            <DuoTabBar
+              {...props}
+              floatingButton={floatingButton}
+              inactiveTintColor={theme.colors.text.default}
+              activeTintColor={theme.colors.primary}
+            />
+          ) : (
+            <BottomTabBar
+              {...props}
+              floatingButton={floatingButton}
+              inactiveTintColor={theme.colors.text.hint}
+              activeTintColor={theme.colors.primary}
+              style={[
+                {
+                  height:
+                    64 +
+                    (Platform.OS === 'ios'
+                      ? Math.min(insets.bottom, 21)
+                      : insets.bottom),
+                },
+              ]}
+            />
+          )
         }
+        initialRouteName={initialRouteName}
+      >
+        {tabs.map((item, index) => {
+          const isNum = !isNaN(parseInt(`${item?.badgeLabel}`, 10));
+          const isDot =
+            typeof item?.badgeLabel === 'string' && !item?.badgeLabel;
+          const isNumZero = isNum && Number(item.badgeLabel) === 0;
 
-        let badgeStyle: {
-          marginRight: number;
-          top: number;
-          backgroundColor: string;
-          width?: number;
-        } = {
-          marginRight: -8,
-          top: -4,
-          backgroundColor: Colors.orange_03,
-        };
+          let badgeLabel = item?.badgeLabel;
+          if (isNumZero) {
+            badgeLabel = undefined;
+          }
 
-        if (isNum) {
-          badgeStyle = {
-            marginRight: -4,
+          let badgeStyle: {
+            marginRight: number;
+            top: number;
+            backgroundColor: string;
+            width?: number;
+          } = {
+            marginRight: -8,
             top: -4,
-            backgroundColor: Colors.red_03,
-          };
-        }
-        if (isDot) {
-          badgeStyle = {
-            marginRight: -2,
-            top: -2,
             backgroundColor: Colors.orange_03,
-            width: 12,
           };
-        }
 
-        return (
-          <Tab.Screen
-            key={`BottomTab-${item.name}`}
-            name={item.name}
-            component={TabScreen}
-            initialParams={{ ...item, nested, index }}
-            listeners={handler}
-            options={{
-              tabBarLabel: ({ focused, color }) => {
-                return (
-                  <Text
-                    numberOfLines={1}
-                    typography={
-                      focused ? 'label_xs_medium' : 'description_xs_regular'
-                    }
-                    color={color}
-                  >
-                    {item.label}
-                  </Text>
-                );
-              },
-              title: item.label,
-              tabBarStyle: [
-                {
-                  height: 64,
-                },
-                styles.tabStyle,
-              ],
-              tabBarBadge: badgeLabel,
-              tabBarBadgeStyle: [
-                {
-                  borderColor: 'white',
-                  borderWidth: 2,
-                  fontSize: 10,
-                  lineHeight: 14,
-                  fontWeight: 'bold',
-                  alignSelf: 'center',
-                  fontFamily: exportFontFamily('bold'),
+          if (isNum) {
+            badgeStyle = {
+              marginRight: -4,
+              top: -4,
+              backgroundColor: Colors.red_03,
+            };
+          }
+          if (isDot) {
+            badgeStyle = {
+              marginRight: -2,
+              top: -2,
+              backgroundColor: Colors.orange_03,
+              width: 12,
+            };
+          }
+
+          return (
+            <Tab.Screen
+              key={`BottomTab-${item.name}`}
+              name={item.name}
+              component={TabScreen}
+              initialParams={{ ...item, nested, index }}
+              listeners={handler}
+              options={{
+                tabBarLabel: ({ focused, color }) => {
+                  return (
+                    <Text
+                      numberOfLines={1}
+                      typography={
+                        focused ? 'label_xs_medium' : 'description_xs_regular'
+                      }
+                      color={color}
+                    >
+                      {item.label}
+                    </Text>
+                  );
                 },
-                badgeStyle,
-              ],
-              tabBarIcon: ({ color }) => (
-                <Icon source={item.icon} color={color} size={28} />
-              ),
-              ...item,
-            }}
-          />
-        );
-      })}
-    </Tab.Navigator>
+                title: item.label,
+                tabBarStyle: [
+                  {
+                    height: 64,
+                  },
+                  styles.tabStyle,
+                ],
+                tabBarBadge: badgeLabel,
+                tabBarBadgeStyle: [
+                  {
+                    borderColor: 'white',
+                    borderWidth: 2,
+                    fontSize: 10,
+                    lineHeight: 14,
+                    fontWeight: 'bold',
+                    alignSelf: 'center',
+                    fontFamily: exportFontFamily('bold'),
+                  },
+                  badgeStyle,
+                ],
+                tabBarIcon: ({ color }) => (
+                  <Icon source={item.icon} color={color} size={28} />
+                ),
+                ...item,
+              }}
+            />
+          );
+        })}
+      </Tab.Navigator>
+    </DuoBarCompressionProvider>
   );
 };
 

package/Application/Components/DuoGlassBackground.tsx

@@ -0,0 +1,179 @@
+import React, { useContext, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import { ApplicationContext } from '../../Context';
+import { Shadow } from '../../Consts';
+import { Image } from '../../Image';
+import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
+import { GlassView } from './OptionalGlassView';
+
+// extended headers run their gradient this far below the header, as off Duo
+const EXTENDED_GRADIENT_EXTRA = 52;
+// scroll distance over which the extended gradient collapses to the header
+const EXTENDED_COLLAPSE_DISTANCE = 100;
+// scroll distance over which the bar material fades in
+const FADE_DISTANCE = 16;
+const TRANSLUCENT_ALPHA = 'CC';
+
+/**
+ * iPhone Duo header background: glass running edge to edge, behind the status bar
+ * column too, shown once content scrolls under it
+ */
+const DuoGlassBackground: React.FC<{
+  animatedValue?: AnimatedCompatValue;
+  // scroll offset where the bar starts to show, e.g. below an animated banner
+  fadeStart?: number;
+}> = ({ animatedValue, fadeStart = 0 }) => {
+  const { theme } = useContext(ApplicationContext);
+  const sharedValue = useNormalizedSharedValue(animatedValue);
+  const [scrolled, setScrolled] = useState(false);
+
+  useAnimatedReaction(
+    () => sharedValue.value > fadeStart,
+    (isScrolled, wasScrolled) => {
+      if (GlassView && isScrolled !== wasScrolled) {
+        runOnJS(setScrolled)(isScrolled);
+      }
+    },
+    [fadeStart],
+  );
+
+  const fadeStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(
+      sharedValue.value,
+      [fadeStart, fadeStart + FADE_DISTANCE],
+      [0, 1],
+      Extrapolation.CLAMP,
+    ),
+  }));
+
+  return (
+    <View pointerEvents={'none'} style={StyleSheet.absoluteFill}>
+      {GlassView ? (
+        // UIVisualEffectView breaks under alpha, so glass toggles its effect instead
+        <GlassView
+          effect={scrolled ? 'glass' : 'none'}
+          useShadow
+          style={StyleSheet.absoluteFill}
+        />
+      ) : (
+        <Animated.View
+          style={[
+            StyleSheet.absoluteFill,
+            styles.translucentBar,
+            {
+              backgroundColor:
+                theme.colors.background.surface + TRANSLUCENT_ALPHA,
+              borderBottomColor: theme.colors.border.default,
+            },
+            fadeStyle,
+          ]}
+        />
+      )}
+    </View>
+  );
+};
+
+/**
+ * pink header gradient drawn under the content, fading out on scroll as main's extended
+ * header does: header-high for default headers, 52 taller (collapsing) for extended
+ */
+const DuoScrollGradient: React.FC<{
+  animatedValue?: AnimatedCompatValue;
+  gradientColor?: string;
+  headerBackground?: string;
+  heightHeader: number;
+  extended?: boolean;
+  // quick return header: the gradient leaves with the content instead of fading
+  followScroll?: boolean;
+}> = ({
+  animatedValue,
+  gradientColor,
+  headerBackground,
+  heightHeader,
+  extended,
+  followScroll,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const sharedValue = useNormalizedSharedValue(animatedValue);
+  const color = gradientColor ?? theme.colors.gradient;
+  const image = headerBackground ?? theme.assets?.headerBackground;
+
+  const scrollStyle = useAnimatedStyle(() => {
+    if (followScroll) {
+      return {
+        height: heightHeader + (extended ? EXTENDED_GRADIENT_EXTRA : 0),
+        transform: [{ translateY: -Math.max(sharedValue.value, 0) }],
+      };
+    }
+    return {
+      height: extended
+        ? interpolate(
+            sharedValue.value,
+            [0, EXTENDED_COLLAPSE_DISTANCE],
+            [heightHeader + EXTENDED_GRADIENT_EXTRA, heightHeader],
+            Extrapolation.CLAMP,
+          )
+        : heightHeader,
+      opacity: interpolate(
+        sharedValue.value,
+        [0, EXTENDED_GRADIENT_EXTRA],
+        [1, 0],
+        Extrapolation.CLAMP,
+      ),
+    };
+  });
+
+  if (!color) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      pointerEvents={'none'}
+      style={[styles.gradient, scrollStyle]}
+    >
+      <LinearGradient
+        colors={[color, color + '00']}
+        style={StyleSheet.absoluteFill}
+      >
+        {!!image && (
+          <Image
+            style={styles.gradientFill}
+            source={{ uri: image }}
+            loading={false}
+          />
+        )}
+      </LinearGradient>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  translucentBar: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    ...Shadow.Light,
+  },
+  gradient: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    overflow: 'hidden',
+  },
+  // banner image keeps its 375:154 shape, the gradient box clips it
+  gradientFill: {
+    width: '100%',
+    position: 'absolute',
+    aspectRatio: 375 / 154,
+  },
+});
+
+export { DuoGlassBackground, DuoScrollGradient };

package/Application/Components/DuoQuickReturnHeader.tsx

@@ -0,0 +1,42 @@
+import React, { createContext, useContext } from 'react';
+import { StackHeaderProps, Header } from '@react-navigation/stack';
+import Animated, {
+  SharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+
+// how far the header is pushed above the top edge
+const DuoHeaderOffsetContext = createContext<SharedValue<number> | undefined>(
+  undefined,
+);
+
+/**
+ * iPhone Duo header that leaves with the content and comes back when scrolling back
+ */
+const DuoQuickReturnHeader: React.FC<
+  StackHeaderProps & { offset: SharedValue<number> }
+> = ({ offset, ...props }) => {
+  const style = useAnimatedStyle(() => ({
+    transform: [{ translateY: -offset.value }],
+  }));
+
+  return (
+    <DuoHeaderOffsetContext.Provider value={offset}>
+      <Animated.View pointerEvents={'box-none'} style={style}>
+        <Header {...props} />
+      </Animated.View>
+    </DuoHeaderOffsetContext.Provider>
+  );
+};
+
+/**
+ * side bar controls render inside the header; this cancels its offset so they stay put
+ */
+const useSideBarCounterStyle = () => {
+  const offset = useContext(DuoHeaderOffsetContext);
+  return useAnimatedStyle(() => ({
+    transform: [{ translateY: offset ? offset.value : 0 }],
+  }));
+};
+
+export { DuoQuickReturnHeader, useSideBarCounterStyle };

package/Application/Components/HeaderLeft.tsx

@@ -5,7 +5,9 @@ import { ApplicationContext, MiniAppContext } from '../../Context';
 import { PopupNotify } from '../../Popup';
 import { NavigationButton } from './NavigationButton';
 import { SideBarButton } from './SideBarButton';
+import Animated from 'react-native-reanimated';
 import { useSideBarItemStyle } from '../../Layout/utils';
+import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
 
 /**
  * default header left used for nav
@@ -20,6 +22,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   const context = useContext<any>(MiniAppContext);
   const { navigator } = useContext(ApplicationContext);
   const sideBarStyle = useSideBarItemStyle('left', 0);
+  const counterStyle = useSideBarCounterStyle();
 
   const goBack = useCallback(() => {
     const canGoBack = navigator?.ref?.current?.canGoBack?.();
@@ -78,14 +81,17 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
   if (floating && sideBarStyle) {
     return (
-      <View style={sideBarStyle} pointerEvents={'box-none'}>
+      <Animated.View
+        style={[sideBarStyle, counterStyle]}
+        pointerEvents={'box-none'}
+      >
         <SideBarButton
           accessibilityLabel="btn_navigation_back"
           icon="arrow-back"
           tintColor={tintColor}
           onPress={goBackSafe}
         />
-      </View>
+      </Animated.View>
     );
   }
 

package/Application/Components/HeaderRight.tsx

@@ -13,8 +13,12 @@ import { PopupNotify } from '../../Popup';
 import { Tool, ToolGroup } from '../types';
 import { Icon } from '../../Icon';
 import { Text } from '../../Text';
+import Animated from 'react-native-reanimated';
 import { useSideBarItemStyle } from '../../Layout/utils';
+import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
 import { SideBarButton, SideBarGroup, SideBarGroupItem } from './SideBarButton';
+import { useDuoBarCompression } from '../BottomTab/DuoBarCompression';
+import { DuoMetrics } from '../../Layout/utils';
 
 const DID_SYNC_NEW_HOME = 'did_sync_new_home';
 
@@ -26,6 +30,7 @@ const HeaderRight: React.FC<any> = props => {
   const { headerRight = {}, floating = false } = props;
   const { useOnBoarding = false, buttonOnBoarding, onPress } = headerRight;
   const sideBarStyle = useSideBarItemStyle('right', 1);
+  const counterStyle = useSideBarCounterStyle();
 
   if (typeof props.headerRight === 'function') {
     return props.headerRight(props);
@@ -43,13 +48,16 @@ const HeaderRight: React.FC<any> = props => {
 
   if (floating && sideBarStyle) {
     return (
-      <View style={sideBarStyle} pointerEvents={'box-none'}>
+      <Animated.View
+        style={[sideBarStyle, counterStyle]}
+        pointerEvents={'box-none'}
+      >
         <HeaderToolkitAction
           {...props.headerRight}
           tintColor={props.tintColor}
           vertical
         />
-      </View>
+      </Animated.View>
     );
   }
 
@@ -75,6 +83,8 @@ const HeaderToolkitAction: React.FC<any> = ({
 }) => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
+  const { toolbarCompressed, toolbarHidden, expandToolbar, setToolbarHeight } =
+    useDuoBarCompression();
 
   const [isFavorite, setIsFavorite] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -281,6 +291,41 @@ const HeaderToolkitAction: React.FC<any> = ({
     ? '16_navigation_close_circle'
     : '16_basic_home';
 
+  const groupCount = useHelpCenter ? 2 : 1;
+  // Back slot, the optional shortcut, then the help/home capsule
+  const fullToolbarHeight =
+    DuoMetrics.controlSize +
+    Spacing.M +
+    (useShortcut ? DuoMetrics.controlSize + Spacing.M : 0) +
+    (groupCount > 1
+      ? groupCount * DuoMetrics.itemPitch
+      : DuoMetrics.controlSize);
+
+  useEffect(() => {
+    if (vertical) {
+      setToolbarHeight?.(fullToolbarHeight);
+    }
+  }, [vertical, fullToolbarHeight, setToolbarHeight]);
+
+  // an open tab rail takes this slot for a moment
+  if (vertical && toolbarHidden) {
+    return null;
+  }
+
+  // HIG "Toolbar compressed": tools fold into one button; tapping it expands the
+  // toolbar and compresses the tab bar instead. Not the useMore icon, to tell them apart
+  if (vertical && toolbarCompressed) {
+    return (
+      <SideBarButton
+        accessibilityLabel={'btn_navigation_toolbar'}
+        icon={'navigation_menu'}
+        tintColor={tintColor}
+        showBadge={showBadge}
+        onPress={expandToolbar}
+      />
+    );
+  }
+
   if (vertical) {
     return (
       <View style={styles.sideBarColumn}>

package/Application/Components/OptionalGlassView.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+
+// native glass is optional so apps without @momo-kits/glass-view still bundle
+let GlassView: React.ComponentType<any> | undefined;
+try {
+  GlassView = require('@momo-kits/glass-view').GlassView;
+} catch {
+  GlassView = undefined;
+}
+
+export { GlassView };