react-native-tab-view 3.5.1 → 4.0.0-alpha.0

package/src/TabBar.tsx

@@ -21,6 +21,7 @@ import { Props as TabBarItemProps, TabBarItem } from './TabBarItem';
 import type {
   Event,
   Layout,
+  LocaleDirection,
   NavigationState,
   Route,
   Scene,
@@ -65,12 +66,14 @@ export type Props<T extends Route> = SceneRendererProps & {
   labelStyle?: StyleProp<TextStyle>;
   contentContainerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
+  direction?: LocaleDirection;
   gap?: number;
   testID?: string;
   android_ripple?: PressableAndroidRippleConfig;
 };
 
 type FlattenedTabWidth = string | number | undefined;
+type FlattenedTabPadding = string | number | undefined;
 
 const Separator = ({ width }: { width: number }) => {
   return <View style={{ width }} />;
@@ -82,13 +85,50 @@ const getFlattenedTabWidth = (style: StyleProp<ViewStyle>) => {
   return tabStyle?.width;
 };
 
+const getFlattenedPaddingLeft = (style: StyleProp<ViewStyle>) => {
+  const flattenStyle = StyleSheet.flatten(style);
+
+  return flattenStyle
+    ? flattenStyle.paddingLeft || flattenStyle.paddingHorizontal || 0
+    : 0;
+};
+
+const getFlattenedPaddingRight = (style: StyleProp<ViewStyle>) => {
+  const flattenStyle = StyleSheet.flatten(style);
+
+  return flattenStyle
+    ? flattenStyle.paddingRight || flattenStyle.paddingHorizontal || 0
+    : 0;
+};
+
+const convertPaddingPercentToSize = (
+  value: FlattenedTabPadding,
+  layout: Layout
+): number => {
+  switch (typeof value) {
+    case 'number':
+      return value;
+    case 'string':
+      if (value.endsWith('%')) {
+        const width = parseFloat(value);
+        if (Number.isFinite(width)) {
+          return layout.width * (width / 100);
+        }
+      }
+  }
+  return 0;
+};
+
 const getComputedTabWidth = (
   index: number,
   layout: Layout,
   routes: Route[],
   scrollEnabled: boolean | undefined,
   tabWidths: { [key: string]: number },
-  flattenedWidth: FlattenedTabWidth
+  flattenedWidth: FlattenedTabWidth,
+  flattenedPaddingLeft: FlattenedTabPadding,
+  flattenedPaddingRight: FlattenedTabPadding,
+  gap?: number
 ) => {
   if (flattenedWidth === 'auto') {
     return tabWidths[routes[index].key] || 0;
@@ -109,7 +149,13 @@ const getComputedTabWidth = (
   if (scrollEnabled) {
     return (layout.width / 5) * 2;
   }
-  return layout.width / routes.length;
+
+  const gapTotalWidth = (gap ?? 0) * (routes.length - 1);
+  const paddingTotalWidth =
+    convertPaddingPercentToSize(flattenedPaddingLeft, layout) +
+    convertPaddingPercentToSize(flattenedPaddingRight, layout);
+
+  return (layout.width - gapTotalWidth - paddingTotalWidth) / routes.length;
 };
 
 const getMaxScrollDistance = (tabBarWidth: number, layoutWidth: number) =>
@@ -117,13 +163,14 @@ const getMaxScrollDistance = (tabBarWidth: number, layoutWidth: number) =>
 
 const getTranslateX = (
   scrollAmount: Animated.Value,
-  maxScrollDistance: number
+  maxScrollDistance: number,
+  direction: LocaleDirection
 ) =>
   Animated.multiply(
-    Platform.OS === 'android' && I18nManager.isRTL
+    Platform.OS === 'android' && direction === 'rtl'
       ? Animated.add(maxScrollDistance, Animated.multiply(scrollAmount, -1))
       : scrollAmount,
-    I18nManager.isRTL ? 1 : -1
+    direction === 'rtl' ? 1 : -1
   );
 
 const getTabBarWidth = <T extends Route>({
@@ -132,13 +179,23 @@ const getTabBarWidth = <T extends Route>({
   gap,
   scrollEnabled,
   flattenedTabWidth,
+  flattenedPaddingLeft,
+  flattenedPaddingRight,
   tabWidths,
 }: Pick<Props<T>, 'navigationState' | 'gap' | 'layout' | 'scrollEnabled'> & {
   tabWidths: Record<string, number>;
+  flattenedPaddingLeft: FlattenedTabPadding;
+  flattenedPaddingRight: FlattenedTabPadding;
   flattenedTabWidth: FlattenedTabWidth;
 }) => {
   const { routes } = navigationState;
 
+  const paddingsWidth = Math.max(
+    0,
+    convertPaddingPercentToSize(flattenedPaddingLeft, layout) +
+      convertPaddingPercentToSize(flattenedPaddingRight, layout)
+  );
+
   return routes.reduce<number>(
     (acc, _, i) =>
       acc +
@@ -149,9 +206,12 @@ const getTabBarWidth = <T extends Route>({
         routes,
         scrollEnabled,
         tabWidths,
-        flattenedTabWidth
+        flattenedTabWidth,
+        flattenedPaddingLeft,
+        flattenedPaddingRight,
+        gap
       ),
-    0
+    paddingsWidth
   );
 };
 
@@ -163,10 +223,16 @@ const normalizeScrollValue = <T extends Route>({
   tabWidths,
   value,
   flattenedTabWidth,
+  flattenedPaddingLeft,
+  flattenedPaddingRight,
+  direction,
 }: Pick<Props<T>, 'layout' | 'navigationState' | 'gap' | 'scrollEnabled'> & {
   tabWidths: Record<string, number>;
   value: number;
   flattenedTabWidth: FlattenedTabWidth;
+  flattenedPaddingLeft: FlattenedTabPadding;
+  flattenedPaddingRight: FlattenedTabPadding;
+  direction: LocaleDirection;
 }) => {
   const tabBarWidth = getTabBarWidth({
     layout,
@@ -175,11 +241,13 @@ const normalizeScrollValue = <T extends Route>({
     gap,
     scrollEnabled,
     flattenedTabWidth,
+    flattenedPaddingLeft,
+    flattenedPaddingRight,
   });
   const maxDistance = getMaxScrollDistance(tabBarWidth, layout.width);
   const scrollValue = Math.max(Math.min(value, maxDistance), 0);
 
-  if (Platform.OS === 'android' && I18nManager.isRTL) {
+  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;
@@ -195,10 +263,21 @@ const getScrollAmount = <T extends Route>({
   scrollEnabled,
   flattenedTabWidth,
   tabWidths,
+  flattenedPaddingLeft,
+  flattenedPaddingRight,
+  direction,
 }: Pick<Props<T>, 'layout' | 'navigationState' | 'scrollEnabled' | 'gap'> & {
   tabWidths: Record<string, number>;
   flattenedTabWidth: FlattenedTabWidth;
+  flattenedPaddingLeft: FlattenedTabPadding;
+  flattenedPaddingRight: FlattenedTabPadding;
+  direction: LocaleDirection;
 }) => {
+  const paddingInitial =
+    direction === 'rtl'
+      ? convertPaddingPercentToSize(flattenedPaddingRight, layout)
+      : convertPaddingPercentToSize(flattenedPaddingLeft, layout);
+
   const centerDistance = Array.from({
     length: navigationState.index + 1,
   }).reduce<number>((total, _, i) => {
@@ -208,18 +287,20 @@ const getScrollAmount = <T extends Route>({
       navigationState.routes,
       scrollEnabled,
       tabWidths,
-      flattenedTabWidth
+      flattenedTabWidth,
+      flattenedPaddingLeft,
+      flattenedPaddingRight,
+      gap
     );
 
     // To get the current index centered we adjust scroll amount by width of indexes
     // 0 through (i - 1) and add half the width of current index i
     return (
       total +
-      (navigationState.index === i
-        ? (tabWidth + (gap ?? 0)) / 2
-        : tabWidth + (gap ?? 0))
+      (i > 0 ? gap ?? 0 : 0) +
+      (navigationState.index === i ? tabWidth / 2 : tabWidth)
     );
-  }, 0);
+  }, paddingInitial);
 
   const scrollAmount = centerDistance - layout.width / 2;
 
@@ -231,6 +312,9 @@ const getScrollAmount = <T extends Route>({
     gap,
     scrollEnabled,
     flattenedTabWidth,
+    flattenedPaddingLeft,
+    flattenedPaddingRight,
+    direction,
   });
 };
 
@@ -281,22 +365,27 @@ export function TabBar<T extends Route>({
   renderBadge,
   renderIcon,
   renderLabel,
+  direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
   renderTabBarItem,
   style,
   tabStyle,
+  layout: propLayout,
   testID,
   android_ripple,
 }: Props<T>) {
-  const [layout, setLayout] = React.useState<Layout>({ width: 0, height: 0 });
+  const [layout, setLayout] = React.useState<Layout>(
+    propLayout ?? { width: 0, height: 0 }
+  );
   const [tabWidths, setTabWidths] = React.useState<Record<string, number>>({});
   const flatListRef = React.useRef<FlatList | null>(null);
   const isFirst = React.useRef(true);
   const scrollAmount = useAnimatedValue(0);
   const measuredTabWidths = React.useRef<Record<string, number>>({});
-
   const { routes } = navigationState;
   const flattenedTabWidth = getFlattenedTabWidth(tabStyle);
   const isWidthDynamic = flattenedTabWidth === 'auto';
+  const flattenedPaddingRight = getFlattenedPaddingRight(contentContainerStyle);
+  const flattenedPaddingLeft = getFlattenedPaddingLeft(contentContainerStyle);
   const scrollOffset = getScrollAmount({
     layout,
     navigationState,
@@ -304,6 +393,9 @@ export function TabBar<T extends Route>({
     gap,
     scrollEnabled,
     flattenedTabWidth,
+    flattenedPaddingLeft,
+    flattenedPaddingRight,
+    direction,
   });
 
   const hasMeasuredTabWidths =
@@ -347,19 +439,25 @@ export function TabBar<T extends Route>({
     gap,
     scrollEnabled,
     flattenedTabWidth,
+    flattenedPaddingLeft,
+    flattenedPaddingRight,
   });
 
   const separatorsWidth = Math.max(0, routes.length - 1) * gap;
-  const separatorPercent = (separatorsWidth / tabBarWidth) * 100;
-  const tabBarWidthPercent = `${routes.length * 40}%`;
+  const paddingsWidth = Math.max(
+    0,
+    convertPaddingPercentToSize(flattenedPaddingLeft, layout) +
+      convertPaddingPercentToSize(flattenedPaddingRight, layout)
+  );
 
   const translateX = React.useMemo(
     () =>
       getTranslateX(
         scrollAmount,
-        getMaxScrollDistance(tabBarWidth, layout.width)
+        getMaxScrollDistance(tabBarWidth, layout.width),
+        direction
       ),
-    [layout.width, scrollAmount, tabBarWidth]
+    [direction, layout.width, scrollAmount, tabBarWidth]
   );
 
   const renderItem = React.useCallback(
@@ -436,7 +534,10 @@ export function TabBar<T extends Route>({
               routes,
               scrollEnabled,
               tabWidths,
-              getFlattenedTabWidth(tabStyle)
+              getFlattenedTabWidth(tabStyle),
+              getFlattenedPaddingRight(contentContainerStyle),
+              getFlattenedPaddingLeft(contentContainerStyle),
+              gap
             )
           : undefined,
         android_ripple,
@@ -479,6 +580,7 @@ export function TabBar<T extends Route>({
       routes,
       scrollEnabled,
       tabStyle,
+      contentContainerStyle,
       tabWidths,
     ]
   );
@@ -488,21 +590,10 @@ export function TabBar<T extends Route>({
   const contentContainerStyleMemoized = React.useMemo(
     () => [
       styles.tabContent,
-      scrollEnabled
-        ? {
-            width:
-              tabBarWidth > separatorsWidth ? tabBarWidth : tabBarWidthPercent,
-          }
-        : styles.container,
+      scrollEnabled ? { width: tabBarWidth } : null,
       contentContainerStyle,
     ],
-    [
-      contentContainerStyle,
-      scrollEnabled,
-      separatorsWidth,
-      tabBarWidth,
-      tabBarWidthPercent,
-    ]
+    [contentContainerStyle, scrollEnabled, tabBarWidth]
   );
 
   const handleScroll = React.useMemo(
@@ -546,11 +637,7 @@ export function TabBar<T extends Route>({
         style={[
           styles.indicatorContainer,
           scrollEnabled ? { transform: [{ translateX }] as any } : null,
-          tabBarWidth > separatorsWidth
-            ? { width: tabBarWidth - separatorsWidth }
-            : scrollEnabled
-            ? { width: tabBarWidthPercent }
-            : null,
+          scrollEnabled ? { width: tabBarWidth } : null,
           indicatorContainerStyle,
         ]}
       >
@@ -559,10 +646,17 @@ export function TabBar<T extends Route>({
           layout,
           navigationState,
           jumpTo,
+          direction,
           width: isWidthDynamic
             ? 'auto'
-            : `${(100 - separatorPercent) / routes.length}%`,
-          style: indicatorStyle,
+            : Math.max(
+                0,
+                (tabBarWidth - separatorsWidth - paddingsWidth) / routes.length
+              ),
+          style: [
+            indicatorStyle,
+            { left: flattenedPaddingLeft, right: flattenedPaddingRight },
+          ],
           getTabWidth: (i: number) =>
             getComputedTabWidth(
               i,
@@ -570,7 +664,10 @@ export function TabBar<T extends Route>({
               routes,
               scrollEnabled,
               tabWidths,
-              flattenedTabWidth
+              flattenedTabWidth,
+              flattenedPaddingRight,
+              flattenedPaddingLeft,
+              gap
             ),
           gap,
         })}
@@ -605,9 +702,6 @@ export function TabBar<T extends Route>({
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
   scroll: {
     overflow: Platform.select({ default: 'scroll', web: undefined }),
   },
@@ -624,6 +718,7 @@ const styles = StyleSheet.create({
     zIndex: 1,
   },
   tabContent: {
+    flexGrow: 1,
     flexDirection: 'row',
     flexWrap: 'nowrap',
   },

package/src/TabBarIndicator.tsx

@@ -2,14 +2,18 @@ import * as React from 'react';
 import {
   Animated,
   Easing,
-  I18nManager,
   Platform,
   StyleProp,
   StyleSheet,
   ViewStyle,
 } from 'react-native';
 
-import type { NavigationState, Route, SceneRendererProps } from './types';
+import type {
+  LocaleDirection,
+  NavigationState,
+  Route,
+  SceneRendererProps,
+} from './types';
 import { useAnimatedValue } from './useAnimatedValue';
 
 export type GetTabWidth = (index: number) => number;
@@ -17,15 +21,18 @@ export type GetTabWidth = (index: number) => number;
 export type Props<T extends Route> = SceneRendererProps & {
   navigationState: NavigationState<T>;
   width: string | number;
-  style?: StyleProp<ViewStyle>;
   getTabWidth: GetTabWidth;
+  direction: LocaleDirection;
+  style?: StyleProp<ViewStyle>;
   gap?: number;
+  children?: React.ReactNode;
 };
 
 const getTranslateX = (
   position: Animated.AnimatedInterpolation<number>,
   routes: Route[],
   getTabWidth: GetTabWidth,
+  direction: LocaleDirection,
   gap?: number
 ) => {
   const inputRange = routes.map((_, i) => i);
@@ -42,7 +49,7 @@ const getTranslateX = (
     extrapolate: 'clamp',
   });
 
-  return Animated.multiply(translateX, I18nManager.isRTL ? -1 : 1);
+  return Animated.multiply(translateX, direction === 'rtl' ? -1 : 1);
 };
 
 export function TabBarIndicator<T extends Route>({
@@ -51,8 +58,10 @@ export function TabBarIndicator<T extends Route>({
   navigationState,
   position,
   width,
+  direction,
   gap,
   style,
+  children,
 }: Props<T>) {
   const isIndicatorShown = React.useRef(false);
   const isWidthDynamic = width === 'auto';
@@ -96,7 +105,9 @@ export function TabBarIndicator<T extends Route>({
 
   if (layout.width) {
     const translateX =
-      routes.length > 1 ? getTranslateX(position, routes, getTabWidth, gap) : 0;
+      routes.length > 1
+        ? getTranslateX(position, routes, getTabWidth, direction, gap)
+        : 0;
 
     transform.push({ translateX });
   }
@@ -116,7 +127,7 @@ export function TabBarIndicator<T extends Route>({
               })
             : outputRange[0],
       },
-      { translateX: 0.5 }
+      { translateX: direction === 'rtl' ? -0.5 : 0.5 }
     );
   }
 
@@ -136,7 +147,9 @@ export function TabBarIndicator<T extends Route>({
         width === 'auto' ? { opacity: opacity } : null,
         style,
       ]}
-    />
+    >
+      {children}
+    </Animated.View>
   );
 }
 

package/src/TabBarItem.tsx

@@ -12,6 +12,7 @@ import {
 import useLatestCallback from 'use-latest-callback';
 
 import { PlatformPressable } from './PlatformPressable';
+import { TabBarItemLabel } from './TabBarItemLabel';
 import type { NavigationState, Route, Scene } from './types';
 
 export type Props<T extends Route> = {
@@ -85,18 +86,26 @@ const getInactiveOpacity = (
 
 type TabBarItemInternalProps<T extends Route> = Omit<
   Props<T>,
-  'navigationState'
+  | 'navigationState'
+  | 'getAccessibilityLabel'
+  | 'getLabelText'
+  | 'getTestID'
+  | 'getAccessible'
 > & {
   isFocused: boolean;
   index: number;
   routesLength: number;
+  accessibilityLabel?: string;
+  label?: string;
+  testID?: string;
+  accessible?: boolean;
 };
 
 const TabBarItemInternal = <T extends Route>({
-  getAccessibilityLabel,
-  getAccessible,
-  getLabelText,
-  getTestID,
+  accessibilityLabel,
+  accessible,
+  label: labelText,
+  testID,
   onLongPress,
   onPress,
   isFocused,
@@ -166,29 +175,16 @@ const TabBarItemInternal = <T extends Route>({
     }
   }
 
-  const renderLabel =
-    renderLabelCustom !== undefined
-      ? renderLabelCustom
-      : (labelProps: { route: T; color: string }) => {
-          const labelText = getLabelText({ route: labelProps.route });
-
-          if (typeof labelText === 'string') {
-            return (
-              <Animated.Text
-                style={[
-                  styles.label,
-                  icon ? { marginTop: 0 } : null,
-                  labelStyle,
-                  { color: labelProps.color },
-                ]}
-              >
-                {labelText}
-              </Animated.Text>
-            );
-          }
-
-          return labelText;
-        };
+  const renderLabel = renderLabelCustom
+    ? renderLabelCustom
+    : (labelProps: { color: string }) => (
+        <TabBarItemLabel
+          {...labelProps}
+          icon={icon}
+          label={labelText}
+          labelStyle={labelStyle}
+        />
+      );
 
   if (renderLabel) {
     const activeLabel = renderLabel({
@@ -225,20 +221,16 @@ const TabBarItemInternal = <T extends Route>({
 
   const scene = { route };
 
-  let accessibilityLabel = getAccessibilityLabel(scene);
-
   accessibilityLabel =
-    typeof accessibilityLabel !== 'undefined'
-      ? accessibilityLabel
-      : getLabelText(scene);
+    typeof accessibilityLabel !== 'undefined' ? accessibilityLabel : labelText;
 
   const badge = renderBadge ? renderBadge(scene) : null;
 
   return (
     <PlatformPressable
       android_ripple={android_ripple}
-      testID={getTestID(scene)}
-      accessible={getAccessible(scene)}
+      testID={testID}
+      accessible={accessible}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="tab"
       accessibilityState={{ selected: isFocused }}
@@ -266,14 +258,31 @@ const MemoizedTabBarItemInternal = React.memo(
 ) as typeof TabBarItemInternal;
 
 export function TabBarItem<T extends Route>(props: Props<T>) {
-  const { onPress, onLongPress, onLayout, navigationState, route, ...rest } =
-    props;
+  const {
+    onPress,
+    onLongPress,
+    onLayout,
+    navigationState,
+    route,
+    getAccessibilityLabel,
+    getLabelText,
+    getTestID,
+    getAccessible,
+    ...rest
+  } = props;
   const onPressLatest = useLatestCallback(onPress);
   const onLongPressLatest = useLatestCallback(onLongPress);
   const onLayoutLatest = useLatestCallback(onLayout ? onLayout : () => {});
 
   const tabIndex = navigationState.routes.indexOf(route);
 
+  const scene = { route };
+
+  const accessibilityLabel = getAccessibilityLabel(scene);
+  const label = getLabelText(scene);
+  const testID = getTestID(scene);
+  const accessible = getAccessible(scene);
+
   return (
     <MemoizedTabBarItemInternal
       {...rest}
@@ -284,16 +293,15 @@ export function TabBarItem<T extends Route>(props: Props<T>) {
       route={route}
       index={tabIndex}
       routesLength={navigationState.routes.length}
+      accessibilityLabel={accessibilityLabel}
+      label={label}
+      testID={testID}
+      accessible={accessible}
     />
   );
 }
 
 const styles = StyleSheet.create({
-  label: {
-    margin: 4,
-    backgroundColor: 'transparent',
-    textTransform: 'uppercase',
-  },
   icon: {
     margin: 2,
   },

package/src/TabBarItemLabel.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
+
+interface TabBarItemLabelProps {
+  color: string;
+  label?: string;
+  labelStyle: StyleProp<ViewStyle>;
+  icon: React.ReactNode;
+}
+
+export const TabBarItemLabel = React.memo(
+  ({ color, label, labelStyle, icon }: TabBarItemLabelProps) => {
+    if (!label) {
+      return null;
+    }
+
+    return (
+      <Animated.Text
+        style={[
+          styles.label,
+          icon ? { marginTop: 0 } : null,
+          labelStyle,
+          { color: color },
+        ]}
+      >
+        {label}
+      </Animated.Text>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  label: {
+    margin: 4,
+    backgroundColor: 'transparent',
+    textTransform: 'uppercase',
+  },
+});