@hero-design/rn 8.130.3 → 8.131.0

package/es/index.js

@@ -7137,7 +7137,11 @@ var getTabsTheme = function getTabsTheme(theme) {
     headerBottom: theme.colors.secondaryOutline,
     indicator: theme.colors.primary,
     text: theme.colors.onDefaultGlobalSurface,
-    headerBackground: theme.colors.defaultGlobalSurface
+    headerBackground: theme.colors.defaultGlobalSurface,
+    highlightedActiveText: theme.colors.primary,
+    highlightedActiveBorder: theme.colors.primary,
+    highlightedActiveBackground: theme.colors.neutralGlobalSurface,
+    highlightedDisabledText: theme.colors.disabledOnDefaultGlobalSurface
   };
   var space = {
     flatListHorizontalPadding: theme.space.small,
@@ -7145,14 +7149,17 @@ var getTabsTheme = function getTabsTheme(theme) {
     itemVerticalPadding: theme.space.small,
     itemMargin: theme.space.smallMedium,
     outlineHorizontalPadding: theme.space.small,
-    outlineVerticalPadding: theme.space.xsmall,
-    tabIndicatorBottom: -theme.space.xxsmall
+    tabIndicatorBottom: -theme.space.xxsmall,
+    highlightedItemMargin: theme.space.xsmall,
+    highlightedBarTopPadding: theme.space.xxsmall
   };
   var radii = {
-    outline: theme.radii.xlarge
+    highlightedOutline: theme.radii.medium
   };
   var borderWidths = {
-    headerBottom: theme.borderWidths.medium
+    headerBottom: theme.borderWidths.medium,
+    highlightedHeaderBottom: theme.borderWidths.base,
+    highlightedActiveBorder: theme.borderWidths.base
   };
   var sizes = {
     indicator: theme.sizes.xxsmall
@@ -28111,43 +28118,85 @@ var HeaderTabWrapper = index$c(View)(function (_ref) {
     backgroundColor: theme.__hd__.tabs.colors.headerBackground
   };
 });
+var getItemMarginLeft = function getItemMarginLeft(isFirstItem, themeVariant, highlightedMargin, defaultMargin) {
+  if (isFirstItem) return 0;
+  if (themeVariant === 'highlighted') return highlightedMargin;
+  return defaultMargin;
+};
 var HeaderTabItem = index$c(Animated.View)(function (_ref2) {
   var theme = _ref2.theme,
-    isFirstItem = _ref2.isFirstItem;
+    isFirstItem = _ref2.isFirstItem,
+    themeVariant = _ref2.themeVariant;
   return {
-    marginLeft: isFirstItem ? 0 : theme.__hd__.tabs.space.itemMargin,
-    paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
+    marginLeft: getItemMarginLeft(isFirstItem, themeVariant, theme.__hd__.tabs.space.highlightedItemMargin, theme.__hd__.tabs.space.itemMargin),
+    paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
+    alignItems: 'center',
+    justifyContent: 'center'
   };
 });
-var HeaderTabItemOutlineWrapper = index$c(View)(function (_ref3) {
+// Three-piece pill: left cap + body + right cap, all native-driver animated.
+// Splitting into pieces keeps border-radius on fixed-width views so scaleX
+// never distorts the rounded corners. Cap width equals the border-radius so
+// the rounded edge is fully contained within the cap piece.
+var HeaderTabPillLeft = index$c(Animated.View)(function (_ref3) {
   var theme = _ref3.theme;
-  return _objectSpread2({
-    paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
-  }, StyleSheet$1.absoluteFillObject);
+  return {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    width: theme.__hd__.tabs.radii.highlightedOutline,
+    borderTopLeftRadius: theme.__hd__.tabs.radii.highlightedOutline,
+    backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBackground
+  };
 });
-var HeaderTabItemOutline = index$c(Animated.View)(function (_ref4) {
-  var theme = _ref4.theme,
-    themeActive = _ref4.themeActive;
+var HeaderTabPillBody = index$c(Animated.View)(function (_ref4) {
+  var theme = _ref4.theme;
   return {
-    borderRadius: theme.__hd__.tabs.radii.outline,
-    backgroundColor: themeActive ? theme.__hd__.tabs.colors.activeBackground : undefined
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    width: 1,
+    backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBackground
   };
 });
-var HeaderTabItemWrapper = index$c(View)(function (_ref5) {
+var HeaderTabPillRight = index$c(Animated.View)(function (_ref5) {
   var theme = _ref5.theme;
+  return {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    width: theme.__hd__.tabs.radii.highlightedOutline,
+    borderTopRightRadius: theme.__hd__.tabs.radii.highlightedOutline,
+    backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBackground
+  };
+});
+var HeaderTabItemActiveBorder = index$c(Animated.View)(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    position: 'absolute',
+    bottom: 0,
+    width: 1,
+    height: theme.__hd__.tabs.borderWidths.highlightedActiveBorder,
+    backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBorder
+  };
+});
+var HeaderTabItemWrapper = index$c(View)(function (_ref7) {
+  var theme = _ref7.theme;
   return _objectSpread2({
     paddingHorizontal: theme.__hd__.tabs.space.outlineHorizontalPadding,
-    paddingVertical: theme.__hd__.tabs.space.outlineVerticalPadding,
     position: 'relative',
     justifyContent: 'center'
   }, !isAndroid8 && {
     alignItems: 'center'
   });
 });
-var HeaderTabItemIndicator = index$c(Animated.View)(function (_ref6) {
-  var theme = _ref6.theme;
+var HeaderTabItemIndicator = index$c(Animated.View)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
-    width: '100%',
+    width: 1,
     height: theme.__hd__.tabs.sizes.indicator,
     position: 'absolute',
     bottom: theme.__hd__.tabs.space.tabIndicatorBottom,
@@ -28228,109 +28277,204 @@ var TabWithBadge = function TabWithBadge(_ref) {
   return /*#__PURE__*/React__default.createElement(View, null, tabItem);
 };
 
-var useAnimatedValueArray = function useAnimatedValueArray(initialValues) {
-  var refs = React__default.useRef([]);
-  refs.current.length = initialValues.length;
-  initialValues.forEach(function (initialValue, i) {
-    var _refs$current$i;
-    refs.current[i] = (_refs$current$i = refs.current[i]) !== null && _refs$current$i !== void 0 ? _refs$current$i : new Animated.Value(initialValue);
-  });
-  return refs.current;
-};
-
-var useInitHighlightedAnimation = function useInitHighlightedAnimation(_ref) {
-  var _ref$selectedIndex = _ref.selectedIndex,
-    selectedIndex = _ref$selectedIndex === void 0 ? 0 : _ref$selectedIndex,
+/**
+ * Drives two visual layers that slide to the selected tab on every press:
+ *
+ *  Layer 1 — bottom border / underline  (indicatorStyle)
+ *  ─────────────────────────────────────────────────────
+ *  Uses the "width:1 + scaleX" trick: the element has a fixed stylesheet
+ *  width of 1px and scaleX is set to the target pixel width, giving a visual
+ *  width of 1 × scaleX pixels without touching any layout property.
+ *  Both translateX and scaleX are transform properties → native driver.
+ *  Caveat: scaleX also scales border-radius, so this layer has no border-radius.
+ *
+ *  Layer 2 — pill background  (pillLeftStyle / pillBodyStyle / pillRightStyle)
+ *  ─────────────────────────────────────────────────────────────────────────────
+ *  The pill is split into three absolutely-positioned children so that
+ *  border-radius is never distorted by scale:
+ *
+ *    ┌──────────────────────────────────────────────────────┐
+ *    │  [cap-left 8px]  [body width-1 + scaleX]  [cap-right 8px]  │
+ *    └──────────────────────────────────────────────────────┘
+ *
+ *    cap-left  — fixed 8px wide, borderTopLeftRadius:8,  translateX = pillX
+ *    body      — width:1 + scaleX trick (scaleX = tabWidth - 16),
+ *                transformOrigin 'left center',
+ *                translateX = pillX + 8  (via Animated.add)
+ *    cap-right — fixed 8px wide, borderTopRightRadius:8,
+ *                translateX = pillX + tabWidth - 8  (via Animated.add)
+ *
+ *  All four animated values use the native driver (translateX and scaleX are
+ *  transform properties). `width` is never animated, so no JS driver needed.
+ *
+ *  Driver summary:
+ *    indicatorX        native  translateX — slides the bottom border
+ *    indicatorScaleX   native  scaleX     — stretches the bottom border
+ *    pillX             native  translateX — slides all three pill pieces
+ *    pillBodyScaleX    native  scaleX     — stretches the pill body
+ *    pillRightOffsetX  native  translateX — positions the right cap
+ *                                          (Animated.add: pillX + tabWidth - 8)
+ */
+var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
+  var selectedIndex = _ref.selectedIndex,
     tabsLength = _ref.tabsLength,
-    variant = _ref.variant;
-  var tabsAnims = useAnimatedValueArray(Array.from({
-    length: tabsLength
-  }).map(function (_, i) {
-    return i === selectedIndex ? 1 : 0;
-  }));
+    pillCapWidth = _ref.pillCapWidth;
+  // Layer 1 — native driver (bottom border / underline).
+  var indicatorX = React__default.useRef(new Animated.Value(0)).current;
+  var indicatorScaleX = React__default.useRef(new Animated.Value(1)).current;
+  // Layer 2 — native driver (pill background, three-piece split).
+  // pillX: left edge of the pill (shared by all three pieces as base).
+  // pillBodyScaleX: scaleX for the body piece (tabWidth - 2 * CAP_WIDTH).
+  // pillRightOffset: additional x offset for the right cap (tabWidth - CAP_WIDTH).
+  var pillX = React__default.useRef(new Animated.Value(0)).current;
+  var pillBodyScaleX = React__default.useRef(new Animated.Value(1)).current;
+  var pillRightOffset = React__default.useRef(new Animated.Value(0)).current;
+  // Stable ref so callbacks don't capture stale closures.
+  var layoutsRef = React__default.useRef([]);
+  var runningAnimRef = React__default.useRef(null);
+  var pendingIndexRef = React__default.useRef(undefined);
+  var initializedRef = React__default.useRef(false);
+  // Resize layout cache when tabsLength changes.
   React__default.useEffect(function () {
-    if (variant !== 'highlighted') {
-      return;
-    }
-    var animation = Animated.parallel(_toConsumableArray(Array.from({
+    layoutsRef.current = Array.from({
       length: tabsLength
-    }).map(function (_, i) {
-      return Animated.timing(tabsAnims[i], {
-        toValue: i === selectedIndex ? 1 : 0,
-        duration: 150,
-        useNativeDriver: Platform.OS !== 'web'
-      });
-    })));
-    animation.start();
-    return function () {
-      animation.stop();
-    };
-  }, [selectedIndex]);
-  return {
-    tabsAnims: tabsAnims
-  };
-};
-
-var TRANSLATE_DISTANCE = 30;
-var animateOpacity = function animateOpacity(animatedValue, toValue) {
-  return Animated.timing(animatedValue, {
-    toValue: toValue,
-    duration: 150,
-    easing: Easing.ease,
-    useNativeDriver: Platform.OS !== 'web'
-  });
-};
-var animateTranslateX = function animateTranslateX(animatedValue, toValue) {
-  return Animated.spring(animatedValue, {
-    toValue: toValue,
-    useNativeDriver: Platform.OS !== 'web'
-  });
-};
-var useInitUnderlinedAnimation = function useInitUnderlinedAnimation(_ref) {
-  var tabsLength = _ref.tabsLength,
-    _ref$selectedIndex = _ref.selectedIndex,
-    selectedIndex = _ref$selectedIndex === void 0 ? 0 : _ref$selectedIndex,
-    variant = _ref.variant;
-  var previousIndex = React__default.useRef(0);
-  var translateXAnims = useAnimatedValueArray(Array.from({
-    length: tabsLength
-  }).map(function () {
-    return 0;
-  }));
-  var opacityAnims = useAnimatedValueArray(Array.from({
-    length: tabsLength
-  }).map(function (_, i) {
-    return selectedIndex !== undefined && selectedIndex === i ? 1 : 0;
-  }));
-  var underlinedTranslateX = translateXAnims.map(function (anim) {
-    return anim.interpolate({
-      inputRange: [-1, 0, 1],
-      outputRange: [-TRANSLATE_DISTANCE, 0, TRANSLATE_DISTANCE]
+    }, function (_, i) {
+      return layoutsRef.current[i];
     });
-  });
-  var underlinedOpacity = opacityAnims.map(function (anim) {
-    return anim.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1]
+  }, [tabsLength]);
+  var animateTo = React__default.useCallback(function (index, animate) {
+    var _runningAnimRef$curre;
+    var layout = layoutsRef.current[index];
+    if (!layout) return;
+    (_runningAnimRef$curre = runningAnimRef.current) === null || _runningAnimRef$curre === void 0 || _runningAnimRef$curre.stop();
+    runningAnimRef.current = null;
+    // Layer 1: bottom-border element has width:1, so scaleX = pixel width.
+    var indicatorScaleXValue = layout.width;
+    // Layer 2 body: width:1 element, scaleX fills space between the two caps.
+    var bodyScaleX = Math.max(layout.width - pillCapWidth * 2, 0);
+    // Layer 2 right cap: offset from pillX to reach the right edge.
+    // Clamped to 0 so the right cap never slides left of the pill's origin
+    // when the tab is narrower than one cap width.
+    var rightOffset = Math.max(layout.width - pillCapWidth, 0);
+    if (!animate || !initializedRef.current) {
+      // First render — snap all values immediately without animation.
+      indicatorX.setValue(layout.x);
+      indicatorScaleX.setValue(indicatorScaleXValue);
+      pillX.setValue(layout.x);
+      pillBodyScaleX.setValue(bodyScaleX);
+      pillRightOffset.setValue(rightOffset);
+      initializedRef.current = true;
+      return;
+    }
+    // All five animations run on the native driver (UI thread):
+    //   indicatorX        — slides the bottom border
+    //   indicatorScaleX   — stretches the bottom border
+    //   pillX             — slides all three pill pieces together
+    //   pillBodyScaleX    — resizes the body piece to fill between caps
+    //   pillRightOffset   — keeps the right cap at the pill's right edge
+    var anim = Animated.parallel([Animated.timing(indicatorX, {
+      toValue: layout.x,
+      useNativeDriver: true
+    }), Animated.timing(indicatorScaleX, {
+      toValue: indicatorScaleXValue,
+      useNativeDriver: true
+    }), Animated.timing(pillX, {
+      toValue: layout.x,
+      useNativeDriver: true
+    }), Animated.timing(pillBodyScaleX, {
+      toValue: bodyScaleX,
+      useNativeDriver: true
+    }), Animated.timing(pillRightOffset, {
+      toValue: rightOffset,
+      useNativeDriver: true
+    })]);
+    runningAnimRef.current = anim;
+    anim.start(function (_ref2) {
+      var finished = _ref2.finished;
+      if (finished) runningAnimRef.current = null;
     });
-  });
+  }, [indicatorX, indicatorScaleX, pillX, pillBodyScaleX, pillRightOffset, pillCapWidth]);
+  // Animate to selected tab whenever selectedIndex changes.
   React__default.useEffect(function () {
-    if (variant === 'underlined' && selectedIndex !== undefined && previousIndex.current !== selectedIndex) {
-      // Prepare for translateX into the right position.
-      if (selectedIndex > previousIndex.current) {
-        translateXAnims[selectedIndex].setValue(-1);
-      } else {
-        translateXAnims[selectedIndex].setValue(1);
-      }
-      // Split animations into 2 sets of parallel animations to prevent race condition.
-      Animated.parallel([animateOpacity(opacityAnims[selectedIndex], 1), animateTranslateX(translateXAnims[selectedIndex], 0)]).start();
-      Animated.parallel([animateOpacity(opacityAnims[previousIndex.current], 0), animateTranslateX(translateXAnims[previousIndex.current], selectedIndex > previousIndex.current ? 1 : -1)]).start();
-      previousIndex.current = selectedIndex;
+    if (selectedIndex === undefined) return;
+    if (layoutsRef.current[selectedIndex]) {
+      animateTo(selectedIndex, initializedRef.current);
+    } else {
+      // Layout not yet measured — store as pending and resolve in onTabLayout.
+      pendingIndexRef.current = selectedIndex;
     }
-  }, [selectedIndex, variant, opacityAnims, translateXAnims]);
+  }, [selectedIndex, animateTo]);
+  // Stop any in-flight animation on unmount.
+  React__default.useEffect(function () {
+    return function () {
+      var _runningAnimRef$curre2;
+      (_runningAnimRef$curre2 = runningAnimRef.current) === null || _runningAnimRef$curre2 === void 0 || _runningAnimRef$curre2.stop();
+    };
+  }, []);
+  var onTabLayout = React__default.useCallback(function (index, event) {
+    var _event$nativeEvent$la = event.nativeEvent.layout,
+      x = _event$nativeEvent$la.x,
+      width = _event$nativeEvent$la.width;
+    var prev = layoutsRef.current[index];
+    // Skip if layout hasn't meaningfully changed (sub-pixel tolerance).
+    if (prev && Math.abs(prev.x - x) < 0.5 && Math.abs(prev.width - width) < 0.5) {
+      return;
+    }
+    layoutsRef.current[index] = {
+      x: x,
+      width: width
+    };
+    // Animate if this tab is the selected one (covers the pending case where
+    // selectedIndex was set before the layout was measured).
+    if (index === selectedIndex || index === pendingIndexRef.current) {
+      if (index === pendingIndexRef.current) pendingIndexRef.current = undefined;
+      animateTo(index, initializedRef.current);
+    }
+    // If no tab is selected yet, snap indicators to tab 0 on its first
+    // layout so they appear at a sensible default position.
+    if (!initializedRef.current && index === 0 && selectedIndex === undefined) {
+      indicatorScaleX.setValue(width);
+      pillX.setValue(x);
+      pillBodyScaleX.setValue(Math.max(width - pillCapWidth * 2, 0));
+      pillRightOffset.setValue(Math.max(width - pillCapWidth, 0));
+      initializedRef.current = true;
+    }
+  }, [animateTo, selectedIndex, pillCapWidth]);
+  // Layer 1: transformOrigin 'left center' pins scaleX expansion to left edge.
+  var indicatorStyle = {
+    transformOrigin: 'left center',
+    transform: [{
+      translateX: indicatorX
+    }, {
+      scaleX: indicatorScaleX
+    }]
+  };
+  // Layer 2: three pieces, all absolutely positioned, all native driver.
+  // Animated.add computes derived positions without creating JS-driver nodes.
+  var pillLeftStyle = {
+    transform: [{
+      translateX: pillX
+    }]
+  };
+  var pillBodyStyle = {
+    transformOrigin: 'left center',
+    transform: [{
+      translateX: Animated.add(pillX, pillCapWidth)
+    }, {
+      scaleX: pillBodyScaleX
+    }]
+  };
+  var pillRightStyle = {
+    transform: [{
+      translateX: Animated.add(pillX, pillRightOffset)
+    }]
+  };
   return {
-    underlinedTranslateX: underlinedTranslateX,
-    underlinedOpacity: underlinedOpacity
+    indicatorStyle: indicatorStyle,
+    pillLeftStyle: pillLeftStyle,
+    pillBodyStyle: pillBodyStyle,
+    pillRightStyle: pillRightStyle,
+    onTabLayout: onTabLayout
   };
 };
 
@@ -28350,7 +28494,7 @@ var getTabItem$1 = function getTabItem(_ref) {
   }
   if (typeof item === 'string') {
     return /*#__PURE__*/React__default.createElement(Typography.Body, {
-      variant: active ? 'regular-bold' : 'regular',
+      variant: active ? 'small-bold' : 'small',
       numberOfLines: 1,
       style: {
         color: color
@@ -28361,130 +28505,167 @@ var getTabItem$1 = function getTabItem(_ref) {
     color: color
   });
 };
-var ScrollableTabHeader = function ScrollableTabHeader(_ref2) {
-  var onTabPress = _ref2.onTabPress,
-    selectedIndex = _ref2.selectedIndex,
-    tabs = _ref2.tabs,
-    barStyle = _ref2.barStyle,
-    testID = _ref2.testID,
-    _ref2$insets = _ref2.insets,
-    insets = _ref2$insets === void 0 ? {
+var TabItemComponent = /*#__PURE__*/React__default.memo(function (_ref2) {
+  var _tab$inactiveItem;
+  var tab = _ref2.tab,
+    index = _ref2.index,
+    active = _ref2.active,
+    variant = _ref2.variant,
+    onTabPress = _ref2.onTabPress,
+    onLayout = _ref2.onLayout;
+  var theme = useTheme$1();
+  var isHighlighted = variant === 'highlighted';
+  var getTextColor = function getTextColor() {
+    if (isHighlighted) {
+      if (tab.disabled) return theme.__hd__.tabs.colors.highlightedDisabledText;
+      if (active) return theme.__hd__.tabs.colors.highlightedActiveText;
+    }
+    return active ? theme.__hd__.tabs.colors.active : theme.__hd__.tabs.colors.inactive;
+  };
+  var inactiveItem = (_tab$inactiveItem = tab.inactiveItem) !== null && _tab$inactiveItem !== void 0 ? _tab$inactiveItem : tab.activeItem;
+  var tabItem = getTabItem$1({
+    item: active ? tab.activeItem : inactiveItem,
+    color: getTextColor(),
+    active: active
+  });
+  var handlePress = React__default.useCallback(function () {
+    return onTabPress(tab.key);
+  }, [onTabPress, tab.key]);
+  return /*#__PURE__*/React__default.createElement(TouchableWithoutFeedback, {
+    key: tab.key,
+    onPress: handlePress,
+    testID: tab.testID,
+    disabled: tab.disabled
+  }, /*#__PURE__*/React__default.createElement(HeaderTabItem, {
+    testID: "tab-item-".concat(index),
+    isFirstItem: index === 0,
+    themeVariant: variant,
+    onLayout: onLayout
+  }, /*#__PURE__*/React__default.createElement(HeaderTabItemWrapper, null, /*#__PURE__*/React__default.createElement(TabWithBadge, {
+    config: tab.badge,
+    tabItem: tabItem
+  }))));
+});
+var ScrollableTabHeader = function ScrollableTabHeader(_ref3) {
+  var onTabPress = _ref3.onTabPress,
+    rawSelectedIndex = _ref3.selectedIndex,
+    tabs = _ref3.tabs,
+    barStyle = _ref3.barStyle,
+    testID = _ref3.testID,
+    _ref3$insets = _ref3.insets,
+    insets = _ref3$insets === void 0 ? {
       top: 0,
       bottom: 0,
       right: 0,
       left: 0
-    } : _ref2$insets,
-    _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? 'highlighted' : _ref2$variant;
+    } : _ref3$insets,
+    _ref3$variant = _ref3.variant,
+    variant = _ref3$variant === void 0 ? 'highlighted' : _ref3$variant;
+  var selectedIndex = rawSelectedIndex !== undefined && rawSelectedIndex >= 0 ? rawSelectedIndex : undefined;
   var theme = useTheme$1();
-  var flatListRef = React__default.useRef(null);
-  // Init underlined animation data
-  var _useInitUnderlinedAni = useInitUnderlinedAnimation({
-      tabsLength: tabs.length,
-      selectedIndex: selectedIndex,
-      variant: variant
-    }),
-    underlinedTranslateX = _useInitUnderlinedAni.underlinedTranslateX,
-    underlinedOpacity = _useInitUnderlinedAni.underlinedOpacity;
-  // Init highlighted animation data
-  var _useInitHighlightedAn = useInitHighlightedAnimation({
+  var scrollViewRef = React__default.useRef(null);
+  var isHighlighted = variant === 'highlighted';
+  var _useIndicatorAnimatio = useIndicatorAnimation({
       selectedIndex: selectedIndex,
       tabsLength: tabs.length,
-      variant: variant
+      pillCapWidth: theme.__hd__.tabs.radii.highlightedOutline
     }),
-    tabsAnims = _useInitHighlightedAn.tabsAnims;
-  React__default.useEffect(function () {
-    if (selectedIndex !== undefined && selectedIndex !== -1) {
-      var _flatListRef$current;
-      (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 || _flatListRef$current.scrollToIndex({
-        index: selectedIndex,
-        viewPosition: 0.5
+    indicatorStyle = _useIndicatorAnimatio.indicatorStyle,
+    pillLeftStyle = _useIndicatorAnimatio.pillLeftStyle,
+    pillBodyStyle = _useIndicatorAnimatio.pillBodyStyle,
+    pillRightStyle = _useIndicatorAnimatio.pillRightStyle,
+    onTabLayout = _useIndicatorAnimatio.onTabLayout;
+  // Scroll to the selected tab after its layout is known.
+  var handleTabLayout = React__default.useCallback(function (index, event) {
+    if (index === selectedIndex) {
+      var _scrollViewRef$curren;
+      (_scrollViewRef$curren = scrollViewRef.current) === null || _scrollViewRef$curren === void 0 || _scrollViewRef$curren.scrollTo({
+        x: event.nativeEvent.layout.x,
+        animated: true
       });
     }
-    return function () {
+    onTabLayout(index, event);
+  }, [selectedIndex, onTabLayout]);
+  // Memoize per-tab layout handlers so TabItemComponent memo is not broken.
+  var tabLayoutHandlers = React__default.useMemo(function () {
+    return tabs.map(function (_, i) {
+      return function (event) {
+        return handleTabLayout(i, event);
+      };
+    });
+  },
+  // Handlers only need to change when tab count or selection changes.
+  [tabs, handleTabLayout]);
+  var scrollViewStyle = React__default.useMemo(function () {
+    return {
+      borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+      borderBottomWidth: isHighlighted ? theme.__hd__.tabs.borderWidths.highlightedHeaderBottom : theme.__hd__.tabs.sizes.indicator
     };
-  }, [selectedIndex]);
+  }, [theme, isHighlighted]);
+  var contentContainerStyle = React__default.useMemo(function () {
+    return _objectSpread2({
+      paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
+      position: 'relative'
+    }, Platform.OS === 'android' && {
+      borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+      borderBottomWidth: isHighlighted ? theme.__hd__.tabs.borderWidths.highlightedHeaderBottom : theme.__hd__.tabs.sizes.indicator
+    });
+  }, [theme, isHighlighted]);
+  var wrapperStyle = React__default.useMemo(function () {
+    return [isHighlighted && {
+      paddingTop: theme.__hd__.tabs.space.highlightedBarTopPadding
+    }, barStyle];
+  }, [isHighlighted, theme, barStyle]);
   return /*#__PURE__*/React__default.createElement(HeaderTabWrapper, {
+    testID: "tab-header-wrapper",
     themeInsets: insets,
-    style: barStyle
-  }, /*#__PURE__*/React__default.createElement(FlatList, {
+    style: wrapperStyle
+  }, /*#__PURE__*/React__default.createElement(View, {
+    style: isHighlighted ? {
+      overflow: 'hidden'
+    } : undefined
+  }, /*#__PURE__*/React__default.createElement(ScrollView, {
+    ref: scrollViewRef,
     testID: testID,
-    ref: flatListRef,
     horizontal: true,
-    data: tabs,
-    keyExtractor: function keyExtractor(tab) {
-      return String(tab.key);
-    },
     showsHorizontalScrollIndicator: false,
-    onScrollToIndexFailed: function onScrollToIndexFailed(_ref3) {
-      var index = _ref3.index;
-      setTimeout(function () {
-        var _flatListRef$current2;
-        return (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
-          index: index,
-          viewPosition: 0.5
-        });
-      }, 100);
-    },
+    contentContainerStyle: contentContainerStyle,
+    style: scrollViewStyle
+  }, /*#__PURE__*/React__default.createElement(View, {
     style: {
-      borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
-      borderBottomWidth: theme.__hd__.tabs.sizes.indicator
-    },
-    contentContainerStyle: _objectSpread2({
-      paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding
-    }, Platform.OS === 'android' && {
-      borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
-      borderBottomWidth: theme.__hd__.tabs.sizes.indicator
-    }),
-    renderItem: function renderItem(_ref4) {
-      var tab = _ref4.item,
-        index = _ref4.index;
-      var key = tab.key,
-        tabItemTestID = tab.testID,
-        activeItem = tab.activeItem,
-        originalInactiveItem = tab.inactiveItem,
-        badge = tab.badge;
-      var active = selectedIndex === index;
-      var activeAnimated = tabsAnims[index];
-      var outlineScale = activeAnimated.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0.5, 1]
-      });
-      var inactiveItem = originalInactiveItem !== null && originalInactiveItem !== void 0 ? originalInactiveItem : activeItem;
-      var tabItem = getTabItem$1({
-        item: active ? activeItem : inactiveItem,
-        color: active ? theme.__hd__.tabs.colors.active : theme.__hd__.tabs.colors.inactive,
-        active: active
-      });
-      return /*#__PURE__*/React__default.createElement(TouchableWithoutFeedback, {
-        key: key,
-        onPress: function onPress() {
-          onTabPress(key);
-        },
-        testID: tabItemTestID
-      }, /*#__PURE__*/React__default.createElement(HeaderTabItem, {
-        isFirstItem: index === 0
-      }, variant === 'highlighted' && /*#__PURE__*/React__default.createElement(HeaderTabItemOutlineWrapper, null, /*#__PURE__*/React__default.createElement(HeaderTabItemOutline, {
-        themeActive: active,
-        style: {
-          flex: 1,
-          transform: [{
-            scaleX: outlineScale
-          }]
-        }
-      })), /*#__PURE__*/React__default.createElement(HeaderTabItemWrapper, null, /*#__PURE__*/React__default.createElement(TabWithBadge, {
-        config: badge,
-        tabItem: tabItem
-      })), variant === 'underlined' && /*#__PURE__*/React__default.createElement(HeaderTabItemIndicator, {
-        style: {
-          opacity: underlinedOpacity[index],
-          transform: [{
-            translateX: underlinedTranslateX[index]
-          }]
-        }
-      })));
+      flexDirection: 'row',
+      position: 'relative'
     }
-  }));
+  }, isHighlighted && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HeaderTabPillLeft, {
+    testID: "tab-pill-background",
+    style: pillLeftStyle
+  }), /*#__PURE__*/React__default.createElement(HeaderTabPillBody, {
+    style: pillBodyStyle
+  }), /*#__PURE__*/React__default.createElement(HeaderTabPillRight, {
+    testID: "tab-pill-background-right",
+    style: pillRightStyle
+  })), tabs.map(function (tab, index) {
+    return /*#__PURE__*/React__default.createElement(TabItemComponent, {
+      key: tab.key,
+      tab: tab,
+      index: index,
+      active: selectedIndex === index,
+      variant: variant,
+      onTabPress: onTabPress,
+      onLayout: tabLayoutHandlers[index]
+    });
+  }), isHighlighted ? /*#__PURE__*/React__default.createElement(HeaderTabItemActiveBorder, {
+    testID: "tab-active-border",
+    style: _objectSpread2({
+      position: 'absolute',
+      bottom: 0
+    }, indicatorStyle)
+  }) : /*#__PURE__*/React__default.createElement(HeaderTabItemIndicator, {
+    testID: "tab-underline-indicator",
+    style: _objectSpread2({
+      position: 'absolute'
+    }, indicatorStyle)
+  })))));
 };
 
 var useHandlePageScroll = function useHandlePageScroll() {