@hero-design/rn 8.131.1 → 8.131.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.131.2
+
+### Patch Changes
+
+- [#5161](https://github.com/Thinkei/hero-design/pull/5161) [`f9dd6c0a09ca33eac8455c8d03bbbf420f9b6d27`](https://github.com/Thinkei/hero-design/commit/f9dd6c0a09ca33eac8455c8d03bbbf420f9b6d27) Thanks [@ttkien](https://github.com/ttkien)! - [Tabs] Fix white space in Tab.Scroll header
+
 ## 8.131.1
 
 ### Patch Changes

package/es/index.js

@@ -1,5 +1,5 @@
 import * as reactNative from 'react-native';
-import { StyleSheet as StyleSheet$1, Platform, Dimensions, Keyboard, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, useWindowDimensions, TouchableWithoutFeedback, Modal as Modal$1, Image as Image$1, Pressable, KeyboardAvoidingView, TouchableHighlight, ScrollView, FlatList, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, SectionList, RefreshControl as RefreshControl$1 } from 'react-native';
+import { StyleSheet as StyleSheet$1, Platform, Dimensions, Keyboard, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, useWindowDimensions, TouchableWithoutFeedback, Modal as Modal$1, Image as Image$1, Pressable, KeyboardAvoidingView, TouchableHighlight, ScrollView, FlatList, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, SectionList, PixelRatio, RefreshControl as RefreshControl$1 } from 'react-native';
 import * as React from 'react';
 import React__default, { useState, useEffect, useMemo, useCallback, useRef, useLayoutEffect, createContext, forwardRef, useContext, memo, useReducer, isValidElement, useImperativeHandle } from 'react';
 import MaskedView from '@react-native-masked-view/masked-view';
@@ -28157,7 +28157,7 @@ var HeaderTabPillBody = index$c(Animated.View)(function (_ref4) {
     top: 0,
     bottom: 0,
     left: 0,
-    width: 1,
+    width: 1 / PixelRatio.get(),
     backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBackground
   };
 });
@@ -28178,7 +28178,7 @@ var HeaderTabItemActiveBorder = index$c(Animated.View)(function (_ref6) {
   return {
     position: 'absolute',
     bottom: 0,
-    width: 1,
+    width: 1 / PixelRatio.get(),
     height: theme.__hd__.tabs.borderWidths.highlightedActiveBorder,
     backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBorder
   };
@@ -28196,7 +28196,7 @@ var HeaderTabItemWrapper = index$c(View)(function (_ref7) {
 var HeaderTabItemIndicator = index$c(Animated.View)(function (_ref8) {
   var theme = _ref8.theme;
   return {
-    width: 1,
+    width: 1 / PixelRatio.get(),
     height: theme.__hd__.tabs.sizes.indicator,
     position: 'absolute',
     bottom: theme.__hd__.tabs.space.tabIndicatorBottom,
@@ -28277,44 +28277,17 @@ var TabWithBadge = function TabWithBadge(_ref) {
   return /*#__PURE__*/React__default.createElement(View, null, tabItem);
 };
 
-/**
- * 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)
- */
+/** Centralised calculation for all animated values given a tab layout. */
+var computeValues = function computeValues(layout, pillCapWidth) {
+  var pr = PixelRatio.get();
+  return {
+    indicatorX: layout.x,
+    indicatorScaleX: layout.width * pr,
+    pillX: layout.x,
+    pillBodyScaleX: Math.max(layout.width - pillCapWidth * 2, 0) * pr,
+    pillRightOffset: Math.max(layout.width - pillCapWidth, 0)
+  };
+};
 var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
   var selectedIndex = _ref.selectedIndex,
     tabsLength = _ref.tabsLength,
@@ -28323,9 +28296,6 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
   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;
@@ -28348,44 +28318,30 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
     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);
+    var values = computeValues(layout, pillCapWidth);
     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);
+      indicatorX.setValue(values.indicatorX);
+      indicatorScaleX.setValue(values.indicatorScaleX);
+      pillX.setValue(values.pillX);
+      pillBodyScaleX.setValue(values.pillBodyScaleX);
+      pillRightOffset.setValue(values.pillRightOffset);
       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,
+      toValue: values.indicatorX,
       useNativeDriver: true
     }), Animated.timing(indicatorScaleX, {
-      toValue: indicatorScaleXValue,
+      toValue: values.indicatorScaleX,
       useNativeDriver: true
     }), Animated.timing(pillX, {
-      toValue: layout.x,
+      toValue: values.pillX,
       useNativeDriver: true
     }), Animated.timing(pillBodyScaleX, {
-      toValue: bodyScaleX,
+      toValue: values.pillBodyScaleX,
       useNativeDriver: true
     }), Animated.timing(pillRightOffset, {
-      toValue: rightOffset,
+      toValue: values.pillRightOffset,
       useNativeDriver: true
     })]);
     runningAnimRef.current = anim;
@@ -28400,7 +28356,6 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
     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]);
@@ -28412,9 +28367,8 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
     };
   }, []);
   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 x = PixelRatio.roundToNearestPixel(event.nativeEvent.layout.x);
+    var width = PixelRatio.roundToNearestPixel(event.nativeEvent.layout.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) {
@@ -28424,23 +28378,24 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
       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 no tab is selected yet, snap indicators to tab 0 on its first layout.
     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));
+      var values = computeValues({
+        x: x,
+        width: width
+      }, pillCapWidth);
+      indicatorX.setValue(values.indicatorX);
+      indicatorScaleX.setValue(values.indicatorScaleX);
+      pillX.setValue(values.pillX);
+      pillBodyScaleX.setValue(values.pillBodyScaleX);
+      pillRightOffset.setValue(values.pillRightOffset);
       initializedRef.current = true;
     }
-  }, [animateTo, selectedIndex, pillCapWidth]);
-  // Layer 1: transformOrigin 'left center' pins scaleX expansion to left edge.
+  }, [selectedIndex, animateTo, pillCapWidth, indicatorX, indicatorScaleX, pillX, pillBodyScaleX, pillRightOffset]);
   var indicatorStyle = {
     transformOrigin: 'left center',
     transform: [{
@@ -28449,8 +28404,6 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
       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

package/lib/index.js

@@ -28186,7 +28186,7 @@ var HeaderTabPillBody = index$c(reactNative.Animated.View)(function (_ref4) {
     top: 0,
     bottom: 0,
     left: 0,
-    width: 1,
+    width: 1 / reactNative.PixelRatio.get(),
     backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBackground
   };
 });
@@ -28207,7 +28207,7 @@ var HeaderTabItemActiveBorder = index$c(reactNative.Animated.View)(function (_re
   return {
     position: 'absolute',
     bottom: 0,
-    width: 1,
+    width: 1 / reactNative.PixelRatio.get(),
     height: theme.__hd__.tabs.borderWidths.highlightedActiveBorder,
     backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBorder
   };
@@ -28225,7 +28225,7 @@ var HeaderTabItemWrapper = index$c(reactNative.View)(function (_ref7) {
 var HeaderTabItemIndicator = index$c(reactNative.Animated.View)(function (_ref8) {
   var theme = _ref8.theme;
   return {
-    width: 1,
+    width: 1 / reactNative.PixelRatio.get(),
     height: theme.__hd__.tabs.sizes.indicator,
     position: 'absolute',
     bottom: theme.__hd__.tabs.space.tabIndicatorBottom,
@@ -28306,44 +28306,17 @@ var TabWithBadge = function TabWithBadge(_ref) {
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.View, null, tabItem);
 };
 
-/**
- * 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)
- */
+/** Centralised calculation for all animated values given a tab layout. */
+var computeValues = function computeValues(layout, pillCapWidth) {
+  var pr = reactNative.PixelRatio.get();
+  return {
+    indicatorX: layout.x,
+    indicatorScaleX: layout.width * pr,
+    pillX: layout.x,
+    pillBodyScaleX: Math.max(layout.width - pillCapWidth * 2, 0) * pr,
+    pillRightOffset: Math.max(layout.width - pillCapWidth, 0)
+  };
+};
 var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
   var selectedIndex = _ref.selectedIndex,
     tabsLength = _ref.tabsLength,
@@ -28352,9 +28325,6 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
   var indicatorX = React__namespace.default.useRef(new reactNative.Animated.Value(0)).current;
   var indicatorScaleX = React__namespace.default.useRef(new reactNative.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__namespace.default.useRef(new reactNative.Animated.Value(0)).current;
   var pillBodyScaleX = React__namespace.default.useRef(new reactNative.Animated.Value(1)).current;
   var pillRightOffset = React__namespace.default.useRef(new reactNative.Animated.Value(0)).current;
@@ -28377,44 +28347,30 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
     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);
+    var values = computeValues(layout, pillCapWidth);
     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);
+      indicatorX.setValue(values.indicatorX);
+      indicatorScaleX.setValue(values.indicatorScaleX);
+      pillX.setValue(values.pillX);
+      pillBodyScaleX.setValue(values.pillBodyScaleX);
+      pillRightOffset.setValue(values.pillRightOffset);
       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 = reactNative.Animated.parallel([reactNative.Animated.timing(indicatorX, {
-      toValue: layout.x,
+      toValue: values.indicatorX,
       useNativeDriver: true
     }), reactNative.Animated.timing(indicatorScaleX, {
-      toValue: indicatorScaleXValue,
+      toValue: values.indicatorScaleX,
       useNativeDriver: true
     }), reactNative.Animated.timing(pillX, {
-      toValue: layout.x,
+      toValue: values.pillX,
       useNativeDriver: true
     }), reactNative.Animated.timing(pillBodyScaleX, {
-      toValue: bodyScaleX,
+      toValue: values.pillBodyScaleX,
       useNativeDriver: true
     }), reactNative.Animated.timing(pillRightOffset, {
-      toValue: rightOffset,
+      toValue: values.pillRightOffset,
       useNativeDriver: true
     })]);
     runningAnimRef.current = anim;
@@ -28429,7 +28385,6 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
     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]);
@@ -28441,9 +28396,8 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
     };
   }, []);
   var onTabLayout = React__namespace.default.useCallback(function (index, event) {
-    var _event$nativeEvent$la = event.nativeEvent.layout,
-      x = _event$nativeEvent$la.x,
-      width = _event$nativeEvent$la.width;
+    var x = reactNative.PixelRatio.roundToNearestPixel(event.nativeEvent.layout.x);
+    var width = reactNative.PixelRatio.roundToNearestPixel(event.nativeEvent.layout.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) {
@@ -28453,23 +28407,24 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
       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 no tab is selected yet, snap indicators to tab 0 on its first layout.
     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));
+      var values = computeValues({
+        x: x,
+        width: width
+      }, pillCapWidth);
+      indicatorX.setValue(values.indicatorX);
+      indicatorScaleX.setValue(values.indicatorScaleX);
+      pillX.setValue(values.pillX);
+      pillBodyScaleX.setValue(values.pillBodyScaleX);
+      pillRightOffset.setValue(values.pillRightOffset);
       initializedRef.current = true;
     }
-  }, [animateTo, selectedIndex, pillCapWidth]);
-  // Layer 1: transformOrigin 'left center' pins scaleX expansion to left edge.
+  }, [selectedIndex, animateTo, pillCapWidth, indicatorX, indicatorScaleX, pillX, pillBodyScaleX, pillRightOffset]);
   var indicatorStyle = {
     transformOrigin: 'left center',
     transform: [{
@@ -28478,8 +28433,6 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
       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

package/package.json

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

package/src/components/Icon/index.tsx

@@ -12,8 +12,6 @@ export type IconName = typeof IconList[number];
 export interface IconProps extends AccessibilityProps {
   /**
    * Name of the Icon.
-   *
-   * icon['carat-*'] - @deprecated Icons starting with 'carat' are deprecated and will be removed in the next major release, please use 'caret' instead.
    */
   icon: IconName;
   /**

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Animated } from 'react-native';
+import { Animated, PixelRatio } from 'react-native';
 import type { LayoutChangeEvent } from 'react-native';
 
 type Layout = { x: number; width: number };
@@ -9,9 +9,9 @@ type Layout = { x: number; width: number };
  *
  *  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.
+ *  Uses the "width:1/PixelRatio + scaleX" trick: the element has a stylesheet
+ *  width of 1 physical pixel (1/PixelRatio dp) and scaleX is set to
+ *  targetWidth * PixelRatio, giving a visual width of targetWidth dp.
  *  Both translateX and scaleX are transform properties → native driver.
  *  Caveat: scaleX also scales border-radius, so this layer has no border-radius.
  *
@@ -21,27 +21,43 @@ type Layout = { x: number; width: number };
  *  border-radius is never distorted by scale:
  *
  *    ┌──────────────────────────────────────────────────────┐
- *    │  [cap-left 8px]  [body width-1 + scaleX]  [cap-right 8px]  │
+ *    │  [cap-left cap]  [body 1px + scaleX]  [cap-right cap]  │
  *    └──────────────────────────────────────────────────────┘
  *
- *    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.
+ *    cap-left  — fixed pillCapWidth dp, borderTopLeftRadius,  translateX = pillX
+ *    body      — 1px + scaleX trick (scaleX = (tabWidth - 2*cap) * PixelRatio),
+ *                translateX = pillX + pillCapWidth  (via Animated.add)
+ *    cap-right — fixed pillCapWidth dp, borderTopRightRadius,
+ *                translateX = pillX + rightOffset  (via Animated.add)
  *
  *  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)
+ *    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
+ *    pillRightOffset native  translateX — positions the right cap
  */
+
+type AnimValues = {
+  indicatorX: number;
+  indicatorScaleX: number;
+  pillX: number;
+  pillBodyScaleX: number;
+  pillRightOffset: number;
+};
+
+/** Centralised calculation for all animated values given a tab layout. */
+const computeValues = (layout: Layout, pillCapWidth: number): AnimValues => {
+  const pr = PixelRatio.get();
+  return {
+    indicatorX: layout.x,
+    indicatorScaleX: layout.width * pr,
+    pillX: layout.x,
+    pillBodyScaleX: Math.max(layout.width - pillCapWidth * 2, 0) * pr,
+    pillRightOffset: Math.max(layout.width - pillCapWidth, 0),
+  };
+};
+
 const useIndicatorAnimation = ({
   selectedIndex,
   tabsLength,
@@ -57,9 +73,6 @@ const useIndicatorAnimation = ({
   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;
@@ -86,51 +99,37 @@ const useIndicatorAnimation = ({
       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);
+      const values = computeValues(layout, pillCapWidth);
 
       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);
+        indicatorX.setValue(values.indicatorX);
+        indicatorScaleX.setValue(values.indicatorScaleX);
+        pillX.setValue(values.pillX);
+        pillBodyScaleX.setValue(values.pillBodyScaleX);
+        pillRightOffset.setValue(values.pillRightOffset);
         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,
+          toValue: values.indicatorX,
           useNativeDriver: true,
         }),
         Animated.timing(indicatorScaleX, {
-          toValue: indicatorScaleXValue,
+          toValue: values.indicatorScaleX,
           useNativeDriver: true,
         }),
         Animated.timing(pillX, {
-          toValue: layout.x,
+          toValue: values.pillX,
           useNativeDriver: true,
         }),
         Animated.timing(pillBodyScaleX, {
-          toValue: bodyScaleX,
+          toValue: values.pillBodyScaleX,
           useNativeDriver: true,
         }),
         Animated.timing(pillRightOffset, {
-          toValue: rightOffset,
+          toValue: values.pillRightOffset,
           useNativeDriver: true,
         }),
       ]);
@@ -155,7 +154,6 @@ const useIndicatorAnimation = ({
     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]);
@@ -169,7 +167,10 @@ const useIndicatorAnimation = ({
 
   const onTabLayout = React.useCallback(
     (index: number, event: LayoutChangeEvent) => {
-      const { x, width } = event.nativeEvent.layout;
+      const x = PixelRatio.roundToNearestPixel(event.nativeEvent.layout.x);
+      const width = PixelRatio.roundToNearestPixel(
+        event.nativeEvent.layout.width
+      );
       const prev = layoutsRef.current[index];
       // Skip if layout hasn't meaningfully changed (sub-pixel tolerance).
       if (
@@ -181,39 +182,44 @@ const useIndicatorAnimation = ({
       }
       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 no tab is selected yet, snap indicators to tab 0 on its first layout.
       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));
+        const values = computeValues({ x, width }, pillCapWidth);
+        indicatorX.setValue(values.indicatorX);
+        indicatorScaleX.setValue(values.indicatorScaleX);
+        pillX.setValue(values.pillX);
+        pillBodyScaleX.setValue(values.pillBodyScaleX);
+        pillRightOffset.setValue(values.pillRightOffset);
         initializedRef.current = true;
       }
     },
-    [animateTo, selectedIndex, pillCapWidth]
+    [
+      selectedIndex,
+      animateTo,
+      pillCapWidth,
+      indicatorX,
+      indicatorScaleX,
+      pillX,
+      pillBodyScaleX,
+      pillRightOffset,
+    ]
   );
 
-  // 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;

package/src/components/Tabs/StyledScrollableTabs.tsx

@@ -1,4 +1,4 @@
-import { Animated, Platform, View } from 'react-native';
+import { Animated, PixelRatio, Platform, View } from 'react-native';
 import styled from '@emotion/native';
 
 // Checks if the platform is Android 7x and 8.x, i.e., API levels 24 to 27 (Android 7.0 to 8.1),
@@ -67,7 +67,7 @@ const HeaderTabPillBody = styled(Animated.View)(({ theme }) => ({
   top: 0,
   bottom: 0,
   left: 0,
-  width: 1,
+  width: 1 / PixelRatio.get(),
   backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBackground,
 }));
 
@@ -84,7 +84,7 @@ const HeaderTabPillRight = styled(Animated.View)(({ theme }) => ({
 const HeaderTabItemActiveBorder = styled(Animated.View)(({ theme }) => ({
   position: 'absolute',
   bottom: 0,
-  width: 1,
+  width: 1 / PixelRatio.get(),
   height: theme.__hd__.tabs.borderWidths.highlightedActiveBorder,
   backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBorder,
 }));
@@ -99,7 +99,7 @@ const HeaderTabItemWrapper = styled(View)(({ theme }) => ({
 }));
 
 const HeaderTabItemIndicator = styled(Animated.View)(({ theme }) => ({
-  width: 1,
+  width: 1 / PixelRatio.get(),
   height: theme.__hd__.tabs.sizes.indicator,
   position: 'absolute',
   bottom: theme.__hd__.tabs.space.tabIndicatorBottom,

package/types/components/Icon/index.d.ts

@@ -5,8 +5,6 @@ export type IconName = typeof IconList[number];
 export interface IconProps extends AccessibilityProps {
     /**
      * Name of the Icon.
-     *
-     * icon['carat-*'] - @deprecated Icons starting with 'carat' are deprecated and will be removed in the next major release, please use 'caret' instead.
      */
     icon: IconName;
     /**

package/types/components/Tabs/ScrollableTabsHeader/hooks/useIndicatorAnimation.d.ts

@@ -1,43 +1,5 @@
 import { Animated } from 'react-native';
 import type { LayoutChangeEvent } from 'react-native';
-/**
- * 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)
- */
 declare const useIndicatorAnimation: ({ selectedIndex, tabsLength, pillCapWidth, }: {
     selectedIndex: number | undefined;
     tabsLength: number;