react-native-system-ui 0.0.7 → 1.0.0

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

@@ -2,26 +2,22 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { memo, useCallback, useEffect, useImperativeHandle, useRef, useState, useMemo, Children, isValidElement, Fragment } 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,
@@ -39,6 +35,7 @@ const useTabsAnimation = ({
   const indicatorX = useRef(new Animated.Value(0)).current;
   const indicatorWidth = useRef(new Animated.Value(0)).current;
   const indicatorInitializedRef = useRef(false);
+  const indicatorAnimRef = 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;
@@ -48,27 +45,35 @@ const useTabsAnimation = ({
       x: Math.max(index, 0) * equalTabWidth,
       width: equalTabWidth
     } : layoutMap.current.get(name);
-    if (!layout || index < 0) {
-      return false;
-    }
+    if (!layout || index < 0) return false;
+    indicatorAnimRef.current?.stop();
     const timing = (value, toValue) => Animated.timing(value, {
       toValue,
       duration: immediate || !animated ? 0 : resolvedDuration,
-      useNativeDriver: false
+      useNativeDriver: false,
+      isInteraction: false
     });
     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();
+    const anim = Animated.parallel([timing(indicatorX, targetX), timing(indicatorWidth, targetWidth)]);
+    indicatorAnimRef.current = anim;
+    anim.start(({
+      finished
+    }) => {
+      if (finished) indicatorAnimRef.current = null;
+    });
     return true;
   }, [align, animated, indicatorWidth, indicatorX, 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;
-    }
+    if (didAnimate && !indicatorInitializedRef.current) indicatorInitializedRef.current = true;
   }, [animateIndicator, currentName]);
+  useEffect(() => () => {
+    indicatorAnimRef.current?.stop();
+    indicatorAnimRef.current = null;
+  }, []);
   return {
     indicatorX,
     indicatorWidth,
@@ -100,12 +105,8 @@ const useTabsScroll = ({
     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 (maxScroll <= 0) return;
+    if (Math.abs(clampedX - navLastScrollXRef.current) < 1) return;
     if (navScrollAnimRef.current) {
       navScrollAnimRef.current.stop();
       navScrollAnimRef.current = null;
@@ -126,16 +127,15 @@ const useTabsScroll = ({
     navScrollAnimRef.current = Animated.timing(navScrollX, {
       toValue: clampedX,
       duration: resolvedDuration,
-      useNativeDriver: false
+      useNativeDriver: false,
+      isInteraction: false
     });
     navScrollAnimRef.current.start(({
       finished
     }) => {
       navScrollAnimRef.current = null;
       navAutoScrollingRef.current = false;
-      if (!finished) {
-        return;
-      }
+      if (!finished) return;
       navLastScrollXRef.current = clampedX;
     });
   }, [animated, currentName, navScrollX, resolvedDuration, scrollable, layoutMap, navContainerWidthRef, navContentWidthRef]);
@@ -146,9 +146,7 @@ const useTabsScroll = ({
     }) => {
       const prev = navLastScrollXRef.current;
       navLastScrollXRef.current = value;
-      if (Math.abs(value - prev) < 0.5) {
-        return;
-      }
+      if (Math.abs(value - prev) < 0.5) return;
       navScrollRef.current?.scrollTo({
         x: value,
         y: 0,
@@ -174,9 +172,7 @@ const useTabsScroll = ({
     navLastScrollXRef.current = event.nativeEvent.contentOffset.x;
   }, []);
   const handleNavScroll = useCallback(event => {
-    if (navAutoScrollingRef.current) {
-      return;
-    }
+    if (navAutoScrollingRef.current) return;
     navLastScrollXRef.current = event.nativeEvent.contentOffset.x;
   }, []);
   return {
@@ -230,7 +226,19 @@ const TabBarItemInner = ({
   const isCompactType = isCard || isJumbo || isCapsule;
   const horizontalPadding = isCompactType ? 0 : tokens.tabList.paddingHorizontal;
   const verticalPadding = isCompactType ? 0 : tokens.tabList.paddingVertical;
-  const labelWrapperStyles = [styles.labelWrapper];
+  const labelWrapperStyles = [S.lblW, isJumbo && S.lblWJ, isCard && S.cardLbl, isCard && {
+    paddingHorizontal: tokens.card.paddingHorizontal,
+    paddingVertical: tokens.card.paddingVertical
+  }, isCapsule && {
+    flex: 1,
+    alignSelf: 'stretch',
+    paddingHorizontal: tokens.capsule.paddingHorizontal,
+    paddingVertical: tokens.capsule.paddingVertical
+  }, isJumbo && {
+    paddingHorizontal: tokens.jumbo.paddingHorizontal,
+    paddingVertical: tokens.jumbo.paddingVertical,
+    alignItems: 'center'
+  }].filter(Boolean);
   const labelTextWrapperStyles = isCapsule ? [{
     flex: 1,
     alignSelf: 'stretch',
@@ -239,40 +247,13 @@ 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, {
+  const titleTextStyle = [S.title, {
     color: textColor,
     fontSize: isJumbo ? tokens.typography.jumboTitleSize : tokens.typography.titleSize,
     fontWeight: isActive ? tokens.typography.titleActiveWeight : tokens.typography.titleWeight,
     lineHeight: isJumbo ? tokens.typography.jumboLineHeight : undefined,
     textAlign: 'center'
-  }, ellipsis && !isJumbo ? styles.ellipsis : null, titleStyle];
+  }, ellipsis && !isJumbo ? S.ellipsis : null, titleStyle];
   const titleNode = /*#__PURE__*/React.createElement(Text, {
     style: titleTextStyle,
     numberOfLines: ellipsis && !isJumbo ? 1 : undefined
@@ -284,24 +265,25 @@ const TabBarItemInner = ({
     paddingVertical: tokens.jumbo.descriptionPaddingVertical,
     borderRadius: tokens.jumbo.descriptionRadius
   } : null;
-  const descriptionTextStyle = [styles.descriptionText, {
+  const descriptionTextStyle = [S.descTxt, {
     color: descriptionColor,
     fontSize: tokens.typography.descriptionSize,
     marginTop: descriptionMarginTop,
     textAlign: 'center'
   }, descriptionJumboStyle, descriptionStyle];
-  const descriptionViewStyle = [styles.descriptionView, {
+  const descriptionViewStyle = [{
     marginTop: descriptionMarginTop,
     alignItems: 'center'
   }, descriptionJumboStyle];
+  const handleLayout = useCallback(event => {
+    onLayout(pane.name, event);
+  }, [onLayout, pane.name]);
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, ariaPress.interactionProps, {
-    onLayout: event => onLayout(pane.name, event),
-    style: [styles.tabItem, shouldFlex ? styles.flexItem : null, {
+    onLayout: handleLayout,
+    style: [S.tabI, shouldFlex ? S.flexI : null, {
       paddingHorizontal: horizontalPadding,
       paddingVertical: verticalPadding
     }, isCard ? {
-      borderRightWidth: isLast ? 0 : StyleSheet.hairlineWidth,
-      borderRightColor: color ?? tokens.colors.cardBorder,
       backgroundColor: isActive ? color ?? tokens.colors.cardActiveBackground : tokens.colors.cardBackground
     } : null, tabStyle]
   }), /*#__PURE__*/React.createElement(View, {
@@ -313,15 +295,22 @@ const TabBarItemInner = ({
   }, renderDescription) : /*#__PURE__*/React.createElement(View, {
     style: descriptionViewStyle
   }, renderDescription)), isRenderable(pane.badge) && /*#__PURE__*/React.createElement(View, {
-    style: [styles.badge, {
+    style: {
       marginTop: tokens.spacing.badgeMarginTop
-    }]
+    }
   }, isText(pane.badge) ? /*#__PURE__*/React.createElement(Text, {
-    style: [styles.badgeText, {
+    style: {
       color: tokens.colors.badgeText,
       fontSize: tokens.typography.badgeTextSize
-    }]
-  }, pane.badge) : pane.badge)));
+    }
+  }, pane.badge) : pane.badge)), isCard && !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 +349,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 +359,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;
@@ -392,9 +382,7 @@ const TabsBaseInner = (props, ref) => {
           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 +398,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 +472,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 +488,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 +655,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 +682,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 +739,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 +782,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 +812,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 +836,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 };