From 6acbe15f540d3335839fb848cf9876fbdd443669 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 26 Nov 2024 20:36:16 +0000
Subject: [PATCH] Remove tab bar autoscroll

This will be replaced by a different mechanism.
---
 src/view/com/pager/TabBar.tsx | 32 ++------------------------------
 1 file changed, 2 insertions(+), 30 deletions(-)

diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index 3f453971c8..1582bde685 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -1,5 +1,5 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'
+import {useCallback, useMemo, useRef} from 'react'
+import {ScrollView, StyleSheet, View} from 'react-native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {PressableWithHover} from '../util/PressableWithHover'
@@ -14,10 +14,6 @@ export interface TabBarProps {
   onPressSelected?: (index: number) => void
 }
 
-// How much of the previous/next item we're showing
-// to give the user a hint there's more to scroll.
-const OFFSCREEN_ITEM_WIDTH = 20
-
 export function TabBar({
   testID,
   selectedPage,
@@ -28,21 +24,11 @@ export function TabBar({
 }: TabBarProps) {
   const pal = usePalette('default')
   const scrollElRef = useRef<ScrollView>(null)
-  const [itemXs, setItemXs] = useState<number[]>([])
   const indicatorStyle = useMemo(
     () => ({borderBottomColor: indicatorColor || pal.colors.link}),
     [indicatorColor, pal],
   )
 
-  useEffect(() => {
-    // On native, the primary interaction is swiping.
-    // We adjust the scroll little by little on every tab change.
-    // Scroll into view but keep the end of the previous item visible.
-    let x = itemXs[selectedPage] || 0
-    x = Math.max(0, x - OFFSCREEN_ITEM_WIDTH)
-    scrollElRef.current?.scrollTo({x})
-  }, [scrollElRef, itemXs, selectedPage])
-
   const onPressItem = useCallback(
     (index: number) => {
       onSelect?.(index)
@@ -53,19 +39,6 @@ export function TabBar({
     [onSelect, selectedPage, onPressSelected],
   )
 
-  // calculates the x position of each item on mount and on layout change
-  const onItemLayout = React.useCallback(
-    (e: LayoutChangeEvent, index: number) => {
-      const x = e.nativeEvent.layout.x
-      setItemXs(prev => {
-        const Xs = [...prev]
-        Xs[index] = x
-        return Xs
-      })
-    },
-    [],
-  )
-
   return (
     <View
       testID={testID}
@@ -83,7 +56,6 @@ export function TabBar({
             <PressableWithHover
               testID={`${testID}-selector-${i}`}
               key={`${item}-${i}`}
-              onLayout={e => onItemLayout(e, i)}
               style={styles.item}
               hoverStyle={pal.viewLight}
               onPress={() => onPressItem(i)}