react-native-system-ui 0.0.7 → 1.0.1

package/dist/es/components/tabs/Tabs.js

@@ -1,27 +1,23 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { memo, useCallback, useEffect, useImperativeHandle, useRef, useState, useMemo, Children, isValidElement, Fragment } from 'react';
+import React, { memo, useCallback, useEffect, useImperativeHandle, useRef, useState, useMemo, Children, isValidElement } from 'react';
 import { Animated, Pressable, StyleSheet, Text, ScrollView, View, Platform } from 'react-native';
 import { useAriaPress, useControllableValue } from '../../hooks';
+import { useReducedMotion } from '../../hooks/animation';
+import { createHairlineView } from '../../utils/hairline';
 import { parseNumberLike } from '../../utils/number';
 import { isBoolean, isFunction, isObject, isRenderable, isText } from '../../utils/validate';
 import { useTabsTokens } from './tokens';
 const TabPane = () => null;
 TabPane.displayName = 'Tabs.TabPane';
-const canUseRaf = typeof requestAnimationFrame !== 'undefined' && isFunction(requestAnimationFrame) && typeof cancelAnimationFrame !== 'undefined' && isFunction(cancelAnimationFrame);
-const requestFrame = canUseRaf ? cb => requestAnimationFrame(cb) : cb => setTimeout(cb, 16);
+const hasRaf = typeof requestAnimationFrame === 'function' && typeof cancelAnimationFrame === 'function';
+const requestFrame = hasRaf ? requestAnimationFrame : cb => setTimeout(cb, 16);
 const cancelFrame = id => {
-  if (id == null) return;
-  if (canUseRaf) {
-    cancelAnimationFrame(id);
-  } else {
-    clearTimeout(id);
-  }
+  if (id != null) (hasRaf ? cancelAnimationFrame : clearTimeout)(id);
 };
 const isTabPaneElement = child => {
   if (! /*#__PURE__*/React.isValidElement(child)) return false;
   if (child.type === TabPane) return true;
-  const type = child.type;
-  return type.displayName === 'Tabs.TabPane';
+  return child.type.displayName === 'Tabs.TabPane';
 };
 const useTabsAnimation = ({
   type,
@@ -36,43 +32,52 @@ const useTabsAnimation = ({
   layoutMap,
   navContainerWidthRef
 }) => {
-  const indicatorX = useRef(new Animated.Value(0)).current;
-  const indicatorWidth = useRef(new Animated.Value(0)).current;
-  const indicatorInitializedRef = useRef(false);
+  const indX = useRef(new Animated.Value(0)).current;
+  const indW = useRef(new Animated.Value(0)).current;
+  const indInitRef = useRef(false);
+  const animRef = useRef(null);
   const animateIndicator = useCallback((name, immediate) => {
     if (name == null || type !== 'line') return false;
-    const shouldUseEqualWidth = !scrollable && align !== 'start' && navContainerWidthRef.current > 0 && panes.length > 0;
-    const index = nameIndexMap.get(name) ?? -1;
-    const equalTabWidth = shouldUseEqualWidth ? navContainerWidthRef.current / panes.length : 0;
-    const layout = shouldUseEqualWidth ? {
-      x: Math.max(index, 0) * equalTabWidth,
-      width: equalTabWidth
+    const eqW = !scrollable && align !== 'start' && navContainerWidthRef.current > 0 && panes.length > 0;
+    const idx = nameIndexMap.get(name) ?? -1;
+    const eqTabW = eqW ? navContainerWidthRef.current / panes.length : 0;
+    const lay = eqW ? {
+      x: Math.max(idx, 0) * eqTabW,
+      width: eqTabW
     } : layoutMap.current.get(name);
-    if (!layout || index < 0) {
-      return false;
-    }
-    const timing = (value, toValue) => Animated.timing(value, {
-      toValue,
+    if (!lay || idx < 0) return false;
+    animRef.current?.stop();
+    const timing = (v, to) => Animated.timing(v, {
+      toValue: to,
       duration: immediate || !animated ? 0 : resolvedDuration,
-      useNativeDriver: false
+      useNativeDriver: false,
+      isInteraction: false
+    });
+    const tW = resolvedLineWidth ?? lay.width;
+    const tX = resolvedLineWidth ? lay.x + (lay.width - tW) / 2 : lay.x;
+    const anim = Animated.parallel([timing(indX, tX), timing(indW, tW)]);
+    animRef.current = anim;
+    anim.start(({
+      finished
+    }) => {
+      if (finished) animRef.current = null;
     });
-    const targetWidth = resolvedLineWidth ?? layout.width;
-    const targetX = resolvedLineWidth ? layout.x + (layout.width - targetWidth) / 2 : layout.x;
-    Animated.parallel([timing(indicatorX, targetX), timing(indicatorWidth, targetWidth)]).start();
     return true;
-  }, [align, animated, indicatorWidth, indicatorX, nameIndexMap, panes.length, resolvedDuration, resolvedLineWidth, scrollable, type, layoutMap, navContainerWidthRef]);
+  }, [align, animated, indW, indX, nameIndexMap, panes.length, resolvedDuration, resolvedLineWidth, scrollable, type, layoutMap, navContainerWidthRef]);
   useEffect(() => {
     if (currentName == null) return;
-    const shouldAnimate = indicatorInitializedRef.current;
-    const didAnimate = animateIndicator(currentName, !shouldAnimate);
-    if (didAnimate && !indicatorInitializedRef.current) {
-      indicatorInitializedRef.current = true;
-    }
+    const should = indInitRef.current;
+    const did = animateIndicator(currentName, !should);
+    if (did && !indInitRef.current) indInitRef.current = true;
   }, [animateIndicator, currentName]);
+  useEffect(() => () => {
+    animRef.current?.stop();
+    animRef.current = null;
+  }, []);
   return {
-    indicatorX,
-    indicatorWidth,
-    indicatorInitializedRef,
+    indicatorX: indX,
+    indicatorWidth: indW,
+    indicatorInitializedRef: indInitRef,
     animateIndicator
   };
 };
@@ -85,106 +90,86 @@ const useTabsScroll = ({
   navContainerWidthRef,
   navContentWidthRef
 }) => {
-  const navScrollRef = useRef(null);
-  const navScrollX = useRef(new Animated.Value(0)).current;
-  const navScrollAnimRef = useRef(null);
-  const navAutoScrollingRef = useRef(false);
-  const navLastScrollXRef = useRef(0);
-  const navAutoScrollFrameRef = useRef(null);
+  const navScrRef = useRef(null);
+  const navX = useRef(new Animated.Value(0)).current;
+  const navAnimRef = useRef(null);
+  const autoScrRef = useRef(false);
+  const lastXRef = useRef(0);
+  const frameRef = useRef(null);
   const scrollIntoView = useCallback(immediate => {
     if (!scrollable || currentName == null) return;
-    const layout = layoutMap.current.get(currentName);
-    const containerWidth = navContainerWidthRef.current;
-    if (!layout || !containerWidth) return;
-    const contentWidth = navContentWidthRef.current;
-    const targetX = layout.x - (containerWidth - layout.width) / 2;
-    const maxScroll = Math.max(contentWidth - containerWidth, 0);
-    const clampedX = Math.max(0, Math.min(targetX, maxScroll));
-    if (maxScroll <= 0) {
-      return;
-    }
-    if (Math.abs(clampedX - navLastScrollXRef.current) < 1) {
-      return;
-    }
-    if (navScrollAnimRef.current) {
-      navScrollAnimRef.current.stop();
-      navScrollAnimRef.current = null;
-    }
-    cancelFrame(navAutoScrollFrameRef.current);
-    navAutoScrollFrameRef.current = null;
+    const lay = layoutMap.current.get(currentName);
+    const ctrW = navContainerWidthRef.current;
+    if (!lay || !ctrW) return;
+    const cntW = navContentWidthRef.current;
+    const tX = lay.x - (ctrW - lay.width) / 2;
+    const maxS = Math.max(cntW - ctrW, 0);
+    const clampX = Math.max(0, Math.min(tX, maxS));
+    if (maxS <= 0 || Math.abs(clampX - lastXRef.current) < 1) return;
+    navAnimRef.current?.stop();
+    navAnimRef.current = null;
+    cancelFrame(frameRef.current);
+    frameRef.current = null;
     if (immediate || !animated) {
-      navAutoScrollingRef.current = true;
-      navScrollX.setValue(clampedX);
-      navAutoScrollFrameRef.current = requestFrame(() => {
-        navAutoScrollFrameRef.current = null;
-        navAutoScrollingRef.current = false;
+      autoScrRef.current = true;
+      navX.setValue(clampX);
+      frameRef.current = requestFrame(() => {
+        frameRef.current = null;
+        autoScrRef.current = false;
       });
       return;
     }
-    navScrollX.setValue(navLastScrollXRef.current);
-    navAutoScrollingRef.current = true;
-    navScrollAnimRef.current = Animated.timing(navScrollX, {
-      toValue: clampedX,
+    navX.setValue(lastXRef.current);
+    autoScrRef.current = true;
+    navAnimRef.current = Animated.timing(navX, {
+      toValue: clampX,
       duration: resolvedDuration,
-      useNativeDriver: false
+      useNativeDriver: false,
+      isInteraction: false
     });
-    navScrollAnimRef.current.start(({
+    navAnimRef.current.start(({
       finished
     }) => {
-      navScrollAnimRef.current = null;
-      navAutoScrollingRef.current = false;
-      if (!finished) {
-        return;
-      }
-      navLastScrollXRef.current = clampedX;
+      navAnimRef.current = null;
+      autoScrRef.current = false;
+      if (finished) lastXRef.current = clampX;
     });
-  }, [animated, currentName, navScrollX, resolvedDuration, scrollable, layoutMap, navContainerWidthRef, navContentWidthRef]);
+  }, [animated, currentName, navX, resolvedDuration, scrollable, layoutMap, navContainerWidthRef, navContentWidthRef]);
   useEffect(() => {
     if (!scrollable) return;
-    const listenerId = navScrollX.addListener(({
+    const id = navX.addListener(({
       value
     }) => {
-      const prev = navLastScrollXRef.current;
-      navLastScrollXRef.current = value;
-      if (Math.abs(value - prev) < 0.5) {
-        return;
-      }
-      navScrollRef.current?.scrollTo({
+      const prev = lastXRef.current;
+      lastXRef.current = value;
+      if (Math.abs(value - prev) >= 0.5) navScrRef.current?.scrollTo({
         x: value,
         y: 0,
         animated: false
       });
     });
-    return () => {
-      navScrollX.removeListener(listenerId);
-    };
-  }, [navScrollX, scrollable]);
-  useEffect(() => {
-    return () => {
-      cancelFrame(navAutoScrollFrameRef.current);
-      navAutoScrollFrameRef.current = null;
-    };
+    return () => navX.removeListener(id);
+  }, [navX, scrollable]);
+  useEffect(() => () => {
+    cancelFrame(frameRef.current);
+    frameRef.current = null;
   }, []);
-  const handleNavScrollBeginDrag = useCallback(event => {
-    navAutoScrollingRef.current = false;
-    if (navScrollAnimRef.current) {
-      navScrollAnimRef.current.stop();
-      navScrollAnimRef.current = null;
-    }
-    navLastScrollXRef.current = event.nativeEvent.contentOffset.x;
+  const onNavBeginDrag = useCallback(e => {
+    autoScrRef.current = false;
+    navAnimRef.current?.stop();
+    navAnimRef.current = null;
+    lastXRef.current = e.nativeEvent.contentOffset.x;
   }, []);
-  const handleNavScroll = useCallback(event => {
-    if (navAutoScrollingRef.current) {
-      return;
-    }
-    navLastScrollXRef.current = event.nativeEvent.contentOffset.x;
+  const onNavScroll = useCallback(e => {
+    if (autoScrRef.current) return;
+    lastXRef.current = e.nativeEvent.contentOffset.x;
   }, []);
   return {
-    navScrollRef,
-    navScrollX,
+    navScrollRef: navScrRef,
+    navScrollX: navX,
     scrollIntoView,
-    handleNavScrollBeginDrag,
-    handleNavScroll
+    handleNavScrollBeginDrag: onNavBeginDrag,
+    handleNavScroll: onNavScroll
   };
 };
 const TabBarItemInner = ({
@@ -205,33 +190,45 @@ const TabBarItemInner = ({
   onLayout,
   isLast
 }) => {
-  const isDisabled = !!pane.disabled;
-  const ariaPress = useAriaPress({
-    onPress: event => onSelect(pane, pane.index, event),
+  const dis = !!pane.disabled;
+  const aria = useAriaPress({
+    onPress: e => onSelect(pane, pane.index, e),
     extraProps: {
       accessibilityRole: 'tab',
       accessibilityState: {
         selected: isActive,
-        disabled: isDisabled
+        disabled: dis
       },
       testID: `rv-tabs-item-${pane.name}`
     }
   });
-  const isCapsule = type === 'capsule';
-  const isJumbo = type === 'jumbo';
-  const isCard = type === 'card';
-  const renderTitle = isFunction(pane.title) ? pane.title(isActive) : pane.title ?? pane.name;
-  const renderDescription = isFunction(pane.description) ? pane.description(isActive) : pane.description;
-  const activeTitleColor = titleActiveColor ?? (isCard ? tokens.colors.cardActiveText : isCapsule ? tokens.colors.capsuleActiveText : color ?? tokens.colors.textActive);
-  const inactiveTitleColor = titleInactiveColor ?? (isCard ? color ?? tokens.colors.cardBorder : isCapsule ? tokens.colors.capsuleText : tokens.colors.text);
-  const textColor = pane.disabled ? tokens.colors.textDisabled : isActive ? activeTitleColor : inactiveTitleColor;
-  const descriptionColor = isDisabled ? tokens.colors.textDisabled : isJumbo ? isActive ? tokens.colors.jumboDescriptionActive : tokens.colors.jumboDescription : isActive ? tokens.colors.descriptionActive : tokens.colors.description;
-  const shouldFlex = !scrollable && (align !== 'start' || isCard);
-  const isCompactType = isCard || isJumbo || isCapsule;
-  const horizontalPadding = isCompactType ? 0 : tokens.tabList.paddingHorizontal;
-  const verticalPadding = isCompactType ? 0 : tokens.tabList.paddingVertical;
-  const labelWrapperStyles = [styles.labelWrapper];
-  const labelTextWrapperStyles = isCapsule ? [{
+  const isCap = type === 'capsule';
+  const isJ = type === 'jumbo';
+  const isC = type === 'card';
+  const rTitle = isFunction(pane.title) ? pane.title(isActive) : pane.title ?? pane.name;
+  const rDesc = isFunction(pane.description) ? pane.description(isActive) : pane.description;
+  const actClr = titleActiveColor ?? (isC ? tokens.colors.cardActiveText : isCap ? tokens.colors.capsuleActiveText : color ?? tokens.colors.textActive);
+  const inactClr = titleInactiveColor ?? (isC ? color ?? tokens.colors.cardBorder : isCap ? tokens.colors.capsuleText : tokens.colors.text);
+  const txtClr = pane.disabled ? tokens.colors.textDisabled : isActive ? actClr : inactClr;
+  const descClr = dis ? tokens.colors.textDisabled : isJ ? isActive ? tokens.colors.jumboDescriptionActive : tokens.colors.jumboDescription : isActive ? tokens.colors.descriptionActive : tokens.colors.description;
+  const flex = !scrollable && (align !== 'start' || isC);
+  const compact = isC || isJ || isCap;
+  const hPad = compact ? 0 : tokens.tabList.paddingHorizontal;
+  const vPad = compact ? 0 : tokens.tabList.paddingVertical;
+  const lblWrap = [S.lblW, isJ && S.lblWJ, isC && S.cardLbl, isC && {
+    paddingHorizontal: tokens.card.paddingHorizontal,
+    paddingVertical: tokens.card.paddingVertical
+  }, isCap && {
+    flex: 1,
+    alignSelf: 'stretch',
+    paddingHorizontal: tokens.capsule.paddingHorizontal,
+    paddingVertical: tokens.capsule.paddingVertical
+  }, isJ && {
+    paddingHorizontal: tokens.jumbo.paddingHorizontal,
+    paddingVertical: tokens.jumbo.paddingVertical,
+    alignItems: 'center'
+  }].filter(Boolean);
+  const lblTxtWrap = isCap ? [{
     flex: 1,
     alignSelf: 'stretch',
     justifyContent: 'center',
@@ -239,89 +236,71 @@ const TabBarItemInner = ({
     borderRadius: tokens.capsule.radius,
     backgroundColor: isActive ? color ?? tokens.colors.capsuleActiveBackground : tokens.colors.capsuleBackground
   }] : null;
-  if (isJumbo) {
-    labelWrapperStyles.push(styles.labelWrapperJumbo);
-  }
-  if (isCard) {
-    labelWrapperStyles.push(styles.cardLabel);
-    labelWrapperStyles.push({
-      paddingHorizontal: tokens.card.paddingHorizontal,
-      paddingVertical: tokens.card.paddingVertical
-    });
-  }
-  if (isCapsule) {
-    labelWrapperStyles.push({
-      flex: 1,
-      alignSelf: 'stretch'
-    });
-    labelWrapperStyles.push({
-      paddingHorizontal: tokens.capsule.paddingHorizontal,
-      paddingVertical: tokens.capsule.paddingVertical
-    });
-  }
-  if (isJumbo) {
-    labelWrapperStyles.push({
-      paddingHorizontal: tokens.jumbo.paddingHorizontal,
-      paddingVertical: tokens.jumbo.paddingVertical,
-      alignItems: 'center'
-    });
-  }
-  const titleTextStyle = [styles.title, {
-    color: textColor,
-    fontSize: isJumbo ? tokens.typography.jumboTitleSize : tokens.typography.titleSize,
+  const titleStyleArr = [S.title, {
+    color: txtClr,
+    fontFamily: tokens.typography.fontFamily,
+    fontSize: isJ ? tokens.typography.jumboTitleSize : tokens.typography.titleSize,
     fontWeight: isActive ? tokens.typography.titleActiveWeight : tokens.typography.titleWeight,
-    lineHeight: isJumbo ? tokens.typography.jumboLineHeight : undefined,
+    lineHeight: isJ ? tokens.typography.jumboLineHeight : undefined,
     textAlign: 'center'
-  }, ellipsis && !isJumbo ? styles.ellipsis : null, titleStyle];
-  const titleNode = /*#__PURE__*/React.createElement(Text, {
-    style: titleTextStyle,
-    numberOfLines: ellipsis && !isJumbo ? 1 : undefined
-  }, renderTitle);
-  const descriptionMarginTop = isJumbo ? tokens.spacing.jumboDescriptionMarginTop : tokens.spacing.descriptionMarginTop;
-  const descriptionJumboStyle = isJumbo ? {
+  }, ellipsis && !isJ ? S.ellipsis : null, titleStyle];
+  const descMT = isJ ? tokens.spacing.jumboDescriptionMarginTop : tokens.spacing.descriptionMarginTop;
+  const descJStyle = isJ ? {
     backgroundColor: isActive ? tokens.colors.jumboDescriptionActiveBackground : tokens.colors.jumboDescriptionBackground,
     paddingHorizontal: tokens.jumbo.descriptionPaddingHorizontal,
     paddingVertical: tokens.jumbo.descriptionPaddingVertical,
     borderRadius: tokens.jumbo.descriptionRadius
   } : null;
-  const descriptionTextStyle = [styles.descriptionText, {
-    color: descriptionColor,
-    fontSize: tokens.typography.descriptionSize,
-    marginTop: descriptionMarginTop,
-    textAlign: 'center'
-  }, descriptionJumboStyle, descriptionStyle];
-  const descriptionViewStyle = [styles.descriptionView, {
-    marginTop: descriptionMarginTop,
-    alignItems: 'center'
-  }, descriptionJumboStyle];
-  return /*#__PURE__*/React.createElement(Pressable, _extends({}, ariaPress.interactionProps, {
-    onLayout: event => onLayout(pane.name, event),
-    style: [styles.tabItem, shouldFlex ? styles.flexItem : null, {
-      paddingHorizontal: horizontalPadding,
-      paddingVertical: verticalPadding
-    }, isCard ? {
-      borderRightWidth: isLast ? 0 : StyleSheet.hairlineWidth,
-      borderRightColor: color ?? tokens.colors.cardBorder,
+  const onLay = useCallback(e => onLayout(pane.name, e), [onLayout, pane.name]);
+  return /*#__PURE__*/React.createElement(Pressable, _extends({}, aria.interactionProps, {
+    onLayout: onLay,
+    style: [S.tabI, flex ? S.flexI : null, {
+      paddingHorizontal: hPad,
+      paddingVertical: vPad
+    }, isC ? {
       backgroundColor: isActive ? color ?? tokens.colors.cardActiveBackground : tokens.colors.cardBackground
     } : null, tabStyle]
   }), /*#__PURE__*/React.createElement(View, {
-    style: labelWrapperStyles
-  }, labelTextWrapperStyles ? /*#__PURE__*/React.createElement(View, {
-    style: labelTextWrapperStyles
-  }, titleNode) : titleNode, isRenderable(renderDescription) && (isText(renderDescription) ? /*#__PURE__*/React.createElement(Text, {
-    style: descriptionTextStyle
-  }, renderDescription) : /*#__PURE__*/React.createElement(View, {
-    style: descriptionViewStyle
-  }, renderDescription)), isRenderable(pane.badge) && /*#__PURE__*/React.createElement(View, {
-    style: [styles.badge, {
+    style: lblWrap
+  }, lblTxtWrap ? /*#__PURE__*/React.createElement(View, {
+    style: lblTxtWrap
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: titleStyleArr,
+    numberOfLines: ellipsis && !isJ ? 1 : undefined
+  }, rTitle)) : /*#__PURE__*/React.createElement(Text, {
+    style: titleStyleArr,
+    numberOfLines: ellipsis && !isJ ? 1 : undefined
+  }, rTitle), isRenderable(rDesc) && (isText(rDesc) ? /*#__PURE__*/React.createElement(Text, {
+    style: [S.descTxt, {
+      color: descClr,
+      fontFamily: tokens.typography.fontFamily,
+      fontSize: tokens.typography.descriptionSize,
+      marginTop: descMT,
+      textAlign: 'center'
+    }, descJStyle, descriptionStyle]
+  }, rDesc) : /*#__PURE__*/React.createElement(View, {
+    style: [{
+      marginTop: descMT,
+      alignItems: 'center'
+    }, descJStyle]
+  }, rDesc)), isRenderable(pane.badge) && /*#__PURE__*/React.createElement(View, {
+    style: {
       marginTop: tokens.spacing.badgeMarginTop
-    }]
+    }
   }, isText(pane.badge) ? /*#__PURE__*/React.createElement(Text, {
-    style: [styles.badgeText, {
+    style: {
       color: tokens.colors.badgeText,
+      fontFamily: tokens.typography.fontFamily,
       fontSize: tokens.typography.badgeTextSize
-    }]
-  }, pane.badge) : pane.badge)));
+    }
+  }, pane.badge) : pane.badge)), isC && !isLast && /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'right',
+      color: color ?? tokens.colors.cardBorder,
+      top: 0,
+      bottom: 0
+    })
+  }));
 };
 const TabBarItem = /*#__PURE__*/memo(TabBarItemInner);
 const TabsBaseInner = (props, ref) => {
@@ -360,6 +339,7 @@ const TabsBaseInner = (props, ref) => {
     ...rest
   } = props;
   const tokens = useTabsTokens(tokensOverride);
+  const reducedMotion = useReducedMotion();
   const type = typeProp ?? tokens.defaults.type;
   const align = alignProp ?? tokens.defaults.align;
   const ellipsis = ellipsisProp ?? tokens.defaults.ellipsis;
@@ -369,18 +349,18 @@ const TabsBaseInner = (props, ref) => {
   const lazyRender = lazyRenderProp ?? tokens.defaults.lazyRender;
   const background = backgroundProp ?? tokens.tabList.background;
   const parsedLineWidth = parseNumberLike(lineWidth ?? tokens.indicator.width);
-  const resolvedLineWidth = parsedLineWidth != null && parsedLineWidth < 0 ? undefined : parsedLineWidth;
-  const resolvedLineHeight = Math.max(0, parseNumberLike(lineHeight) ?? tokens.indicator.height);
-  const resolvedDuration = Math.max(0, parseNumberLike(duration) ?? tokens.defaults.duration);
-  const resolvedSwipeThreshold = Math.max(0, parseNumberLike(swipeThreshold) ?? tokens.defaults.swipeThreshold);
-  const swipeableConfig = !swipeable ? undefined : isObject(swipeable) ? {
+  const resLineW = parsedLineWidth != null && parsedLineWidth < 0 ? undefined : parsedLineWidth;
+  const resLineH = Math.max(0, parseNumberLike(lineHeight) ?? tokens.indicator.height);
+  const resDur = reducedMotion ? 0 : Math.max(0, parseNumberLike(duration) ?? tokens.defaults.duration);
+  const resSwipeTh = Math.max(0, parseNumberLike(swipeThreshold) ?? tokens.defaults.swipeThreshold);
+  const swipeCfg = !swipeable ? undefined : isObject(swipeable) ? {
     autoHeight: swipeable.autoHeight ?? true,
     preventScroll: swipeable.preventScroll ?? true
   } : {
     autoHeight: true,
     preventScroll: true
   };
-  const isSwipeable = !!swipeableConfig;
+  const isSwipe = !!swipeCfg;
   const panes = useMemo(() => {
     const result = [];
     let paneIndex = 0;
@@ -388,13 +368,11 @@ const TabsBaseInner = (props, ref) => {
       Children.forEach(nodes, node => {
         if (! /*#__PURE__*/isValidElement(node)) return;
         const element = node;
-        if (element.type === Fragment) {
+        if (element.type === React.Fragment) {
           walk(element.props.children);
           return;
         }
-        if (!isTabPaneElement(element)) {
-          return;
-        }
+        if (!isTabPaneElement(element)) return;
         const paneProps = element.props;
         const name = paneProps.name ?? paneIndex;
         result.push({
@@ -410,75 +388,69 @@ const TabsBaseInner = (props, ref) => {
     return result;
   }, [children]);
   const firstPaneName = panes[0]?.name;
-  const [activeValue, setActiveValue] = useControllableValue(props, {
+  const [actVal, setActVal] = useControllableValue(props, {
     defaultValue: firstPaneName,
     valuePropName: 'active',
     defaultValuePropName: 'defaultActive',
     trigger: 'onChange'
   });
-  const currentName = activeValue == null ? firstPaneName : panes.some(pane => pane.name === activeValue) ? activeValue : firstPaneName;
-  const currentNameRef = useRef(currentName);
+  const curName = actVal == null ? firstPaneName : panes.some(pane => pane.name === actVal) ? actVal : firstPaneName;
+  const curNameRef = useRef(curName);
   useEffect(() => {
-    currentNameRef.current = currentName;
-  }, [currentName]);
-  const nameIndexMap = useMemo(() => {
+    curNameRef.current = curName;
+  }, [curName]);
+  const nameIdxMap = useMemo(() => {
     const map = new Map();
     panes.forEach(pane => {
       map.set(pane.name, pane.index);
     });
     return map;
   }, [panes]);
-  const activeIndex = currentName == null ? -1 : nameIndexMap.get(currentName) ?? -1;
-  const visitedRef = useRef(new Set());
+  const actIdx = curName == null ? -1 : nameIdxMap.get(curName) ?? -1;
+  const visRef = useRef(new Set());
+  const layMap = useRef(new Map());
+  const navCtrWRef = useRef(0);
+  const navCntWRef = useRef(0);
+  const navCntSyncRef = useRef(null);
+  const paneLayMap = useRef(new Map());
+  const swipeScrRef = useRef(null);
+  const swipeChgRef = useRef(false);
+  const [ctrW, setCtrW] = useState(0);
+  const [swipeH, setSwipeH] = useState(undefined);
   useEffect(() => {
-    if (currentName == null) return;
-    visitedRef.current.add(currentName);
-  }, [currentName]);
+    if (curName == null) return;
+    visRef.current.add(curName);
+  }, [curName]);
   useEffect(() => {
     const validNames = new Set(panes.map(pane => pane.name));
-    Array.from(paneLayoutMap.current.keys()).forEach(name => {
-      if (!validNames.has(name)) paneLayoutMap.current.delete(name);
+    Array.from(paneLayMap.current.keys()).forEach(name => {
+      if (!validNames.has(name)) paneLayMap.current.delete(name);
     });
-    Array.from(layoutMap.current.keys()).forEach(name => {
-      if (!validNames.has(name)) layoutMap.current.delete(name);
+    Array.from(layMap.current.keys()).forEach(name => {
+      if (!validNames.has(name)) layMap.current.delete(name);
     });
   }, [panes]);
-  const shouldTrackPaneLayouts = isSwipeable && swipeableConfig?.autoHeight;
+  const trackPaneLay = isSwipe && swipeCfg?.autoHeight;
   useEffect(() => {
-    if (!shouldTrackPaneLayouts) {
-      paneLayoutMap.current.clear();
-    }
-  }, [shouldTrackPaneLayouts]);
+    if (!trackPaneLay) paneLayMap.current.clear();
+  }, [trackPaneLay]);
   useEffect(() => {
-    if (!isSwipeable || !swipeableConfig?.autoHeight) {
-      setSwipeableHeight(undefined);
+    if (!isSwipe || !swipeCfg?.autoHeight) {
+      setSwipeH(undefined);
       return;
     }
-    const layout = currentName != null ? paneLayoutMap.current.get(currentName) : undefined;
-    if (layout) {
-      setSwipeableHeight(layout.height);
-    } else {
-      setSwipeableHeight(undefined);
-    }
-  }, [currentName, isSwipeable, swipeableConfig?.autoHeight]);
-  const layoutMap = useRef(new Map());
-  const navContainerWidthRef = useRef(0);
-  const navContentWidthRef = useRef(0);
-  const navContentSizeSyncFrameRef = useRef(null);
-  const paneLayoutMap = useRef(new Map());
-  const swipeableScrollRef = useRef(null);
-  const swipeableChangeByScrollRef = useRef(false);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [swipeableHeight, setSwipeableHeight] = useState(undefined);
+    const layout = curName != null ? paneLayMap.current.get(curName) : undefined;
+    if (layout) setSwipeH(layout.height);else setSwipeH(undefined);
+  }, [curName, isSwipe, swipeCfg?.autoHeight]);
   useEffect(() => {
     return () => {
-      cancelFrame(navContentSizeSyncFrameRef.current);
-      navContentSizeSyncFrameRef.current = null;
+      cancelFrame(navCntSyncRef.current);
+      navCntSyncRef.current = null;
     };
   }, []);
-  const scrollable = isBoolean(scrollableProp) ? scrollableProp : panes.length > resolvedSwipeThreshold || ellipsis === false;
-  const indicatorColor = color ?? tokens.colors.indicator;
-  const indicatorCornerRadius = resolvedLineHeight ? resolvedLineHeight / 2 : tokens.indicator.radius;
+  const scrollable = isBoolean(scrollableProp) ? scrollableProp : panes.length > resSwipeTh || ellipsis === false;
+  const indColor = color ?? tokens.colors.indicator;
+  const indRad = resLineH ? resLineH / 2 : tokens.indicator.radius;
   const {
     indicatorX,
     indicatorWidth,
@@ -490,13 +462,13 @@ const TabsBaseInner = (props, ref) => {
     scrollable,
     align,
     panes,
-    nameIndexMap,
-    resolvedLineWidth,
-    resolvedLineHeight,
-    resolvedDuration,
-    currentName,
-    layoutMap,
-    navContainerWidthRef
+    nameIndexMap: nameIdxMap,
+    resolvedLineWidth: resLineW,
+    resolvedLineHeight: resLineH,
+    resolvedDuration: resDur,
+    currentName: curName,
+    layoutMap: layMap,
+    navContainerWidthRef: navCtrWRef
   });
   const {
     navScrollRef,
@@ -506,171 +478,162 @@ const TabsBaseInner = (props, ref) => {
   } = useTabsScroll({
     scrollable,
     animated,
-    currentName,
-    resolvedDuration,
-    layoutMap,
-    navContainerWidthRef,
-    navContentWidthRef
+    currentName: curName,
+    resolvedDuration: resDur,
+    layoutMap: layMap,
+    navContainerWidthRef: navCtrWRef,
+    navContentWidthRef: navCntWRef
   });
-  const handleTabLayout = useCallback((name, event) => {
+  const onTabLayout = useCallback((name, event) => {
     const {
       x,
       width
     } = event.nativeEvent.layout;
-    layoutMap.current.set(name, {
+    layMap.current.set(name, {
       x,
       width
     });
-    if (name === currentNameRef.current) {
+    if (name === curNameRef.current) {
       const shouldAnimate = indicatorInitializedRef.current;
       const didAnimate = animateIndicator(name, !shouldAnimate);
       if (didAnimate && !indicatorInitializedRef.current) indicatorInitializedRef.current = true;
     }
   }, [animateIndicator, indicatorInitializedRef]);
-  const handleNavContainerLayout = useCallback(event => {
+  const onNavCtrLayout = useCallback(event => {
     const {
       width
     } = event.nativeEvent.layout;
-    navContainerWidthRef.current = width;
-    if (!scrollable && align !== 'start' && type === 'line' && currentName !== undefined && currentName !== null) {
+    navCtrWRef.current = width;
+    if (!scrollable && align !== 'start' && type === 'line' && curName !== undefined && curName !== null) {
       const shouldAnimate = indicatorInitializedRef.current;
-      const didAnimate = animateIndicator(currentName, !shouldAnimate);
+      const didAnimate = animateIndicator(curName, !shouldAnimate);
       if (didAnimate && !indicatorInitializedRef.current) indicatorInitializedRef.current = true;
     }
-  }, [align, animateIndicator, currentName, scrollable, type, indicatorInitializedRef]);
-  const handleContainerLayout = useCallback(event => {
-    const nextWidth = event.nativeEvent.layout.width;
-    setContainerWidth(prev => prev === nextWidth ? prev : nextWidth);
+  }, [align, animateIndicator, curName, scrollable, type, indicatorInitializedRef]);
+  const onCtrLayout = useCallback(event => {
+    const nextW = event.nativeEvent.layout.width;
+    setCtrW(prev => prev === nextW ? prev : nextW);
   }, []);
-  const runBeforeChange = useCallback(name => {
-    if (!beforeChange) return Promise.resolve(true);
+  const beforeChgRef = useRef(beforeChange);
+  beforeChgRef.current = beforeChange;
+  const runBeforeChg = useCallback(name => {
+    if (!beforeChgRef.current) return Promise.resolve(true);
     try {
-      return Promise.resolve(beforeChange(name)).then(res => res !== false).catch(() => false);
+      return Promise.resolve(beforeChgRef.current(name)).then(res => res !== false).catch(() => false);
     } catch (error) {
       return Promise.resolve(false);
     }
-  }, [beforeChange]);
-  const changeSeqRef = useRef(0);
-  const requestChange = useCallback((name, index) => {
-    changeSeqRef.current += 1;
-    const seq = changeSeqRef.current;
-    runBeforeChange(name).then(canChange => {
+  }, []);
+  const chgSeqRef = useRef(0);
+  const reqChg = useCallback((name, index) => {
+    chgSeqRef.current += 1;
+    const seq = chgSeqRef.current;
+    runBeforeChg(name).then(canChange => {
       if (!canChange) return;
-      if (changeSeqRef.current !== seq) return;
-      setActiveValue(name, index);
+      if (chgSeqRef.current !== seq) return;
+      setActVal(name, index);
     });
-  }, [runBeforeChange, setActiveValue]);
-  const handlePaneLayout = useCallback((name, event) => {
-    if (isSwipeable && swipeableConfig?.autoHeight) {
+  }, [runBeforeChg, setActVal]);
+  const onPaneLayout = useCallback((name, event) => {
+    if (isSwipe && swipeCfg?.autoHeight) {
       const {
         height
       } = event.nativeEvent.layout;
-      paneLayoutMap.current.set(name, {
+      paneLayMap.current.set(name, {
         height
       });
-      if (name === currentName) setSwipeableHeight(height);
+      if (name === curName) setSwipeH(height);
     }
-  }, [currentName, isSwipeable, swipeableConfig?.autoHeight]);
-  const swipeEndIndexRef = useRef(null);
+  }, [curName, isSwipe, swipeCfg?.autoHeight]);
+  const swipeEndIdxRef = useRef(null);
   useEffect(() => {
-    swipeEndIndexRef.current = null;
-  }, [currentName]);
-  const handleSwipeEnd = useCallback(offsetX => {
-    if (!isSwipeable || containerWidth <= 0) return;
-    const pageIndex = Math.round(offsetX / containerWidth);
-    if (swipeEndIndexRef.current === pageIndex) return;
-    swipeEndIndexRef.current = pageIndex;
-    const nextPane = panes[pageIndex];
-    if (!nextPane || nextPane.name === currentNameRef.current) return;
-    swipeableChangeByScrollRef.current = true;
-    requestChange(nextPane.name, nextPane.index);
-  }, [containerWidth, isSwipeable, panes, requestChange]);
-  const handleSwipeMomentumScrollEnd = useCallback(event => {
-    handleSwipeEnd(event.nativeEvent.contentOffset.x);
-  }, [handleSwipeEnd]);
-  const handleSwipeScrollEndDrag = useCallback(event => {
-    handleSwipeEnd(event.nativeEvent.contentOffset.x);
-  }, [handleSwipeEnd]);
+    swipeEndIdxRef.current = null;
+  }, [curName]);
+  const onSwipeEnd = useCallback(offsetX => {
+    if (!isSwipe || ctrW <= 0) return;
+    const pageIdx = Math.round(offsetX / ctrW);
+    if (swipeEndIdxRef.current === pageIdx) return;
+    swipeEndIdxRef.current = pageIdx;
+    const nextPane = panes[pageIdx];
+    if (!nextPane || nextPane.name === curNameRef.current) return;
+    swipeChgRef.current = true;
+    reqChg(nextPane.name, nextPane.index);
+  }, [ctrW, isSwipe, panes, reqChg]);
+  const onSwipeMomentumScrollEnd = useCallback(event => {
+    onSwipeEnd(event.nativeEvent.contentOffset.x);
+  }, [onSwipeEnd]);
+  const onSwipeScrollEndDrag = useCallback(event => {
+    onSwipeEnd(event.nativeEvent.contentOffset.x);
+  }, [onSwipeEnd]);
   useEffect(() => {
-    if (!isSwipeable || !swipeableScrollRef.current || containerWidth <= 0) {
-      return;
-    }
-    if (swipeableChangeByScrollRef.current) {
-      swipeableChangeByScrollRef.current = false;
-      return;
-    }
-    if (activeIndex < 0) {
-      return;
-    }
-    const node = swipeableScrollRef.current?.getNode?.() ?? swipeableScrollRef.current;
-    if (!node?.scrollTo) {
+    if (!isSwipe || !swipeScrRef.current || ctrW <= 0) return;
+    if (swipeChgRef.current) {
+      swipeChgRef.current = false;
       return;
     }
+    if (actIdx < 0) return;
+    const node = swipeScrRef.current?.getNode?.() ?? swipeScrRef.current;
+    if (!node?.scrollTo) return;
     node.scrollTo({
-      x: containerWidth * activeIndex,
+      x: ctrW * actIdx,
       y: 0,
       animated: true
     });
-  }, [activeIndex, containerWidth, isSwipeable]);
-  const handleSelect = useCallback((pane, index, event) => {
+  }, [actIdx, ctrW, isSwipe]);
+  const onClickTabRef = useRef(onClickTab);
+  onClickTabRef.current = onClickTab;
+  const onSel = useCallback((pane, index, event) => {
     const payload = {
       name: pane.name,
       index,
       disabled: !!pane.disabled,
       event
     };
-    onClickTab?.(payload);
-    if (pane.disabled || pane.name === currentNameRef.current) return;
-    requestChange(pane.name, index);
-  }, [onClickTab, requestChange]);
+    onClickTabRef.current?.(payload);
+    if (pane.disabled || pane.name === curNameRef.current) return;
+    reqChg(pane.name, index);
+  }, [reqChg]);
   const scrollTo = useCallback((name, _options) => {
     const target = panes.find(pane => pane.name === name && !pane.disabled);
     if (!target) return;
-    setActiveValue(target.name, target.index);
-  }, [panes, setActiveValue]);
+    setActVal(target.name, target.index);
+  }, [panes, setActVal]);
   useImperativeHandle(ref, () => ({
     scrollTo
   }), [scrollTo]);
-  const firstRenderRef = useRef(true);
+  const firstRndRef = useRef(true);
   useEffect(() => {
-    if (firstRenderRef.current) {
-      firstRenderRef.current = false;
+    if (firstRndRef.current) {
+      firstRndRef.current = false;
       scrollIntoView(true);
     }
   }, [scrollIntoView]);
   useEffect(() => {
-    if (!firstRenderRef.current) {
-      scrollIntoView();
-    }
-  }, [currentName, scrollIntoView]);
-  const borderEnabled = border ?? false;
-  const showIndicator = type === 'line';
-  const navHeight = type === 'jumbo' ? tokens.jumbo.height : type === 'card' ? tokens.card.height : tokens.tabList.height;
-  const navPaddingBottom = Platform.OS === 'web' && type !== 'line' && type !== 'card' ? tokens.tabList.paddingBottom : 0;
-  const indicatorBottom = showIndicator ? type === 'line' ? 0 : tokens.indicator.offset : 0;
-  if (panes.length === 0) {
-    return null;
-  }
-  const indicatorNode = useMemo(() => {
-    if (!showIndicator) return null;
-    return /*#__PURE__*/React.createElement(Animated.View, {
-      testID: "rv-tabs-indicator",
-      style: [styles.indicator, {
-        height: resolvedLineHeight,
-        borderRadius: indicatorCornerRadius,
-        backgroundColor: indicatorColor,
-        width: indicatorWidth,
-        bottom: indicatorBottom,
-        transform: [{
-          translateX: indicatorX
-        }]
+    if (!firstRndRef.current) scrollIntoView();
+  }, [curName, scrollIntoView]);
+  const hasBorder = border ?? false;
+  const showInd = type === 'line';
+  const navH = type === 'jumbo' ? tokens.jumbo.height : type === 'card' ? tokens.card.height : tokens.tabList.height;
+  const navPB = Platform.OS === 'web' && type !== 'line' && type !== 'card' ? tokens.tabList.paddingBottom : 0;
+  const indBot = showInd ? type === 'line' ? 0 : tokens.indicator.offset : 0;
+  if (panes.length === 0) return null;
+  const indicatorNode = showInd ? /*#__PURE__*/React.createElement(Animated.View, {
+    testID: "rv-tabs-indicator",
+    style: [S.ind, {
+      height: resLineH,
+      borderRadius: indRad,
+      backgroundColor: indColor,
+      width: indicatorWidth,
+      bottom: indBot,
+      transform: [{
+        translateX: indicatorX
       }]
-    });
-  }, [indicatorBottom, indicatorColor, indicatorCornerRadius, indicatorWidth, indicatorX, resolvedLineHeight, showIndicator]);
+    }]
+  }) : null;
   const navItems = useMemo(() => panes.map(pane => /*#__PURE__*/React.createElement(TabBarItem, {
     key: pane.key,
     pane: pane,
-    isActive: pane.name === currentName,
+    isActive: pane.name === curName,
     align: align,
     scrollable: scrollable,
     type: type,
@@ -682,21 +645,21 @@ const TabsBaseInner = (props, ref) => {
     tabStyle: tabStyle,
     titleStyle: titleStyle,
     descriptionStyle: descriptionStyle,
-    onSelect: handleSelect,
-    onLayout: handleTabLayout,
+    onSelect: onSel,
+    onLayout: onTabLayout,
     isLast: pane.index === panes.length - 1
-  })), [align, color, currentName, descriptionStyle, ellipsis, handleSelect, handleTabLayout, panes, scrollable, tabStyle, titleActiveColor, titleInactiveColor, titleStyle, tokens, type]);
-  const handleNavContentSizeChange = useCallback(w => {
-    const prev = navContentWidthRef.current;
-    navContentWidthRef.current = w;
-    if (prev === 0 || firstRenderRef.current) {
+  })), [align, color, curName, descriptionStyle, ellipsis, onSel, onTabLayout, panes, scrollable, tabStyle, titleActiveColor, titleInactiveColor, titleStyle, tokens, type]);
+  const onNavCntSizeChg = useCallback(w => {
+    const prev = navCntWRef.current;
+    navCntWRef.current = w;
+    if (prev === 0 || firstRndRef.current) {
       scrollIntoView(true);
       return;
     }
     if (Math.abs(w - prev) > 1) {
-      cancelFrame(navContentSizeSyncFrameRef.current);
-      navContentSizeSyncFrameRef.current = requestFrame(() => {
-        navContentSizeSyncFrameRef.current = null;
+      cancelFrame(navCntSyncRef.current);
+      navCntSyncRef.current = requestFrame(() => {
+        navCntSyncRef.current = null;
         scrollIntoView();
       });
     }
@@ -709,50 +672,56 @@ const TabsBaseInner = (props, ref) => {
     scrollEventThrottle: 16,
     onScrollBeginDrag: handleNavScrollBeginDrag,
     onScroll: handleNavScroll,
-    onContentSizeChange: handleNavContentSizeChange,
-    contentContainerStyle: styles.navContent
+    onContentSizeChange: onNavCntSizeChg,
+    contentContainerStyle: S.navC
   }, navItems, indicatorNode) : /*#__PURE__*/React.createElement(View, {
     accessibilityRole: "tablist",
-    style: [styles.navContent, styles.navContentStatic]
+    style: [S.navC, S.navCSta]
   }, navItems, indicatorNode);
   const navContent = /*#__PURE__*/React.createElement(View, {
-    style: [styles.wrap, borderEnabled && type === 'line' ? {
-      borderBottomWidth: StyleSheet.hairlineWidth,
-      borderBottomColor: tokens.colors.border
-    } : null, {
+    style: [S.wrap, {
       backgroundColor: background
     }, tabBarStyle]
   }, navLeft && /*#__PURE__*/React.createElement(View, {
-    style: [styles.navSide, {
+    style: {
       paddingHorizontal: tokens.spacing.navSidePaddingHorizontal
-    }]
+    }
   }, navLeft), /*#__PURE__*/React.createElement(View, {
-    style: [styles.nav, {
-      minHeight: navHeight + navPaddingBottom,
-      paddingBottom: navPaddingBottom
+    style: [S.nav, {
+      minHeight: navH + navPB,
+      paddingBottom: navPB
     }, type === 'card' ? {
-      borderWidth: StyleSheet.hairlineWidth,
       borderRadius: tokens.card.radius,
-      borderColor: color ?? tokens.colors.cardBorder,
       marginHorizontal: tokens.card.marginHorizontal,
       overflow: 'hidden'
     } : null],
-    onLayout: handleNavContainerLayout
-  }, navBody), navRight && /*#__PURE__*/React.createElement(View, {
-    style: [styles.navSide, {
+    onLayout: onNavCtrLayout
+  }, navBody, type === 'card' && /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'all',
+      color: color ?? tokens.colors.cardBorder,
+      borderRadius: tokens.card.radius
+    })
+  })), navRight && /*#__PURE__*/React.createElement(View, {
+    style: {
       paddingHorizontal: tokens.spacing.navSidePaddingHorizontal
-    }]
-  }, navRight));
-  const paneNodes = useMemo(() => panes.map(pane => {
-    const isActive = pane.name === currentName;
-    const shouldRender = !lazyRender || isActive || visitedRef.current.has(pane.name);
-    if (!shouldRender && !isSwipeable) {
-      return null;
     }
-    const layoutHandler = isSwipeable && swipeableConfig?.autoHeight ? event => handlePaneLayout(pane.name, event) : undefined;
-    const paneStyles = [styles.pane, isSwipeable ? styles.swipeablePane : null, isSwipeable && containerWidth > 0 && {
-      width: containerWidth
-    }, !isSwipeable && !isActive ? styles.hiddenPane : null];
+  }, navRight), hasBorder && type === 'line' && /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'bottom',
+      color: tokens.colors.border,
+      left: 0,
+      right: 0
+    })
+  }));
+  const paneNodes = useMemo(() => panes.map(pane => {
+    const isActive = pane.name === curName;
+    const shouldRender = !lazyRender || isActive || visRef.current.has(pane.name);
+    if (!shouldRender && !isSwipe) return null;
+    const layoutHandler = isSwipe && swipeCfg?.autoHeight ? event => onPaneLayout(pane.name, event) : undefined;
+    const paneStyles = [S.pane, isSwipe ? S.swipePane : null, isSwipe && ctrW > 0 && {
+      width: ctrW
+    }, !isSwipe && !isActive ? S.hidPane : null];
     const paneContent = shouldRender ? pane.children : lazyRenderPlaceholder || null;
     return /*#__PURE__*/React.createElement(View, {
       key: pane.key,
@@ -760,37 +729,37 @@ const TabsBaseInner = (props, ref) => {
       onLayout: layoutHandler,
       style: paneStyles
     }, paneContent);
-  }), [containerWidth, currentName, handlePaneLayout, isSwipeable, lazyRender, lazyRenderPlaceholder, panes, swipeableConfig?.autoHeight]);
-  const baseContentStyle = useMemo(() => [styles.content, contentStyle], [contentStyle]);
-  const swipeableContentStyle = useMemo(() => [styles.content, contentStyle, swipeableConfig?.autoHeight && swipeableHeight !== undefined && {
-    height: swipeableHeight
-  }], [contentStyle, swipeableConfig?.autoHeight, swipeableHeight]);
-  const contentNode = isSwipeable ? /*#__PURE__*/React.createElement(View, {
-    style: swipeableContentStyle
+  }), [ctrW, curName, onPaneLayout, isSwipe, lazyRender, lazyRenderPlaceholder, panes, swipeCfg?.autoHeight]);
+  const baseContentStyle = [S.content, contentStyle];
+  const swipeContentStyle = [S.content, contentStyle, swipeCfg?.autoHeight && swipeH !== undefined && {
+    height: swipeH
+  }];
+  const contentNode = isSwipe ? /*#__PURE__*/React.createElement(View, {
+    style: swipeContentStyle
   }, /*#__PURE__*/React.createElement(Animated.ScrollView, {
-    ref: swipeableScrollRef,
+    ref: swipeScrRef,
     horizontal: true,
     pagingEnabled: true,
     scrollEventThrottle: 16,
     showsHorizontalScrollIndicator: false,
-    onMomentumScrollEnd: handleSwipeMomentumScrollEnd,
-    onScrollEndDrag: handleSwipeScrollEndDrag,
-    nestedScrollEnabled: swipeableConfig?.preventScroll === false,
-    directionalLockEnabled: swipeableConfig?.preventScroll !== false
+    onMomentumScrollEnd: onSwipeMomentumScrollEnd,
+    onScrollEndDrag: onSwipeScrollEndDrag,
+    nestedScrollEnabled: swipeCfg?.preventScroll === false,
+    directionalLockEnabled: swipeCfg?.preventScroll !== false
   }, paneNodes)) : /*#__PURE__*/React.createElement(View, {
     style: baseContentStyle
   }, paneNodes);
   return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
-    style: [styles.container, style],
-    onLayout: handleContainerLayout
+    style: [S.ctr, style],
+    onLayout: onCtrLayout
   }), navContent, navBottom && /*#__PURE__*/React.createElement(View, {
-    style: [styles.navBottom, {
+    style: {
       marginTop: tokens.spacing.navBottomMarginTop
-    }]
+    }
   }, navBottom), contentNode);
 };
-const styles = StyleSheet.create({
-  container: {
+const S = StyleSheet.create({
+  ctr: {
     width: '100%'
   },
   wrap: {
@@ -803,31 +772,29 @@ const styles = StyleSheet.create({
     position: 'relative',
     alignSelf: 'stretch'
   },
-  navContent: {
+  navC: {
     flexDirection: 'row',
     alignItems: 'center',
     height: '100%',
     position: 'relative'
   },
-  navContentStatic: {
+  navCSta: {
     flex: 1
   },
-  navSide: {},
-  navBottom: {},
-  labelWrapper: {
+  lblW: {
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'column'
   },
-  labelWrapperJumbo: {
+  lblWJ: {
     alignItems: 'center'
   },
-  cardLabel: {
+  cardLbl: {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center'
   },
-  tabItem: {
+  tabI: {
     flexShrink: 0,
     height: '100%',
     alignSelf: 'stretch',
@@ -835,23 +802,20 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row'
   },
-  flexItem: {
+  flexI: {
     flexGrow: 1
   },
   title: {
     includeFontPadding: false
   },
-  descriptionText: {
+  descTxt: {
     includeFontPadding: false
   },
-  descriptionView: {},
   ellipsis: {
     maxWidth: '100%',
     flexShrink: 1
   },
-  badge: {},
-  badgeText: {},
-  indicator: {
+  ind: {
     position: 'absolute',
     bottom: 0,
     left: 0
@@ -862,16 +826,15 @@ const styles = StyleSheet.create({
   pane: {
     width: '100%'
   },
-  swipeablePane: {
+  swipePane: {
     flexShrink: 0
   },
-  hiddenPane: {
+  hidPane: {
     display: 'none'
   }
 });
-const TabsBase = /*#__PURE__*/React.forwardRef(TabsBaseInner);
-TabsBase.displayName = 'Tabs';
-const TabsWithPane = Object.assign(TabsBase, {
+const TabsBaseRef = /*#__PURE__*/React.forwardRef(TabsBaseInner);
+const TabsWithPane = Object.assign(/*#__PURE__*/React.memo(TabsBaseRef), {
   TabPane
 });
 export { TabPane };