react-native-tab-view 5.0.0-alpha.1 → 5.0.0-alpha.11

package/src/TabBarIndicator.tsx

@@ -8,179 +8,444 @@ import {
   type ViewStyle,
 } from 'react-native';
 
+import { TAB_BAR_PRIMARY_ACTIVE_COLOR } from './constants';
 import type {
   LocaleDirection,
   NavigationState,
   Route,
   SceneRendererProps,
 } from './types';
-import { useAnimatedValue } from './useAnimatedValue';
 
-export type GetTabWidth = (index: number) => number;
+const CAP_FILL_OVERLAP = 1;
+const EASING_SAMPLE_COUNT = 16;
+
+const samplePoints = (easing: (t: number) => number) =>
+  Array.from({ length: EASING_SAMPLE_COUNT + 1 }, (_, i) =>
+    easing(i / EASING_SAMPLE_COUNT)
+  );
+
+const TRAILING_EDGE_SAMPLES = samplePoints(Easing.bezier(0.3, 0, 0.8, 0.15));
+const LEADING_EDGE_SAMPLES = samplePoints(Easing.bezier(0.05, 0.7, 0.1, 1));
 
 export type Props<T extends Route> = SceneRendererProps & {
+  variant?: 'primary' | 'secondary' | undefined;
   navigationState: NavigationState<T>;
-  width: 'auto' | `${number}%` | number;
-  getTabWidth: GetTabWidth;
+  widths: number[];
+  offsets: number[];
   direction: LocaleDirection;
   style?: StyleProp<ViewStyle>;
-  gap?: number;
-  children?: React.ReactNode;
-};
-
-const useNativeDriver = Platform.OS !== 'web';
-
-const getTranslateX = (
-  position: Animated.AnimatedInterpolation<number>,
-  routes: Route[],
-  getTabWidth: GetTabWidth,
-  direction: LocaleDirection,
-  gap?: number,
-  width?: number | string
-) => {
-  const inputRange = routes.map((_, i) => i);
-
-  // 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];
-
-      let sumTabWidth = 0;
-      for (let j = 0; j < i; j++) {
-        sumTabWidth += getTabWidth(j);
-      }
-
-      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)];
-    }
-  }, []);
-
-  const translateX = position.interpolate({
-    inputRange,
-    outputRange,
-    extrapolate: 'clamp',
-  });
-
-  return Animated.multiply(translateX, direction === 'rtl' ? -1 : 1);
 };
 
 export function TabBarIndicator<T extends Route>({
-  getTabWidth,
+  variant = 'primary',
+  widths,
+  offsets,
   navigationState,
   position,
-  width,
   direction,
-  gap,
   style,
-  children,
 }: Props<T>) {
-  const isIndicatorShown = React.useRef(false);
-  const isWidthDynamic = width === 'auto';
+  const isRTL = direction === 'rtl';
 
-  const opacity = useAnimatedValue(isWidthDynamic ? 0 : 1);
+  const flattenedStyle: ViewStyle =
+    StyleSheet.flatten([styles.defaults, style]) || {};
 
-  const indicatorVisible = isWidthDynamic
-    ? navigationState.routes
-        .slice(0, navigationState.index)
-        .every((_, r) => getTabWidth(r))
-    : true;
+  const {
+    backgroundColor,
+    borderRadius,
+    borderBottomEndRadius = borderRadius,
+    borderBottomLeftRadius = borderRadius,
+    borderBottomRightRadius = borderRadius,
+    borderBottomStartRadius = borderRadius,
+    borderTopEndRadius = borderRadius,
+    borderTopLeftRadius = borderRadius,
+    borderTopRightRadius = borderRadius,
+    borderTopStartRadius = borderRadius,
+    height,
+    start: indicatorStart,
+    end: indicatorEnd,
+    left: indicatorLeft,
+    right: indicatorRight,
+    ...restStyle
+  } = flattenedStyle;
 
-  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;
-
-        Animated.timing(opacity, {
-          toValue: 1,
-          duration: 150,
-          easing: Easing.in(Easing.linear),
-          useNativeDriver,
-        }).start();
-      }
-    };
+  delete restStyle.width;
+  delete restStyle.margin;
+  delete restStyle.marginHorizontal;
+  delete restStyle.marginStart;
+  delete restStyle.marginEnd;
+  delete restStyle.marginLeft;
+  delete restStyle.marginRight;
+
+  const containerStart =
+    indicatorStart ?? (isRTL ? indicatorRight : indicatorLeft);
+  const containerEnd = indicatorEnd ?? (isRTL ? indicatorLeft : indicatorRight);
 
-    fadeInIndicator();
+  if (
+    (borderBottomEndRadius != null &&
+      typeof borderBottomEndRadius !== 'number') ||
+    (borderBottomStartRadius != null &&
+      typeof borderBottomStartRadius !== 'number') ||
+    (borderBottomLeftRadius != null &&
+      typeof borderBottomLeftRadius !== 'number') ||
+    (borderBottomRightRadius != null &&
+      typeof borderBottomRightRadius !== 'number') ||
+    (borderTopEndRadius != null && typeof borderTopEndRadius !== 'number') ||
+    (borderTopStartRadius != null &&
+      typeof borderTopStartRadius !== 'number') ||
+    (borderTopLeftRadius != null && typeof borderTopLeftRadius !== 'number') ||
+    (borderTopRightRadius != null && typeof borderTopRightRadius !== 'number')
+  ) {
+    throw new Error(
+      'Only numeric border radii are supported in TabBarIndicator.'
+    );
+  }
 
-    return () => opacity.stopAnimation();
-  }, [indicatorVisible, isWidthDynamic, opacity]);
+  const leftRadiusWidth = Math.max(
+    (isRTL ? borderTopEndRadius : borderTopStartRadius) ?? 0,
+    (isRTL ? borderBottomEndRadius : borderBottomStartRadius) ?? 0,
+    borderTopLeftRadius ?? 0,
+    borderBottomLeftRadius ?? 0
+  );
+
+  const rightRadiusWidth = Math.max(
+    (isRTL ? borderTopStartRadius : borderTopEndRadius) ?? 0,
+    (isRTL ? borderBottomStartRadius : borderBottomEndRadius) ?? 0,
+    borderTopRightRadius ?? 0,
+    borderBottomRightRadius ?? 0
+  );
+
+  const leftPieceWidth = leftRadiusWidth + CAP_FILL_OVERLAP;
+  const rightPieceWidth = rightRadiusWidth + CAP_FILL_OVERLAP;
 
   const { routes } = navigationState;
 
-  const transform = [];
-
-  const translateX =
-    routes.length > 1
-      ? getTranslateX(position, routes, getTabWidth, direction, gap, width)
-      : 0;
-
-  transform.push({ translateX });
-
-  if (width === 'auto') {
-    const inputRange = routes.map((_, i) => i);
-    const outputRange = inputRange.map(getTabWidth);
-
-    transform.push(
-      {
-        scaleX:
-          routes.length > 1
-            ? position.interpolate({
-                inputRange,
-                outputRange,
-                extrapolate: 'clamp',
-              })
-            : outputRange[0],
-      },
-      { translateX: direction === 'rtl' ? -0.5 : 0.5 }
-    );
+  const easedInterpolate = (values: number[], samples: number[] | null) => {
+    if (routes.length <= 1) {
+      return values[0] ?? 0;
+    }
+
+    // On multi-tab jumps, slide directly from source to destination and
+    // Settle one tab before the pager finishes scrolling
+    // This makes the animation feel snappier
+    // Especially on Android where the pager animation is slow
+    if (jumpRange) {
+      const fromValue = values[jumpRange.from];
+      const toValue = values[jumpRange.to];
+
+      if (fromValue == null) {
+        throw new Error(`Couldn't find a value at index ${jumpRange.from}.`);
+      }
+
+      if (toValue == null) {
+        throw new Error(`Couldn't find a value at index ${jumpRange.to}.`);
+      }
+
+      const inputRange =
+        jumpRange.from > jumpRange.to
+          ? [jumpRange.to, jumpRange.to + 1, jumpRange.from]
+          : [jumpRange.from, jumpRange.to - 1, jumpRange.to];
+
+      const outputRange = inputRange.map((i) =>
+        i === jumpRange.from ? fromValue : toValue
+      );
+
+      return position.interpolate({
+        inputRange,
+        outputRange,
+        extrapolate: 'clamp',
+      });
+    }
+
+    if (samples == null) {
+      return position.interpolate({
+        inputRange: values.map((_, i) => i),
+        outputRange: values,
+        extrapolate: 'clamp',
+      });
+    }
+
+    const inputRange: number[] = [];
+    const outputRange: number[] = [];
+
+    for (let i = 0; i < values.length - 1; i++) {
+      const start = values[i];
+      const end = values[i + 1];
+
+      if (start == null) {
+        throw new Error(`Couldn't find a value at index ${i}.`);
+      }
+
+      if (end == null) {
+        throw new Error(`Couldn't find a value at index ${i + 1}.`);
+      }
+
+      for (let j = 0; j < samples.length - 1; j++) {
+        const sample = samples[j];
+
+        if (sample == null) {
+          throw new Error(`Couldn't find an easing sample at index ${j}.`);
+        }
+
+        inputRange.push(i + j / EASING_SAMPLE_COUNT);
+        outputRange.push(start + (end - start) * sample);
+      }
+    }
+
+    const last = values[values.length - 1];
+
+    if (last == null) {
+      throw new Error(`Couldn't find a value at index ${values.length - 1}.`);
+    }
+
+    inputRange.push(values.length - 1);
+    outputRange.push(last);
+
+    return position.interpolate({
+      inputRange,
+      outputRange,
+      extrapolate: 'clamp',
+    });
+  };
+
+  let containerLayout: ViewStyle;
+  let leftFillStyle: ViewStyle;
+  let centerFillStyle: ViewStyle;
+  let rightCapStyle: ViewStyle;
+  let rightFillStyle: ViewStyle;
+
+  const rightEdges = widths.map((w, i) => {
+    const offset = offsets[i];
+
+    if (offset == null) {
+      throw new Error(`Couldn't find an offset at index ${i}.`);
+    }
+
+    return offset + w;
+  });
+
+  const [lastIndex, setLastIndex] = React.useState(navigationState.index);
+  const [jumpRange, setJumpRange] = React.useState<{
+    from: number;
+    to: number;
+  } | null>(null);
+
+  if (navigationState.index !== lastIndex) {
+    setLastIndex(navigationState.index);
+
+    if (Math.abs(navigationState.index - lastIndex) > 1) {
+      setJumpRange({ from: lastIndex, to: navigationState.index });
+    }
   }
 
-  const styleList: StyleProp<ViewStyle> = [];
+  React.useEffect(() => {
+    if (jumpRange == null) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setJumpRange(null);
+    }, 500);
 
-  // scaleX doesn't work properly on chrome and opera for linux and android
-  if (Platform.OS === 'web' && width === 'auto') {
-    styleList.push(
-      { width: transform[1].scaleX },
-      { left: transform[0].translateX }
-    );
+    return () => clearTimeout(timer);
+  }, [jumpRange]);
+
+  // Primary tabs use stretch animation
+  // Secondary tabs and multi-tab jumps slide linearly
+  const shouldStretch = variant === 'primary' && jumpRange == null;
+
+  const trailingSamples = shouldStretch ? TRAILING_EDGE_SAMPLES : null;
+  const leadingSamples = shouldStretch ? LEADING_EDGE_SAMPLES : null;
+
+  const offset = easedInterpolate(offsets, trailingSamples);
+  const rightEdge = easedInterpolate(rightEdges, leadingSamples);
+
+  const containerWidth = Animated.subtract(rightEdge, offset);
+  const sideFillWidth = Animated.divide(
+    Animated.subtract(containerWidth, leftPieceWidth + rightPieceWidth),
+    2
+  );
+  const sideFillScale = Animated.add(sideFillWidth, CAP_FILL_OVERLAP);
+
+  if (Platform.OS === 'web') {
+    const centerFillStart = Animated.add(sideFillWidth, leftPieceWidth);
+
+    const positioned =
+      typeof containerStart === 'number'
+        ? Animated.add(offset, containerStart)
+        : offset;
+
+    // Web can't reliably scale via transforms
+    // So the fills use animated `width` instead of `scaleX`
+    // See https://github.com/react-navigation/react-navigation/pull/11440
+    containerLayout = {
+      width: containerWidth,
+      ...(direction === 'rtl' ? { right: positioned } : { left: positioned }),
+    };
+
+    leftFillStyle = {
+      position: 'absolute',
+      start: leftRadiusWidth,
+      width: sideFillScale,
+    };
+
+    centerFillStyle = {
+      position: 'absolute',
+      start: centerFillStart,
+      width: sideFillWidth,
+    };
+
+    rightCapStyle = {
+      position: 'absolute',
+      end: 0,
+    };
+
+    rightFillStyle = {
+      position: 'absolute',
+      end: rightRadiusWidth,
+      width: sideFillScale,
+    };
   } else {
-    styleList.push(
-      { width: width === 'auto' ? 1 : width },
-      { start: `${(100 / routes.length) * navigationState.index}%` },
-      { transform }
+    const directionSign = direction === 'rtl' ? -1 : 1;
+    const translateX = Animated.multiply(offset, directionSign);
+
+    const centerFillTranslateX = Animated.multiply(
+      Animated.divide(sideFillWidth, 2),
+      directionSign
     );
+
+    const rightCapTranslateX = Animated.multiply(
+      Animated.subtract(containerWidth, rightPieceWidth),
+      directionSign
+    );
+
+    containerLayout = {
+      start: containerStart ?? 0,
+      end: containerEnd ?? 0,
+      transform: [{ translateX }],
+    };
+
+    leftFillStyle = {
+      position: 'absolute',
+      start: leftRadiusWidth,
+      width: 1,
+      transformOrigin: isRTL ? 'right center' : 'left center',
+      transform: [{ scaleX: sideFillScale }],
+    };
+
+    centerFillStyle = {
+      position: 'absolute',
+      start: leftPieceWidth,
+      width: 1,
+      transformOrigin: isRTL ? 'right center' : 'left center',
+      transform: [
+        {
+          translateX: centerFillTranslateX,
+        },
+        { scaleX: sideFillWidth },
+      ],
+    };
+
+    rightCapStyle = {
+      position: 'absolute',
+      start: 0,
+      transform: [{ translateX: rightCapTranslateX }],
+    };
+
+    rightFillStyle = {
+      position: 'absolute',
+      end: rightRadiusWidth,
+      width: 1,
+      transformOrigin: isRTL ? 'left center' : 'right center',
+      transform: [{ scaleX: sideFillScale }],
+    };
   }
 
+  // The tab widths may be measured asynchronously
+  // So we show the indicator when we have widths till focused tab
+  const indicatorVisible = widths
+    .slice(0, navigationState.index + 1)
+    .every((w, i) => {
+      const offset = offsets[i];
+
+      return w > 0 && offset != null && offset >= 0;
+    });
+
+  /**
+   * We render the indicator in multiple pieces
+   * So we can preserve border radii when the indicator is scaled with transform
+   * We use 3 pieces for the inner fill as the math isn't correct on Android
+   * So using 1 or 2 pieces result in misalignment or gaps.
+   * Using 3 pieces lets us cover most space from all directions.
+   *
+   * [left fixed cap [left scaled fill >>>]]
+   *                  [center scaled fill]
+   *                [[<<< right scaled fill] right fixed cap]
+   */
   return (
     <Animated.View
       style={[
         styles.indicator,
-        styleList,
-        width === 'auto' ? { opacity: opacity } : null,
-        style,
+        {
+          height,
+          opacity: indicatorVisible ? 1 : 0,
+        },
+        containerLayout,
+        restStyle,
       ]}
     >
-      {children}
+      <Animated.View
+        style={[
+          {
+            ...(isRTL
+              ? { borderTopEndRadius, borderBottomEndRadius }
+              : { borderTopStartRadius, borderBottomStartRadius }),
+            borderTopLeftRadius,
+            borderBottomLeftRadius,
+            height,
+            width: leftPieceWidth,
+            backgroundColor,
+          },
+          styles.cap,
+        ]}
+      >
+        <Animated.View style={[{ height, backgroundColor }, leftFillStyle]} />
+      </Animated.View>
+      <Animated.View style={[{ height, backgroundColor }, centerFillStyle]} />
+      <Animated.View
+        style={[
+          {
+            ...(isRTL
+              ? { borderTopStartRadius, borderBottomStartRadius }
+              : { borderTopEndRadius, borderBottomEndRadius }),
+            borderTopRightRadius,
+            borderBottomRightRadius,
+            height,
+            width: rightPieceWidth,
+            backgroundColor,
+          },
+          rightCapStyle,
+        ]}
+      >
+        <Animated.View style={[{ height, backgroundColor }, rightFillStyle]} />
+      </Animated.View>
     </Animated.View>
   );
 }
 
 const styles = StyleSheet.create({
   indicator: {
-    backgroundColor: 'rgb(0, 122, 255)',
+    flexDirection: 'row',
+    justifyContent: 'center',
     position: 'absolute',
-    start: 0,
     bottom: 0,
-    end: 0,
+  },
+  defaults: {
+    backgroundColor: TAB_BAR_PRIMARY_ACTIVE_COLOR,
     height: 2,
   },
+  cap: {
+    position: 'absolute',
+    start: 0,
+  },
 });