fix: change of width of tabBarIndicator due to change of leftPadding

packages/react-native-tab-view/src/TabBarIndicator.tsx

@@ -80,6 +80,14 @@ export function TabBarIndicator<T extends Route>({
 }: Props<T>) {
   const isIndicatorShown = React.useRef(false);
   const isWidthDynamic = width === 'auto';
+  const initialWidth = Platform.OS === 'android' ? 70 : 1;
+
+  const getShiftAfterScale = (modif: number, coef: number) => {
+    if (modif > 0) {
+      return ((initialWidth * (modif - 1)) / (2 * modif)) * coef;
+    }
+    return 1;
+  };
 
   const opacity = useAnimatedValue(isWidthDynamic ? 0 : 1);
 
@@ -129,7 +137,10 @@ export function TabBarIndicator<T extends Route>({
 
   if (width === 'auto') {
     const inputRange = routes.map((_, i) => i);
-    const outputRange = inputRange.map(getTabWidth);
+    const outputRange = inputRange.map((i) => getTabWidth(i) / initialWidth);
+    const outputShiftRange = inputRange.map((i) =>
+      getShiftAfterScale(outputRange[i], direction === 'rtl' ? -1 : 1)
+    );
 
     transform.push(
       {
@@ -142,7 +153,16 @@ export function TabBarIndicator<T extends Route>({
               })
             : outputRange[0],
       },
-      { translateX: direction === 'rtl' ? -0.5 : 0.5 }
+      {
+        translateX:
+          routes.length > 1
+            ? position.interpolate({
+                inputRange,
+                outputRange: outputShiftRange,
+                extrapolate: 'clamp',
+              })
+            : 0,
+      }
     );
   }
 
@@ -156,8 +176,14 @@ export function TabBarIndicator<T extends Route>({
     );
   } else {
     styleList.push(
-      { width: width === 'auto' ? 1 : width },
-      { start: `${(100 / routes.length) * navigationState.index}%` },
+      { width: width === 'auto' ? initialWidth : width },
+      // If layout is not available, use `left` property for positioning the indicator
+      // This avoids rendering delay until we are able to calculate translateX
+      // If platform is macos use `left` property as `transform` is broken at the moment.
+      // See: https://github.com/microsoft/react-native-macos/issues/280
+      layout.width && Platform.OS !== 'macos'
+        ? { left: 0 }
+        : { left: `${(100 / routes.length) * navigationState.index}%` },
       { transform }
     );
   }