react-native-tab-view 3.5.2 → 4.0.0-alpha.1

package/src/TabBar.tsx

@@ -1,26 +1,31 @@
 import * as React from 'react';
 import {
   Animated,
+  type DimensionValue,
   FlatList,
   I18nManager,
-  LayoutChangeEvent,
-  ListRenderItemInfo,
+  type LayoutChangeEvent,
+  type ListRenderItemInfo,
   Platform,
-  PressableAndroidRippleConfig,
-  StyleProp,
+  type PressableAndroidRippleConfig,
+  type StyleProp,
   StyleSheet,
-  TextStyle,
+  type TextStyle,
   View,
-  ViewStyle,
-  ViewToken,
+  type ViewStyle,
+  type ViewToken,
 } from 'react-native';
 import useLatestCallback from 'use-latest-callback';
 
-import { Props as IndicatorProps, TabBarIndicator } from './TabBarIndicator';
-import { Props as TabBarItemProps, TabBarItem } from './TabBarItem';
+import {
+  type Props as IndicatorProps,
+  TabBarIndicator,
+} from './TabBarIndicator';
+import { type Props as TabBarItemProps, TabBarItem } from './TabBarItem';
 import type {
   Event,
   Layout,
+  LocaleDirection,
   NavigationState,
   Route,
   Scene,
@@ -65,13 +70,12 @@ 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;
-
 const Separator = ({ width }: { width: number }) => {
   return <View style={{ width }} />;
 };
@@ -82,13 +86,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: DimensionValue | undefined,
+  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: DimensionValue | undefined,
+  flattenedPaddingLeft: DimensionValue | undefined,
+  flattenedPaddingRight: DimensionValue | undefined,
+  gap?: number
 ) => {
   if (flattenedWidth === 'auto') {
     return tabWidths[routes[index].key] || 0;
@@ -109,7 +150,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 +164,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 +180,23 @@ const getTabBarWidth = <T extends Route>({
   gap,
   scrollEnabled,
   flattenedTabWidth,
+  flattenedPaddingLeft,
+  flattenedPaddingRight,
   tabWidths,
 }: Pick<Props<T>, 'navigationState' | 'gap' | 'layout' | 'scrollEnabled'> & {
   tabWidths: Record<string, number>;
-  flattenedTabWidth: FlattenedTabWidth;
+  flattenedPaddingLeft: DimensionValue | undefined;
+  flattenedPaddingRight: DimensionValue | undefined;
+  flattenedTabWidth: DimensionValue | undefined;
 }) => {
   const { routes } = navigationState;
 
+  const paddingsWidth = Math.max(
+    0,
+    convertPaddingPercentToSize(flattenedPaddingLeft, layout) +
+      convertPaddingPercentToSize(flattenedPaddingRight, layout)
+  );
+
   return routes.reduce<number>(
     (acc, _, i) =>
       acc +
@@ -149,9 +207,12 @@ const getTabBarWidth = <T extends Route>({
         routes,
         scrollEnabled,
         tabWidths,
-        flattenedTabWidth
+        flattenedTabWidth,
+        flattenedPaddingLeft,
+        flattenedPaddingRight,
+        gap
       ),
-    0
+    paddingsWidth
   );
 };
 
@@ -163,10 +224,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;
+  flattenedTabWidth: DimensionValue | undefined;
+  flattenedPaddingLeft: DimensionValue | undefined;
+  flattenedPaddingRight: DimensionValue | undefined;
+  direction: LocaleDirection;
 }) => {
   const tabBarWidth = getTabBarWidth({
     layout,
@@ -175,11 +242,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 +264,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;
+  flattenedTabWidth: DimensionValue | undefined;
+  flattenedPaddingLeft: DimensionValue | undefined;
+  flattenedPaddingRight: DimensionValue | undefined;
+  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 +288,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 +313,9 @@ const getScrollAmount = <T extends Route>({
     gap,
     scrollEnabled,
     flattenedTabWidth,
+    flattenedPaddingLeft,
+    flattenedPaddingRight,
+    direction,
   });
 };
 
@@ -281,22 +366,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 +394,9 @@ export function TabBar<T extends Route>({
     gap,
     scrollEnabled,
     flattenedTabWidth,
+    flattenedPaddingLeft,
+    flattenedPaddingRight,
+    direction,
   });
 
   const hasMeasuredTabWidths =
@@ -347,19 +440,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 +535,10 @@ export function TabBar<T extends Route>({
               routes,
               scrollEnabled,
               tabWidths,
-              getFlattenedTabWidth(tabStyle)
+              getFlattenedTabWidth(tabStyle),
+              getFlattenedPaddingRight(contentContainerStyle),
+              getFlattenedPaddingLeft(contentContainerStyle),
+              gap
             )
           : undefined,
         android_ripple,
@@ -479,6 +581,7 @@ export function TabBar<T extends Route>({
       routes,
       scrollEnabled,
       tabStyle,
+      contentContainerStyle,
       tabWidths,
     ]
   );
@@ -488,21 +591,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 +638,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 +647,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 +665,10 @@ export function TabBar<T extends Route>({
               routes,
               scrollEnabled,
               tabWidths,
-              flattenedTabWidth
+              flattenedTabWidth,
+              flattenedPaddingRight,
+              flattenedPaddingLeft,
+              gap
             ),
           gap,
         })}
@@ -605,9 +703,6 @@ export function TabBar<T extends Route>({
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
   scroll: {
     overflow: Platform.select({ default: 'scroll', web: undefined }),
   },
@@ -624,6 +719,7 @@ const styles = StyleSheet.create({
     zIndex: 1,
   },
   tabContent: {
+    flexGrow: 1,
     flexDirection: 'row',
     flexWrap: 'nowrap',
   },

package/src/TabBarIndicator.tsx

@@ -2,30 +2,37 @@ import * as React from 'react';
 import {
   Animated,
   Easing,
-  I18nManager,
   Platform,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
-  ViewStyle,
+  type 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;
 
 export type Props<T extends Route> = SceneRendererProps & {
   navigationState: NavigationState<T>;
-  width: string | number;
-  style?: StyleProp<ViewStyle>;
+  width: 'auto' | `${number}%` | number;
   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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import {
   Animated,
-  LayoutChangeEvent,
-  PressableAndroidRippleConfig,
-  StyleProp,
+  type LayoutChangeEvent,
+  type PressableAndroidRippleConfig,
+  type StyleProp,
   StyleSheet,
-  TextStyle,
+  type TextStyle,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
 import useLatestCallback from 'use-latest-callback';
 
@@ -234,11 +234,9 @@ const TabBarItemInternal = <T extends Route>({
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="tab"
       accessibilityState={{ selected: isFocused }}
-      // @ts-ignore: this is to support older React Native versions
-      accessibilityStates={isFocused ? ['selected'] : []}
       pressColor={pressColor}
       pressOpacity={pressOpacity}
-      delayPressIn={0}
+      unstable_pressDelay={0}
       onLayout={onLayout}
       onPress={onPress}
       onLongPress={onLongPress}

package/src/TabView.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import {
-  LayoutChangeEvent,
-  StyleProp,
+  I18nManager,
+  type LayoutChangeEvent,
+  Platform,
+  type StyleProp,
   StyleSheet,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
 
 import { Pager } from './Pager';
@@ -12,13 +14,14 @@ import { SceneView } from './SceneView';
 import { TabBar } from './TabBar';
 import type {
   Layout,
+  LocaleDirection,
   NavigationState,
   PagerProps,
   Route,
   SceneRendererProps,
 } from './types';
 
-export type Props<T extends Route> = PagerProps & {
+export type Props<T extends Route> = Omit<PagerProps, 'layoutDirection'> & {
   onIndexChange: (index: number) => void;
   navigationState: NavigationState<T>;
   renderScene: (props: SceneRendererProps & { route: T }) => React.ReactNode;
@@ -31,6 +34,7 @@ export type Props<T extends Route> = PagerProps & {
   lazy?: ((props: { route: T }) => boolean) | boolean;
   lazyPreloadDistance?: number;
   sceneContainerStyle?: StyleProp<ViewStyle>;
+  direction?: LocaleDirection;
   pagerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
 };
@@ -50,11 +54,23 @@ export function TabView<T extends Route>({
   sceneContainerStyle,
   pagerStyle,
   style,
+  direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
   swipeEnabled = true,
   tabBarPosition = 'top',
   animationEnabled = true,
   overScrollMode,
 }: Props<T>) {
+  if (
+    Platform.OS !== 'web' &&
+    direction !== (I18nManager.getConstants().isRTL ? 'rtl' : 'ltr')
+  ) {
+    console.warn(
+      `The 'direction' prop is set to '${direction}' but the effective value is '${
+        I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
+      }'. This is not supported. Please use I18nManager.forceRTL to change the layout direction.`
+    );
+  }
+
   const [layout, setLayout] = React.useState({
     width: 0,
     height: 0,
@@ -92,6 +108,7 @@ export function TabView<T extends Route>({
         animationEnabled={animationEnabled}
         overScrollMode={overScrollMode}
         style={pagerStyle}
+        layoutDirection={direction}
       >
         {({ position, render, addEnterListener, jumpTo }) => {
           // All of the props here must not change between re-renders

package/src/types.tsx

@@ -1,6 +1,8 @@
 import type { Animated } from 'react-native';
 import type { PagerViewProps } from 'react-native-pager-view';
 
+export type LocaleDirection = 'ltr' | 'rtl';
+
 export type Route = {
   key: string;
   icon?: string;