@hero-design/rn 8.130.2 → 8.131.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.130.2",
+  "version": "8.131.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Tabs/ScrollableTabsHeader/ScrollableTabsHeader.tsx

@@ -1,22 +1,33 @@
 import { useTheme } from '@emotion/react';
 import React from 'react';
-import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
-import { FlatList, Platform, TouchableWithoutFeedback } from 'react-native';
+import type {
+  StyleProp,
+  ViewProps,
+  ViewStyle,
+  LayoutChangeEvent,
+} from 'react-native';
+import {
+  Platform,
+  ScrollView,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
 import type { ItemType, TabType } from '..';
 import Icon from '../../Icon';
 import { isHeroIcon } from '../../Icon/utils';
 import Typography from '../../Typography';
 import {
   HeaderTabItem,
+  HeaderTabItemActiveBorder,
   HeaderTabItemIndicator,
-  HeaderTabItemOutline,
-  HeaderTabItemOutlineWrapper,
   HeaderTabItemWrapper,
   HeaderTabWrapper,
+  HeaderTabPillLeft,
+  HeaderTabPillBody,
+  HeaderTabPillRight,
 } from '../StyledScrollableTabs';
 import TabWithBadge from '../TabWithBadge';
-import useInitHighlightedAnimation from './hooks/useInitHighlightedAnimation';
-import useInitUnderlinedAnimation from './hooks/useInitUnderlinedAnimation';
+import useIndicatorAnimation from './hooks/useIndicatorAnimation';
 
 const getTabItem = ({
   item,
@@ -41,7 +52,7 @@ const getTabItem = ({
   if (typeof item === 'string') {
     return (
       <Typography.Body
-        variant={active ? 'regular-bold' : 'regular'}
+        variant={active ? 'small-bold' : 'small'}
         numberOfLines={1}
         style={{ color }}
       >
@@ -88,148 +99,223 @@ export interface ScrollableTabHeaderProps extends ViewProps {
    */
   variant?: 'underlined' | 'highlighted';
 }
+
+type TabItemProps = {
+  tab: TabType;
+  index: number;
+  active: boolean;
+  variant: 'underlined' | 'highlighted';
+  onTabPress: (key: string) => void;
+  onLayout: (event: LayoutChangeEvent) => void;
+};
+
+const TabItemComponent = React.memo(
+  ({ tab, index, active, variant, onTabPress, onLayout }: TabItemProps) => {
+    const theme = useTheme();
+    const isHighlighted = variant === 'highlighted';
+
+    const 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;
+    };
+
+    const inactiveItem = tab.inactiveItem ?? tab.activeItem;
+    const tabItem = getTabItem({
+      item: active ? tab.activeItem : inactiveItem,
+      color: getTextColor(),
+      active,
+    });
+
+    const handlePress = React.useCallback(
+      () => onTabPress(tab.key),
+      [onTabPress, tab.key]
+    );
+
+    return (
+      <TouchableWithoutFeedback
+        key={tab.key}
+        onPress={handlePress}
+        testID={tab.testID}
+        disabled={tab.disabled}
+      >
+        <HeaderTabItem
+          testID={`tab-item-${index}`}
+          isFirstItem={index === 0}
+          themeVariant={variant}
+          onLayout={onLayout}
+        >
+          <HeaderTabItemWrapper>
+            <TabWithBadge config={tab.badge} tabItem={tabItem} />
+          </HeaderTabItemWrapper>
+        </HeaderTabItem>
+      </TouchableWithoutFeedback>
+    );
+  }
+);
+
 const ScrollableTabHeader = ({
   onTabPress,
-  selectedIndex,
+  selectedIndex: rawSelectedIndex,
   tabs,
   barStyle,
   testID,
   insets = { top: 0, bottom: 0, right: 0, left: 0 },
   variant = 'highlighted',
 }: ScrollableTabHeaderProps) => {
+  const selectedIndex =
+    rawSelectedIndex !== undefined && rawSelectedIndex >= 0
+      ? rawSelectedIndex
+      : undefined;
+
   const theme = useTheme();
-  const flatListRef = React.useRef<FlatList>(null);
-
-  // Init underlined animation data
-  const { underlinedTranslateX, underlinedOpacity } =
-    useInitUnderlinedAnimation({
-      tabsLength: tabs.length,
-      selectedIndex,
-      variant,
-    });
+  const scrollViewRef = React.useRef<ScrollView>(null);
+  const isHighlighted = variant === 'highlighted';
 
-  // Init highlighted animation data
-  const { tabsAnims } = useInitHighlightedAnimation({
+  const {
+    indicatorStyle,
+    pillLeftStyle,
+    pillBodyStyle,
+    pillRightStyle,
+    onTabLayout,
+  } = useIndicatorAnimation({
     selectedIndex,
     tabsLength: tabs.length,
-    variant,
+    pillCapWidth: theme.__hd__.tabs.radii.highlightedOutline,
   });
 
-  React.useEffect(() => {
-    const timeoutHandle: number | null = null;
-    if (selectedIndex !== undefined && selectedIndex !== -1) {
-      flatListRef.current?.scrollToIndex({
-        index: selectedIndex,
-        viewPosition: 0.5,
-      });
-    }
-
-    return () => {
-      if (timeoutHandle) {
-        clearTimeout(timeoutHandle);
+  // Scroll to the selected tab after its layout is known.
+  const handleTabLayout = React.useCallback(
+    (index: number, event: LayoutChangeEvent) => {
+      if (index === selectedIndex) {
+        scrollViewRef.current?.scrollTo({
+          x: event.nativeEvent.layout.x,
+          animated: true,
+        });
       }
-    };
-  }, [selectedIndex]);
+      onTabLayout(index, event);
+    },
+    [selectedIndex, onTabLayout]
+  );
+
+  // Memoize per-tab layout handlers so TabItemComponent memo is not broken.
+  const tabLayoutHandlers = React.useMemo(
+    () =>
+      tabs.map(
+        (_, i) => (event: LayoutChangeEvent) => handleTabLayout(i, event)
+      ),
+    // Handlers only need to change when tab count or selection changes.
+    [tabs, handleTabLayout]
+  );
+
+  const scrollViewStyle = React.useMemo(
+    () => ({
+      borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+      borderBottomWidth: isHighlighted
+        ? theme.__hd__.tabs.borderWidths.highlightedHeaderBottom
+        : theme.__hd__.tabs.sizes.indicator,
+    }),
+    [theme, isHighlighted]
+  );
+
+  const contentContainerStyle = React.useMemo(
+    () => ({
+      paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
+      position: 'relative' as const,
+      ...(Platform.OS === 'android' && {
+        borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+        borderBottomWidth: isHighlighted
+          ? theme.__hd__.tabs.borderWidths.highlightedHeaderBottom
+          : theme.__hd__.tabs.sizes.indicator,
+      }),
+    }),
+    [theme, isHighlighted]
+  );
+
+  const wrapperStyle = React.useMemo(
+    () => [
+      isHighlighted && {
+        paddingTop: theme.__hd__.tabs.space.highlightedBarTopPadding,
+      },
+      barStyle,
+    ],
+    [isHighlighted, theme, barStyle]
+  );
 
   return (
-    <HeaderTabWrapper themeInsets={insets} style={barStyle}>
-      <FlatList<TabType>
-        testID={testID}
-        ref={flatListRef}
-        horizontal
-        data={tabs}
-        keyExtractor={(tab) => String(tab.key)}
-        showsHorizontalScrollIndicator={false}
-        onScrollToIndexFailed={({ index }) => {
-          setTimeout(
-            () =>
-              flatListRef.current?.scrollToIndex({
-                index,
-                viewPosition: 0.5,
-              }),
-            100
-          );
-        }}
-        style={{
-          borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
-          borderBottomWidth: theme.__hd__.tabs.sizes.indicator,
-        }}
-        contentContainerStyle={{
-          paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
-
-          // Specify it here again or the indicator won't show
-          ...(Platform.OS === 'android' && {
-            borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
-            borderBottomWidth: theme.__hd__.tabs.sizes.indicator,
-          }),
-        }}
-        renderItem={({ item: tab, index }) => {
-          const {
-            key,
-            testID: tabItemTestID,
-            activeItem,
-            inactiveItem: originalInactiveItem,
-            badge,
-          } = tab;
-          const active = selectedIndex === index;
-          const activeAnimated = tabsAnims[index];
-          const outlineScale = activeAnimated.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0.5, 1],
-          });
-
-          const inactiveItem = originalInactiveItem ?? activeItem;
-          const tabItem = getTabItem({
-            item: active ? activeItem : inactiveItem,
-            color: active
-              ? theme.__hd__.tabs.colors.active
-              : theme.__hd__.tabs.colors.inactive,
-            active,
-          });
-
-          return (
-            <TouchableWithoutFeedback
-              key={key}
-              onPress={() => {
-                onTabPress(key);
-              }}
-              testID={tabItemTestID}
-            >
-              <HeaderTabItem isFirstItem={index === 0}>
-                {variant === 'highlighted' && (
-                  <HeaderTabItemOutlineWrapper>
-                    <HeaderTabItemOutline
-                      themeActive={active}
-                      style={{
-                        flex: 1,
-                        transform: [
-                          {
-                            scaleX: outlineScale,
-                          },
-                        ],
-                      }}
-                    />
-                  </HeaderTabItemOutlineWrapper>
-                )}
-
-                <HeaderTabItemWrapper>
-                  <TabWithBadge config={badge} tabItem={tabItem} />
-                </HeaderTabItemWrapper>
-
-                {variant === 'underlined' && (
-                  <HeaderTabItemIndicator
-                    style={{
-                      opacity: underlinedOpacity[index],
-                      transform: [{ translateX: underlinedTranslateX[index] }],
-                    }}
-                  />
-                )}
-              </HeaderTabItem>
-            </TouchableWithoutFeedback>
-          );
-        }}
-      />
+    <HeaderTabWrapper
+      testID="tab-header-wrapper"
+      themeInsets={insets}
+      style={wrapperStyle}
+    >
+      <View style={isHighlighted ? { overflow: 'hidden' } : undefined}>
+        {/* ScrollView renders all tab items at once (no virtualization).
+            This is intentional: tabs are small, counts are typically low
+            (2–8), and the shared pill animation requires all tab layouts
+            to be measured simultaneously. A FlatList would not provide
+            meaningful memory savings here and would complicate layout
+            measurement. */}
+        <ScrollView
+          ref={scrollViewRef}
+          testID={testID}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={contentContainerStyle}
+          style={scrollViewStyle}
+        >
+          <View style={{ flexDirection: 'row', position: 'relative' }}>
+            {isHighlighted && (
+              <>
+                <HeaderTabPillLeft
+                  testID="tab-pill-background"
+                  style={pillLeftStyle}
+                />
+                <HeaderTabPillBody style={pillBodyStyle} />
+                <HeaderTabPillRight
+                  testID="tab-pill-background-right"
+                  style={pillRightStyle}
+                />
+              </>
+            )}
+            {tabs.map((tab, index) => (
+              <TabItemComponent
+                key={tab.key}
+                tab={tab}
+                index={index}
+                active={selectedIndex === index}
+                variant={variant}
+                onTabPress={onTabPress}
+                onLayout={tabLayoutHandlers[index]}
+              />
+            ))}
+            {isHighlighted ? (
+              <HeaderTabItemActiveBorder
+                testID="tab-active-border"
+                style={{
+                  position: 'absolute' as const,
+                  bottom: 0,
+                  ...indicatorStyle,
+                }}
+              />
+            ) : (
+              <HeaderTabItemIndicator
+                testID="tab-underline-indicator"
+                style={{
+                  position: 'absolute' as const,
+                  ...indicatorStyle,
+                }}
+              />
+            )}
+          </View>
+        </ScrollView>
+      </View>
     </HeaderTabWrapper>
   );
 };
+
 export default ScrollableTabHeader;

package/src/components/Tabs/ScrollableTabsHeader/hooks/useIndicatorAnimation.ts

@@ -0,0 +1,242 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+
+type Layout = { x: number; width: number };
+
+/**
+ * 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)
+ */
+const useIndicatorAnimation = ({
+  selectedIndex,
+  tabsLength,
+  pillCapWidth,
+}: {
+  selectedIndex: number | undefined;
+  tabsLength: number;
+  /** Width of each rounded cap, should equal theme radii.highlightedOutline. */
+  pillCapWidth: number;
+}) => {
+  // Layer 1 — native driver (bottom border / underline).
+  const indicatorX = React.useRef(new Animated.Value(0)).current;
+  const indicatorScaleX = React.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).
+  const pillX = React.useRef(new Animated.Value(0)).current;
+  const pillBodyScaleX = React.useRef(new Animated.Value(1)).current;
+  const pillRightOffset = React.useRef(new Animated.Value(0)).current;
+
+  // Stable ref so callbacks don't capture stale closures.
+  const layoutsRef = React.useRef<(Layout | undefined)[]>([]);
+  const runningAnimRef = React.useRef<Animated.CompositeAnimation | null>(null);
+  const pendingIndexRef = React.useRef<number | undefined>(undefined);
+  const initializedRef = React.useRef(false);
+
+  // Resize layout cache when tabsLength changes.
+  React.useEffect(() => {
+    layoutsRef.current = Array.from(
+      { length: tabsLength },
+      (_, i) => layoutsRef.current[i]
+    );
+  }, [tabsLength]);
+
+  const animateTo = React.useCallback(
+    (index: number, animate: boolean) => {
+      const layout = layoutsRef.current[index];
+      if (!layout) return;
+
+      runningAnimRef.current?.stop();
+      runningAnimRef.current = null;
+
+      // Layer 1: bottom-border element has width:1, so scaleX = pixel width.
+      const indicatorScaleXValue = layout.width;
+      // Layer 2 body: width:1 element, scaleX fills space between the two caps.
+      const 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.
+      const 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
+      const 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(({ finished }) => {
+        if (finished) runningAnimRef.current = null;
+      });
+    },
+    [
+      indicatorX,
+      indicatorScaleX,
+      pillX,
+      pillBodyScaleX,
+      pillRightOffset,
+      pillCapWidth,
+    ]
+  );
+
+  // Animate to selected tab whenever selectedIndex changes.
+  React.useEffect(() => {
+    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, animateTo]);
+
+  // Stop any in-flight animation on unmount.
+  React.useEffect(() => {
+    return () => {
+      runningAnimRef.current?.stop();
+    };
+  }, []);
+
+  const onTabLayout = React.useCallback(
+    (index: number, event: LayoutChangeEvent) => {
+      const { x, width } = event.nativeEvent.layout;
+      const 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, 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.
+  const indicatorStyle = {
+    transformOrigin: 'left center',
+    transform: [{ translateX: indicatorX }, { scaleX: indicatorScaleX }],
+  } as const;
+
+  // Layer 2: three pieces, all absolutely positioned, all native driver.
+  // Animated.add computes derived positions without creating JS-driver nodes.
+  const pillLeftStyle = {
+    transform: [{ translateX: pillX }],
+  } as const;
+
+  const pillBodyStyle = {
+    transformOrigin: 'left center',
+    transform: [
+      { translateX: Animated.add(pillX, pillCapWidth) },
+      { scaleX: pillBodyScaleX },
+    ],
+  } as const;
+
+  const pillRightStyle = {
+    transform: [{ translateX: Animated.add(pillX, pillRightOffset) }],
+  } as const;
+
+  return {
+    indicatorStyle,
+    pillLeftStyle,
+    pillBodyStyle,
+    pillRightStyle,
+    onTabLayout,
+  };
+};
+
+export default useIndicatorAnimation;