@momo-kits/foundation 0.167.1-duo.1 → 0.167.1-duo.3

package/Application/BottomTab/index.tsx

@@ -27,7 +27,9 @@ import StackScreen from '../StackScreen';
 import { BottomTabProps } from '../types';
 import { getOptions, getStackOptions, useAppState } from '../utils';
 import BottomTabBar from './BottomTabBar';
+import { DuoTabBar } from './DuoTabBar';
 import { ApplicationContext, MiniAppContext } from '../../Context';
+import { useScreenLayout } from '../../Layout';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -36,7 +38,13 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const { nested, options, screen, initialParams } = route?.params;
-  const insets = useSafeAreaInsets();
+  const { headerHeight, headerStatusBarHeight } = useScreenLayout();
+  const headerStyleOptions = {
+    headerStyle: {
+      height: headerHeight,
+    },
+    headerStatusBarHeight,
+  };
 
   const opacityValue = 0.3;
   const scaleValue = 0.97;
@@ -139,11 +147,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
     return (
       <Animated.View style={[styles.container, tabAnimatedStyle]}>
         <Stack.Navigator
-          screenOptions={{
-            headerStyle: {
-              height: 52 + insets.top,
-            },
-          }}
+          screenOptions={headerStyleOptions}
         >
           <Stack.Screen
             name="Stack"
@@ -174,11 +178,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
       <NavigationIndependentTree>
         <NavigationContainer>
           <Stack.Navigator
-            screenOptions={{
-              headerStyle: {
-                height: 52 + insets.top,
-              },
-            }}
+            screenOptions={headerStyleOptions}
           >
             <Stack.Screen
               name="Stack"
@@ -207,6 +207,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
   floatingButton,
 }) => {
   const { theme, navigator } = useContext(ApplicationContext);
+  const { isIPhoneDuo } = useScreenLayout();
   const dimensions = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const initialIndex = tabs.findIndex(i => i.name === initialRouteName);
@@ -306,23 +307,32 @@ const BottomTab: React.FC<BottomTabProps> = ({
           </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),
-            },
-          ]}
-        />
-      )}
+      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) => {

package/Application/Components/DuoGlassBackground.tsx

@@ -0,0 +1,177 @@
+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: header-high for default headers
+ * (scrolls away), 52 taller for extended ones (collapses and fades, as off Duo)
+ */
+const DuoScrollGradient: React.FC<{
+  animatedValue?: AnimatedCompatValue;
+  gradientColor?: string;
+  headerBackground?: string;
+  heightHeader: number;
+  extended?: boolean;
+}> = ({
+  animatedValue,
+  gradientColor,
+  headerBackground,
+  heightHeader,
+  extended,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const sharedValue = useNormalizedSharedValue(animatedValue);
+  const color = gradientColor ?? theme.colors.gradient;
+  const image = headerBackground ?? theme.assets?.headerBackground;
+
+  const scrollStyle = useAnimatedStyle(() => {
+    if (!extended) {
+      return {
+        height: heightHeader,
+        transform: [{ translateY: -Math.max(sharedValue.value, 0) }],
+      };
+    }
+    return {
+      height: interpolate(
+        sharedValue.value,
+        [0, EXTENDED_COLLAPSE_DISTANCE],
+        [heightHeader + EXTENDED_GRADIENT_EXTRA, heightHeader],
+        Extrapolation.CLAMP,
+      ),
+      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]}
+    >
+      {/* extended squeezes the whole fade into its box like main; default clips it */}
+      <View style={extended ? StyleSheet.absoluteFill : styles.gradientFill}>
+        <LinearGradient
+          colors={[color, color + '00']}
+          style={StyleSheet.absoluteFill}
+        >
+          {!!image && (
+            <Image
+              style={styles.gradientFill}
+              source={{ uri: image }}
+              loading={false}
+            />
+          )}
+        </LinearGradient>
+      </View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  translucentBar: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    ...Shadow.Light,
+  },
+  gradient: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    overflow: 'hidden',
+  },
+  // default header gradient keeps the off-Duo 375:154 shape, the header clips it
+  gradientFill: {
+    width: '100%',
+    position: 'absolute',
+    aspectRatio: 375 / 154,
+  },
+});
+
+export { DuoGlassBackground, DuoScrollGradient };

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,
@@ -14,21 +14,18 @@ import { Colors, Radius, Spacing } from '../../Consts';
 import { Image } from '../../Image';
 import { SearchHeaderProps } from '../types';
 import BackgroundImageView from './BackgroundImageView';
-import {
-  AnimatedCompatValue,
-  useNormalizedSharedValue,
-} from '../utils';
+import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
+import { useScreenLayout } from '../../Layout';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
-
-const { width: screenWidth } = Dimensions.get('window');
+const TOOLKIT_WIDTH = 73;
 
 const HeaderExtendHeader: React.FC<{
   headerType?: HeaderType;
   animatedValue: AnimatedCompatValue;
   heightHeader: number;
-  headerRightWidth: number;
+  headerRightWidth?: number;
   inputSearchProps?: SearchHeaderProps;
   inputSearchRef?: Ref<InputRef>;
   navigation?: Navigation;
@@ -39,7 +36,7 @@ const HeaderExtendHeader: React.FC<{
   headerType = 'default',
   animatedValue,
   heightHeader,
-  headerRightWidth = 73,
+  headerRightWidth: customHeaderRightWidth,
   inputSearchProps,
   inputSearchRef,
   useShadowHeader: useShadowHeaderProp = true,
@@ -51,7 +48,19 @@ const HeaderExtendHeader: React.FC<{
   const sharedValue = useNormalizedSharedValue(animatedValue);
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
-  const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
+  const layout = useScreenLayout();
+
+  const leftPosition =
+    inputSearchProps?.leftPosition ||
+    (layout.sideBar ? SCREEN_PADDING : BACK_WIDTH + 20);
+  const headerRightWidth =
+    customHeaderRightWidth ?? (layout.sideBar ? 0 : TOOLKIT_WIDTH);
+  const contentLeft = layout.insetLeft + SCREEN_PADDING;
+  const contentRight = layout.insetLeft + layout.contentWidth;
+  const collapsedLeft = layout.insetLeft + leftPosition;
+  const searchWidth = layout.contentWidth - SCREEN_PADDING * 2;
+  const collapsedSearchWidth =
+    contentRight - collapsedLeft - SCREEN_PADDING - headerRightWidth;
 
   let useShadowHeader = useShadowHeaderProp;
   if (inputSearchProps && Platform.OS === 'android') {
@@ -70,7 +79,12 @@ const HeaderExtendHeader: React.FC<{
   }));
 
   const gradientOpacityStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(sharedValue.value, [0, 52], [1, 0], Extrapolation.CLAMP),
+    opacity: interpolate(
+      sharedValue.value,
+      [0, 52],
+      [1, 0],
+      Extrapolation.CLAMP,
+    ),
   }));
 
   const searchTranslateStyle = useAnimatedStyle(() => ({
@@ -79,7 +93,7 @@ const HeaderExtendHeader: React.FC<{
         translateX: interpolate(
           sharedValue.value,
           [0, 100],
-          [SCREEN_PADDING, leftPosition],
+          [contentLeft, collapsedLeft],
           Extrapolation.CLAMP,
         ),
       },
@@ -87,19 +101,19 @@ const HeaderExtendHeader: React.FC<{
     width: interpolate(
       sharedValue.value,
       [0, 100],
-      [
-        screenWidth - SCREEN_PADDING * 2,
-        screenWidth - leftPosition - 12 - headerRightWidth,
-      ],
+      [searchWidth, collapsedSearchWidth],
       Extrapolation.CLAMP,
     ),
   }));
 
   const searchBackgroundStyle = useAnimatedStyle(() => {
     const t = Math.min(Math.max(sharedValue.value / 100, 0), 1);
-    return { backgroundColor: t === 0
-      ? theme.colors.background.surface
-      : theme.colors.background.default };
+    return {
+      backgroundColor:
+        t === 0
+          ? theme.colors.background.surface
+          : theme.colors.background.default,
+    };
   });
 
   const extendedHeightStyle = useAnimatedStyle(() => ({
@@ -124,9 +138,7 @@ const HeaderExtendHeader: React.FC<{
         <Animated.View
           style={[
             styles.headerBox,
-            headerType === 'extended'
-              ? heightStyle
-              : { height: heightHeader },
+            headerType === 'extended' ? heightStyle : { height: heightHeader },
           ]}
         >
           {!!gradientColor && (
@@ -162,10 +174,7 @@ const HeaderExtendHeader: React.FC<{
             style={[{ marginVertical: Spacing.S }, searchTranslateStyle]}
           >
             <Animated.View
-              style={[
-                { borderRadius: Radius.XL },
-                searchBackgroundStyle,
-              ]}
+              style={[{ borderRadius: Radius.XL }, searchBackgroundStyle]}
             >
               <InputSearch
                 {...inputSearchProps}
@@ -191,7 +200,11 @@ const HeaderExtendHeader: React.FC<{
         />
         {!!gradientColor && (
           <Animated.View
-            style={[styles.extendedHeader, gradientOpacityStyle, extendedHeightStyle]}
+            style={[
+              styles.extendedHeader,
+              gradientOpacityStyle,
+              extendedHeightStyle,
+            ]}
           >
             <LinearGradient
               colors={[gradientColor, gradientColor + '00']}

package/Application/Components/HeaderLeft.tsx

@@ -4,6 +4,8 @@ import React, { useCallback, useContext, useEffect } from 'react';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { PopupNotify } from '../../Popup';
 import { NavigationButton } from './NavigationButton';
+import { SideBarButton } from './SideBarButton';
+import { useSideBarItemStyle } from '../../Layout/utils';
 
 /**
  * default header left used for nav
@@ -13,9 +15,11 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   preventBack,
   onPressLeftHeader,
   onBackHandler,
+  floating = false,
 }) => {
   const context = useContext<any>(MiniAppContext);
   const { navigator } = useContext(ApplicationContext);
+  const sideBarStyle = useSideBarItemStyle('left', 0);
 
   const goBack = useCallback(() => {
     const canGoBack = navigator?.ref?.current?.canGoBack?.();
@@ -72,6 +76,19 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     return () => backHandler.remove();
   }, [goBackSafe]);
 
+  if (floating && sideBarStyle) {
+    return (
+      <View style={sideBarStyle} pointerEvents={'box-none'}>
+        <SideBarButton
+          accessibilityLabel="btn_navigation_back"
+          icon="arrow-back"
+          tintColor={tintColor}
+          onPress={goBackSafe}
+        />
+      </View>
+    );
+  }
+
   return (
     <View style={styles.headerLeft}>
       <NavigationButton

package/Application/Components/HeaderRight.tsx

@@ -13,6 +13,8 @@ import { PopupNotify } from '../../Popup';
 import { Tool, ToolGroup } from '../types';
 import { Icon } from '../../Icon';
 import { Text } from '../../Text';
+import { useSideBarItemStyle } from '../../Layout/utils';
+import { SideBarButton, SideBarGroup, SideBarGroupItem } from './SideBarButton';
 
 const DID_SYNC_NEW_HOME = 'did_sync_new_home';
 
@@ -21,8 +23,9 @@ const DID_SYNC_NEW_HOME = 'did_sync_new_home';
  */
 const HeaderRight: React.FC<any> = props => {
   const { translate } = useContext(ApplicationContext);
-  const { headerRight = {} } = props;
+  const { headerRight = {}, floating = false } = props;
   const { useOnBoarding = false, buttonOnBoarding, onPress } = headerRight;
+  const sideBarStyle = useSideBarItemStyle('right', 1);
 
   if (typeof props.headerRight === 'function') {
     return props.headerRight(props);
@@ -38,6 +41,18 @@ const HeaderRight: React.FC<any> = props => {
     );
   }
 
+  if (floating && sideBarStyle) {
+    return (
+      <View style={sideBarStyle} pointerEvents={'box-none'}>
+        <HeaderToolkitAction
+          {...props.headerRight}
+          tintColor={props.tintColor}
+          vertical
+        />
+      </View>
+    );
+  }
+
   return (
     <View style={styles.headerRightButton}>
       <HeaderToolkitAction {...props.headerRight} tintColor={props.tintColor} />
@@ -56,6 +71,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   useMore = false,
   tools = [],
   useCloseIcon = false,
+  vertical = false,
 }) => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
@@ -260,6 +276,43 @@ const HeaderToolkitAction: React.FC<any> = ({
     group?.items?.some?.(tool => tool?.showBadge),
   );
 
+  const useHelpCenter = context.appId !== 'vn.momo.helpcenter';
+  const closeIcon = useCloseIcon
+    ? '16_navigation_close_circle'
+    : '16_basic_home';
+
+  if (vertical) {
+    return (
+      <View style={styles.sideBarColumn}>
+        {useShortcut && (
+          <SideBarButton
+            disabled={isLoading}
+            icon={iconShortcut}
+            onPress={shortcutOnPress}
+            tintColor={tintColor}
+            showBadge={showBadge}
+          />
+        )}
+        <SideBarGroup tintColor={tintColor}>
+          {useHelpCenter && (
+            <SideBarGroupItem
+              accessibilityLabel={'btn_navigation_help_center'}
+              icon={'help_center'}
+              tintColor={tintColor}
+              onPress={onPressHelpCenter}
+            />
+          )}
+          <SideBarGroupItem
+            accessibilityLabel={'btn_navigation_close'}
+            icon={closeIcon}
+            tintColor={tintColor}
+            onPress={onClose}
+          />
+        </SideBarGroup>
+      </View>
+    );
+  }
+
   return (
     <View style={Styles.row}>
       {useShortcut && (
@@ -280,7 +333,7 @@ const HeaderToolkitAction: React.FC<any> = ({
           },
         ]}
       >
-        {context.appId !== 'vn.momo.helpcenter' && (
+        {useHelpCenter && (
           <>
             <TouchableOpacity
               accessibilityLabel={'btn_navigation_help_center'}
@@ -299,13 +352,7 @@ const HeaderToolkitAction: React.FC<any> = ({
           style={styles.toolkitButton}
           hitSlop={{ top: 7, bottom: 7, left: 0, right: 7 }}
         >
-          <Icon
-            color={tintColor}
-            source={
-              useCloseIcon ? '16_navigation_close_circle' : '16_basic_home'
-            }
-            size={20}
-          />
+          <Icon color={tintColor} source={closeIcon} size={20} />
         </TouchableOpacity>
       </View>
     </View>
@@ -376,6 +423,9 @@ const styles = StyleSheet.create({
     width: 0.5,
     height: 12,
   },
+  sideBarColumn: {
+    gap: Spacing.M,
+  },
   headerLeft: {
     marginLeft: 12,
   },