@momo-kits/foundation 0.168.1-beta.24 → 0.168.1-beta.25

package/Application/BottomTab/ActiveIndicator.tsx

@@ -0,0 +1,90 @@
+import React, { useContext, useEffect, useRef } from 'react';
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { ApplicationContext } from '../../Context';
+import { getIndicatorShadow, TabBarMotion } from './metrics';
+
+type Props = {
+  axis: 'x' | 'y';
+  // position of the selected item along the axis, undefined until it is measured
+  offset?: number;
+  // horizontal bar: width of the selected item
+  extent?: number;
+  radius: number;
+  style: StyleProp<ViewStyle>;
+};
+
+/**
+ * one active indicator per bar (Background/tonal with its inner shadows) sliding to the
+ * selected item; it lands in place on the first measure and slides from then on
+ */
+const ActiveIndicator: React.FC<Props> = ({
+  axis,
+  offset,
+  extent,
+  radius,
+  style,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const position = useSharedValue(offset ?? 0);
+  const size = useSharedValue(extent ?? 0);
+  const visible = useSharedValue(offset === undefined ? 0 : 1);
+  const placed = useRef(offset !== undefined);
+
+  useEffect(() => {
+    if (offset === undefined) {
+      return;
+    }
+    size.value = extent ?? 0;
+    if (!placed.current) {
+      placed.current = true;
+      position.value = offset;
+      visible.value = 1;
+      return;
+    }
+    position.value = withTiming(offset, TabBarMotion.indicator);
+  }, [offset, extent, position, size, visible]);
+
+  const animatedStyle = useAnimatedStyle(() =>
+    axis === 'x'
+      ? {
+          opacity: visible.value,
+          width: size.value,
+          transform: [{ translateX: position.value }],
+        }
+      : {
+          opacity: visible.value,
+          transform: [{ translateY: position.value }],
+        },
+  );
+
+  return (
+    <Animated.View
+      pointerEvents={'none'}
+      style={[
+        styles.indicator,
+        {
+          borderRadius: radius,
+          backgroundColor: theme.colors.background.tonal,
+          boxShadow: getIndicatorShadow(theme.colors.primary),
+        },
+        style,
+        animatedStyle,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  indicator: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+  },
+});
+
+export { ActiveIndicator };

package/Application/BottomTab/BottomTabBar.tsx

@@ -1,10 +1,9 @@
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
-import { CommonActions, Route } from '@react-navigation/native';
-import React, { useCallback, useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import {
   Platform,
+  Pressable,
   StyleSheet,
-  TouchableOpacity,
   useWindowDimensions,
   View,
 } from 'react-native';
@@ -13,311 +12,333 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Colors, Radius, Styles } from '../../Consts';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Colors, Radius, Spacing } from '../../Consts';
 import { Icon } from '../../Icon';
 import { Text } from '../../Text';
 import { FloatingButtonProps } from '../types';
 import CustomBottomTabItem from './CustomBottomTabItem';
 import { ApplicationContext, MiniAppContext } from '../../Context';
+import { CurvedContainer } from './CurvedContainer';
+import { ActiveIndicator } from './ActiveIndicator';
+import {
+  CTA_SHADOW,
+  getHorizontalBarWidth,
+  TabBarMetrics,
+  TabBarMotion,
+} from './metrics';
+import { getTabItems, TabItem } from './tabItems';
+import { FixedScaleText } from './TabBarIcon';
 
 type Props = BottomTabBarProps & {
-  activeTintColor?: string;
-  inactiveTintColor?: string;
+  activeTintColor: string;
+  inactiveTintColor: string;
   floatingButton?: FloatingButtonProps;
-  activeBackgroundColor?: string;
-  allowFontScaling?: boolean;
-  inactiveBackgroundColor?: string;
-  labelStyle?: any;
-  iconStyle?: any;
-  showLabel?: boolean;
-  style?: any;
-  tabStyle?: any;
-  badgeStyle?: any;
 };
 
-const getPaddingBottom = (insets: EdgeInsets) => {
-  return Math.max(insets.bottom - Platform.select({ ios: 4, default: 0 }), 0);
-};
+/**
+ * the center action needs a tab on each side: Special type takes 2 or 4 tabs
+ */
+const hasCenterAction = (floatingButton: unknown, tabCount: number) =>
+  !!floatingButton && tabCount % 2 === 0;
 
-export default function BottomTabBar({
-  state,
-  navigation,
-  descriptors,
-  activeBackgroundColor,
-  activeTintColor,
-  allowFontScaling,
-  inactiveBackgroundColor,
-  inactiveTintColor,
-  labelStyle,
-  iconStyle,
-  showLabel,
-  style,
-  floatingButton,
-}: Props) {
-  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 - insets.left - insets.right) /
-    (state.routes.length + (useFloating ? 1 : 0));
-  // const buildLink = useLinkBuilder();
-  const indicatorAnimated = useSharedValue(0);
+/**
+ * gap under the container: the home indicator / gesture bar area
+ */
+const getSystemIndicatorHeight = (bottomInset: number) =>
+  Math.max(
+    Platform.OS === 'ios'
+      ? Math.min(bottomInset, TabBarMetrics.systemIndicatorHeight)
+      : bottomInset,
+    Spacing.S,
+  );
 
-  const indicatorStyle = useAnimatedStyle(() => ({
-    width: itemWidth,
-    transform: [{ translateX: indicatorAnimated.value }],
+/**
+ * center action press: the button shrinks while held and its label turns active
+ * (label in a Background/primary pill, white text)
+ */
+const useCenterActionPress = () => {
+  const [pressed, setPressed] = useState(false);
+  const scale = useSharedValue(1);
+  const buttonStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
   }));
-  const paddingBottom = getPaddingBottom(insets);
-  const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;
+  const onPressIn = () => {
+    setPressed(true);
+    scale.value = withTiming(
+      TabBarMotion.ctaPressedScale,
+      TabBarMotion.ctaPress,
+    );
+  };
+  const onPressOut = () => {
+    setPressed(false);
+    scale.value = withTiming(1, TabBarMotion.ctaPress);
+  };
+  return { pressed, buttonStyle, onPressIn, onPressOut };
+};
 
+/**
+ * center action (.Nav/CTA): button rising out of the notch, label under it
+ */
+const CenterAction: React.FC<{
+  floatingButton: FloatingButtonProps;
+  fixedFontScale?: boolean;
+}> = ({ floatingButton, fixedFontScale }) => {
+  const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-  /**
-   * render tab item
-   */
-  const renderTabItem = useCallback(
-    (data: Route<string, any>[]) => {
-      return data?.map(route => {
-        const focused = route?.params?.name === focusedTab;
-        const { options } = descriptors[route.key];
-
-        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 (
-          <CustomBottomTabItem
-            key={route.key}
-            route={route}
-            label={options.tabBarLabel || options.title || route.name}
-            focused={focused}
-            onPress={onPress}
-            onLongPress={onLongPress}
-            activeTintColor={activeTintColor ?? theme.colors.primary}
-            inactiveTintColor={inactiveTintColor ?? theme.colors.text.default}
-            activeBackgroundColor={activeBackgroundColor}
-            inactiveBackgroundColor={inactiveBackgroundColor}
-            icon={options.tabBarIcon}
-            badge={options.tabBarBadge}
-            showLabel={showLabel}
-            labelStyle={labelStyle}
-            iconStyle={iconStyle}
-            style={options.tabBarStyle}
-            badgeStyle={options.tabBarBadgeStyle}
-            allowFontScaling={allowFontScaling}
-          />
-        );
-      });
-    },
-    [
-      focusedTab,
-      descriptors,
-      activeTintColor,
-      theme.colors.primary,
-      theme.colors.text.default,
-      inactiveTintColor,
-      activeBackgroundColor,
-      inactiveBackgroundColor,
-      showLabel,
-      labelStyle,
-      iconStyle,
-      allowFontScaling,
-      navigation,
-      state.key,
-    ],
+  const { icon, label, onPress } = floatingButton;
+  const { pressed, buttonStyle, onPressIn, onPressOut } =
+    useCenterActionPress();
+  const labelText = (
+    <Text
+      numberOfLines={1}
+      typography={'label_s_medium'}
+      color={pressed ? Colors.black_01 : theme.colors.text.secondary}
+    >
+      {label}
+    </Text>
   );
 
-  /**
-   * render floating button
-   */
-  const renderFloatingButton = useCallback(() => {
-    const renderFloatingIcon = () => {
-      if (typeof floatingButton?.icon === 'string') {
-        return <Icon source={floatingButton?.icon} size={32} color={'white'} />;
-      }
-      return floatingButton?.icon;
-    };
-
-    return (
-      <View style={[Styles.flex, showBaseLineDebug && styles.debugBaseLine]}>
-        <TouchableOpacity
-          onPress={floatingButton?.onPress}
-          style={styles.floatingContainer}
+  return (
+    <View style={[styles.ctaSlot, showBaseLineDebug && styles.debugBaseLine]}>
+      <Pressable
+        accessibilityRole={'button'}
+        accessibilityLabel={label}
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        style={styles.cta}
+      >
+        <Animated.View
+          style={[
+            styles.ctaButton,
+            { backgroundColor: theme.colors.primary },
+            buttonStyle,
+          ]}
         >
-          <View
-            style={{
-              ...styles.floatingContent,
-              backgroundColor: activeTintColor ?? theme.colors.primary,
-            }}
-          >
-            {renderFloatingIcon()}
-          </View>
-          <View
-            style={{
-              top: -4,
-              backgroundColor: activeTintColor ?? theme.colors.primary,
-              borderRadius: Radius.XL,
-              paddingHorizontal: 6,
-            }}
-          >
-            <Text
-              numberOfLines={1}
-              typography={'description_xs_regular'}
-              color={'white'}
-            >
-              {floatingButton?.label}
-            </Text>
-          </View>
-        </TouchableOpacity>
-      </View>
-    );
-  }, [
-    activeTintColor,
-    floatingButton?.icon,
-    floatingButton?.label,
-    floatingButton?.onPress,
-    showBaseLineDebug,
-    theme.colors.primary,
-  ]);
+          {typeof icon === 'string' ? (
+            <Icon
+              source={icon}
+              size={TabBarMetrics.ctaIconSize}
+              color={Colors.black_01}
+            />
+          ) : (
+            icon
+          )}
+        </Animated.View>
+        <View
+          style={[
+            styles.ctaLabel,
+            pressed && { backgroundColor: theme.colors.primary },
+          ]}
+        >
+          {fixedFontScale ? (
+            <FixedScaleText>{labelText}</FixedScaleText>
+          ) : (
+            labelText
+          )}
+        </View>
+      </Pressable>
+    </View>
+  );
+};
 
-  /**
-   * animated indicator
-   */
-  React.useEffect(() => {
-    let index = state.index;
-    if (useFloating && index > (state.routes.length - 1) / 2) {
-      index += 1;
-    }
-    indicatorAnimated.value = withTiming(itemWidth * index, { duration: 200 });
-  }, [
-    state.index,
-    itemWidth,
-    indicatorAnimated,
-    useFloating,
-    state.routes.length,
-  ]);
+/**
+ * horizontal navigation bar: floating container, items split evenly, Special type puts
+ * the center action in a notch in the middle
+ */
+const HorizontalTabBar: React.FC<{
+  items: TabItem[];
+  width: number;
+  activeTintColor: string;
+  inactiveTintColor: string;
+  floatingButton?: FloatingButtonProps;
+  fixedFontScale?: boolean;
+}> = ({
+  items,
+  width,
+  activeTintColor,
+  inactiveTintColor,
+  floatingButton,
+  fixedFontScale,
+}) => {
+  const withCta = hasCenterAction(floatingButton, items.length);
+  const [layouts, setLayouts] = useState<
+    Record<string, { x: number; y: number; width: number }>
+  >({});
+  const selected = layouts[items.find(item => item.focused)?.route.key ?? ''];
 
-  /**
-   * render tab bar
-   */
-  const renderTabBar = () => {
-    if (useFloating) {
-      const middleIndex = routes.length / 2;
-      const leftArr = routes.slice(0, middleIndex);
-      const rightArr = routes.slice(middleIndex);
+  const renderItems = (data: TabItem[]) =>
+    data.map(item => (
+      <CustomBottomTabItem
+        key={item.route.key}
+        onLayout={e => {
+          const { x, y, width: itemWidth } = e.nativeEvent.layout;
+          setLayouts(prev => ({
+            ...prev,
+            [item.route.key]: { x, y, width: itemWidth },
+          }));
+        }}
+        label={item.label}
+        focused={item.focused}
+        icon={item.icon}
+        badge={item.badge}
+        onPress={item.onPress}
+        onLongPress={item.onLongPress}
+        activeTintColor={activeTintColor}
+        inactiveTintColor={inactiveTintColor}
+        fixedFontScale={fixedFontScale}
+      />
+    ));
+
+  const renderContent = () => {
+    if (withCta && floatingButton) {
+      const middle = items.length / 2;
       return (
         <>
-          {renderTabItem(leftArr)}
-          {renderFloatingButton()}
-          {renderTabItem(rightArr)}
+          {renderItems(items.slice(0, middle))}
+          <CenterAction
+            floatingButton={floatingButton}
+            fixedFontScale={fixedFontScale}
+          />
+          {renderItems(items.slice(middle))}
         </>
       );
     }
-    return renderTabItem(routes);
+    return renderItems(items);
   };
 
+  const customContainer = withCta && floatingButton?.container;
+
   return (
     <View
+      style={[styles.container, { width }]}
+      accessibilityLabel={'bottom_tab_bar'}
+    >
+      {customContainer || (
+        <CurvedContainer
+          width={width}
+          height={TabBarMetrics.height}
+          radius={TabBarMetrics.height / 2}
+          notchCenterX={withCta ? width / 2 : undefined}
+        />
+      )}
+      <View style={styles.content}>
+        <ActiveIndicator
+          axis={'x'}
+          offset={selected?.x}
+          extent={selected?.width}
+          radius={TabBarMetrics.indicatorRadius}
+          style={[
+            styles.indicator,
+            { top: selected?.y ?? TabBarMetrics.paddingVertical },
+          ]}
+        />
+        {renderContent()}
+      </View>
+    </View>
+  );
+};
+
+/**
+ * phone tab bar: the horizontal navigation bar floating over the tab content above the home
+ * indicator, so the content shows around it and through the notch. The transparent strip
+ * above it keeps the rising center action touchable
+ */
+export default function BottomTabBar(props: Props) {
+  const { state, floatingButton, activeTintColor, inactiveTintColor } = props;
+  const window = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const withCta = hasCenterAction(floatingButton, state.routes.length);
+  const width = getHorizontalBarWidth(
+    window.width,
+    window.height,
+    insets.left,
+    insets.right,
+  );
+
+  return (
+    <View
+      pointerEvents={'box-none'}
       style={[
-        floatingButton ? styles.tabBarFloatingButton : styles.tabBar,
+        styles.bar,
         {
-          backgroundColor: theme.colors.background.surface,
-          borderTopColor: theme.colors.border.default,
-        },
-        {
-          paddingBottom: paddingBottom,
+          paddingTop: withCta ? TabBarMetrics.ctaLift : 0,
+          paddingBottom: getSystemIndicatorHeight(insets.bottom),
+          // centered between the side safe areas
           paddingLeft: insets.left,
           paddingRight: insets.right,
         },
-        style,
       ]}
-      pointerEvents={'auto'}
     >
-      <View style={styles.content} accessibilityLabel={'bottom_tab_bar'}>
-        {useFloating && floatingButton?.container}
-        <Animated.View
-          style={[{ position: 'absolute', top: 0 }, indicatorStyle]}
-        >
-          <View
-            style={[
-              styles.indicator,
-              { backgroundColor: activeTintColor ?? theme.colors.primary },
-            ]}
-          />
-        </Animated.View>
-        {renderTabBar()}
-      </View>
+      <HorizontalTabBar
+        items={getTabItems(props)}
+        width={width}
+        floatingButton={floatingButton}
+        activeTintColor={activeTintColor}
+        inactiveTintColor={inactiveTintColor}
+      />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  bar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+  },
+  container: {
+    height: TabBarMetrics.height,
+  },
   content: {
     flex: 1,
     flexDirection: 'row',
+    alignItems: 'center',
+    gap: TabBarMetrics.itemGap,
+    paddingVertical: TabBarMetrics.paddingVertical,
+    paddingHorizontal: TabBarMetrics.paddingHorizontal,
   },
-  tabBar: {
-    left: 0,
-    right: 0,
-    bottom: 0,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    elevation: 8,
+  indicator: {
+    height: TabBarMetrics.indicatorHeight,
   },
-  tabBarFloatingButton: {
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 1,
-    shadowColor: Colors.black_20,
-    shadowOffset: { width: 0, height: -2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 3,
-    elevation: 8,
+  ctaSlot: {
+    width: TabBarMetrics.ctaSlotWidth,
+    alignSelf: 'stretch',
   },
-  floatingContainer: {
+  // the button rises ctaLift above the container top, the label ends on the item baseline
+  cta: {
     position: 'absolute',
-    alignItems: 'center',
     left: 0,
     right: 0,
-    top: -2,
-    bottom: Platform.OS === 'ios' ? -6 : 4
+    top: -TabBarMetrics.ctaLift - TabBarMetrics.paddingVertical,
+    alignItems: 'center',
+    gap: TabBarMetrics.ctaLabelGap,
   },
-  floatingContent: {
+  ctaButton: {
+    boxShadow: CTA_SHADOW,
+    width: TabBarMetrics.ctaSize,
+    height: TabBarMetrics.ctaSize,
+    borderRadius: TabBarMetrics.ctaSize / 2,
     alignItems: 'center',
     justifyContent: 'center',
-    height: 48,
-    width: 48,
-    borderRadius: 24,
-    top: -10,
   },
-  indicator: {
-    height: 2,
-    width: 44,
-    alignSelf: 'center',
-    borderBottomLeftRadius: 1,
-    borderBottomRightRadius: 1,
+  ctaLabel: {
+    maxWidth: TabBarMetrics.ctaSlotWidth,
+    minHeight: TabBarMetrics.ctaLabelHeight,
+    paddingHorizontal: Spacing.XXS,
+    borderRadius: Radius.XL,
+    justifyContent: 'center',
   },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
+
+export {
+  HorizontalTabBar,
+  getSystemIndicatorHeight,
+  hasCenterAction,
+  useCenterActionPress,
+};