Fix: the tab header not sync with scene swipe when header is long

src/TabBar.tsx

@@ -283,6 +283,9 @@ export default function TabBar<T extends Route>({
   const isFirst = React.useRef(true);
   const scrollAmount = useAnimatedValue(0);
   const measuredTabWidths = React.useRef<Record<string, number>>({});
+  const measureTabWidthsTimer = React.useRef<null | ReturnType<
+    typeof setTimeout
+  >>(null);
 
   const { routes } = navigationState;
   const flattenedTabWidth = getFlattenedTabWidth(tabStyle);
@@ -296,9 +299,10 @@ export default function TabBar<T extends Route>({
     flattenedTabWidth,
   });
 
+  const mesureRoutes = routes.slice(0, navigationState.index + 1);
   const hasMeasuredTabWidths =
     Boolean(layout.width) &&
-    routes.every((r) => typeof tabWidths[r.key] === 'number');
+    mesureRoutes.every((r) => typeof tabWidths[r.key] === 'number');
 
   React.useEffect(() => {
     if (isFirst.current) {
@@ -375,13 +379,12 @@ export default function TabBar<T extends Route>({
 
               // When we have measured widths for all of the tabs, we should updates the state
               // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
-              if (
-                routes.every(
-                  (r) => typeof measuredTabWidths.current[r.key] === 'number'
-                )
-              ) {
-                setTabWidths({ ...measuredTabWidths.current });
+              if (measureTabWidthsTimer.current) {
+                clearTimeout(measureTabWidthsTimer.current);
               }
+              measureTabWidthsTimer.current = setTimeout(() => {
+                setTabWidths({ ...measuredTabWidths.current });
+              }, 300);
             }
           : undefined,
         onPress: () => {