@momo-kits/foundation 0.167.1-beta.7 → 0.167.1-duo.2

package/Application/BottomSheet.tsx

@@ -22,12 +22,12 @@ import Animated, {
   Easing,
   Extrapolation,
   interpolate,
-  runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 import layoutStyles from '../Layout/styles';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
@@ -74,7 +74,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           duration: 200,
           easing: Easing.bezier(0.3, 0.0, 0.8, 0.15),
         },
-        () => runOnJS(callback)(),
+        () => scheduleOnRN(callback),
       );
     },
     [heightDevice, translateY],
@@ -137,9 +137,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       }
       closeAnimation(() => {
         navigator?.pop();
-        runOnJS(() => {
+        scheduleOnRN(() => {
           callback?.();
-        })();
+        });
       });
     },
     [barrierDismissible, closeAnimation, navigator],

package/Application/BottomTab/BottomTabBar.tsx

@@ -58,11 +58,13 @@ export default function BottomTabBar({
   const { theme } = useContext(ApplicationContext);
   const { routes } = state;
   const widthDevice = useWindowDimensions()?.width;
+  const insets = useSafeAreaInsets();
   const useFloating = floatingButton && state.routes.length % 2 === 0;
-  const itemWidth = widthDevice / (state.routes.length + (useFloating ? 1 : 0));
+  const itemWidth =
+    (widthDevice - insets.left - insets.right) /
+    (state.routes.length + (useFloating ? 1 : 0));
   // const buildLink = useLinkBuilder();
   const indicatorAnimated = useSharedValue(0);
-  const insets = useSafeAreaInsets();
 
   const indicatorStyle = useAnimatedStyle(() => ({
     width: itemWidth,
@@ -246,7 +248,8 @@ export default function BottomTabBar({
         },
         {
           paddingBottom: paddingBottom,
-          paddingHorizontal: Math.max(insets.left, insets.right),
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
         },
         style,
       ]}

package/Application/BottomTab/index.tsx

@@ -28,6 +28,7 @@ import { BottomTabProps } from '../types';
 import { getOptions, getStackOptions, useAppState } from '../utils';
 import BottomTabBar from './BottomTabBar';
 import { ApplicationContext, MiniAppContext } from '../../Context';
+import { useScreenLayout } from '../../Layout';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -36,7 +37,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 +146,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 +177,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
       <NavigationIndependentTree>
         <NavigationContainer>
           <Stack.Navigator
-            screenOptions={{
-              headerStyle: {
-                height: 52 + insets.top,
-              },
-            }}
+            screenOptions={headerStyleOptions}
           >
             <Stack.Screen
               name="Stack"

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,
   },

package/Application/Components/HeaderTitle.tsx

@@ -7,13 +7,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { exportFontFamily, Text, useScaleSize } from '../../Text';
-import {
-  Colors,
-  Radius,
-  Spacing,
-  Styles,
-  useHeaderFontFamily,
-} from '../../Consts';
+import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import {
   TitleJourneyProps,
   TitleLocationProps,
@@ -22,7 +16,33 @@ import {
 import { Image } from '../../Image';
 import { Icon } from '../../Icon';
 import { Skeleton } from '../../Skeleton';
-import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
+import {
+  AnimatedCompatValue,
+  isWhiteListDesignSystem,
+  useNormalizedSharedValue,
+} from '../utils';
+import { useScreenLayout } from '../../Layout';
+
+const useHeaderFontFamily = (): string => {
+  const context = useContext<any>(MiniAppContext);
+  return isWhiteListDesignSystem(context) ? 'MoMoTrustDisplay' : 'SFProText';
+};
+
+/**
+ * back button and toolkit sharing the navigation bar with the title
+ */
+const HEADER_ACTIONS_WIDTH = 172;
+
+/**
+ * max title width, the iPhone Duo side bar takes back and toolkit out of the bar
+ */
+const useTitleMaxWidth = () => {
+  const { width, contentWidth, sideBar } = useScreenLayout();
+  if (sideBar) {
+    return contentWidth - Spacing.M * 2;
+  }
+  return width - HEADER_ACTIONS_WIDTH;
+};
 
 type HeaderTitleInterpolate = {
   inputRange: number[];
@@ -44,6 +64,7 @@ const HeaderTitle: React.FC<
 > = props => {
   const context = useContext<any>(MiniAppContext);
   const headerFontFamily = useHeaderFontFamily();
+  const maxWidth = useTitleMaxWidth();
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -74,7 +95,7 @@ const HeaderTitle: React.FC<
       style={[
         {
           justifyContent: 'center',
-          maxWidth: Dimensions.get('window').width - 172,
+          maxWidth,
         },
         showBaseLineDebug && styles.debugBaseLine,
       ]}
@@ -138,7 +159,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
   const headerFontFamily = useHeaderFontFamily();
-  const maxWidth = Dimensions.get('window').width - 172;
+  const maxWidth = useTitleMaxWidth();
   const getShortName = (name: string) => {
     const words = name.split(' ');
     const lastTwoWords = words.slice(-2);
@@ -421,7 +442,7 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
   isLoading,
 }) => {
   const headerFontFamily = useHeaderFontFamily();
-  const maxWidth = Dimensions.get('window').width - 172;
+  const maxWidth = useTitleMaxWidth();
   const renderShimmer = () => {
     return (
       <View style={Styles.flex}>
@@ -457,9 +478,12 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
         </Text>
       )}
       <View style={Styles.row}>
-        <Text typography="action_xs_bold" 
+        <Text
+          typography="action_xs_bold"
           fontFamily={headerFontFamily}
-         color={tintColor} numberOfLines={1}>
+          color={tintColor}
+          numberOfLines={1}
+        >
           {location}
         </Text>
         <Icon
@@ -487,10 +511,14 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
   isLoading,
 }) => {
   const headerFontFamily = useHeaderFontFamily();
-  const { width } = Dimensions.get('screen');
-  const maxWidth = Dimensions.get('window').width - 172;
-  const startWidth = width * 0.25;
-  const endWidth = width * 0.75 - 212;
+  const maxWidth = useTitleMaxWidth();
+  const { sideBar } = useScreenLayout();
+  // journey split is tuned against the whole bar width
+  const barWidth = sideBar
+    ? maxWidth + HEADER_ACTIONS_WIDTH
+    : Dimensions.get('screen').width;
+  const startWidth = barWidth * 0.25;
+  const endWidth = barWidth * 0.75 - 212;
   const renderShimmer = () => {
     return (
       <View style={Styles.flex}>
@@ -522,8 +550,7 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
             style={{ maxWidth: startWidth }}
             color={tintColor}
             numberOfLines={1}
-          fontFamily={headerFontFamily}
-
+            fontFamily={headerFontFamily}
           >
             {start}
           </Text>
@@ -539,8 +566,7 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
               typography="action_xs_bold"
               color={tintColor}
               numberOfLines={1}
-          fontFamily={headerFontFamily}
-
+              fontFamily={headerFontFamily}
             >
               {end}
             </Text>

package/Application/Components/SearchHeader.tsx

@@ -1,17 +1,13 @@
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import { InputRef, InputSearch } from '../../Input';
-import {
-  Dimensions,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import React, { useContext } from 'react';
 import { SearchHeaderProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
 import { useNormalizedSharedValue } from '../utils';
+import { useScreenLayout } from '../../Layout';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
@@ -27,18 +23,25 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const BACK_WIDTH = 28;
-    const { width: screenWidth } = Dimensions.get('window');
+    const layout = useScreenLayout();
 
     const sharedValue = useNormalizedSharedValue(animatedValue);
     const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
     const headerRightWidth = props?.headerRightWidth ?? 73;
 
+    // iPhone Duo side bar holds back: the search shares the content width with the buttons only
+    let searchMaxWidth = layout.width - leftPosition - 12 - headerRightWidth;
+    if (layout.sideBar) {
+      searchMaxWidth = layout.contentWidth - Spacing.M * 2 - headerRightWidth;
+    }
+
     const backgroundStyle = useAnimatedStyle(() => {
       const t = Math.min(Math.max(sharedValue.value / 100, 0), 1);
       return {
-        backgroundColor: t === 0
-          ? theme.colors.background.surface
-          : theme.colors.background.default,
+        backgroundColor:
+          t === 0
+            ? theme.colors.background.surface
+            : theme.colors.background.default,
       };
     });
 
@@ -77,13 +80,11 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
           style={[
             Styles.flex,
             renderButtons && {
-              maxWidth: screenWidth - leftPosition - 12 - headerRightWidth,
+              maxWidth: searchMaxWidth,
             },
           ]}
         >
-          <Animated.View
-            style={[{ borderRadius: Radius.XL }, backgroundStyle]}
-          >
+          <Animated.View style={[{ borderRadius: Radius.XL }, backgroundStyle]}>
             <InputSearch
               ref={ref}
               {...props}