@momo-kits/foundation 0.169.1 → 0.169.2

package/Application/BottomTab/TabScreen.tsx

@@ -4,39 +4,40 @@ import {
   useFocusEffect,
 } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import React, { useContext, useEffect } from 'react';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { View } from 'react-native';
 import StackScreen from '../StackScreen';
 import { getOptions, getStackOptions } from '../navigationOptions';
 import { useAppState } from '../hooks';
 import { ApplicationContext, MiniAppContext } from '../../Context';
+import { Styles } from '../../Consts';
 import { useScreenLayout } from '../../Layout';
 import { getHeaderRowOptions } from '../../Layout/utils';
-import { styles } from './index.styles';
+import { BottomTabInsetContext } from './BottomTabInset';
 
 const Stack = createStackNavigator();
 
+/**
+ * Content of one tab: its own stack, padded clear of the floating tab bar
+ * until a Screen inside claims that inset, plus screen_navigated tracking.
+ */
 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 }],
-  }));
+  // the floating tab bar covers the bottom of the tab: pad the content unless a Screen in it
+  // keeps clear of the bar itself (scroll content running under the bar)
+  const { inset: tabBarInset } = useContext(BottomTabInsetContext);
+  const [insetClaimed, setInsetClaimed] = useState(false);
+  const tabInsetValue = useMemo(
+    () => ({ inset: tabBarInset, claim: () => setInsetClaimed(true) }),
+    [tabBarInset],
+  );
+  const tabInsetStyle = { paddingBottom: insetClaimed ? 0 : tabBarInset };
 
   const onScreenNavigated = (pre: string, current: string) => {
     if (!isBackgroundToForeground) {
@@ -67,9 +68,6 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   useFocusEffect(
     React.useCallback(
       () => {
-        opacity.value = withTiming(1, { duration: 200 });
-        scale.value = withTiming(1, { duration: 200 });
-
         setTimeout(() => {
           navigator?.maxApi?.getDataObserver?.(
             'current_screen',
@@ -81,13 +79,6 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
             },
           );
         }, 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
       [],
@@ -125,36 +116,8 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
 
   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>
-    );
-  }
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        {
-          opacity,
-          transform: [{ scale }],
-        },
-      ]}
-    >
-      <NavigationIndependentTree>
-        <NavigationContainer>
+      <BottomTabInsetContext.Provider value={tabInsetValue}>
+        <View style={[Styles.flex, tabInsetStyle]}>
           <Stack.Navigator screenOptions={headerStyleOptions}>
             <Stack.Screen
               name="Stack"
@@ -163,14 +126,38 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
                 screen,
                 options: stackOptions,
                 initialParams,
-                bottomTab: 'default',
+                bottomTab: 'nested',
               }}
-              options={{ ...getStackOptions(), ...options }}
+              options={{ ...getStackOptions() }}
             />
           </Stack.Navigator>
-        </NavigationContainer>
-      </NavigationIndependentTree>
-    </Animated.View>
+        </View>
+      </BottomTabInsetContext.Provider>
+    );
+  }
+
+  return (
+    <BottomTabInsetContext.Provider value={tabInsetValue}>
+      <View style={[Styles.flex, tabInsetStyle]}>
+        <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>
+      </View>
+    </BottomTabInsetContext.Provider>
   );
 };
 

package/Application/BottomTab/index.tsx

@@ -1,33 +1,59 @@
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import {
+  BottomTabNavigationOptions,
+  createBottomTabNavigator,
+} from '@react-navigation/bottom-tabs';
 import { useFocusEffect } from '@react-navigation/native';
-import React, { useContext, useEffect, useLayoutEffect } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import React, { useContext, useLayoutEffect } from 'react';
 import {
+  Easing,
   NativeModules,
   Platform,
   StatusBar,
   useWindowDimensions,
-  View,
 } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
 import { Icon } from '../../Icon';
-import { exportFontFamily, Text } from '../../Text';
 import { BottomTabProps } from '../types';
-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 TabScreen from './TabScreen';
 import { ApplicationContext } from '../../Context';
 import { useScreenLayout } from '../../Layout';
-import TabScreen from './TabScreen';
-import { getBadgeProps } from './badge';
-import { styles } from './index.styles';
 
 const Tab = createBottomTabNavigator();
 
+// 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) },
+};
+
+/**
+ * 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: [
+        {
+          translateX: current.progress.interpolate({
+            inputRange: [-1, 0, 1],
+            outputRange: [-width, 0, width],
+          }),
+        },
+      ],
+    },
+  });
+
+/**
+ * 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,
@@ -39,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({
@@ -59,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(
@@ -79,9 +97,6 @@ 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;
@@ -113,67 +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 { badgeLabel, badgeStyle } = getBadgeProps(item?.badgeLabel);
-
-          return (
+      <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}
+              />
+            )
+          }
+          initialRouteName={initialRouteName}
+        >
+          {tabs.map((item, index) => (
             <Tab.Screen
               key={`BottomTab-${item.name}`}
               name={item.name}
@@ -181,48 +172,17 @@ 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>
   );
 };

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

package/Application/BottomTab/tabItems.ts

@@ -0,0 +1,46 @@
+import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import { CommonActions, Route } from '@react-navigation/native';
+
+/**
+ * navigation items of the tab bar, with the press handlers of the system tab bar
+ */
+const getTabItems = ({ state, descriptors, navigation }: BottomTabBarProps) => {
+  return state.routes.map((route: Route<string>, index: number) => {
+    const { options } = descriptors[route.key];
+    const focused = index === state.index;
+    const label = `${options.title ?? route.name}`;
+
+    const onPress = () => {
+      const event = navigation.emit({
+        type: 'tabPress',
+        target: route.key,
+        canPreventDefault: true,
+      });
+      if (!focused && !event.defaultPrevented) {
+        navigation.dispatch({
+          ...CommonActions.navigate(route.name),
+          target: state.key,
+        });
+      }
+    };
+
+    const onLongPress = () => {
+      navigation.emit({ type: 'tabLongPress', target: route.key });
+    };
+
+    return {
+      route,
+      focused,
+      label,
+      icon: options.tabBarIcon as any,
+      badge: options.tabBarBadge,
+      onPress,
+      onLongPress,
+    };
+  });
+};
+
+type TabItem = ReturnType<typeof getTabItems>[number];
+
+export { getTabItems };
+export type { TabItem };

package/Application/BottomTab/usePressLift.ts

@@ -0,0 +1,32 @@
+import {
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+const SPRING = { damping: 18, stiffness: 220, mass: 0.8 };
+// the button grows by a tenth while held
+const PRESSED_SCALE = 1.1;
+
+/**
+ * lift for a single button, e.g. the compressed rail
+ */
+const usePressLift = () => {
+  const reduceMotion = useReducedMotion();
+  const lift = useSharedValue(0);
+  const style = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 + lift.value * (PRESSED_SCALE - 1) }],
+  }));
+  const onPressIn = () => {
+    if (!reduceMotion) {
+      lift.value = withSpring(1, SPRING);
+    }
+  };
+  const onPressOut = () => {
+    lift.value = withSpring(0, SPRING);
+  };
+  return { style, onPressIn, onPressOut };
+};
+
+export { usePressLift };