@zoverdoser/react-native-tab-view 1.0.2 → 1.3.2

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

@@ -9,9 +9,11 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
 import {
   interpolateColor,
   useAnimatedStyle,
+  useDerivedValue,
   useSharedValue,
 } from 'react-native-reanimated';
 import useLatestCallback from 'use-latest-callback';
@@ -27,6 +29,7 @@ import type {
 
 export type Props<T extends Route> = TabDescriptor<T> & {
   position: Animated.AnimatedInterpolation<number>;
+  animatedPosition?: SharedValue<number>;
   route: T;
   navigationState: NavigationState<T>;
   pressColor?: string;
@@ -55,7 +58,6 @@ type TabBarItemInternalProps<T extends Route> = Omit<
 > & {
   isFocused: boolean;
   index: number;
-  routesLength: number;
 } & TabDescriptor<T>;
 
 const ANDROID_RIPPLE_DEFAULT = { borderless: true };
@@ -69,6 +71,7 @@ const TabBarItemInternal = <T extends Route>({
   onPress,
   isFocused,
   position,
+  animatedPosition,
   style,
   labelStyle,
   onLayout,
@@ -80,18 +83,14 @@ const TabBarItemInternal = <T extends Route>({
   badge: customBadge,
   href,
   labelText,
-  routesLength,
   android_ripple = ANDROID_RIPPLE_DEFAULT,
   labelAllowFontScaling,
   route,
   animatedStyles,
 }: TabBarItemInternalProps<T>) => {
   const inputRange = React.useMemo(
-    () =>
-      routesLength >= 2
-        ? Array.from({ length: routesLength }, (_, i) => i)
-        : [0, 1],
-    [routesLength]
+    () => [tabIndex - 1, tabIndex, tabIndex + 1],
+    [tabIndex]
   );
   const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;
 
@@ -106,70 +105,132 @@ const TabBarItemInternal = <T extends Route>({
       ? labelColorFromStyle
       : DEFAULT_INACTIVE_COLOR;
 
-  const ReAnimatedProgress = useSharedValue(isFocused ? 1 : 0);
+  const fallbackProgress = useSharedValue(isFocused ? 1 : 0);
 
   React.useEffect(() => {
+    if (animatedPosition != null) {
+      return;
+    }
+
     const listenerId = position.addListener(({ value }) => {
       const progress =
         Math.abs(tabIndex - value) > 1 ? 0 : 1 - Math.abs(tabIndex - value);
-      ReAnimatedProgress.value = progress;
+      fallbackProgress.value = progress;
     });
+
     return () => {
       position.removeListener(listenerId);
     };
-  }, [position, ReAnimatedProgress, tabIndex, route.key]);
-
-  const ReAnimatedStyleRef = React.useRef(
-    useAnimatedStyle(() => {
-      const color = interpolateColor(
-        ReAnimatedProgress.value,
-        [0, 1],
-        [inactiveColor, activeColor]
-      );
-      return { color };
-    }, [ReAnimatedProgress, activeColor, inactiveColor])
+  }, [animatedPosition, fallbackProgress, position, tabIndex]);
+
+  const reanimatedProgress = useDerivedValue(() => {
+    if (animatedPosition != null) {
+      return Math.max(0, 1 - Math.abs(tabIndex - animatedPosition.value));
+    }
+
+    return fallbackProgress.value;
+  }, [animatedPosition, fallbackProgress, tabIndex]);
+
+  const reanimatedStyle = useAnimatedStyle(() => {
+    const color = interpolateColor(
+      reanimatedProgress.value,
+      [0, 1],
+      [inactiveColor, activeColor]
+    );
+    return { color };
+  }, [reanimatedProgress, activeColor, inactiveColor]);
+
+  const inactiveItemOpacity = animatedStyles?.opacity?.[0];
+  const activeItemOpacity = animatedStyles?.opacity?.[1];
+  const inactiveScale = animatedStyles?.scale?.[0];
+  const activeScale = animatedStyles?.scale?.[1];
+
+  const itemOpacity = React.useMemo(
+    () =>
+      inactiveItemOpacity !== undefined && activeItemOpacity !== undefined
+        ? position.interpolate({
+            inputRange,
+            outputRange: [
+              inactiveItemOpacity,
+              activeItemOpacity,
+              inactiveItemOpacity,
+            ],
+            extrapolate: 'clamp',
+          })
+        : 1,
+    [activeItemOpacity, inactiveItemOpacity, inputRange, position]
   );
 
-  const opacity = animatedStyles?.opacity
-    ? position.interpolate({
+  const activeOpacity = React.useMemo(
+    () =>
+      position.interpolate({
         inputRange,
-        outputRange: inputRange.map((i) =>
-          i === tabIndex
-            ? animatedStyles.opacity![1]
-            : animatedStyles.opacity![0]
-        ),
+        outputRange: [0, 1, 0],
         extrapolate: 'clamp',
-      })
-    : 1;
-
-  const scale = animatedStyles?.scale
-    ? position.interpolate({
+      }),
+    [inputRange, position]
+  );
+  const inactiveOpacity = React.useMemo(
+    () =>
+      position.interpolate({
         inputRange,
-        outputRange: inputRange.map((i) =>
-          i === tabIndex ? animatedStyles.scale![1] : animatedStyles.scale![0]
-        ),
+        outputRange: [1, 0, 1],
         extrapolate: 'clamp',
-      })
-    : 1;
+      }),
+    [inputRange, position]
+  );
+
+  const scale = React.useMemo(
+    () =>
+      inactiveScale !== undefined && activeScale !== undefined
+        ? position.interpolate({
+            inputRange,
+            outputRange: [inactiveScale, activeScale, inactiveScale],
+            extrapolate: 'clamp',
+          })
+        : 1,
+    [activeScale, inactiveScale, inputRange, position]
+  );
 
   const icon = React.useMemo(() => {
     if (!customIcon) {
       return null;
     }
 
-    const iconEle = customIcon({
-      focused: isFocused,
-      color: ReAnimatedStyleRef.current.color,
+    const inactiveIcon = customIcon({
+      focused: false,
+      color: inactiveColor,
+      size: ICON_SIZE,
+      route,
+    });
+
+    const activeIcon = customIcon({
+      focused: true,
+      color: activeColor,
       size: ICON_SIZE,
       route,
     });
 
     return (
       <View style={styles.icon}>
-        <Animated.View style={{ opacity }}>{iconEle}</Animated.View>
+        <Animated.View style={{ opacity: inactiveOpacity }}>
+          {inactiveIcon}
+        </Animated.View>
+        <Animated.View
+          style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}
+        >
+          {activeIcon}
+        </Animated.View>
       </View>
     );
-  }, [customIcon, route, isFocused, ReAnimatedStyleRef, opacity]);
+  }, [
+    activeColor,
+    activeOpacity,
+    customIcon,
+    inactiveColor,
+    inactiveOpacity,
+    route,
+  ]);
 
   const renderLabel = React.useCallback(
     () =>
@@ -177,7 +238,7 @@ const TabBarItemInternal = <T extends Route>({
         customlabel({
           focused: isFocused,
           style: labelStyle,
-          animatedStyles: ReAnimatedStyleRef.current,
+          animatedStyles: reanimatedStyle,
           labelText,
           allowFontScaling: labelAllowFontScaling,
           route,
@@ -187,7 +248,7 @@ const TabBarItemInternal = <T extends Route>({
           icon={icon}
           label={labelText}
           style={labelStyle}
-          animatedStyles={ReAnimatedStyleRef.current}
+          animatedStyles={reanimatedStyle}
           labelAllowFontScaling={labelAllowFontScaling}
         />
       ),
@@ -199,7 +260,7 @@ const TabBarItemInternal = <T extends Route>({
       route,
       icon,
       isFocused,
-      ReAnimatedStyleRef,
+      reanimatedStyle,
     ]
   );
 
@@ -232,7 +293,11 @@ const TabBarItemInternal = <T extends Route>({
     >
       <Animated.View
         pointerEvents="none"
-        style={[styles.item, tabStyle, { opacity, transform: [{ scale }] }]}
+        style={[
+          styles.item,
+          tabStyle,
+          { opacity: itemOpacity, transform: [{ scale }] },
+        ]}
       >
         {icon}
         <View>{renderLabel()}</View>
@@ -267,7 +332,6 @@ export function TabBarItem<T extends Route>(props: Props<T>) {
       isFocused={navigationState.index === tabIndex}
       route={route}
       index={tabIndex}
-      routesLength={navigationState.routes.length}
     />
   );
 }

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/TabView.tsx

@@ -132,11 +132,12 @@ export function TabView<T extends Route>({
         style={pagerStyle}
         layoutDirection={direction}
       >
-        {({ position, render, addEnterListener, jumpTo }) => {
+        {({ position, animatedPosition, render, addEnterListener, jumpTo }) => {
           // All the props here must not change between re-renders
           // This is crucial to optimizing the routes with PureComponent
           const sceneRendererProps = {
             position,
+            animatedPosition,
             layout,
             jumpTo,
           };

package/src/types.tsx

@@ -1,6 +1,6 @@
 import type { Animated, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { PagerViewProps } from 'react-native-pager-view';
-import type { AnimatedStyle } from 'react-native-reanimated';
+import type { AnimatedStyle, SharedValue } from 'react-native-reanimated';
 
 export type TabDescriptor<T extends Route> = {
   accessibilityLabel?: string;
@@ -63,6 +63,7 @@ export type Listener = (value: number) => void;
 export type SceneRendererProps = {
   layout: Layout;
   position: Animated.AnimatedInterpolation<number>;
+  animatedPosition?: SharedValue<number>;
   jumpTo: (key: string) => void;
 };
 

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;
 }