react-native-tab-view 5.0.0-alpha.2 → 5.0.0-alpha.4

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,
@@ -82,30 +141,59 @@ 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
     ? 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,14 +208,23 @@ export function TabBarIndicator<T extends Route>({
 
   const translateX =
     routes.length > 1
-      ? getTranslateX(position, routes, getTabWidth, direction, gap, width)
+      ? getTranslateX(position, routes, getTabWidth, direction, gap, (index) =>
+          getCenteredIndicatorWidth(getTabWidth(index))
+        )
       : 0;
 
   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(
       {
@@ -146,27 +243,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

@@ -20,16 +20,16 @@ export type Props<T extends Route> = TabDescriptor<T> & {
   position: Animated.AnimatedInterpolation<number>;
   route: T;
   navigationState: NavigationState<T>;
-  activeColor?: ColorValue;
-  inactiveColor?: ColorValue;
-  pressColor?: ColorValue;
-  pressOpacity?: number;
-  onLayout?: (event: LayoutChangeEvent) => void;
+  activeColor?: ColorValue | undefined;
+  inactiveColor?: ColorValue | undefined;
+  pressColor?: ColorValue | undefined;
+  pressOpacity?: number | undefined;
+  onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
   onPress: () => void;
   onLongPress: () => void;
-  defaultTabWidth?: number;
+  defaultTabWidth?: number | undefined;
   style: StyleProp<ViewStyle>;
-  android_ripple?: PressableAndroidRippleConfig;
+  android_ripple?: PressableAndroidRippleConfig | undefined;
 };
 
 const DEFAULT_ACTIVE_COLOR = 'rgba(0, 0, 0, 1)';

package/src/TabBarItemLabel.tsx

@@ -4,7 +4,7 @@ import { Animated, StyleSheet } from 'react-native';
 
 interface TabBarItemLabelProps {
   color: ColorValue;
-  label?: string;
+  label?: string | undefined;
   style: StyleProp<ViewStyle>;
   icon: React.ReactNode;
 }

package/src/TabView.tsx

@@ -39,7 +39,7 @@ export type Props<T extends Route> = AdapterCommonProps & {
    *
    * Unlike `onIndexChange`, this is called regardless of whether the index changed or not.
    */
-  onTabSelect?: (props: { index: number }) => void;
+  onTabSelect?: ((props: { index: number }) => void) | undefined;
   /**
    * State for the tab view containing the current index and routes.
    *
@@ -59,17 +59,21 @@ export type Props<T extends Route> = AdapterCommonProps & {
    * Callback which returns a custom placeholder element.
    * The placeholder is shown when a scene is not yet loaded when `lazy` is enabled.
    */
-  renderLazyPlaceholder?: (props: { route: T }) => React.ReactNode;
+  renderLazyPlaceholder?:
+    | ((props: { route: T }) => React.ReactNode)
+    | undefined;
   /**
    * Callback which returns a custom tab bar element to display.
    */
-  renderTabBar?: (
-    props: SceneRendererProps &
-      EventEmitterProps & {
-        navigationState: NavigationState<T>;
-        options: Record<string, TabDescriptor<T>> | undefined;
-      }
-  ) => React.ReactNode;
+  renderTabBar?:
+    | ((
+        props: SceneRendererProps &
+          EventEmitterProps & {
+            navigationState: NavigationState<T>;
+            options: Record<string, TabDescriptor<T>> | undefined;
+          }
+      ) => React.ReactNode)
+    | undefined;
   /**
    * Callback which returns a custom adapter to use for the tab view.
    * Adapters are responsible for handling gestures and animations between tabs.
@@ -81,12 +85,12 @@ export type Props<T extends Route> = AdapterCommonProps & {
    *
    * Defaults to `PagerViewAdapter` on Android and iOS, and `PanResponderAdapter` on other platforms.
    */
-  renderAdapter?: (props: AdapterProps) => React.ReactElement;
+  renderAdapter?: ((props: AdapterProps) => React.ReactElement) | undefined;
   /**
    * Position of the tab bar in the tab view.
    * Defaults to `'top'`.
    */
-  tabBarPosition?: 'top' | 'bottom';
+  tabBarPosition?: 'top' | 'bottom' | undefined;
   /**
    * Whether to lazily render the scenes.
    * When enabled, scenes are rendered only when they come into view.
@@ -94,27 +98,27 @@ export type Props<T extends Route> = AdapterCommonProps & {
    * Can be a boolean or a function that receives the route and returns a boolean.
    * Defaults to `false`.
    */
-  lazy?: ((props: { route: T }) => boolean) | boolean;
+  lazy?: ((props: { route: T }) => boolean) | boolean | undefined;
   /**
    * How many screens to preload when `lazy` is enabled.
    *
    * Defaults to `0`.
    */
-  lazyPreloadDistance?: number;
+  lazyPreloadDistance?: number | undefined;
   /**
    * The layout direction of the tab view.
    *
    * Defaults to the app's locale direction (RTL or LTR).
    */
-  direction?: LocaleDirection;
+  direction?: LocaleDirection | undefined;
   /**
    * Style to apply to the pager container.
    */
-  pagerStyle?: StyleProp<ViewStyle>;
+  pagerStyle?: StyleProp<ViewStyle> | undefined;
   /**
    * Style to apply to the tab view container.
    */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
   /**
    * Callback which returns a React element to render for each route.
    */
@@ -131,13 +135,13 @@ export type Props<T extends Route> = AdapterCommonProps & {
    *
    * These options are merged with `commonOptions`.
    */
-  options?: Record<string, TabDescriptor<T>>;
+  options?: Record<string, TabDescriptor<T>> | undefined;
   /**
    * Options that apply to all tabs.
    *
    * Individual tab options from `options` will override these.
    */
-  commonOptions?: TabDescriptor<T>;
+  commonOptions?: TabDescriptor<T> | undefined;
 };
 
 const renderLazyPlaceholderDefault = () => null;

package/src/types.tsx

@@ -8,40 +8,44 @@ import type {
 } from 'react-native';
 
 export type TabDescriptor<T extends Route> = {
-  accessibilityLabel?: string;
-  accessible?: boolean;
-  testID?: string;
-  labelText?: string;
-  labelAllowFontScaling?: boolean;
-  href?: string;
-  label?: (props: {
-    route: T;
-    labelText?: string;
-    focused: boolean;
-    color: ColorValue;
-    allowFontScaling?: boolean;
-    style?: StyleProp<TextStyle>;
-  }) => React.ReactNode;
-  labelStyle?: StyleProp<TextStyle>;
-  icon?: (props: {
-    route: T;
-    focused: boolean;
-    color: ColorValue;
-    size: number;
-  }) => React.ReactNode;
-  badge?: (props: { route: T }) => React.ReactElement;
-  sceneStyle?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string | undefined;
+  accessible?: boolean | undefined;
+  testID?: string | undefined;
+  labelText?: string | undefined;
+  labelAllowFontScaling?: boolean | undefined;
+  href?: string | undefined;
+  label?:
+    | ((props: {
+        route: T;
+        labelText?: string | undefined;
+        focused: boolean;
+        color: ColorValue;
+        allowFontScaling?: boolean | undefined;
+        style?: StyleProp<TextStyle> | undefined;
+      }) => React.ReactNode)
+    | undefined;
+  labelStyle?: StyleProp<TextStyle> | undefined;
+  icon?:
+    | ((props: {
+        route: T;
+        focused: boolean;
+        color: ColorValue;
+        size: number;
+      }) => React.ReactNode)
+    | undefined;
+  badge?: ((props: { route: T }) => React.ReactElement) | undefined;
+  sceneStyle?: StyleProp<ViewStyle> | undefined;
 };
 
 export type LocaleDirection = 'ltr' | 'rtl';
 
 export type Route = {
   key: string;
-  icon?: string;
-  title?: string;
-  accessible?: boolean;
-  accessibilityLabel?: string;
-  testID?: string;
+  icon?: string | undefined;
+  title?: string | undefined;
+  accessible?: boolean | undefined;
+  accessibilityLabel?: string | undefined;
+  testID?: string | undefined;
 };
 
 export type Event = {
@@ -81,33 +85,33 @@ export type AdapterCommonProps = {
    * - 'on-drag' - the keyboard is dismissed when a drag begins
    * - 'none' - drags and tab changes do not dismiss the keyboard
    */
-  keyboardDismissMode?: 'none' | 'on-drag' | 'auto';
+  keyboardDismissMode?: 'none' | 'on-drag' | 'auto' | undefined;
   /**
    * Whether swiping between tabs is enabled.
    */
-  swipeEnabled?: boolean;
+  swipeEnabled?: boolean | undefined;
   /**
    * Whether the tab switch animation is enabled.
    * If set to false, the tab switch will happen immediately without animation.
    */
-  animationEnabled?: boolean;
+  animationEnabled?: boolean | undefined;
   /**
    * Callback that is called when the swipe gesture starts.
    */
-  onSwipeStart?: () => void;
+  onSwipeStart?: (() => void) | undefined;
   /**
    * Callback that is called when the swipe gesture ends.
    */
-  onSwipeEnd?: () => void;
+  onSwipeEnd?: (() => void) | undefined;
   /**
    * Callback that is called when a tab is selected.
    * This is called regardless of whether the index has changed or not.
    */
-  onTabSelect?: (props: { index: number }) => void;
+  onTabSelect?: ((props: { index: number }) => void) | undefined;
   /**
    * Style for the pager adapter.
    */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
 };
 
 export type AdapterRendererProps = {
@@ -123,7 +127,7 @@ export type AdapterRendererProps = {
    * The writing direction of the layout.
    * This can be 'ltr' or 'rtl' based on tab view's `direction` prop.
    */
-  layoutDirection?: LocaleDirection;
+  layoutDirection?: LocaleDirection | undefined;
   /**
    * Render callback that should render the pages of the tab view.
    */