@zoverdoser/react-native-tab-view 1.0.1 → 1.3.1

package/src/TabBarIndicator.tsx

@@ -30,35 +30,94 @@ export type Props<T extends Route> = SceneRendererProps & {
 
 const useNativeDriver = Platform.OS !== 'web';
 
+const calculateSize = (
+  value: ViewStyle['width'] | undefined,
+  referenceWidth: number
+): number | undefined => {
+  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 getIndicatorWidthWithMargins = (
+  width: number,
+  style: ViewStyle | undefined,
+  direction: LocaleDirection
+) => {
+  const marginHorizontal = style?.marginHorizontal ?? style?.margin;
+
+  const leftMargin =
+    (direction === 'ltr' ? style?.marginStart : style?.marginEnd) ??
+    style?.marginLeft ??
+    marginHorizontal;
+
+  const rightMargin =
+    (direction === 'rtl' ? style?.marginStart : style?.marginEnd) ??
+    style?.marginRight ??
+    marginHorizontal;
+
+  return Math.max(
+    0,
+    width -
+      (calculateSize(leftMargin, width) ?? 0) -
+      (calculateSize(rightMargin, width) ?? 0)
+  );
+};
+
+const getIndicatorWidth = (
+  tabWidth: number,
+  width: number | `${number}%`,
+  style: ViewStyle | undefined,
+  direction: LocaleDirection
+): number | `${number}%` => {
+  const customWidth = calculateSize(style?.width, tabWidth);
+
+  if (customWidth !== undefined) {
+    return customWidth;
+  }
+
+  if (typeof width === 'number') {
+    return getIndicatorWidthWithMargins(width, style, direction);
+  }
+
+  return width;
+};
+
 const getTranslateX = (
   position: Animated.AnimatedInterpolation<number>,
   routes: Route[],
   getTabWidth: GetTabWidth,
   direction: LocaleDirection,
   gap?: number,
-  width?: number | string
+  getWidth?: (index: number) => number | undefined
 ) => {
   const inputRange = routes.map((_, i) => i);
+  const outputRange = routes.map((_, i) => {
+    let sumTabWidth = 0;
 
-  // every index contains widths at all previous indices
-  const outputRange = routes.reduce<number[]>((acc, _, i) => {
-    if (typeof width === 'number') {
-      if (i === 0) return [getTabWidth(i) / 2 - width / 2];
+    for (let j = 0; j < i; j++) {
+      sumTabWidth += getTabWidth(j);
+    }
 
-      let sumTabWidth = 0;
-      for (let j = 0; j < i; j++) {
-        sumTabWidth += getTabWidth(j);
-      }
+    const indicatorWidth = getWidth?.(i);
+    const tabOffset = sumTabWidth + (gap ? gap * i : 0);
 
-      return [
-        ...acc,
-        sumTabWidth + getTabWidth(i) / 2 + (gap ? gap * i : 0) - width / 2,
-      ];
-    } else {
-      if (i === 0) return [0];
-      return [...acc, acc[i - 1] + getTabWidth(i - 1) + (gap ?? 0)];
+    if (indicatorWidth === undefined) {
+      return tabOffset;
     }
-  }, []);
+
+    return tabOffset + getTabWidth(i) / 2 - indicatorWidth / 2;
+  });
 
   const translateX = position.interpolate({
     inputRange,
@@ -83,31 +142,60 @@ export function TabBarIndicator<T extends Route>({
   const isIndicatorShown = React.useRef(false);
   const isWidthDynamic = width === 'auto';
 
+  const flattenedStyle = StyleSheet.flatten(style);
+
+  const hasCustomIndicatorWidth =
+    typeof flattenedStyle?.width === 'number' ||
+    (typeof flattenedStyle?.width === 'string' &&
+      flattenedStyle?.width.endsWith('%'));
+
+  const constantIndicatorWidth =
+    typeof flattenedStyle?.width === 'number'
+      ? flattenedStyle.width
+      : undefined;
+
+  const isCentered =
+    hasCustomIndicatorWidth &&
+    (flattenedStyle?.margin === 'auto' ||
+      flattenedStyle?.marginHorizontal === 'auto');
+
+  // If indicator has a custom width, we need to adjust calculations to account for it
+  // It should be centered relative to the tab if the margin is set to auto
+  const getCenteredIndicatorWidth = (tabWidth: number) => {
+    if (isCentered) {
+      return calculateSize(flattenedStyle?.width, tabWidth);
+    }
+
+    if (typeof width === 'number') {
+      return width;
+    }
+
+    return undefined;
+  };
+
   const opacity = useAnimatedValue(isWidthDynamic ? 0 : 1);
 
+  // We should fade-in the indicator when we have widths for all the tab items
   const indicatorVisible = isWidthDynamic
     ? layout.width &&
       navigationState.routes
-        .slice(0, navigationState.index)
+        .slice(0, navigationState.index + 1)
         .every((_, r) => getTabWidth(r))
     : true;
 
   React.useEffect(() => {
     const fadeInIndicator = () => {
-      if (
-        !isIndicatorShown.current &&
-        isWidthDynamic &&
-        // We should fade-in the indicator when we have widths for all the tab items
-        indicatorVisible
-      ) {
-        isIndicatorShown.current = true;
-
+      if (!isIndicatorShown.current && isWidthDynamic && indicatorVisible) {
         Animated.timing(opacity, {
           toValue: 1,
           duration: 150,
           easing: Easing.in(Easing.linear),
           useNativeDriver,
-        }).start();
+        }).start(({ finished }) => {
+          if (finished) {
+            isIndicatorShown.current = true;
+          }
+        });
       }
     };
 
@@ -120,18 +208,25 @@ export function TabBarIndicator<T extends Route>({
 
   const transform = [];
 
-  if (layout.width) {
-    const translateX =
-      routes.length > 1
-        ? getTranslateX(position, routes, getTabWidth, direction, gap, width)
-        : 0;
+  const translateX =
+    layout.width && routes.length > 1
+      ? getTranslateX(position, routes, getTabWidth, direction, gap, (index) =>
+          getCenteredIndicatorWidth(getTabWidth(index))
+        )
+      : 0;
 
-    transform.push({ translateX });
-  }
+  transform.push({ translateX });
 
-  if (width === 'auto') {
+  if (width === 'auto' && constantIndicatorWidth == null) {
     const inputRange = routes.map((_, i) => i);
-    const outputRange = inputRange.map(getTabWidth);
+    const outputRange = inputRange.map((i) => {
+      const tabW = getTabWidth(i);
+
+      return (
+        calculateSize(flattenedStyle?.width, tabW) ??
+        getIndicatorWidthWithMargins(tabW, flattenedStyle, direction)
+      );
+    });
 
     transform.push(
       {
@@ -150,27 +245,73 @@ export function TabBarIndicator<T extends Route>({
 
   const styleList: StyleProp<ViewStyle> = [];
 
-  // scaleX doesn't work properly on chrome and opera for linux and android
-  if (Platform.OS === 'web' && width === 'auto') {
+  // transform doesn't work properly on chrome and opera for linux and android
+  // so we need to use width and left/right instead of scaleX and translateX
+  // https://github.com/react-navigation/react-navigation/pull/11440
+  if (
+    Platform.OS === 'web' &&
+    width === 'auto' &&
+    constantIndicatorWidth == null
+  ) {
+    const start = flattenedStyle?.start;
+    const translate =
+      direction === 'rtl' ? Animated.multiply(translateX, -1) : translateX;
+    const offset =
+      typeof start === 'number' ? Animated.add(translate, start) : translate;
+
     styleList.push(
       { width: transform[1].scaleX },
-      { left: transform[0].translateX }
+      direction === 'rtl' ? { right: offset } : { left: offset }
     );
   } else {
     styleList.push(
-      { width: width === 'auto' ? 1 : width },
+      {
+        width:
+          width === 'auto'
+            ? // if the indicator has a constant width, use it as is
+              // we don't need to scale it to match tab width
+              (constantIndicatorWidth ?? 1)
+            : getIndicatorWidth(
+                getTabWidth(navigationState.index),
+                width,
+                flattenedStyle,
+                direction
+              ),
+      },
       { start: `${(100 / routes.length) * navigationState.index}%` },
       { transform }
     );
   }
 
+  let finalStyle;
+
+  if (hasCustomIndicatorWidth && style != null) {
+    const rest = { ...flattenedStyle };
+
+    delete rest.width;
+
+    if (isCentered) {
+      if (rest.margin === 'auto') {
+        delete rest.margin;
+      }
+
+      if (rest.marginHorizontal === 'auto') {
+        delete rest.marginHorizontal;
+      }
+    }
+
+    finalStyle = rest;
+  } else {
+    finalStyle = style;
+  }
+
   return (
     <Animated.View
       style={[
         styles.indicator,
         styleList,
         width === 'auto' ? { opacity: opacity } : null,
-        style,
+        finalStyle,
       ]}
     >
       {children}

package/src/TabBarItem.tsx

@@ -169,7 +169,7 @@ const TabBarItemInternal = <T extends Route>({
         <Animated.View style={{ opacity }}>{iconEle}</Animated.View>
       </View>
     );
-  }, [customIcon, route, isFocused, ReAnimatedStyleRef, opacity]);
+  }, [route, customIcon, isFocused, ReAnimatedStyleRef, opacity]);
 
   const renderLabel = React.useCallback(
     () =>

package/src/TabBarItemLabel.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { StyleProp, TextStyle } from 'react-native';
 import { StyleSheet } from 'react-native';
 import Animated, { type AnimatedStyle } from 'react-native-reanimated';
+
 interface TabBarItemLabelProps {
   label?: string;
   style: StyleProp<TextStyle>;

package/src/useAnimatedValue.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Animated } from 'react-native';
 
-export function useAnimatedValue(initialValue: number) {
+export function useAnimatedValue(initialValue: number): Animated.Value {
   const lazyRef = React.useRef<Animated.Value>(undefined);
 
   if (lazyRef.current === undefined) {
     lazyRef.current = new Animated.Value(initialValue);
   }
 
-  return lazyRef.current as Animated.Value;
+  return lazyRef.current;
 }