Merge remote-tracking branch 'origin/main' into explore/tabs

src/components/ProgressGuide/FollowDialog.tsx

@@ -471,7 +471,6 @@ let Tabs = ({
   contentContainerStyle?: StyleProp<ViewStyle>
 }): React.ReactNode => {
   const listRef = useRef<ScrollView>(null)
-  const [scrollX, setScrollX] = useState(0)
   const [totalWidth, setTotalWidth] = useState(0)
   const pendingTabOffsets = useRef<{x: number; width: number}[]>([])
   const [tabOffsets, setTabOffsets] = useState<{x: number; width: number}[]>([])
@@ -490,24 +489,11 @@ let Tabs = ({
   function scrollIntoViewIfNeeded(index: number) {
     const btnLayout = tabOffsets[index]
     if (!btnLayout) return
-
-    const viewportLeftEdge = scrollX
-    const viewportRightEdge = scrollX + totalWidth
-    const shouldScrollToLeftEdge = viewportLeftEdge > btnLayout.x
-    const shouldScrollToRightEdge =
-      viewportRightEdge < btnLayout.x + btnLayout.width
-
-    if (shouldScrollToLeftEdge) {
-      listRef.current?.scrollTo({
-        x: btnLayout.x - tokens.space.lg,
-        animated: true,
-      })
-    } else if (shouldScrollToRightEdge) {
-      listRef.current?.scrollTo({
-        x: btnLayout.x - totalWidth + btnLayout.width + tokens.space.lg,
-        animated: true,
-      })
-    }
+    listRef.current?.scrollTo({
+      // centered
+      x: btnLayout.x - (totalWidth / 2 - btnLayout.width / 2),
+      animated: true,
+    })
   }
 
   function handleSelectTab(index: number) {
@@ -539,7 +525,7 @@ let Tabs = ({
       }
       onLayout={evt => setTotalWidth(evt.nativeEvent.layout.width)}
       scrollEventThrottle={200} // big throttle
-      onScroll={evt => setScrollX(evt.nativeEvent.contentOffset.x)}>
+    >
       {interests.map((interest, i) => {
         const active = interest === selectedInterest && !hasSearchText
         return (