@momo-kits/foundation 0.168.1-rn862.1 → 0.169.2

package/Application/BottomTab/index.tsx

@@ -1,199 +1,59 @@
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import {
-  NavigationContainer,
-  NavigationIndependentTree,
-  useFocusEffect,
-} from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
-import React, { useContext, useEffect, useLayoutEffect } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+  BottomTabNavigationOptions,
+  createBottomTabNavigator,
+} from '@react-navigation/bottom-tabs';
+import { useFocusEffect } from '@react-navigation/native';
+import React, { useContext, useLayoutEffect } from 'react';
 import {
+  Easing,
   NativeModules,
   Platform,
   StatusBar,
-  StyleSheet,
   useWindowDimensions,
-  View,
 } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-import { Colors } from '../../Consts';
 import { Icon } from '../../Icon';
-import { exportFontFamily, Text } from '../../Text';
-import StackScreen from '../StackScreen';
 import { BottomTabProps } from '../types';
-import { getOptions, getStackOptions, useAppState } from '../utils';
-import BottomTabBar from './BottomTabBar';
-import { DuoTabBar } from './DuoTabBar';
+import BottomTabBar, { hasCenterAction } from './BottomTabBar';
+import { TabBarMetrics } from './metrics';
+import { getTabBadge } from './TabBarIcon';
+import { DuoTabBar, useDuoTabBarInset } from './DuoTabBar';
+import { BottomTabInsetContext } from './BottomTabInset';
 import { DuoBarCompressionProvider } from './DuoBarCompression';
-import { ApplicationContext, MiniAppContext } from '../../Context';
+import TabScreen from './TabScreen';
+import { ApplicationContext } from '../../Context';
 import { useScreenLayout } from '../../Layout';
-import { getHeaderRowOptions } from '../../Layout/utils';
 
 const Tab = createBottomTabNavigator();
-const Stack = createStackNavigator();
 
-const TabScreen: React.FC<any> = ({ route, navigation }) => {
-  const { navigator } = useContext(ApplicationContext);
-  const context = useContext<any>(MiniAppContext);
-  const { nested, options, screen, initialParams } = route?.params;
-  const headerStyleOptions = getHeaderRowOptions(useScreenLayout());
-
-  const opacityValue = 0.3;
-  const scaleValue = 0.97;
-  const opacity = useSharedValue(opacityValue);
-  const scale = useSharedValue(scaleValue);
-  const screenName = screen?.name || screen?.type?.name || 'Invalid';
-  const { isBackgroundToForeground } = useAppState();
-
-  const tabAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-    transform: [{ scale: scale.value }],
-  }));
-
-  const onScreenNavigated = (pre: string, current: string) => {
-    if (!isBackgroundToForeground) {
-      const data: any = {
-        preScreenName: pre,
-        screenName: current,
-        componentName: 'Screen',
-        state: 'navigated',
-        action: 'push',
-      };
-
-      context?.autoTracking?.({
-        ...context,
-        ...data,
-      });
-
-      /**
-       * debug toast
-       */
-      navigator?.maxApi?.showToastDebug?.({
-        appId: context.appId,
-        message: `${screenName} screen_navigated`,
-        type: 'ERROR',
-      });
-    }
-  };
-
-  useFocusEffect(
-    React.useCallback(
-      () => {
-        opacity.value = withTiming(1, { duration: 200 });
-        scale.value = withTiming(1, { duration: 200 });
-
-        setTimeout(() => {
-          navigator?.maxApi?.getDataObserver?.(
-            'current_screen',
-            (data: any) => {
-              onScreenNavigated(data?.screenName, screenName);
-              navigator?.maxApi?.setObserver?.('current_screen', {
-                screenName,
-              });
-            },
-          );
-        }, 100);
-
-        return () => {
-          if (navigation.getState().index !== route?.params.index) {
-            opacity.value = withTiming(opacityValue, { duration: 200 });
-            scale.value = withTiming(scaleValue, { duration: 200 });
-          }
-        };
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [],
-    ),
-  );
-
-  useEffect(
-    () => {
-      const onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
-        if (navigation.isFocused()) {
-          navigator?.maxApi?.getDataObserver?.(
-            'current_screen',
-            (data: any) => {
-              onScreenNavigated(data?.screenName, screenName);
-              navigator?.maxApi?.setObserver?.('current_screen', {
-                screenName,
-              });
-            },
-          );
-        }
-      });
-
-      return () => {
-        onFocusApp?.remove?.();
-      };
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-
-  let stackOptions = {};
-  if (options) {
-    stackOptions = getOptions(options);
-  }
-
-  if (nested) {
-    return (
-      <Animated.View style={[styles.container, tabAnimatedStyle]}>
-        <Stack.Navigator
-          screenOptions={headerStyleOptions}
-        >
-          <Stack.Screen
-            name="Stack"
-            component={StackScreen}
-            initialParams={{
-              screen,
-              options: stackOptions,
-              initialParams,
-              bottomTab: 'nested',
-            }}
-            options={{ ...getStackOptions() }}
-          />
-        </Stack.Navigator>
-      </Animated.View>
-    );
-  }
+// the tab screens slide in index order over 280ms, CSS `ease`
+const TAB_SWITCH_SPEC = {
+  animation: 'timing' as const,
+  config: { duration: 280, easing: Easing.bezier(0.25, 0.1, 0.25, 1) },
+};
 
-  return (
-    <Animated.View
-      style={[
-        styles.container,
+/**
+ * scene progress is -1 for tabs before the active one, 1 for tabs after it: they wait a full
+ * width off screen on their side
+ */
+const getTabSlide =
+  (width: number): BottomTabNavigationOptions['sceneStyleInterpolator'] =>
+  ({ current }) => ({
+    sceneStyle: {
+      transform: [
         {
-          opacity,
-          transform: [{ scale }],
+          translateX: current.progress.interpolate({
+            inputRange: [-1, 0, 1],
+            outputRange: [-width, 0, width],
+          }),
         },
-      ]}
-    >
-      <NavigationIndependentTree>
-        <NavigationContainer>
-          <Stack.Navigator
-            screenOptions={headerStyleOptions}
-          >
-            <Stack.Screen
-              name="Stack"
-              component={StackScreen}
-              initialParams={{
-                screen,
-                options: stackOptions,
-                initialParams,
-                bottomTab: 'default',
-              }}
-              options={{ ...getStackOptions(), ...options }}
-            />
-          </Stack.Navigator>
-        </NavigationContainer>
-      </NavigationIndependentTree>
-    </Animated.View>
-  );
-};
+      ],
+    },
+  });
 
+/**
+ * App tab navigator: the floating bar on phones, the rail or floating bar on
+ * iPhone Duo, tabs sliding in index order. Shares the bar inset with its tabs.
+ */
 const BottomTab: React.FC<BottomTabProps> = ({
   nested,
   tabs,
@@ -205,17 +65,15 @@ const BottomTab: React.FC<BottomTabProps> = ({
 }) => {
   const { theme, navigator } = useContext(ApplicationContext);
   const { isIPhoneDuo } = useScreenLayout();
-  const dimensions = useWindowDimensions();
-  const insets = useSafeAreaInsets();
+  const { width: windowWidth } = useWindowDimensions();
+  const barInset = useDuoTabBarInset();
+  // the center action's button rises above the bar, tab content leaves room for it too
+  const tabBarInset =
+    barInset && hasCenterAction(floatingButton, tabs.length)
+      ? barInset + TabBarMetrics.ctaLift
+      : barInset;
   const initialIndex = tabs.findIndex(i => i.name === initialRouteName);
-  const indicatorAnimated = useSharedValue(0);
   const activeIndex = React.useRef(initialIndex > 0 ? initialIndex : 0);
-  const itemWidth = dimensions.width / tabs.length;
-
-  const indicatorStyle = useAnimatedStyle(() => ({
-    width: itemWidth,
-    transform: [{ translateX: indicatorAnimated.value }],
-  }));
 
   useLayoutEffect(() => {
     navigation?.setOptions({
@@ -225,12 +83,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
     });
   }, [navigation]);
 
-  useEffect(() => {
-    indicatorAnimated.value = withTiming(itemWidth * activeIndex.current, {
-      duration: 200,
-    });
-  }, [itemWidth, indicatorAnimated]);
-
   // Focus, not mount: pushing a screen from a tab leaves BottomTab mounted but blurred, and
   // onFocus only fires on tab changes.
   useFocusEffect(
@@ -245,16 +97,15 @@ const BottomTab: React.FC<BottomTabProps> = ({
 
   const onFocus = (e: any) => {
     activeIndex.current = tabs.findIndex(i => e.target.includes(i.name));
-    indicatorAnimated.value = withTiming(itemWidth * activeIndex.current, {
-      duration: 200,
-    });
 
     const isFirstTab = activeIndex.current === 0;
     const gestureEnabled = Platform.OS === 'ios' && isFirstTab;
     navigation?.setOptions({
       gestureEnabled: gestureEnabled,
     });
-    NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(!gestureEnabled);
+    NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(
+      !gestureEnabled,
+    );
   };
 
   const handler: {
@@ -277,102 +128,43 @@ const BottomTab: React.FC<BottomTabProps> = ({
     },
   };
 
-  const isIOS = Platform.OS === 'ios';
-  const bottomInset = isIOS ? Math.min(insets.bottom, 21) : insets.bottom;
-
   return (
     <DuoBarCompressionProvider
       behavior={compressionBehavior}
       tabCount={tabs.length}
       hasQr={!!floatingButton}
     >
-      <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.hint}
-              activeTintColor={theme.colors.primary}
-            />
-          ) : (
-            <BottomTabBar
-              {...props}
-              floatingButton={floatingButton}
-              inactiveTintColor={theme.colors.text.hint}
-              activeTintColor={theme.colors.primary}
-              style={[{ height: 64 + bottomInset }]}
-            />
-          )
-        }
-        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 badgeLabel = item?.badgeLabel;
-          if (isNumZero) {
-            badgeLabel = undefined;
+      <BottomTabInsetContext.Provider value={{ inset: tabBarInset }}>
+        <Tab.Navigator
+          screenOptions={{
+            headerShown: false,
+            headerTransparent: true,
+            headerBackground: undefined,
+            tabBarLabelPosition: 'below-icon',
+            animation: 'shift',
+            transitionSpec: TAB_SWITCH_SPEC,
+            sceneStyleInterpolator: getTabSlide(windowWidth),
+          }}
+          tabBar={props =>
+            isIPhoneDuo ? (
+              <DuoTabBar
+                {...props}
+                floatingButton={floatingButton}
+                inactiveTintColor={theme.colors.text.secondary}
+                activeTintColor={theme.colors.primary}
+              />
+            ) : (
+              <BottomTabBar
+                {...props}
+                floatingButton={floatingButton}
+                inactiveTintColor={theme.colors.text.secondary}
+                activeTintColor={theme.colors.primary}
+              />
+            )
           }
-
-          let badgeStyle: {
-            marginRight: number;
-            top: number;
-            backgroundColor: string;
-            width?: number;
-          } = {
-            marginRight: -8,
-            top: -4,
-            backgroundColor: Colors.orange_03,
-          };
-
-          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 (
+          initialRouteName={initialRouteName}
+        >
+          {tabs.map((item, index) => (
             <Tab.Screen
               key={`BottomTab-${item.name}`}
               name={item.name}
@@ -380,78 +172,19 @@ const BottomTab: React.FC<BottomTabProps> = ({
               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'),
-                  },
-                  badgeStyle,
-                ],
-                tabBarIcon: ({ color }) => (
-                  <Icon source={item.icon} color={color} size={28} />
+                tabBarBadge: getTabBadge(item.badgeLabel, item.showDot),
+                tabBarIcon: ({ color, size }) => (
+                  <Icon source={item.icon} color={color} size={size} />
                 ),
                 ...item,
               }}
             />
-          );
-        })}
-      </Tab.Navigator>
+          ))}
+        </Tab.Navigator>
+      </BottomTabInsetContext.Provider>
     </DuoBarCompressionProvider>
   );
 };
 
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  indicatorContainer: { position: 'absolute', top: 0 },
-  indicator: {
-    height: 2,
-    width: 48,
-    alignSelf: 'center',
-    borderBottomLeftRadius: 2,
-    borderBottomRightRadius: 2,
-  },
-  tabBarStyle: {
-    ...Platform.select({
-      ios: {
-        shadowColor: Colors.black_10,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 1,
-        shadowRadius: 4,
-      },
-      android: {
-        elevation: 4,
-      },
-    }),
-  },
-  tabStyle: {
-    paddingVertical: 4,
-  },
-});
-
 export default BottomTab;

package/Application/BottomTab/metrics.ts

@@ -0,0 +1,164 @@
+import { BoxShadowValue } from 'react-native';
+import { Easing } from 'react-native-reanimated';
+import { Colors, Radius, Spacing } from '../../Consts';
+
+/**
+ * Navigation bar measurements (Figma "Specs Navigation", DS-984), kept in sync with
+ * momo-native-kits `TabBarMetrics`
+ * - horizontal: floating container with items split evenly, center action in a notch
+ * - vertical: iPhone Duo rail, center action under the container
+ */
+const TabBarMetrics = {
+  height: 68,
+  margin: Spacing.S,
+  paddingVertical: Spacing.S,
+  paddingHorizontal: Spacing.M,
+  itemGap: Spacing.XS,
+  iconSize: 24,
+  // active indicator behind the icon: 24 icon + XS·M padding
+  indicatorPaddingVertical: Spacing.XS,
+  indicatorPaddingHorizontal: Spacing.M,
+  indicatorRadius: Radius.XL,
+  indicatorHeight: 32,
+  // home indicator / gesture bar area under the container
+  systemIndicatorHeight: 24,
+  // unfolded foldables (short side from 600, the smallest in the spec) use 65% of the short
+  // side, centered; phones and folded outer displays fill the window
+  foldableMinShortSide: 600,
+  foldableWidthRatio: 0.65,
+  ctaSlotWidth: 92,
+  ctaSize: 48,
+  // the icon sits 10 inside the 48 button (prototype .cta: 28 icon), 12 inside the 52 rail one
+  ctaIconSize: 28,
+  // the button rises 22 above the container top edge
+  ctaLift: 22,
+  ctaLabelGap: Spacing.M,
+  ctaLabelHeight: 18,
+  railContainerWidth: 56,
+  railPaddingHorizontal: Spacing.XS,
+  railPaddingBottom: Spacing.S,
+  railItemWidth: 48,
+  railItemHeight: 62,
+  railIndicatorHeight: 40,
+  railIndicatorPaddingVertical: Spacing.S,
+  railIndicatorRadius: 20,
+  railCtaGap: Spacing.L,
+  railCtaSize: 52,
+  railCtaLabelGap: Spacing.XS,
+  railCtaWidth: 68,
+  railCtaHeight: 70,
+  badgeMaxWidth: 58,
+};
+
+/**
+ * motion of the navigation bar (MoMo Navigation Prototype):
+ * - one active indicator slides to the selected item, overshooting a little
+ * - icons cross-fade and the label color follows
+ * - the center action shrinks while pressed
+ */
+const TabBarMotion = {
+  indicator: { duration: 550, easing: Easing.bezier(0.34, 1.4, 0.5, 1) },
+  tint: { duration: 250 },
+  ctaPress: { duration: 150 },
+  ctaPressedScale: 0.92,
+};
+
+/**
+ * Figma Effect/Popover on the center action button: 8% y8 blur 24 spread -12, 4% y12 blur 32
+ * spread -16
+ */
+const CTA_SHADOW: BoxShadowValue[] = [
+  {
+    offsetX: 0,
+    offsetY: 8,
+    blurRadius: 24,
+    spreadDistance: -12,
+    color: `${Colors.black_20}14`,
+  },
+  {
+    offsetX: 0,
+    offsetY: 12,
+    blurRadius: 32,
+    spreadDistance: -16,
+    color: `${Colors.black_20}0A`,
+  },
+];
+
+/**
+ * inner light and tint of the active indicator: white 12% from below, primary 12% from above
+ */
+const getIndicatorShadow = (primary: string): BoxShadowValue[] => [
+  {
+    offsetX: 0,
+    offsetY: -2,
+    blurRadius: 2,
+    color: `${Colors.black_01}1F`,
+    inset: true,
+  },
+  { offsetX: 0, offsetY: 1, blurRadius: 2, color: `${primary}1F`, inset: true },
+];
+
+/**
+ * notch dipped into the container top edge under the center action (Figma "Backgroud" path):
+ * starts NOTCH_HALF_WIDTH left of the center, then cubic segments as [control1, control2, end],
+ * each point [dx from the center, dy below the top edge]
+ */
+const NOTCH_HALF_WIDTH = 50.758;
+const NOTCH_CURVES: [number, number][][] = [
+  [
+    [-39.749, 0],
+    [-31.231, 9.765],
+    [-24.563, 18.526],
+  ],
+  [
+    [-18.928, 25.93],
+    [-10.022, 30.709],
+    [0, 30.709],
+  ],
+  [
+    [10.022, 30.709],
+    [18.928, 25.93],
+    [24.563, 18.526],
+  ],
+  [
+    [31.231, 9.765],
+    [39.749, 0],
+    [NOTCH_HALF_WIDTH, 0],
+  ],
+];
+
+/**
+ * width of the horizontal bar: 65% of the short side on an unfolded foldable, otherwise the
+ * window minus the side safe areas and margins
+ */
+const getHorizontalBarWidth = (
+  width: number,
+  height: number,
+  insetLeft: number,
+  insetRight: number,
+) => {
+  const shortSide = Math.min(width, height);
+  if (shortSide >= TabBarMetrics.foldableMinShortSide) {
+    return shortSide * TabBarMetrics.foldableWidthRatio;
+  }
+  return width - insetLeft - insetRight - 2 * TabBarMetrics.margin;
+};
+
+/**
+ * height of the vertical rail container, plus the center action under it
+ */
+const getRailHeight = (tabCount: number, hasCta: boolean) =>
+  tabCount * TabBarMetrics.railItemHeight +
+  TabBarMetrics.railPaddingBottom +
+  (hasCta ? TabBarMetrics.railCtaGap + TabBarMetrics.railCtaHeight : 0);
+
+export {
+  TabBarMetrics,
+  TabBarMotion,
+  getHorizontalBarWidth,
+  getRailHeight,
+  getIndicatorShadow,
+  CTA_SHADOW,
+  NOTCH_CURVES,
+  NOTCH_HALF_WIDTH,
+};