From 828e0b0d2281c70de1b81887caecd4e567c1b57a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 16 Oct 2023 19:15:08 +0100
Subject: [PATCH] Simplify the calculation

---
 src/view/com/pager/TabBar.tsx | 11 +++++------
 src/view/screens/Home.tsx     |  8 +++-----
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index 9d4e344b8c..b7f036d43d 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -34,14 +34,13 @@ export function TabBar({
   const {isDesktop, isTablet} = useWebMediaQueries()
   const [layouts, setLayouts] = useState([])
 
-  const approxIndex = useDerivedValue(() => dragProgress.value * (items.length - 1))
   const indicatorStyle = useAnimatedStyle(() => {
     if (layouts.length < items.length - 1 || layouts.some(l => l === undefined)) {
       return {}
     }
     return {
-      width: interpolate(approxIndex.value, layouts.map((l, i) => i), layouts.map(l => l.width)),
-      left: interpolate(approxIndex.value, layouts.map((l, i) => i), layouts.map(l => l.x)),
+      width: interpolate(dragProgress.value, layouts.map((l, i) => i), layouts.map(l => l.width)),
+      left: interpolate(dragProgress.value, layouts.map((l, i) => i), layouts.map(l => l.x)),
     }
   })
 
@@ -56,12 +55,12 @@ export function TabBar({
   )
 
   useAnimatedReaction(() => {
-    return dragProgress.value * (contentSize.value - SCREEN.width)
+    return (dragProgress.value / (items.length - 1)) * (contentSize.value - SCREEN.width)
   }, (nextX, prevX) => {
     if (prevX !== nextX) {
       scrollTo(scrollElRef, nextX, 0, false);
     }
-  }, [dragProgress, contentSize])
+  })
 
   const onItemLayout = (e: LayoutChangeEvent, index: number) => {
     const l = e.nativeEvent.layout
@@ -97,7 +96,7 @@ export function TabBar({
               <MaybeHighlightedText
                 type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
                 testID={testID ? `${testID}-${item}` : undefined}
-                approxIndex={approxIndex}
+                approxIndex={dragProgress}
                 index={i}>
                 {item}
               </MaybeHighlightedText>
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index a3e11d4e25..9c9de982cf 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -84,12 +84,10 @@ export const HomeScreen = withAuthRequired(
     const onPageScroll = React.useCallback(
       e => {
         'worklet'
-        if (customFeeds.length > 0) {
-          const progress = (e.offset + e.position) / customFeeds.length
-          dragProgress.value = progress
-        }
+        const progress = e.offset + e.position
+        dragProgress.value = progress
       },
-      [customFeeds, dragProgress],
+      [dragProgress],
     )
 
     const onPressSelected = React.useCallback(() => {