@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/module/components/BottomNavigation/BottomNavigation.js

@@ -0,0 +1,889 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/index.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { supportsBoxShadow, toBoxShadow } from "../../utils/shadows.js";
+import { renderSlotIcon } from "../AppIcon/index.js";
+
+/**
+ * Visual style of the bar.
+ *
+ * - `pill`: a soft tinted pill slides behind the active icon (default).
+ * - `underline`: a line slides under (or over) the active tab cell.
+ * - `floating`: the bar is a detached capsule, lifted off the bottom as well
+ *   as the sides; the pill slides inside it.
+ * - `bubble`: the active icon lifts into a filled circle that pokes above
+ *   the bar; the circle slides between tabs.
+ * - `expand`: the active tab widens into a pill showing icon and label side
+ *   by side; the other tabs collapse to icons.
+ * - `solid`: the whole bar is brand-coloured; the active tab sits in a light
+ *   pill with inverted inks.
+ * - `tile`: a detached capsule like `floating`, but the tinted pill takes
+ *   the whole active tab, icon and label together, up to 96 wide; inactive
+ *   tabs keep the primary text ink instead of the muted one.
+ */
+
+/**
+ * Corner radius of the bar surface in pixels, or `full`: half the surface's
+ * own height, so the bar's ends are round whatever the bar's height comes to.
+ */
+
+/**
+ * Corner radius of the active tab's background: `auto` follows the bar's
+ * radius, a number sets its own in pixels. Every value is capped at half the
+ * background's own height, so a large number reads as fully round.
+ */
+
+/** Shadow under the bar surface: a theme shadow level, or `none`. */
+
+/** What a tab knows about itself when it draws its icon. */
+
+/**
+ * A tab icon speaks the library's slot language: an AppIcon name
+ * (`icon: 'home'`), `{ name, variant }`, a render function that gets
+ * `{ color, size, focused, disabled }`, or any node drawn as is. A bare name
+ * with no `activeIcon` is drawn in the `bold` style while the tab is active.
+ */
+
+/**
+ * A button in the middle of the bar that is not a tab: pressing it runs its
+ * own handler and leaves the active tab alone (a "new loan" or "scan" button).
+ * It takes one cell in the middle of the row, so the tabs split around it,
+ * the extra one going left when the count is odd.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const DEFAULT_ICON_SIZE = 18;
+/** Air the icon wrap adds around the icon, 2 a side. */
+const ICON_WRAP_AIR = 4;
+/** How much taller the active pill is than the icon wrap, 4 a side. */
+const PILL_AIR = 8;
+/**
+ * The icon pill never grows past this, however wide its cell: a two-tab bar
+ * keeps a pill the size of the icon it highlights (Material's indicator is
+ * 64 wide too). The theme's `pillMaxWidth` overrides it.
+ */
+const DEFAULT_PILL_MAX_WIDTH = 64;
+/** The tile's background never grows past this either; room for icon and label, not half a bar. */
+const TILE_MAX_WIDTH = 96;
+const DEFAULT_PILL_INSET = 16;
+const DEFAULT_UNDERLINE_HEIGHT = 3;
+const DEFAULT_FLOATING_MARGIN = 16;
+const DEFAULT_FLOATING_RADIUS = 28;
+const DEFAULT_BUBBLE_SIZE = 48;
+const DEFAULT_BUBBLE_LIFT = 14;
+const DEFAULT_CENTER_SIZE = 48;
+const DEFAULT_CENTER_ICON_SIZE = 24;
+/** Key of the centre cell; a tab key cannot collide with it in practice. */
+const CENTER_KEY = '__webority_center_action__';
+const TAB_PADDING_VERTICAL = 6;
+/** Air between the bar's edges and the tab row. The row is inset by it. */
+const BAR_PADDING_HORIZONTAL = 4;
+/** Bar padding above the tab row; the padding below matches it unless the safe-area inset is larger. */
+const BAR_PADDING_TOP = 6;
+const BAR_PADDING_TOP_BUBBLE = 8;
+/** Air between the floating capsule's edges and the tab row, above and below. */
+const FLOATING_BAR_PADDING_VERTICAL = 6;
+/** Air between the floating capsule's edges and the tab row, at the sides. */
+const FLOATING_BAR_PADDING_HORIZONTAL = 8;
+/**
+ * How much wider the expanded tab is than a collapsed one (`expand` variant).
+ * The pill inside hugs its icon and label, so whatever the cell has beyond
+ * that shows as empty space beside the pill; 1.5 keeps that to about 13px a
+ * side on a four-tab phone bar while a label like "Settings" still fits.
+ */
+const EXPANDED_FLEX = 1.5;
+/** Ink opacity of inactive tabs on the `solid` bar. */
+const SOLID_INACTIVE_OPACITY = 0.7;
+/** Air between a `tile` pill and the edges of its tab cell. */
+const TILE_INSET = 2;
+/** Gap between icon and label inside a `tile` pill, tighter than the default so the pair reads as one block. */
+const TILE_LABEL_GAP = 2;
+const formatBadge = value => {
+  if (value === null || value === undefined || value === false) {
+    return null;
+  }
+  if (value === true || value === '·') {
+    return {
+      text: '',
+      isDot: true
+    };
+  }
+  if (typeof value === 'number') {
+    if (value <= 0) {
+      return null;
+    }
+    return {
+      text: value > 99 ? '99+' : String(value),
+      isDot: false
+    };
+  }
+  if (typeof value === 'string') {
+    if (value.length === 0) {
+      return null;
+    }
+    return {
+      text: value,
+      isDot: false
+    };
+  }
+  return null;
+};
+const badgeAccessibilitySuffix = value => {
+  if (value === null || value === undefined || value === false) {
+    return '';
+  }
+  if (typeof value === 'number') {
+    return value > 0 ? `, ${value} unread` : '';
+  }
+  if (value === true || value === '·') {
+    return ', new updates';
+  }
+  if (typeof value === 'string' && value.length > 0) {
+    return `, ${value}`;
+  }
+  return '';
+};
+const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    tabs,
+    centerAction,
+    activeTab,
+    onChange,
+    haptic = 'selection',
+    showLabels = true,
+    variant = 'pill',
+    indicatorPosition = 'bottom',
+    radius,
+    indicatorRadius: indicatorRadiusProp = 'auto',
+    elevation,
+    iconSize: iconSizeProp,
+    marginHorizontal: marginHorizontalProp,
+    marginVertical: marginVerticalProp,
+    paddingHorizontal: paddingHorizontalProp,
+    paddingVertical: paddingVerticalProp,
+    border,
+    style,
+    indicatorStyle,
+    labelStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const tokens = theme.components.bottomNavigation;
+  const iconSize = iconSizeProp ?? tokens?.iconSize ?? DEFAULT_ICON_SIZE;
+  // The pill hugs the icon: 4px taller than the wrap on each side, so a
+  // smaller icon gets a smaller pill (30 at 18, 36 at 24).
+  const pillHeight = tokens?.pillHeight ?? iconSize + ICON_WRAP_AIR + PILL_AIR;
+  const pillMaxWidth = tokens?.pillMaxWidth ?? DEFAULT_PILL_MAX_WIDTH;
+  const pillInset = tokens?.pillInset ?? DEFAULT_PILL_INSET;
+  const sideMargin = tokens?.floatingMargin ?? DEFAULT_FLOATING_MARGIN;
+  const floatingRadius = tokens?.floatingRadius ?? DEFAULT_FLOATING_RADIUS;
+  const bubbleSize = tokens?.bubbleSize ?? DEFAULT_BUBBLE_SIZE;
+  const bubbleLift = tokens?.bubbleLift ?? DEFAULT_BUBBLE_LIFT;
+  const isTile = variant === 'tile';
+  // `tile` shares the floating capsule; only its pill and inks differ.
+  const isFloating = variant === 'floating' || isTile;
+  const isBubble = variant === 'bubble';
+  const isExpand = variant === 'expand';
+  const isSolid = variant === 'solid';
+  const drawsPill = variant === 'pill' || isFloating || isSolid;
+  const activeIndex = Math.max(0, tabs.findIndex(tab => tab.key === activeTab));
+  const [rowWidth, setRowWidth] = React.useState(0);
+  const [rowHeight, setRowHeight] = React.useState(0);
+  // Derived on every render, never stored: the row's onLayout fires only
+  // when the row's own size changes, and a change in the NUMBER of tabs
+  // leaves that size alone. A stored `width / tabs.length` therefore went
+  // stale the moment a tab was added or removed and the indicator sat
+  // under the wrong tab.
+  // A centre action takes a cell of its own, so the tabs split around it and
+  // tabs before `centerSplit` sit in their own cell and the rest one cell
+  // further right; the extra tab of an odd count goes left.
+  const centerSplit = centerAction ? Math.ceil(tabs.length / 2) : tabs.length;
+  const cellCount = tabs.length + (centerAction ? 1 : 0);
+  // With a `gap` the centre cell hugs the button, with the gap as a margin on
+  // each side, and the tabs share what is left; without one it is a cell as
+  // wide as a tab's. `centerStep` is how far the button pushes the tabs past
+  // it to the right.
+  const [centerBox, setCenterBox] = React.useState({
+    width: 0,
+    height: 0
+  });
+  const centerSize = centerAction?.size ?? DEFAULT_CENTER_SIZE;
+  const hugsCenter = centerAction?.gap !== undefined;
+  const centerGap = Math.max(0, centerAction?.gap ?? 0);
+  const centerSpan = hugsCenter ? (centerBox.width || centerSize) + centerGap * 2 : 0;
+  const tabWidth = hugsCenter ? tabs.length > 0 ? Math.max(0, rowWidth - centerSpan) / tabs.length : 0 : cellCount > 0 ? rowWidth / cellCount : 0;
+  const centerStep = hugsCenter ? centerSpan : tabWidth;
+
+  // Single Animated.Value holds the active tab INDEX; the pixel offset is an
+  // interpolation over the measured tab width, rebuilt when the width changes.
+  // Keeping the value in index units means a width change (a variant switch
+  // re-lays the row out) is a plain re-render, never an animation on a view
+  // that was mounted a moment ago: Android left such a view at its mount-time
+  // transform, one cell short.
+  const indicatorIndex = useRef(createAnimatedValue(activeIndex)).current;
+  const iconScales = useRef({});
+  // Per-tab 0..1 "is active" progress: lifts the bubble icon and widens the
+  // expanded tab. JS-driven on purpose: flex is layout, which the native
+  // driver cannot animate, and a native value attached to views that remount
+  // when the variant switches (floating has a different root) throws from
+  // Animated's makeNative cascade.
+  const progressValues = useRef({});
+
+  // Ensure each tab has persistent animated values
+  tabs.forEach(tab => {
+    if (!iconScales.current[tab.key]) {
+      iconScales.current[tab.key] = new Animated.Value(1);
+    }
+    if (!progressValues.current[tab.key]) {
+      progressValues.current[tab.key] = createAnimatedValue(tab.key === activeTab ? 1 : 0);
+    }
+  });
+
+  // Pill width is intrinsic; we compute its rendered offset to keep it
+  // centered within each tab cell. The offset is applied to the pill itself
+  // (NOT folded into the shared indicatorTranslateX) so the underline indicator
+  // — which spans the full tab cell — stays aligned with the tab boundary
+  // instead of being shifted by the pill-centering math.
+  // Every highlight is capped and centred so a wide cell does not stretch it:
+  // the tile at 96 with room for icon and label, the icon pill at 64.
+  const pillWidth = tabWidth > 0 ? isTile ? Math.min(tabWidth - TILE_INSET * 2, TILE_MAX_WIDTH) : Math.min(tabWidth - pillInset, pillMaxWidth) : 0;
+  const pillOffset = tabWidth > 0 ? (tabWidth - pillWidth) / 2 : 0;
+  const bubbleOffset = tabWidth > 0 ? (tabWidth - bubbleSize) / 2 : 0;
+  const hasLabel = tab => showLabels && tab.showLabel !== false && tab.label.trim().length > 0;
+
+  // The bubble is centred on where the lifted icon lands. A labelled tab's
+  // icon wrap sits `tab.paddingVertical` below the row; an icon-only tab
+  // centres its icon in the row, so the row's measured height decides.
+  const activeTabConfig = tabs[activeIndex];
+  const activeIconCentre = activeTabConfig && !hasLabel(activeTabConfig) && rowHeight > 0 ? rowHeight / 2 : TAB_PADDING_VERTICAL + (iconSize + ICON_WRAP_AIR) / 2;
+  const bubbleTop = activeIconCentre - bubbleLift - bubbleSize / 2;
+  const tileHeight = Math.max(0, rowHeight - TILE_INSET * 2);
+  const pillTop = isTile ? TILE_INSET : activeIconCentre - pillHeight / 2;
+
+  // Slide the indicator to the active tab. Pill and bubble modes apply their
+  // centering offset via a static `left` style below; underline mode uses the
+  // offset directly. A width change swaps the interpolation, which the native
+  // driver re-attaches as a fresh node on the next render.
+  const settledIndex = useRef(activeIndex);
+  useEffect(() => {
+    if (settledIndex.current === activeIndex) {
+      return;
+    }
+    settledIndex.current = activeIndex;
+    // Native-driven: the value only feeds transforms, and the tree keeps one
+    // shape across variants, so nothing it is attached to remounts. Off the
+    // JS thread, the slide no longer competes with the tab-change render.
+    const anim = Animated.spring(indicatorIndex, {
+      toValue: activeIndex,
+      tension: 120,
+      friction: 14,
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [activeIndex, indicatorIndex]);
+
+  // One stop per tab, at the left edge of the cell it sits in, so a slide
+  // across the centre action jumps its cell rather than landing on it.
+  const lastIndex = Math.max(1, tabs.length - 1);
+  const indicatorTranslateX = useMemo(() => {
+    const inputRange = [];
+    const outputRange = [];
+    for (let i = 0; i <= lastIndex; i++) {
+      inputRange.push(i);
+      outputRange.push(i < centerSplit ? i * tabWidth : i * tabWidth + centerStep);
+    }
+    return indicatorIndex.interpolate({
+      inputRange,
+      outputRange
+    });
+  }, [indicatorIndex, lastIndex, centerSplit, tabWidth, centerStep]);
+
+  // Per-tab progress: the newly active tab springs to 1, the others to 0.
+  // Keyed on the tab keys, not the array, so a parent that rebuilds `tabs`
+  // every render does not restart the springs mid-flight. Only `bubble` and
+  // `expand` read these values; the other variants just keep them current so
+  // a runtime variant switch starts from the right place.
+  const tabKeys = tabs.map(tab => tab.key).join(' ');
+  const animatesProgress = isBubble || isExpand;
+  useEffect(() => {
+    const anims = tabKeys.split(' ').flatMap(key => {
+      const to = key === activeTab ? 1 : 0;
+      const progress = progressValues.current[key];
+      if (!progress) {
+        return [];
+      }
+      if (!animatesProgress) {
+        progress.setValue(to);
+        return [];
+      }
+      return [Animated.spring(progress, {
+        toValue: to,
+        tension: 140,
+        friction: 13,
+        useNativeDriver: false
+      })];
+    });
+    if (anims.length === 0) {
+      return;
+    }
+    const group = Animated.parallel(anims);
+    group.start();
+    return () => group.stop();
+  }, [activeTab, tabKeys, animatesProgress]);
+  const handleLayout = e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setRowWidth(width);
+    setRowHeight(height);
+  };
+
+  // The press pop every tab icon gets, and the centre action's icon too: a
+  // quick grow, then a spring back to rest.
+  const popIcon = scale => {
+    Animated.sequence([Animated.timing(scale, {
+      toValue: 1.15,
+      duration: 120,
+      useNativeDriver: true
+    }), Animated.spring(scale, {
+      toValue: 1,
+      tension: 200,
+      friction: 8,
+      useNativeDriver: true
+    })]).start();
+  };
+  const centerScale = useRef(new Animated.Value(1)).current;
+  const handlePress = tab => {
+    if (tab.key !== activeTab && haptic !== false) {
+      triggerHaptic(haptic);
+    }
+    const scale = iconScales.current[tab.key];
+    if (scale) {
+      popIcon(scale);
+    }
+    onChange(tab.key);
+  };
+  const handleCenterPress = () => {
+    if (!centerAction) {
+      return;
+    }
+    const centerHaptic = centerAction.haptic ?? haptic;
+    if (centerHaptic !== false) {
+      triggerHaptic(centerHaptic);
+    }
+    popIcon(centerScale);
+    centerAction.onPress();
+  };
+  const {
+    colors
+  } = theme;
+  const barBackground = isSolid ? colors.primary : colors.background.elevated;
+  const activeInk = isSolid ? colors.onPrimary : colors.primary;
+  const inactiveInk = isSolid ? colors.onPrimary : isTile ? colors.text.primary : colors.text.tertiary;
+  const pillBackground = isSolid ? colors.onPrimary : colors.primaryMuted;
+  // The active icon sits on the pill (solid) or in the bubble, so it takes the
+  // ink that reads on that fill rather than on the bar.
+  const activeIconInk = isSolid ? colors.primary : isBubble ? colors.onPrimary : activeInk;
+
+  // Below the tabs: the same air as above them, unless the safe-area inset
+  // is larger (the labels then sit just above the home indicator). A bar
+  // lifted off the bottom by a margin puts the inset into that lift instead,
+  // the way the capsules always have.
+  const marginHorizontal = marginHorizontalProp ?? sideMargin;
+  const marginVertical = marginVerticalProp ?? (isFloating ? sideMargin : 0);
+  const lifted = marginVertical > 0;
+  const paddingTop = paddingVerticalProp ?? (isFloating ? FLOATING_BAR_PADDING_VERTICAL : isBubble ? BAR_PADDING_TOP_BUBBLE : BAR_PADDING_TOP);
+  const innerPaddingHorizontal = paddingHorizontalProp ?? (isFloating ? FLOATING_BAR_PADDING_HORIZONTAL : BAR_PADDING_HORIZONTAL);
+  const paddingBottom = lifted ? paddingTop : Math.max(paddingTop, insets.bottom);
+  const liftBottom = lifted ? Math.max(marginVertical, insets.bottom) : 0;
+
+  // One prop for "how round is the white surface", whichever view is holding
+  // it: the docked bar, or the floating variant's detached capsule.
+  // The tile capsule is round-ended so it stays concentric with its pill.
+  //
+  // `full` is half the surface's own height, never `theme.radius.full`: the
+  // bar pads itself by its radius (below), so 9999 would leave the row no
+  // width, and Android drops an oversized radius to square corners. The
+  // surface is the measured row plus the padding the bar itself puts around
+  // it; padding added through `style` is not counted. Until the row is
+  // measured the bar keeps its 4px padding and lets the platform clamp the
+  // full radius, so the first measured row is full width and the layout
+  // settles in one more pass.
+  const wantsFullRadius = radius === 'full';
+  const surfaceHeight = isFloating ? rowHeight + paddingTop * 2 + StyleSheet.hairlineWidth * 2 : rowHeight + paddingTop + paddingBottom;
+  const barRadius = wantsFullRadius ? rowHeight > 0 ? surfaceHeight / 2 : theme.radius.full : radius ?? tokens?.borderRadius ?? (isTile ? theme.radius.full : isFloating ? floatingRadius : 0);
+  // The active background's radius, never more than half its own height (a
+  // larger radius drops to square corners on Android). `auto` matches the bar
+  // once an app rounds it and otherwise stays fully round, the look it has
+  // always had; a number is the background's own.
+  // `round` is each background's own fully round value.
+  const barRadiusSet = radius !== undefined || tokens?.borderRadius !== undefined;
+  const activeBgRadius = (height, round) => {
+    if (typeof indicatorRadiusProp === 'number') {
+      return Math.max(0, Math.min(indicatorRadiusProp, height / 2));
+    }
+    if (indicatorRadiusProp === 'auto' && barRadiusSet) {
+      return Math.min(barRadius, height / 2);
+    }
+    return round;
+  };
+  // A rounded bar has no flat edge under its corners, and the underline sits on
+  // that edge: hold the tab row out of the corners entirely rather than cutting
+  // the line short on the two end tabs, which read as broken next to the others.
+  // Inset by the radius and the row's own span IS the bar's flat band, so every
+  // tab keeps a full-width line. Only the underline needs it: every other
+  // indicator lives inside its tab cell, so those variants keep the bar's own
+  // 4px and give the whole width to the tabs.
+  const barPaddingHorizontal = variant === 'underline' ? Math.max(innerPaddingHorizontal, wantsFullRadius && rowHeight === 0 ? 0 : barRadius) : innerPaddingHorizontal;
+  // Nothing is drawn around the surface unless asked: no shadow and no
+  // border by default on any variant, so what an app sees is what it set.
+  const elevationLevel = elevation ?? 'none';
+  // A `boxShadow` where the platform draws one, as the Card does: Android's
+  // `elevation` is a flat grey that cannot match iOS, and the legacy props
+  // are ignored there. Android below API 28 keeps the token's `elevation`.
+  const shadowToken = theme.shadows[elevationLevel];
+  const barShadow = elevationLevel === 'none' ? null : supportsBoxShadow() ? {
+    boxShadow: toBoxShadow(shadowToken)
+  } : shadowToken;
+  // A hairline outline on all four sides, on any variant, only when asked.
+  // Every edge of the docked bar is set by name, never through the
+  // `borderWidth` shorthand: Android resets a dropped `borderTopWidth` to
+  // zero instead of falling back to the shorthand, and the top line vanishes.
+  const hairline = border ? StyleSheet.hairlineWidth : 0;
+  const borderColor = isSolid ? colors.primary : colors.border.primary;
+
+  // The centre action is centred on the row and raised by `lift`. Whatever of
+  // it pokes above the bar surface is added to the root's top padding, so the
+  // raised part stays inside the component's own box: a touch outside a
+  // parent's bounds is not something to rely on across both platforms, and a
+  // screen laid out under the bar should not be covered by it either.
+  const centerLift = centerAction?.lift ?? 0;
+  const rowTopInSurface = paddingTop + hairline;
+  const centerOverhang = centerAction && rowHeight > 0 ? Math.max(0, (centerBox.height || centerSize) / 2 + centerLift - rowHeight / 2 - rowTopInSurface) : 0;
+  const centerNode = centerAction ? /*#__PURE__*/_jsx(View, {
+    style: [styles.centerCell, hugsCenter ? {
+      flex: 0,
+      marginHorizontal: centerGap
+    } : null],
+    pointerEvents: "box-none",
+    children: /*#__PURE__*/_jsx(Pressable, {
+      onPress: handleCenterPress,
+      onLayout: e => {
+        const {
+          width,
+          height
+        } = e.nativeEvent.layout;
+        setCenterBox(prev => prev.width === width && prev.height === height ? prev : {
+          width,
+          height
+        });
+      },
+      accessibilityRole: "button",
+      accessibilityLabel: centerAction.label,
+      hitSlop: {
+        top: 6,
+        bottom: 6,
+        left: 6,
+        right: 6
+      }
+      // A relative `top`, not a transform, like the bubble's lift: the box
+      // moves with it for layout and hit-testing alike.
+      ,
+      style: ({
+        pressed
+      }) => [{
+        top: -centerLift
+      }, pressed ? {
+        opacity: 0.85
+      } : null],
+      testID: centerAction.testID ?? (testID ? `${testID}-center` : undefined),
+      children: centerAction.content ? /*#__PURE__*/_jsx(Animated.View, {
+        style: {
+          transform: [{
+            scale: centerScale
+          }]
+        },
+        children: centerAction.content
+      }) : /*#__PURE__*/_jsx(View, {
+        style: [styles.centerCircle, {
+          width: centerSize,
+          height: centerSize,
+          borderRadius: centerSize / 2,
+          ...smoothCorners,
+          backgroundColor: centerAction.color ?? colors.primary
+        }],
+        children: /*#__PURE__*/_jsx(Animated.View, {
+          style: {
+            transform: [{
+              scale: centerScale
+            }]
+          },
+          children: renderSlotIcon(centerAction.icon ?? 'add', {
+            color: centerAction.iconColor ?? colors.onPrimary,
+            size: centerAction.iconSize ?? DEFAULT_CENTER_ICON_SIZE,
+            disabled: false
+          })
+        })
+      })
+    })
+  }, CENTER_KEY) : null;
+  // The centre cell goes between the two halves of the tabs.
+  const withCenter = nodes => centerNode ? [...nodes.slice(0, centerSplit), centerNode, ...nodes.slice(centerSplit)] : nodes;
+  const tabRow = /*#__PURE__*/_jsxs(View, {
+    style: styles.tabRow,
+    onLayout: handleLayout,
+    children: [drawsPill && pillWidth > 0 && (!isTile || tileHeight > 0) ? /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [styles.pill, {
+        width: pillWidth,
+        height: isTile ? tileHeight : pillHeight,
+        left: pillOffset,
+        top: pillTop,
+        backgroundColor: pillBackground,
+        // Half the height, not `radius.full`, for the tile: its pill is
+        // tall, and an oversized radius drops to square corners on Android.
+        borderRadius: isTile ? activeBgRadius(tileHeight, tileHeight / 2) : activeBgRadius(pillHeight, theme.radius.full),
+        ...smoothCorners,
+        transform: [{
+          translateX: indicatorTranslateX
+        }]
+      }, indicatorStyle]
+    }) : null, isBubble && tabWidth > 0 ? /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [styles.bubble, theme.shadows.md, {
+        width: bubbleSize,
+        height: bubbleSize,
+        borderRadius: bubbleSize / 2,
+        ...smoothCorners,
+        left: bubbleOffset,
+        top: bubbleTop,
+        backgroundColor: colors.primary,
+        borderColor: colors.background.elevated,
+        transform: [{
+          translateX: indicatorTranslateX
+        }]
+      }, indicatorStyle]
+    }) : null, withCenter(tabs.map(tab => {
+      const isActive = tab.key === activeTab;
+      const color = isActive ? activeInk : inactiveInk;
+      const iconColor = isActive ? activeIconInk : inactiveInk;
+      const activeFallback = typeof tab.icon === 'string' ? {
+        name: tab.icon,
+        variant: 'bold'
+      } : tab.icon;
+      const tabIcon = isActive ? tab.activeIcon ?? activeFallback : tab.icon;
+      const scale = iconScales.current[tab.key];
+      const progress = progressValues.current[tab.key];
+      const badge = formatBadge(tab.badge ?? null);
+      const a11ySuffix = badgeAccessibilitySuffix(tab.badge ?? null);
+      const inkOpacity = isSolid && !isActive ? SOLID_INACTIVE_OPACITY : 1;
+      // The badge ring matches whatever the icon sits on.
+      const badgeBorder = isBubble && isActive || isSolid ? colors.primary : colors.background.elevated;
+      const labelled = hasLabel(tab);
+      const showLabel = labelled && (!isExpand || isActive);
+      const iconWrap = /*#__PURE__*/_jsxs(Animated.View, {
+        style: [styles.iconWrap, {
+          width: iconSize + ICON_WRAP_AIR,
+          height: iconSize + ICON_WRAP_AIR,
+          opacity: inkOpacity,
+          transform: [{
+            scale
+          }]
+        }],
+        children: [renderSlotIcon(tabIcon, {
+          color: iconColor,
+          size: iconSize,
+          focused: isActive,
+          disabled: false
+        }), badge ? /*#__PURE__*/_jsx(View, {
+          style: [badge.isDot ? styles.badgeDot : styles.badgePill, {
+            backgroundColor: colors.error,
+            borderColor: badgeBorder
+          }],
+          children: badge.isDot ? null : /*#__PURE__*/_jsx(Text, {
+            style: [styles.badgeText, {
+              color: colors.text.inverse
+            }],
+            numberOfLines: 1,
+            children: badge.text
+          })
+        }) : null]
+      });
+      // The lift lives on its own node: `scale` runs on the native driver
+      // and `progress` on the JS driver, and one node cannot mix the two.
+      // It is a relative `top`, not a transform: on Android a transform on
+      // this wrapper was ignored for a tab whose label is empty.
+      const iconNode = isBubble ? /*#__PURE__*/_jsx(Animated.View, {
+        style: {
+          top: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, -bubbleLift]
+          })
+        },
+        children: iconWrap
+      }) : iconWrap;
+      const labelNode = showLabel ? /*#__PURE__*/_jsx(Animated.Text, {
+        numberOfLines: 1,
+        style: [styles.label, isExpand ? styles.labelInline : null, {
+          color,
+          opacity: isExpand ? progress : inkOpacity,
+          fontWeight: isActive ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.normal
+        }, labelStyle],
+        children: tab.label
+      }) : null;
+      const pressable = /*#__PURE__*/_jsx(Pressable, {
+        onPress: () => handlePress(tab),
+        accessibilityRole: "tab",
+        accessibilityState: {
+          selected: isActive
+        },
+        accessibilityLabel: `${tab.label}${a11ySuffix}`,
+        accessibilityHint: `Switches to ${tab.label}`,
+        hitSlop: {
+          top: 6,
+          bottom: 6,
+          left: 6,
+          right: 6
+        },
+        style: ({
+          pressed
+        }) => [styles.tab, isTile ? styles.tabTile : null, pressed ? {
+          opacity: 0.85
+        } : null],
+        testID: testID ? `${testID}-tab-${tab.key}` : undefined,
+        children: isExpand ? /*#__PURE__*/_jsxs(View, {
+          style: [styles.expandPill, {
+            height: pillHeight,
+            paddingHorizontal: isActive && labelled ? theme.spacing.md : Math.max(0, (pillHeight - (iconSize + ICON_WRAP_AIR)) / 2)
+          }],
+          children: [/*#__PURE__*/_jsx(View, {
+            pointerEvents: "none",
+            style: [styles.expandFill, {
+              // Half the height, not `radius.full`: Android drops an
+              // oversized radius to square corners while the cell's
+              // flex is being animated.
+              borderRadius: activeBgRadius(pillHeight, pillHeight / 2),
+              ...smoothCorners,
+              backgroundColor: isActive ? colors.primaryMuted : 'transparent'
+            }, isActive ? indicatorStyle : null]
+          }), iconNode, labelNode]
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [iconNode, labelNode]
+        })
+      }, tab.key);
+      if (!isExpand) {
+        return pressable;
+      }
+      // The active cell grows so the pill has room for its label; flex is
+      // layout, hence the JS-driven value.
+      return /*#__PURE__*/_jsx(Animated.View, {
+        style: {
+          // An icon-only tab has nothing to make room for, so it stays a plain cell.
+          flex: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [1, labelled ? EXPANDED_FLEX : 1]
+          })
+        },
+        children: pressable
+      }, tab.key);
+    })), variant === 'underline' && tabWidth > 0 ? /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [styles.underline, indicatorPosition === 'top' ? styles.underlineTop : styles.underlineBottom,
+      // On the padding's outer edge, which is the bar's own edge.
+      indicatorPosition === 'top' ? {
+        top: -paddingTop
+      } : {
+        bottom: -paddingTop
+      }, {
+        width: tabWidth,
+        height: tokens?.underlineHeight ?? DEFAULT_UNDERLINE_HEIGHT,
+        backgroundColor: colors.primary,
+        transform: [{
+          translateX: indicatorTranslateX
+        }]
+      }, indicatorStyle]
+    }) : null]
+  });
+
+  // One tree shape for every variant: root → bar → row. React then keeps the
+  // row (and its onLayout) on a variant switch instead of re-purposing the
+  // capsule view as the row, which left `tabWidth` at the old width.
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    testID: testID,
+    accessibilityRole: "tablist"
+    // Every variant keeps its margin at the sides, so a docked bar sits in
+    // from the screen edges like the capsules do; a vertical margin lifts
+    // it off the bottom the same way.
+    ,
+    style: [styles.outer, {
+      paddingHorizontal: marginHorizontal,
+      paddingTop: Math.max(marginVertical, centerOverhang),
+      paddingBottom: liftBottom
+    }, style],
+    children: /*#__PURE__*/_jsx(View, {
+      style: [isFloating ? styles.floatingBar : styles.dockedBar, barShadow, {
+        backgroundColor: barBackground,
+        borderColor,
+        borderRadius: barRadius,
+        ...smoothCorners
+      }, isFloating ? {
+        borderWidth: hairline,
+        paddingHorizontal: innerPaddingHorizontal,
+        paddingVertical: paddingTop
+      } : {
+        // Named per edge, never the shorthand (see `hairline`).
+        borderTopWidth: hairline,
+        borderBottomWidth: hairline,
+        borderLeftWidth: hairline,
+        borderRightWidth: hairline,
+        paddingHorizontal: barPaddingHorizontal,
+        paddingTop,
+        paddingBottom
+      }],
+      children: tabRow
+    })
+  });
+});
+BottomNavigation.displayName = 'BottomNavigation';
+const buildStyles = theme => StyleSheet.create({
+  outer: {
+    backgroundColor: 'transparent'
+  },
+  dockedBar: {
+    paddingHorizontal: BAR_PADDING_HORIZONTAL
+  },
+  floatingBar: {
+    paddingVertical: FLOATING_BAR_PADDING_VERTICAL,
+    paddingHorizontal: FLOATING_BAR_PADDING_HORIZONTAL
+  },
+  tabRow: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    position: 'relative'
+  },
+  tab: {
+    flex: 1,
+    minHeight: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: TAB_PADDING_VERTICAL,
+    // The pill ends 4px under the icon wrap, so the label's box starts where
+    // the pill ends; the text's own leading is the air, tuned by eye on the
+    // phone with the 18px icon.
+    gap: 4
+  },
+  tabTile: {
+    paddingVertical: TAB_PADDING_VERTICAL + TILE_INSET,
+    gap: TILE_LABEL_GAP
+  },
+  centerCell: {
+    flex: 1,
+    minHeight: 44,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  centerCircle: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  iconWrap: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative'
+  },
+  label: {
+    fontSize: theme.typography.fontSize.xs,
+    lineHeight: theme.typography.fontSize.xs * theme.typography.lineHeight.tight,
+    textAlign: 'center',
+    // Android pads text above its ascenders by default, which reads as a
+    // wider gap under the icon than iOS shows.
+    includeFontPadding: false
+  },
+  labelInline: {
+    fontSize: theme.typography.fontSize.sm,
+    lineHeight: theme.typography.fontSize.sm * theme.typography.lineHeight.tight,
+    flexShrink: 1,
+    includeFontPadding: false
+  },
+  expandPill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.spacing.xs
+  },
+  expandFill: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    overflow: 'hidden'
+  },
+  pill: {
+    position: 'absolute',
+    left: 0
+  },
+  bubble: {
+    position: 'absolute',
+    left: 0,
+    borderWidth: 3
+  },
+  underline: {
+    position: 'absolute',
+    left: 0,
+    height: DEFAULT_UNDERLINE_HEIGHT
+  },
+  underlineBottom: {
+    borderTopLeftRadius: 2,
+    borderTopRightRadius: 2,
+    ...smoothCorners
+  },
+  underlineTop: {
+    borderBottomLeftRadius: 2,
+    borderBottomRightRadius: 2,
+    ...smoothCorners
+  },
+  badgePill: {
+    position: 'absolute',
+    top: -4,
+    right: -8,
+    minWidth: 18,
+    height: 18,
+    borderRadius: 9,
+    ...smoothCorners,
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1.5
+  },
+  badgeDot: {
+    position: 'absolute',
+    top: -2,
+    right: -2,
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    ...smoothCorners,
+    borderWidth: 1.5
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: '700',
+    lineHeight: 12,
+    textAlign: 'center',
+    includeFontPadding: false
+  }
+});
+export { BottomNavigation };
+export default BottomNavigation;
+//# sourceMappingURL=BottomNavigation.js.map