react-native-tab-view 5.0.0-alpha.0 → 5.0.0-alpha.10

package/lib/module/TabBar.js

@@ -2,13 +2,13 @@
 
 import * as React from 'react';
 import { Animated, I18nManager, Platform, StyleSheet, View } from 'react-native';
-import useLatestCallback from 'use-latest-callback';
+import { PRIMARY_INDICATOR_MIN_WIDTH, TAB_BAR_BACKGROUND_COLOR, TAB_BAR_BORDER_COLOR, TAB_MIN_WIDTH } from "./constants.js";
 import { TabBarIndicator } from "./TabBarIndicator.js";
 import { TabBarItem } from "./TabBarItem.js";
 import { useAnimatedValue } from "./useAnimatedValue.js";
+import { useLayoutWidths } from "./useLayoutWidths.js";
 import { useMeasureLayout } from "./useMeasureLayout.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useNativeDriver = Platform.OS !== 'web';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const Separator = ({
   width
 }) => {
@@ -55,8 +55,12 @@ const getComputedTabWidth = ({
   flattenedPaddingEnd,
   gap
 }) => {
+  const route = routes[index];
+  if (route == null) {
+    throw new Error(`Couldn't find a route at index ${index}.`);
+  }
   if (flattenedTabWidth === 'auto') {
-    return tabWidths[routes[index].key] || 0;
+    return tabWidths[route.key] || 0;
   }
   switch (typeof flattenedTabWidth) {
     case 'number':
@@ -70,14 +74,31 @@ const getComputedTabWidth = ({
       }
   }
   if (scrollEnabled) {
-    return layoutWidth / 5 * 2;
+    return tabWidths[route.key] || TAB_MIN_WIDTH;
   }
   const gapTotalWidth = (gap ?? 0) * (routes.length - 1);
   const paddingTotalWidth = convertPaddingPercentToSize(flattenedPaddingStart, layoutWidth) + convertPaddingPercentToSize(flattenedPaddingEnd, layoutWidth);
   return (layoutWidth - gapTotalWidth - paddingTotalWidth) / routes.length;
 };
+const calculateSize = (value, referenceWidth) => {
+  if (typeof value === 'number') {
+    return value;
+  }
+  if (typeof value === 'string' && value.endsWith('%')) {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) {
+      return referenceWidth * (parsed / 100);
+    }
+  }
+  return undefined;
+};
 const getMaxScrollDistance = (tabBarWidth, layoutWidth) => tabBarWidth - layoutWidth;
-const getTranslateX = (scrollAmount, maxScrollDistance, direction) => Animated.multiply(Platform.OS === 'android' && direction === 'rtl' ? Animated.add(maxScrollDistance, Animated.multiply(scrollAmount, -1)) : scrollAmount, direction === 'rtl' ? 1 : -1);
+const getTranslateX = (scrollAmount, maxScrollDistance, direction) => {
+  const amount =
+  // Android reports scroll from the opposite side in RTL
+  Platform.OS === 'android' && direction === 'rtl' ? Animated.add(maxScrollDistance, Animated.multiply(scrollAmount, -1)) : scrollAmount;
+  return Animated.multiply(amount, direction === 'rtl' ? 1 : -1);
+};
 const getTabBarWidth = ({
   routes,
   layoutWidth,
@@ -110,8 +131,7 @@ const normalizeScrollValue = ({
   value,
   flattenedTabWidth,
   flattenedPaddingStart,
-  flattenedPaddingEnd,
-  direction
+  flattenedPaddingEnd
 }) => {
   const tabBarWidth = getTabBarWidth({
     layoutWidth,
@@ -125,11 +145,6 @@ const normalizeScrollValue = ({
   });
   const maxDistance = getMaxScrollDistance(tabBarWidth, layoutWidth);
   const scrollValue = Math.max(Math.min(value, maxDistance), 0);
-  if (Platform.OS === 'android' && direction === 'rtl') {
-    // On Android, scroll value is not applied in reverse in RTL
-    // so we need to manually adjust it to apply correct value
-    return maxDistance - scrollValue;
-  }
   return scrollValue;
 };
 const getScrollAmount = ({
@@ -174,8 +189,7 @@ const getScrollAmount = ({
     scrollEnabled,
     flattenedTabWidth,
     flattenedPaddingStart,
-    flattenedPaddingEnd,
-    direction
+    flattenedPaddingEnd
   });
 };
 const getLabelTextDefault = ({
@@ -196,8 +210,9 @@ const getTestIdDefault = ({
 
 // How many items measurements should we update per batch.
 // Defaults to 10, since that's whats FlatList is using in initialNumToRender.
-const MEASURE_PER_BATCH = 10;
+const RENDER_PER_BATCH = 10;
 export function TabBar({
+  variant = 'primary',
   renderIndicator = renderIndicatorDefault,
   gap = 0,
   scrollEnabled,
@@ -224,18 +239,24 @@ export function TabBar({
 }) {
   const containerRef = React.useRef(null);
   const [layout, onLayout] = useMeasureLayout(containerRef);
-  const [tabWidths, setTabWidths] = React.useState({});
+
+  // Prioritize measuring tabs upto focused item
+  // Since we need those measurements for calculation
+  const priorityKeysForLayout = navigationState.routes.slice(0, navigationState.index + 1).map(r => r.key);
+  const [tabWidths, onMeasureTabWidth] = useLayoutWidths(priorityKeysForLayout);
+  const [labelWidths, onMeasureLabelWidth] = useLayoutWidths(priorityKeysForLayout);
   const flatListRef = React.useRef(null);
   const isFirst = React.useRef(true);
-  const scrollAmount = useAnimatedValue(0);
-  const measuredTabWidths = React.useRef({});
   const {
     routes
   } = navigationState;
   const flattenedTabWidth = getFlattenedTabWidth(tabStyle);
-  const isWidthDynamic = flattenedTabWidth === 'auto';
+  const isWidthAuto = flattenedTabWidth === 'auto';
+  const isWidthDynamic = isWidthAuto || scrollEnabled && flattenedTabWidth == null;
   const flattenedPaddingEnd = getFlattenedPaddingEnd(contentContainerStyle);
   const flattenedPaddingStart = getFlattenedPaddingStart(contentContainerStyle);
+  const paddingEnd = convertPaddingPercentToSize(flattenedPaddingEnd, layout.width);
+  const paddingStart = convertPaddingPercentToSize(flattenedPaddingStart, layout.width);
   const scrollOffset = getScrollAmount({
     layoutWidth: layout.width,
     routes,
@@ -254,7 +275,7 @@ export function TabBar({
       isFirst.current = false;
       return;
     }
-    if (isWidthDynamic && !hasMeasuredTabWidths) {
+    if (isWidthAuto && !hasMeasuredTabWidths) {
       return;
     }
     if (scrollEnabled) {
@@ -263,7 +284,7 @@ export function TabBar({
         animated: true
       });
     }
-  }, [hasMeasuredTabWidths, isWidthDynamic, scrollEnabled, scrollOffset]);
+  }, [hasMeasuredTabWidths, isWidthAuto, scrollEnabled, scrollOffset]);
   const tabBarWidth = getTabBarWidth({
     layoutWidth: layout.width,
     routes,
@@ -274,107 +295,55 @@ export function TabBar({
     flattenedPaddingStart,
     flattenedPaddingEnd
   });
-  const separatorsWidth = Math.max(0, routes.length - 1) * gap;
-  const paddingsWidth = Math.max(0, convertPaddingPercentToSize(flattenedPaddingStart, layout.width) + convertPaddingPercentToSize(flattenedPaddingEnd, layout.width));
-  const translateX = React.useMemo(() => getTranslateX(scrollAmount, getMaxScrollDistance(tabBarWidth, layout.width), direction), [direction, layout.width, scrollAmount, tabBarWidth]);
+  const maxScrollDistance = getMaxScrollDistance(tabBarWidth, layout.width);
+  const scrollAmount = useAnimatedValue(0);
+  React.useLayoutEffect(() => {
+    scrollAmount.setValue(Platform.OS === 'android' && direction === 'rtl' ? maxScrollDistance : 0);
+  }, [direction, maxScrollDistance, scrollAmount]);
+  const translateX = React.useMemo(() => getTranslateX(scrollAmount, maxScrollDistance, direction), [direction, maxScrollDistance, scrollAmount]);
+  const flattenedTabStyle = StyleSheet.flatten(tabStyle);
+  const isTabWidthSet = flattenedTabStyle?.width !== undefined;
+
+  // Calculate the default width for tab for FlatList to work.
+  const defaultTabWidth = !isWidthDynamic ? getComputedTabWidth({
+    // When `isWidthDynamic` is false, every tab gets the same width and
+    // `getComputedTabWidth` ignores `index`, so we compute it once with index 0.
+    index: 0,
+    layoutWidth: layout.width,
+    routes,
+    scrollEnabled,
+    tabWidths,
+    flattenedTabWidth,
+    flattenedPaddingStart,
+    flattenedPaddingEnd,
+    gap
+  }) : undefined;
   const renderItem = React.useCallback(({
     item: route,
     index
-  }) => {
-    const {
-      testID = getTestIdDefault({
-        route
-      }),
-      labelText = getLabelTextDefault({
-        route
-      }),
-      accessible = getAccessibleDefault({
-        route
-      }),
-      accessibilityLabel = getAccessibilityLabelDefault({
-        route
-      }),
-      ...rest
-    } = options?.[route.key] ?? {};
-    const onLayout = isWidthDynamic ? e => {
-      measuredTabWidths.current[route.key] = e.nativeEvent.layout.width;
-
-      // When we have measured widths for all of the tabs, we should updates the state
-      // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
-      // If we have more than 10 routes divide updating tabWidths into multiple batches. Here we update only first batch of 10 items.
-      if (routes.length > MEASURE_PER_BATCH && index === MEASURE_PER_BATCH && routes.slice(0, MEASURE_PER_BATCH).every(r => typeof measuredTabWidths.current[r.key] === 'number')) {
-        setTabWidths({
-          ...measuredTabWidths.current
-        });
-      } else if (routes.every(r => typeof measuredTabWidths.current[r.key] === 'number')) {
-        // When we have measured widths for all of the tabs, we should updates the state
-        // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
-        setTabWidths({
-          ...measuredTabWidths.current
-        });
-      }
-    } : undefined;
-    const onPress = () => {
-      const event = {
-        route,
-        defaultPrevented: false,
-        preventDefault: () => {
-          event.defaultPrevented = true;
-        }
-      };
-      onTabPress?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-      jumpTo(route.key);
-    };
-    const onLongPress = () => onTabLongPress?.({
-      route
-    });
-
-    // Calculate the default width for tab for FlatList to work
-    const defaultTabWidth = !isWidthDynamic ? getComputedTabWidth({
-      index,
-      layoutWidth: layout.width,
-      routes,
-      scrollEnabled,
-      tabWidths,
-      flattenedTabWidth: getFlattenedTabWidth(tabStyle),
-      flattenedPaddingStart: getFlattenedPaddingStart(contentContainerStyle),
-      flattenedPaddingEnd: getFlattenedPaddingEnd(contentContainerStyle),
-      gap
-    }) : undefined;
-    const props = {
-      ...rest,
-      position,
-      route,
-      navigationState,
-      testID,
-      labelText,
-      accessible,
-      accessibilityLabel,
-      activeColor,
-      inactiveColor,
-      pressColor,
-      pressOpacity,
-      onLayout,
-      onPress,
-      onLongPress,
-      style: tabStyle,
-      defaultTabWidth,
-      android_ripple
-    };
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [gap > 0 && index > 0 ? /*#__PURE__*/_jsx(Separator, {
-        width: gap
-      }) : null, renderTabBarItem ? renderTabBarItem({
-        key: route.key,
-        ...props
-      }) : /*#__PURE__*/_jsx(TabBarItem, {
-        ...props
-      }, route.key)]
-    });
-  }, [position, navigationState, options, activeColor, inactiveColor, pressColor, pressOpacity, isWidthDynamic, tabStyle, layout, routes, scrollEnabled, tabWidths, contentContainerStyle, gap, android_ripple, renderTabBarItem, onTabPress, jumpTo, onTabLongPress]);
+  }) => /*#__PURE__*/_jsx(MemoizedTabBarItemWrapper, {
+    route: route,
+    index: index,
+    option: options?.[route.key],
+    position: position,
+    navigationState: navigationState,
+    variant: variant,
+    activeColor: activeColor,
+    inactiveColor: inactiveColor,
+    pressColor: pressColor,
+    pressOpacity: pressOpacity,
+    android_ripple: android_ripple,
+    tabStyle: tabStyle,
+    defaultTabWidth: defaultTabWidth,
+    isWidthSet: isTabWidthSet,
+    gap: gap,
+    onMeasureTabWidth: onMeasureTabWidth,
+    onMeasureLabelWidth: onMeasureLabelWidth,
+    onTabPress: onTabPress,
+    onTabLongPress: onTabLongPress,
+    jumpTo: jumpTo,
+    renderTabBarItem: renderTabBarItem
+  }), [options, position, navigationState, variant, activeColor, inactiveColor, pressColor, pressOpacity, android_ripple, tabStyle, defaultTabWidth, isTabWidthSet, gap, onMeasureTabWidth, onMeasureLabelWidth, onTabPress, onTabLongPress, jumpTo, renderTabBarItem]);
   const keyExtractor = React.useCallback(item => item.key, []);
   const contentContainerStyleMemoized = React.useMemo(() => [styles.tabContent, scrollEnabled ? {
     width: tabBarWidth
@@ -386,27 +355,83 @@ export function TabBar({
       }
     }
   }], {
-    useNativeDriver
+    useNativeDriver: Platform.OS !== 'web'
   }), [scrollAmount]);
-  const handleViewableItemsChanged = useLatestCallback(({
-    changed
-  }) => {
-    if (routes.length <= MEASURE_PER_BATCH) {
-      return;
+  const flattenedIndicatorStyle = StyleSheet.flatten(indicatorStyle);
+  const defaultIndicatorStyle = variant === 'primary' ? styles.primaryIndicator : styles.secondaryIndicator;
+  const tabWidthByIndex = routes.map((_, i) => getComputedTabWidth({
+    index: i,
+    layoutWidth: layout.width,
+    routes,
+    scrollEnabled,
+    tabWidths,
+    flattenedTabWidth,
+    flattenedPaddingEnd,
+    flattenedPaddingStart,
+    gap
+  }));
+  const indicatorBaseWidths = tabWidthByIndex.map((tabWidth, i) => {
+    const customIndicatorWidth = calculateSize(flattenedIndicatorStyle?.width, tabWidth);
+    if (customIndicatorWidth != null) {
+      return customIndicatorWidth;
     }
-    // Get next vievable item
-    const item = changed[changed.length - 1];
-    const index = item?.index || 0;
-    if (item.isViewable && (index % 10 === 0 || index === navigationState.index || index === routes.length - 1)) {
-      setTabWidths({
-        ...measuredTabWidths.current
-      });
+    if (variant === 'primary') {
+      const route = routes[i];
+      if (route == null) {
+        throw new Error(`Couldn't find a route at index ${i}.`);
+      }
+      const labelWidth = labelWidths[route.key];
+      return labelWidth ? Math.max(PRIMARY_INDICATOR_MIN_WIDTH, labelWidth) : 0;
+    }
+    return tabWidth;
+  });
+  const indicatorMargins = indicatorBaseWidths.map(width => {
+    if (!width) {
+      return {
+        left: 0,
+        right: 0
+      };
+    }
+    const marginHorizontal = flattenedIndicatorStyle?.marginHorizontal ?? flattenedIndicatorStyle?.margin;
+    const leftMargin = (direction === 'ltr' ? flattenedIndicatorStyle?.marginStart : flattenedIndicatorStyle?.marginEnd) ?? flattenedIndicatorStyle?.marginLeft ?? marginHorizontal;
+    const rightMargin = (direction === 'rtl' ? flattenedIndicatorStyle?.marginStart : flattenedIndicatorStyle?.marginEnd) ?? flattenedIndicatorStyle?.marginRight ?? marginHorizontal;
+    return {
+      left: calculateSize(leftMargin, width) ?? 0,
+      right: calculateSize(rightMargin, width) ?? 0
+    };
+  });
+  const indicatorWidths = indicatorBaseWidths.map((width, i) => {
+    if (!width) {
+      return 0;
+    }
+    const margin = indicatorMargins[i];
+    if (margin == null) {
+      throw new Error(`Couldn't find an indicator margin at index ${i}.`);
     }
+    return Math.max(0, width - margin.left - margin.right);
+  });
+  const indicatorOffsets = tabWidthByIndex.map((tabWidth, i) => {
+    const precedingTabsWidth = tabWidthByIndex.slice(0, i).reduce((sum, width) => sum + width, 0);
+    const tabStart = precedingTabsWidth + gap * i;
+    const customIndicatorWidth = calculateSize(flattenedIndicatorStyle?.width, tabWidth);
+    const margin = indicatorMargins[i];
+    if (margin == null) {
+      throw new Error(`Couldn't find an indicator margin at index ${i}.`);
+    }
+    const indicatorBaseWidth = indicatorBaseWidths[i];
+    if (indicatorBaseWidth == null) {
+      throw new Error(`Couldn't find an indicator width at index ${i}.`);
+    }
+    const shouldCenterIndicator = variant === 'primary' || customIndicatorWidth != null && (flattenedIndicatorStyle?.margin === 'auto' || flattenedIndicatorStyle?.marginHorizontal === 'auto');
+    const baseOffset = shouldCenterIndicator ? (tabWidth - indicatorBaseWidth) / 2 : 0;
+    return tabStart + baseOffset + margin.left;
   });
   return /*#__PURE__*/_jsxs(Animated.View, {
     ref: containerRef,
     onLayout: onLayout,
-    style: [styles.tabBar, style],
+    style: [styles.tabBar, {
+      direction
+    }, style],
     children: [/*#__PURE__*/_jsx(Animated.View, {
       style: [styles.indicatorContainer, scrollEnabled ? {
         transform: [{
@@ -416,27 +441,17 @@ export function TabBar({
         width: tabBarWidth
       } : null, indicatorContainerStyle],
       children: renderIndicator({
+        variant,
         position,
         navigationState,
         jumpTo,
         direction,
-        width: isWidthDynamic ? 'auto' : Math.max(0, (tabBarWidth - separatorsWidth - paddingsWidth) / routes.length),
-        style: [indicatorStyle, {
-          start: flattenedPaddingStart,
-          end: flattenedPaddingEnd
-        }],
-        getTabWidth: i => getComputedTabWidth({
-          index: i,
-          layoutWidth: layout.width,
-          routes,
-          scrollEnabled,
-          tabWidths,
-          flattenedTabWidth,
-          flattenedPaddingEnd,
-          flattenedPaddingStart,
-          gap
-        }),
-        gap
+        widths: indicatorWidths,
+        offsets: indicatorOffsets,
+        style: [defaultIndicatorStyle, indicatorStyle, {
+          start: paddingStart,
+          end: paddingEnd
+        }]
       })
     }), /*#__PURE__*/_jsx(View, {
       style: styles.scroll,
@@ -448,8 +463,7 @@ export function TabBar({
         keyboardShouldPersistTaps: "handled",
         scrollEnabled: scrollEnabled,
         bounces: bounces,
-        initialNumToRender: MEASURE_PER_BATCH,
-        onViewableItemsChanged: handleViewableItemsChanged,
+        initialNumToRender: RENDER_PER_BATCH,
         alwaysBounceHorizontal: false,
         scrollsToTop: false,
         showsHorizontalScrollIndicator: false,
@@ -466,6 +480,105 @@ export function TabBar({
     })]
   });
 }
+function TabBarItemWrapper({
+  route,
+  index,
+  option,
+  position,
+  navigationState,
+  variant,
+  activeColor,
+  inactiveColor,
+  pressColor,
+  pressOpacity,
+  android_ripple,
+  tabStyle,
+  defaultTabWidth,
+  isWidthSet,
+  gap,
+  onMeasureTabWidth,
+  onMeasureLabelWidth,
+  onTabPress,
+  onTabLongPress,
+  jumpTo,
+  renderTabBarItem
+}) {
+  const {
+    testID = getTestIdDefault({
+      route
+    }),
+    labelText = getLabelTextDefault({
+      route
+    }),
+    accessible = getAccessibleDefault({
+      route
+    }),
+    accessibilityLabel = getAccessibilityLabelDefault({
+      route
+    }),
+    ...rest
+  } = option ?? {};
+  const onMeasureLayout = React.useCallback(({
+    width
+  }) => onMeasureTabWidth(route.key, width), [route.key, onMeasureTabWidth]);
+  const onMeasureLabelLayout = React.useCallback(({
+    width
+  }) => onMeasureLabelWidth(route.key, width), [route.key, onMeasureLabelWidth]);
+  const onPress = React.useCallback(() => {
+    const event = {
+      route,
+      defaultPrevented: false,
+      preventDefault: () => {
+        event.defaultPrevented = true;
+      }
+    };
+    onTabPress?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    jumpTo(route.key);
+  }, [route, onTabPress, jumpTo]);
+  const onLongPress = React.useCallback(() => onTabLongPress?.({
+    route
+  }), [route, onTabLongPress]);
+  const style = React.useMemo(() => [tabStyle, isWidthSet ? null : defaultTabWidth !== undefined ? {
+    width: defaultTabWidth
+  } : {
+    minWidth: TAB_MIN_WIDTH
+  }], [tabStyle, isWidthSet, defaultTabWidth]);
+  const props = {
+    ...rest,
+    position,
+    route,
+    navigationState,
+    testID,
+    labelText,
+    accessible,
+    accessibilityLabel,
+    variant,
+    activeColor,
+    inactiveColor,
+    pressColor,
+    pressOpacity,
+    onMeasureLayout,
+    onMeasureLabelLayout,
+    onPress,
+    onLongPress,
+    style,
+    android_ripple
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [gap > 0 && index > 0 ? /*#__PURE__*/_jsx(Separator, {
+      width: gap
+    }) : null, renderTabBarItem ? renderTabBarItem({
+      key: route.key,
+      ...props
+    }) : /*#__PURE__*/_jsx(TabBarItem, {
+      ...props
+    }, route.key)]
+  });
+}
+const MemoizedTabBarItemWrapper = /*#__PURE__*/React.memo(TabBarItemWrapper);
 const styles = StyleSheet.create({
   scroll: {
     overflow: Platform.select({
@@ -475,22 +588,9 @@ const styles = StyleSheet.create({
   },
   tabBar: {
     zIndex: 1,
-    backgroundColor: '#fff',
-    elevation: 4,
-    ...Platform.select({
-      default: {
-        shadowColor: 'black',
-        shadowOpacity: 0.1,
-        shadowRadius: StyleSheet.hairlineWidth,
-        shadowOffset: {
-          height: StyleSheet.hairlineWidth,
-          width: 0
-        }
-      },
-      web: {
-        boxShadow: '0 1px 1px rgba(0, 0, 0, 0.1)'
-      }
-    })
+    backgroundColor: TAB_BAR_BACKGROUND_COLOR,
+    borderBottomColor: TAB_BAR_BORDER_COLOR,
+    borderBottomWidth: 1
   },
   tabContent: {
     flexGrow: 1,
@@ -504,6 +604,16 @@ const styles = StyleSheet.create({
     end: 0,
     bottom: 0,
     pointerEvents: 'none'
+  },
+  primaryIndicator: {
+    height: 3,
+    borderTopLeftRadius: 3,
+    borderTopRightRadius: 3
+  },
+  secondaryIndicator: {
+    height: 2,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0
   }
 });
 //# sourceMappingURL=TabBar.js.map