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

package/lib/typescript/src/TabView.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import type { Layout, NavigationState, PagerProps, Route, SceneRendererProps } from './types';
-export type Props<T extends Route> = PagerProps & {
+import type { Layout, LocaleDirection, NavigationState, PagerProps, Route, SceneRendererProps } from './types';
+export type Props<T extends Route> = Omit<PagerProps, 'layoutDirection'> & {
     onIndexChange: (index: number) => void;
     navigationState: NavigationState<T>;
     renderScene: (props: SceneRendererProps & {
@@ -20,8 +20,9 @@ export type Props<T extends Route> = PagerProps & {
     }) => boolean) | boolean;
     lazyPreloadDistance?: number;
     sceneContainerStyle?: StyleProp<ViewStyle>;
+    direction?: LocaleDirection;
     pagerStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
 };
-export declare function TabView<T extends Route>({ onIndexChange, navigationState, renderScene, initialLayout, keyboardDismissMode, lazy, lazyPreloadDistance, onSwipeStart, onSwipeEnd, renderLazyPlaceholder, renderTabBar, sceneContainerStyle, pagerStyle, style, swipeEnabled, tabBarPosition, animationEnabled, overScrollMode, }: Props<T>): JSX.Element;
+export declare function TabView<T extends Route>({ onIndexChange, navigationState, renderScene, initialLayout, keyboardDismissMode, lazy, lazyPreloadDistance, onSwipeStart, onSwipeEnd, renderLazyPlaceholder, renderTabBar, sceneContainerStyle, pagerStyle, style, direction, swipeEnabled, tabBarPosition, animationEnabled, overScrollMode, }: Props<T>): JSX.Element;
 //# sourceMappingURL=TabView.d.ts.map

package/lib/typescript/src/TabView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../src/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EACV,MAAM,EACN,eAAe,EACf,UAAU,EACV,KAAK,EACL,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,UAAU,GAAG;IAChD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,WAAW,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3E,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACjE,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,kBAAkB,GAAG;QAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAA;KAAE,KAChE,KAAK,CAAC,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;IACpD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,OAAO,CAAC,CAAC,SAAS,KAAK,EAAE,EACvC,aAAa,EACb,eAAe,EACf,WAAW,EACX,aAAa,EACb,mBAA4B,EAC5B,IAAY,EACZ,mBAAuB,EACvB,YAAY,EACZ,UAAU,EACV,qBAAkC,EAClC,YAA+C,EAC/C,mBAAmB,EACnB,UAAU,EACV,KAAK,EACL,YAAmB,EACnB,cAAsB,EACtB,gBAAuB,EACvB,cAAc,GACf,EAAE,KAAK,CAAC,CAAC,CAAC,eA2FV"}
+{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../src/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EACV,MAAM,EACN,eAAe,EACf,eAAe,EACf,UAAU,EACV,KAAK,EACL,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,iBAAiB,CAAC,GAAG;IACzE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,WAAW,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3E,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACjE,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,kBAAkB,GAAG;QAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAA;KAAE,KAChE,KAAK,CAAC,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;IACpD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,OAAO,CAAC,CAAC,SAAS,KAAK,EAAE,EACvC,aAAa,EACb,eAAe,EACf,WAAW,EACX,aAAa,EACb,mBAA4B,EAC5B,IAAY,EACZ,mBAAuB,EACvB,YAAY,EACZ,UAAU,EACV,qBAAkC,EAClC,YAA+C,EAC/C,mBAAmB,EACnB,UAAU,EACV,KAAK,EACL,SAA4D,EAC5D,YAAmB,EACnB,cAAsB,EACtB,gBAAuB,EACvB,cAAc,GACf,EAAE,KAAK,CAAC,CAAC,CAAC,eAuGV"}

package/lib/typescript/src/types.d.ts

@@ -1,5 +1,6 @@
 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;

package/lib/typescript/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,IAAI,IAAI,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI;IACnC,KAAK,EAAE,CAAC,CAAC;CACV,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,IAAI;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,EAAE,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;AAE/C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,MAAM,IAAI,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,cAAc,EACZ,aAAa,GACb,eAAe,GACf,cAAc,GACd,gBAAgB,GAChB,0BAA0B,GAC1B,qBAAqB,GACrB,UAAU,CACb,GAAG;IACF,mBAAmB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,KAAK,CAAC;AAE5C,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,IAAI,IAAI,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI;IACnC,KAAK,EAAE,CAAC,CAAC;CACV,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,IAAI;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,EAAE,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;AAE/C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,MAAM,IAAI,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,cAAc,EACZ,aAAa,GACb,eAAe,GACf,cAAc,GACd,gBAAgB,GAChB,0BAA0B,GAC1B,qBAAqB,GACrB,UAAU,CACb,GAAG;IACF,mBAAmB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-tab-view",
   "description": "Tab view component for React Native",
-  "version": "3.5.2",
+  "version": "4.0.0-alpha.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -45,7 +45,7 @@
     "del-cli": "^5.0.0",
     "react": "18.2.0",
     "react-native": "0.71.8",
-    "react-native-builder-bob": "^0.20.4",
+    "react-native-builder-bob": "^0.21.0",
     "react-native-pager-view": "6.1.2",
     "typescript": "^4.9.4"
   },
@@ -68,5 +68,5 @@
       ]
     ]
   },
-  "gitHead": "36c8f091556157dab74d3483651bbcbd340762ff"
+  "gitHead": "ddc5705b979d62bb3a293f221ec954cbad3dfba4"
 }

package/src/PanResponderAdapter.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   Animated,
   GestureResponderEvent,
-  I18nManager,
   Keyboard,
   PanResponder,
   PanResponderGestureState,
@@ -60,6 +59,7 @@ export function PanResponderAdapter<T extends Route>({
   children,
   style,
   animationEnabled = false,
+  layoutDirection = 'ltr',
 }: Props<T>) {
   const { routes, index } = navigationState;
 
@@ -147,7 +147,8 @@ export function PanResponderAdapter<T extends Route>({
       return false;
     }
 
-    const diffX = I18nManager.isRTL ? -gestureState.dx : gestureState.dx;
+    const diffX =
+      layoutDirection === 'rtl' ? -gestureState.dx : gestureState.dx;
 
     return (
       isMovingHorizontally(event, gestureState) &&
@@ -172,7 +173,8 @@ export function PanResponderAdapter<T extends Route>({
     _: GestureResponderEvent,
     gestureState: PanResponderGestureState
   ) => {
-    const diffX = I18nManager.isRTL ? -gestureState.dx : gestureState.dx;
+    const diffX =
+      layoutDirection === 'rtl' ? -gestureState.dx : gestureState.dx;
 
     if (
       // swiping left
@@ -222,7 +224,7 @@ export function PanResponderAdapter<T extends Route>({
         Math.min(
           Math.max(
             0,
-            I18nManager.isRTL
+            layoutDirection === 'rtl'
               ? currentIndex + gestureState.dx / Math.abs(gestureState.dx)
               : currentIndex - gestureState.dx / Math.abs(gestureState.dx)
           ),
@@ -281,7 +283,7 @@ export function PanResponderAdapter<T extends Route>({
       outputRange: [-maxTranslate, 0],
       extrapolate: 'clamp',
     }),
-    I18nManager.isRTL ? -1 : 1
+    layoutDirection === 'rtl' ? -1 : 1
   );
 
   const position = React.useMemo(

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import {
+  I18nManager,
   LayoutChangeEvent,
+  Platform,
   StyleProp,
   StyleSheet,
   View,
@@ -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