From acc52c14d3968687a16019547f3c72babe0c28e1 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 30 Nov 2024 19:56:38 +0000
Subject: [PATCH] Fix positioning

---
 src/view/com/pager/TabBar.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index a44015616b..0ad3ad8b1a 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -26,6 +26,9 @@ export interface TabBarProps {
   dragState: SharedValue<'idle' | 'dragging' | 'settling'>
 }
 
+const ITEM_PADDING = 10
+const CONTENT_PADDING = 6
+
 export function TabBar({
   testID,
   selectedPage,
@@ -59,7 +62,8 @@ export function TabBar({
   const progressToOffset = useCallback(
     (progress: number) => {
       'worklet'
-      const offsetPerPage = contentSize.get() - containerSize.get()
+      const offsetPerPage =
+        contentSize.get() + 2 * CONTENT_PADDING - containerSize.get()
       return (progress / (itemsLength - 1)) * offsetPerPage
     },
     [itemsLength, contentSize, containerSize],
@@ -187,7 +191,9 @@ export function TabBar({
           scaleX: interpolate(
             dragProgress.get(),
             layoutsValue.map((l, i) => i),
-            layoutsValue.map(l => (l.width - 12) / contentSize.get()),
+            layoutsValue.map(
+              l => (l.width - ITEM_PADDING * 2) / contentSize.get(),
+            ),
           ),
         },
       ],
@@ -330,11 +336,11 @@ const styles = StyleSheet.create({
   },
   contentContainer: {
     backgroundColor: 'transparent',
-    paddingHorizontal: 6,
+    paddingHorizontal: CONTENT_PADDING,
   },
   item: {
     paddingTop: 10,
-    paddingHorizontal: 10,
+    paddingHorizontal: ITEM_PADDING,
     justifyContent: 'center',
   },
   itemInner: {