Merge remote-tracking branch 'origin/nicer-tabs-2' into hailey/test-upgrade-build

src/lib/statsig/events.ts

@@ -80,12 +80,6 @@ export type LogEvents = {
     feedUrl: string
     feedType: string
     index: number
-    reason:
-      | 'focus'
-      | 'tabbar-click'
-      | 'pager-swipe'
-      | 'desktop-sidebar-click'
-      | 'starter-pack-initial-feed'
   }
   'feed:endReached': {
     feedUrl: string

src/view/com/home/HomeHeader.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {useNavigation} from '@react-navigation/native'
 
-import {usePalette} from '#/lib/hooks/usePalette'
 import {NavigationProp} from '#/lib/routes/types'
 import {FeedSourceInfo} from '#/state/queries/feed'
 import {useSession} from '#/state/session'
@@ -19,7 +18,6 @@ export function HomeHeader(
   const {feeds} = props
   const {hasSession} = useSession()
   const navigation = useNavigation<NavigationProp>()
-  const pal = usePalette('default')
 
   const hasPinnedCustom = React.useMemo<boolean>(() => {
     if (!hasSession) return false
@@ -61,7 +59,8 @@ export function HomeHeader(
         onSelect={onSelect}
         testID={props.testID}
         items={items}
-        indicatorColor={pal.colors.link}
+        dragProgress={props.dragProgress}
+        dragState={props.dragState}
       />
     </HomeHeaderLayout>
   )

src/view/com/pager/Pager.tsx

@@ -1,27 +1,33 @@
 import React, {forwardRef} from 'react'
 import {View} from 'react-native'
 import PagerView, {
-  PagerViewOnPageScrollEvent,
+  PagerViewOnPageScrollEventData,
   PagerViewOnPageSelectedEvent,
-  PageScrollStateChangedNativeEvent,
+  PagerViewOnPageSelectedEventData,
+  PageScrollStateChangedNativeEventData,
 } from 'react-native-pager-view'
+import Animated, {
+  runOnJS,
+  SharedValue,
+  useEvent,
+  useHandler,
+  useSharedValue,
+} from 'react-native-reanimated'
 
-import {LogEvents} from '#/lib/statsig/events'
 import {atoms as a, native} from '#/alf'
 
 export type PageSelectedEvent = PagerViewOnPageSelectedEvent
 
 export interface PagerRef {
-  setPage: (
+  setPage: (index: number) => void
-    index: number,
-    reason: LogEvents['home:feedDisplayed']['reason'],
-  ) => void
 }
 
 export interface RenderTabBarFnProps {
   selectedPage: number
   onSelect?: (index: number) => void
   tabBarAnchor?: JSX.Element | null | undefined // Ignored on native.
+  dragProgress: SharedValue<number> // Ignored on web.
+  dragState: SharedValue<'idle' | 'dragging' | 'settling'> // Ignored on web.
 }
 export type RenderTabBarFn = (props: RenderTabBarFnProps) => JSX.Element
 
@@ -29,106 +35,74 @@ interface Props {
   initialPage?: number
   renderTabBar: RenderTabBarFn
   onPageSelected?: (index: number) => void
-  onPageSelecting?: (
-    index: number,
-    reason: LogEvents['home:feedDisplayed']['reason'],
-  ) => void
   onPageScrollStateChanged?: (
     scrollState: 'idle' | 'dragging' | 'settling',
   ) => void
   testID?: string
 }
+
+const AnimatedPagerView = Animated.createAnimatedComponent(PagerView)
+
 export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
   function PagerImpl(
     {
       children,
       initialPage = 0,
       renderTabBar,
-      onPageScrollStateChanged,
+      onPageScrollStateChanged: parentOnPageScrollStateChanged,
-      onPageSelected,
+      onPageSelected: parentOnPageSelected,
-      onPageSelecting,
       testID,
     }: React.PropsWithChildren<Props>,
     ref,
   ) {
-    const [selectedPage, setSelectedPage] = React.useState(0)
+    const [selectedPage, setSelectedPage] = React.useState(initialPage)
-    const lastOffset = React.useRef(0)
-    const lastDirection = React.useRef(0)
-    const scrollState = React.useRef('')
     const pagerView = React.useRef<PagerView>(null)
 
     React.useImperativeHandle(ref, () => ({
-      setPage: (
+      setPage: (index: number) => {
-        index: number,
-        reason: LogEvents['home:feedDisplayed']['reason'],
-      ) => {
         pagerView.current?.setPage(index)
-        onPageSelecting?.(index, reason)
       },
     }))
 
-    const onPageSelectedInner = React.useCallback(
+    const onPageSelectedJSThread = React.useCallback(
-      (e: PageSelectedEvent) => {
+      (nextPosition: number) => {
-        setSelectedPage(e.nativeEvent.position)
+        setSelectedPage(nextPosition)
-        onPageSelected?.(e.nativeEvent.position)
+        parentOnPageSelected?.(nextPosition)
       },
-      [setSelectedPage, onPageSelected],
+      [setSelectedPage, parentOnPageSelected],
-    )
-
-    const onPageScroll = React.useCallback(
-      (e: PagerViewOnPageScrollEvent) => {
-        const {position, offset} = e.nativeEvent
-        if (offset === 0) {
-          // offset hits 0 in some awkward spots so we ignore it
-          return
-        }
-        // NOTE
-        // we want to call `onPageSelecting` as soon as the scroll-gesture
-        // enters the "settling" phase, which means the user has released it
-        // we can't infer directionality from the scroll information, so we
-        // track the offset changes. if the offset delta is consistent with
-        // the existing direction during the settling phase, we can say for
-        // certain where it's going and can fire
-        // -prf
-        if (scrollState.current === 'settling') {
-          if (lastDirection.current === -1 && offset < lastOffset.current) {
-            onPageSelecting?.(position, 'pager-swipe')
-            setSelectedPage(position)
-            lastDirection.current = 0
-          } else if (
-            lastDirection.current === 1 &&
-            offset > lastOffset.current
-          ) {
-            onPageSelecting?.(position + 1, 'pager-swipe')
-            setSelectedPage(position + 1)
-            lastDirection.current = 0
-          }
-        } else {
-          if (offset < lastOffset.current) {
-            lastDirection.current = -1
-          } else if (offset > lastOffset.current) {
-            lastDirection.current = 1
-          }
-        }
-        lastOffset.current = offset
-      },
-      [lastOffset, lastDirection, onPageSelecting],
-    )
-
-    const handlePageScrollStateChanged = React.useCallback(
-      (e: PageScrollStateChangedNativeEvent) => {
-        scrollState.current = e.nativeEvent.pageScrollState
-        onPageScrollStateChanged?.(e.nativeEvent.pageScrollState)
-      },
-      [scrollState, onPageScrollStateChanged],
     )
 
     const onTabBarSelect = React.useCallback(
       (index: number) => {
         pagerView.current?.setPage(index)
-        onPageSelecting?.(index, 'tabbar-click')
       },
-      [pagerView, onPageSelecting],
+      [pagerView],
+    )
+
+    const dragState = useSharedValue<'idle' | 'settling' | 'dragging'>('idle')
+    const dragProgress = useSharedValue(selectedPage)
+    const handlePageScroll = usePagerHandlers(
+      {
+        onPageScroll(e: PagerViewOnPageScrollEventData) {
+          'worklet'
+          dragProgress.set(e.offset + e.position)
+        },
+        onPageScrollStateChanged(e: PageScrollStateChangedNativeEventData) {
+          'worklet'
+          if (dragState.get() === 'idle' && e.pageScrollState === 'settling') {
+            // This is a programmatic scroll on Android.
+            // Stay "idle" to match iOS and avoid confusing downstream code.
+            return
+          }
+          dragState.set(e.pageScrollState)
+          parentOnPageScrollStateChanged?.(e.pageScrollState)
+        },
+        onPageSelected(e: PagerViewOnPageSelectedEventData) {
+          'worklet'
+          runOnJS(onPageSelectedJSThread)(e.position)
+        },
+      },
+      [parentOnPageScrollStateChanged],
     )
 
     return (
@@ -136,17 +110,50 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
         {renderTabBar({
           selectedPage,
           onSelect: onTabBarSelect,
+          dragProgress,
+          dragState,
         })}
-        <PagerView
+        <AnimatedPagerView
           ref={pagerView}
           style={[a.flex_1]}
           initialPage={initialPage}
-          onPageScrollStateChanged={handlePageScrollStateChanged}
+          onPageScroll={handlePageScroll}>
-          onPageSelected={onPageSelectedInner}
-          onPageScroll={onPageScroll}>
           {children}
-        </PagerView>
+        </AnimatedPagerView>
       </View>
     )
   },
 )
+
+function usePagerHandlers(
+  handlers: {
+    onPageScroll: (e: PagerViewOnPageScrollEventData) => void
+    onPageScrollStateChanged: (e: PageScrollStateChangedNativeEventData) => void
+    onPageSelected: (e: PagerViewOnPageSelectedEventData) => void
+  },
+  dependencies: unknown[],
+) {
+  const {doDependenciesDiffer} = useHandler(handlers as any, dependencies)
+  const subscribeForEvents = [
+    'onPageScroll',
+    'onPageScrollStateChanged',
+    'onPageSelected',
+  ]
+  return useEvent(
+    event => {
+      'worklet'
+      const {onPageScroll, onPageScrollStateChanged, onPageSelected} = handlers
+      if (event.eventName.endsWith('onPageScroll')) {
+        onPageScroll(event as any as PagerViewOnPageScrollEventData)
+      } else if (event.eventName.endsWith('onPageScrollStateChanged')) {
+        onPageScrollStateChanged(
+          event as any as PageScrollStateChangedNativeEventData,
+        )
+      } else if (event.eventName.endsWith('onPageSelected')) {
+        onPageSelected(event as any as PagerViewOnPageSelectedEventData)
+      }
+    },
+    subscribeForEvents,
+    doDependenciesDiffer,
+  )
+}

src/view/com/pager/Pager.web.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import {View} from 'react-native'
 import {flushSync} from 'react-dom'
 
-import {LogEvents} from '#/lib/statsig/events'
 import {s} from '#/lib/styles'
 
 export interface RenderTabBarFnProps {
@@ -16,10 +15,6 @@ interface Props {
   initialPage?: number
   renderTabBar: RenderTabBarFn
   onPageSelected?: (index: number) => void
-  onPageSelecting?: (
-    index: number,
-    reason: LogEvents['home:feedDisplayed']['reason'],
-  ) => void
 }
 export const Pager = React.forwardRef(function PagerImpl(
   {
@@ -27,7 +22,6 @@ export const Pager = React.forwardRef(function PagerImpl(
     initialPage = 0,
     renderTabBar,
     onPageSelected,
-    onPageSelecting,
   }: React.PropsWithChildren<Props>,
   ref,
 ) {
@@ -36,16 +30,13 @@ export const Pager = React.forwardRef(function PagerImpl(
   const anchorRef = React.useRef(null)
 
   React.useImperativeHandle(ref, () => ({
-    setPage: (
+    setPage: (index: number) => {
-      index: number,
+      onTabBarSelect(index)
-      reason: LogEvents['home:feedDisplayed']['reason'],
-    ) => {
-      onTabBarSelect(index, reason)
     },
   }))
 
   const onTabBarSelect = React.useCallback(
-    (index: number, reason: LogEvents['home:feedDisplayed']['reason']) => {
+    (index: number) => {
       const scrollY = window.scrollY
       // We want to determine if the tabbar is already "sticking" at the top (in which
       // case we should preserve and restore scroll), or if it is somewhere below in the
@@ -64,7 +55,6 @@ export const Pager = React.forwardRef(function PagerImpl(
       flushSync(() => {
         setSelectedPage(index)
         onPageSelected?.(index)
-        onPageSelecting?.(index, reason)
       })
       if (isSticking) {
         const restoredScrollY = scrollYs.current[index]
@@ -75,7 +65,7 @@ export const Pager = React.forwardRef(function PagerImpl(
         }
       }
     },
-    [selectedPage, setSelectedPage, onPageSelected, onPageSelecting],
+    [selectedPage, setSelectedPage, onPageSelected],
   )
 
   return (
@@ -83,7 +73,7 @@ export const Pager = React.forwardRef(function PagerImpl(
       {renderTabBar({
         selectedPage,
         tabBarAnchor: <View ref={anchorRef} />,
-        onSelect: e => onTabBarSelect(e, 'tabbar-click'),
+        onSelect: e => onTabBarSelect(e),
       })}
       {React.Children.map(children, (child, i) => (
         <View style={selectedPage === i ? s.flex1 : s.hidden} key={`page-${i}`}>

src/view/com/pager/PagerWithHeader.tsx

@@ -97,6 +97,8 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
               scrollY={scrollY}
               testID={testID}
               allowHeaderOverScroll={allowHeaderOverScroll}
+              dragProgress={props.dragProgress}
+              dragState={props.dragState}
             />
           </PagerHeaderProvider>
         )
@@ -182,17 +184,12 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
       [onPageSelected, setCurrentPage],
     )
 
-    const onPageSelecting = React.useCallback((index: number) => {
-      setCurrentPage(index)
-    }, [])
-
     return (
       <Pager
         ref={ref}
         testID={testID}
         initialPage={initialPage}
         onPageSelected={onPageSelectedInner}
-        onPageSelecting={onPageSelecting}
         renderTabBar={renderTabBar}>
         {toArray(children)
           .filter(Boolean)
@@ -231,6 +228,8 @@ let PagerTabBar = ({
   onCurrentPageSelected,
   onSelect,
   allowHeaderOverScroll,
+  dragProgress,
+  dragState,
 }: {
   currentPage: number
   headerOnlyHeight: number
@@ -244,6 +243,8 @@ let PagerTabBar = ({
   onCurrentPageSelected?: (index: number) => void
   onSelect?: (index: number) => void
   allowHeaderOverScroll?: boolean
+  dragProgress: SharedValue<number>
+  dragState: SharedValue<'idle' | 'dragging' | 'settling'>
 }): React.ReactNode => {
   const headerTransform = useAnimatedStyle(() => {
     const translateY = Math.min(scrollY.get(), headerOnlyHeight) * -1
@@ -302,6 +303,8 @@ let PagerTabBar = ({
           selectedPage={currentPage}
           onSelect={onSelect}
           onPressSelected={onCurrentPageSelected}
+          dragProgress={dragProgress}
+          dragState={dragState}
         />
       </View>
     </Animated.View>

src/view/com/pager/PagerWithHeader.web.tsx

@@ -75,17 +75,12 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
       [onPageSelected, setCurrentPage],
     )
 
-    const onPageSelecting = React.useCallback((index: number) => {
-      setCurrentPage(index)
-    }, [])
-
     return (
       <Pager
         ref={ref}
         testID={testID}
         initialPage={initialPage}
         onPageSelected={onPageSelectedInner}
-        onPageSelecting={onPageSelecting}
         renderTabBar={renderTabBar}>
         {toArray(children)
           .filter(Boolean)
@@ -156,6 +151,8 @@ let PagerTabBar = ({
           selectedPage={currentPage}
           onSelect={onSelect}
           onPressSelected={onCurrentPageSelected}
+          dragProgress={undefined as any /* native-only */}
+          dragState={undefined as any /* native-only */}
         />
       </View>
     </>

src/view/com/pager/TabBar.tsx

@@ -1,120 +1,264 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useCallback} from 'react'
 import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'
+import Animated, {
+  interpolate,
+  runOnJS,
+  runOnUI,
+  scrollTo,
+  SharedValue,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated'
 
 import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {isNative} from '#/platform/detection'
 import {PressableWithHover} from '../util/PressableWithHover'
 import {Text} from '../util/text/Text'
-import {DraggableScrollView} from './DraggableScrollView'
 
 export interface TabBarProps {
   testID?: string
   selectedPage: number
   items: string[]
-  indicatorColor?: string
   onSelect?: (index: number) => void
   onPressSelected?: (index: number) => void
+  dragProgress: SharedValue<number>
+  dragState: SharedValue<'idle' | 'dragging' | 'settling'>
 }
 
-// How much of the previous/next item we're showing
+const ITEM_PADDING = 10
-// to give the user a hint there's more to scroll.
+const CONTENT_PADDING = 6
+// How much of the previous/next item we're requiring
+// when deciding whether to scroll into view on tap.
 const OFFSCREEN_ITEM_WIDTH = 20
 
 export function TabBar({
   testID,
   selectedPage,
   items,
-  indicatorColor,
   onSelect,
   onPressSelected,
+  dragProgress,
+  dragState,
 }: TabBarProps) {
   const pal = usePalette('default')
-  const scrollElRef = useRef<ScrollView>(null)
+  const scrollElRef = useAnimatedRef<ScrollView>()
-  const itemRefs = useRef<Array<Element>>([])
+  const isSyncingScroll = useSharedValue(true)
-  const [itemXs, setItemXs] = useState<number[]>([])
+  const didInitialScroll = useSharedValue(false)
-  const indicatorStyle = useMemo(
+  const contentSize = useSharedValue(0)
-    () => ({borderBottomColor: indicatorColor || pal.colors.link}),
+  const containerSize = useSharedValue(0)
-    [indicatorColor, pal],
+  const scrollX = useSharedValue(0)
-  )
+  const layouts = useSharedValue<{x: number; width: number}[]>([])
-  const {isDesktop, isTablet} = useWebMediaQueries()
+  const itemsLength = items.length
-  const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
 
-  useEffect(() => {
+  const scrollToOffsetJS = useCallback(
-    if (isNative) {
+    (x: number) => {
-      // On native, the primary interaction is swiping.
+      scrollElRef.current?.scrollTo({
-      // We adjust the scroll little by little on every tab change.
+        x,
-      // Scroll into view but keep the end of the previous item visible.
+        y: 0,
-      let x = itemXs[selectedPage] || 0
+        animated: true,
-      x = Math.max(0, x - OFFSCREEN_ITEM_WIDTH)
+      })
-      scrollElRef.current?.scrollTo({x})
+    },
-    } else {
+    [scrollElRef],
-      // On the web, the primary interaction is tapping.
+  )
-      // Scrolling under tap feels disorienting so only adjust the scroll offset
+
-      // when tapping on an item out of view--and we adjust by almost an entire page.
+  const indexToOffset = useCallback(
-      const parent = scrollElRef?.current?.getScrollableNode?.()
+    (index: number) => {
-      if (!parent) {
+      'worklet'
+      const layout = layouts.get()[index]
+      const availableSize = containerSize.get() - 2 * CONTENT_PADDING
+      if (!layout) {
+        // Should not happen, but fall back to equal sizes.
+        const offsetPerPage = contentSize.get() - availableSize
+        return (index / (itemsLength - 1)) * offsetPerPage
+      }
+      const freeSpace = availableSize - layout.width
+      const accumulatingOffset = interpolate(
+        index,
+        // Gradually shift every next item to the left so that the first item
+        // is positioned like "left: 0" but the last item is like "right: 0".
+        [0, itemsLength - 1],
+        [0, freeSpace],
+        'clamp',
+      )
+      return layout.x - accumulatingOffset
+    },
+    [itemsLength, contentSize, containerSize, layouts],
+  )
+
+  const progressToOffset = useCallback(
+    (progress: number) => {
+      'worklet'
+      return interpolate(
+        progress,
+        [Math.floor(progress), Math.ceil(progress)],
+        [
+          indexToOffset(Math.floor(progress)),
+          indexToOffset(Math.ceil(progress)),
+        ],
+        'clamp',
+      )
+    },
+    [indexToOffset],
+  )
+
+  // When we know the entire layout for the first time, scroll selection into view.
+  useAnimatedReaction(
+    () => {
+      return {
+        layoutsLength: layouts.get().length,
+        containerSizeValue: containerSize.get(),
+        contentSizeValue: contentSize.get(),
+      }
+    },
+    (nextLayouts, prevLayouts) => {
+      if (
+        nextLayouts.containerSizeValue !== prevLayouts?.containerSizeValue ||
+        nextLayouts.contentSizeValue !== prevLayouts?.contentSizeValue ||
+        nextLayouts.layoutsLength !== prevLayouts?.layoutsLength
+      ) {
+        if (
+          nextLayouts.containerSizeValue !== 0 &&
+          nextLayouts.contentSizeValue !== 0 &&
+          nextLayouts.layoutsLength === itemsLength &&
+          didInitialScroll.get() === false
+        ) {
+          didInitialScroll.set(true)
+          const progress = dragProgress.get()
+          const offset = progressToOffset(progress)
+          // It's unclear why we need to go back to JS here. It seems iOS-specific.
+          runOnJS(scrollToOffsetJS)(offset)
+        }
+      }
+    },
+  )
+
+  // When you swipe the pager, the tabbar should scroll automatically
+  // as you're dragging the page and then even during deceleration.
+  useAnimatedReaction(
+    () => dragProgress.get(),
+    (nextProgress, prevProgress) => {
+      if (
+        nextProgress !== prevProgress &&
+        dragState.value !== 'idle' &&
+        isSyncingScroll.get() === true
+      ) {
+        const offset = progressToOffset(nextProgress)
+        scrollTo(scrollElRef, offset, 0, false)
         return
       }
-      const parentRect = parent.getBoundingClientRect()
+    },
-      if (!parentRect) {
+  )
+
+  // If you manually scrolled the tabbar, we'll mark the scroll as unsynced.
+  // We'll re-sync it here (with an animation) if you interact with the pager again.
+  // From that point on, it'll remain synced again (unless you scroll the tabbar again).
+  useAnimatedReaction(
+    () => dragState.value,
+    (nextDragState, prevDragState) => {
+      if (
+        nextDragState !== prevDragState &&
+        nextDragState === 'idle' &&
+        isSyncingScroll.get() === false
+      ) {
+        const progress = dragProgress.get()
+        const offset = progressToOffset(progress)
+        scrollTo(scrollElRef, offset, 0, true)
+        isSyncingScroll.set(true)
+      }
+    },
+  )
+
+  // When you press on the item, we'll scroll into view -- unless you previously
+  // have scrolled the tabbar manually, in which case it'll re-sync on next press.
+  const onPressUIThread = useCallback(
+    (index: number) => {
+      'worklet'
+      const itemLayout = layouts.get()[index]
+      if (!itemLayout) {
+        // Should not happen.
         return
       }
-      const {
+      const leftEdge = itemLayout.x - OFFSCREEN_ITEM_WIDTH
-        left: parentLeft,
+      const rightEdge = itemLayout.x + itemLayout.width + OFFSCREEN_ITEM_WIDTH
-        right: parentRight,
+      const scrollLeft = scrollX.get()
-        width: parentWidth,
+      const scrollRight = scrollLeft + containerSize.get()
-      } = parentRect
+      const scrollIntoView = leftEdge < scrollLeft || rightEdge > scrollRight
-      const child = itemRefs.current[selectedPage]
+      if (isSyncingScroll.get() === true || scrollIntoView) {
-      if (!child) {
+        const offset = progressToOffset(index)
-        return
+        scrollTo(scrollElRef, offset, 0, true)
       }
-      const childRect = child.getBoundingClientRect?.()
+      isSyncingScroll.set(true)
-      if (!childRect) {
+    },
-        return
+    [
-      }
+      isSyncingScroll,
-      const {left: childLeft, right: childRight, width: childWidth} = childRect
+      scrollElRef,
-      let dx = 0
+      scrollX,
-      if (childRight >= parentRight) {
+      progressToOffset,
-        dx += childRight - parentRight
+      containerSize,
-        dx += parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
+      layouts,
-      } else if (childLeft <= parentLeft) {
+    ],
-        dx -= parentLeft - childLeft
+  )
-        dx -= parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
+
-      }
+  const onItemLayout = useCallback(
-      let x = parent.scrollLeft + dx
+    (i: number, layout: {x: number; width: number}) => {
-      x = Math.max(0, x)
+      'worklet'
-      x = Math.min(x, parent.scrollWidth - parentWidth)
+      layouts.modify(ls => {
-      if (dx !== 0) {
+        ls[i] = layout
-        parent.scroll({
+        return ls
-          left: x,
+      })
-          behavior: 'smooth',
+    },
-        })
+    [layouts],
+  )
+
+  const indicatorStyle = useAnimatedStyle(() => {
+    if (!_WORKLET) {
+      return {opacity: 0}
+    }
+    const layoutsValue = layouts.get()
+    if (
+      layoutsValue.length !== itemsLength ||
+      layoutsValue.some(l => l === undefined)
+    ) {
+      return {
+        opacity: 0,
       }
     }
-  }, [scrollElRef, itemXs, selectedPage, styles])
+    if (layoutsValue.length === 1) {
+      return {opacity: 1}
+    }
+    return {
+      opacity: 1,
+      transform: [
+        {
+          translateX: interpolate(
+            dragProgress.get(),
+            layoutsValue.map((l, i) => i),
+            layoutsValue.map(l => l.x + l.width / 2 - contentSize.get() / 2),
+          ),
+        },
+        {
+          scaleX: interpolate(
+            dragProgress.get(),
+            layoutsValue.map((l, i) => i),
+            layoutsValue.map(
+              l => (l.width - ITEM_PADDING * 2) / contentSize.get(),
+            ),
+          ),
+        },
+      ],
+    }
+  })
 
   const onPressItem = useCallback(
     (index: number) => {
+      runOnUI(onPressUIThread)(index)
       onSelect?.(index)
       if (index === selectedPage) {
         onPressSelected?.(index)
       }
     },
-    [onSelect, selectedPage, onPressSelected],
+    [onSelect, selectedPage, onPressSelected, onPressUIThread],
-  )
-
-  // 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 (
@@ -122,84 +266,131 @@ export function TabBar({
       testID={testID}
       style={[pal.view, styles.outer]}
       accessibilityRole="tablist">
-      <DraggableScrollView
+      <ScrollView
         testID={`${testID}-selector`}
         horizontal={true}
         showsHorizontalScrollIndicator={false}
         ref={scrollElRef}
-        contentContainerStyle={styles.contentContainer}>
+        contentContainerStyle={styles.contentContainer}
-        {items.map((item, i) => {
+        onLayout={e => {
-          const selected = i === selectedPage
+          containerSize.set(e.nativeEvent.layout.width)
-          return (
+        }}
-            <PressableWithHover
+        onScrollBeginDrag={() => {
-              testID={`${testID}-selector-${i}`}
+          // Remember that you've manually messed with the tabbar scroll.
-              key={`${item}-${i}`}
+          // This will disable auto-adjustment until after next pager swipe or item tap.
-              ref={node => (itemRefs.current[i] = node as any)}
+          isSyncingScroll.set(false)
-              onLayout={e => onItemLayout(e, i)}
+        }}
-              style={styles.item}
+        onScroll={e => {
-              hoverStyle={pal.viewLight}
+          scrollX.value = Math.round(e.nativeEvent.contentOffset.x)
-              onPress={() => onPressItem(i)}
+        }}>
-              accessibilityRole="tab">
+        <Animated.View
-              <View style={[styles.itemInner, selected && indicatorStyle]}>
+          onLayout={e => {
-                <Text
+            contentSize.set(e.nativeEvent.layout.width)
-                  emoji
+          }}
-                  type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
+          style={{flexDirection: 'row'}}>
-                  testID={testID ? `${testID}-${item}` : undefined}
+          {items.map((item, i) => {
-                  style={[
+            return (
-                    selected ? pal.text : pal.textLight,
+              <TabBarItem
-                    {lineHeight: 20},
+                key={i}
-                  ]}>
+                index={i}
-                  {item}
+                testID={testID}
-                </Text>
+                dragProgress={dragProgress}
-              </View>
+                item={item}
-            </PressableWithHover>
+                onPressItem={onPressItem}
-          )
+                onItemLayout={onItemLayout}
-        })}
+              />
-      </DraggableScrollView>
+            )
+          })}
+          <Animated.View
+            style={[
+              indicatorStyle,
+              {
+                position: 'absolute',
+                left: 0,
+                bottom: 0,
+                right: 0,
+                borderBottomWidth: 3,
+                borderColor: pal.link.color,
+              },
+            ]}
+          />
+        </Animated.View>
+      </ScrollView>
       <View style={[pal.border, styles.outerBottomBorder]} />
     </View>
   )
 }
 
-const desktopStyles = StyleSheet.create({
+function TabBarItem({
-  outer: {
+  index,
-    flexDirection: 'row',
+  testID,
-    width: 598,
+  dragProgress,
-  },
+  item,
-  contentContainer: {
+  onPressItem,
-    paddingHorizontal: 0,
+  onItemLayout,
-    backgroundColor: 'transparent',
+}: {
-  },
+  index: number
-  item: {
+  testID: string | undefined
-    paddingTop: 14,
+  dragProgress: SharedValue<number>
-    paddingHorizontal: 14,
+  item: string
-    justifyContent: 'center',
+  onPressItem: (index: number) => void
-  },
+  onItemLayout: (index: number, layout: {x: number; width: number}) => void
-  itemInner: {
+}) {
-    paddingBottom: 12,
+  const pal = usePalette('default')
-    borderBottomWidth: 3,
+  const style = useAnimatedStyle(() => {
-    borderBottomColor: 'transparent',
+    if (!_WORKLET) {
-  },
+      return {opacity: 0.7}
-  outerBottomBorder: {
+    }
-    position: 'absolute',
+    return {
-    left: 0,
+      opacity: interpolate(
-    right: 0,
+        dragProgress.get(),
-    top: '100%',
+        [index - 1, index, index + 1],
-    borderBottomWidth: StyleSheet.hairlineWidth,
+        [0.7, 1, 0.7],
-  },
+        'clamp',
-})
+      ),
+    }
+  })
 
-const mobileStyles = StyleSheet.create({
+  const handleLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      runOnUI(onItemLayout)(index, e.nativeEvent.layout)
+    },
+    [index, onItemLayout],
+  )
+
+  return (
+    <View onLayout={handleLayout}>
+      <PressableWithHover
+        testID={`${testID}-selector-${index}`}
+        style={styles.item}
+        hoverStyle={pal.viewLight}
+        onPress={() => onPressItem(index)}
+        accessibilityRole="tab">
+        <Animated.View style={[style, styles.itemInner]}>
+          <Text
+            emoji
+            type="lg-bold"
+            testID={testID ? `${testID}-${item}` : undefined}
+            style={[pal.text, {lineHeight: 20}]}>
+            {item}
+          </Text>
+        </Animated.View>
+      </PressableWithHover>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
   outer: {
     flexDirection: 'row',
   },
   contentContainer: {
     backgroundColor: 'transparent',
-    paddingHorizontal: 6,
+    paddingHorizontal: CONTENT_PADDING,
   },
   item: {
     paddingTop: 10,
-    paddingHorizontal: 10,
+    paddingHorizontal: ITEM_PADDING,
     justifyContent: 'center',
   },
   itemInner: {

src/view/com/pager/TabBar.web.tsx

@@ -0,0 +1,192 @@
+import {useCallback, useEffect, useMemo, useRef} from 'react'
+import {ScrollView, StyleSheet, View} from 'react-native'
+
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {PressableWithHover} from '../util/PressableWithHover'
+import {Text} from '../util/text/Text'
+import {DraggableScrollView} from './DraggableScrollView'
+
+export interface TabBarProps {
+  testID?: string
+  selectedPage: number
+  items: string[]
+  indicatorColor?: string
+  onSelect?: (index: number) => void
+  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,
+  items,
+  indicatorColor,
+  onSelect,
+  onPressSelected,
+}: TabBarProps) {
+  const pal = usePalette('default')
+  const scrollElRef = useRef<ScrollView>(null)
+  const itemRefs = useRef<Array<Element>>([])
+  const indicatorStyle = useMemo(
+    () => ({borderBottomColor: indicatorColor || pal.colors.link}),
+    [indicatorColor, pal],
+  )
+  const {isDesktop, isTablet} = useWebMediaQueries()
+  const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
+
+  useEffect(() => {
+    // On the web, the primary interaction is tapping.
+    // Scrolling under tap feels disorienting so only adjust the scroll offset
+    // when tapping on an item out of view--and we adjust by almost an entire page.
+    const parent = scrollElRef?.current?.getScrollableNode?.()
+    if (!parent) {
+      return
+    }
+    const parentRect = parent.getBoundingClientRect()
+    if (!parentRect) {
+      return
+    }
+    const {
+      left: parentLeft,
+      right: parentRight,
+      width: parentWidth,
+    } = parentRect
+    const child = itemRefs.current[selectedPage]
+    if (!child) {
+      return
+    }
+    const childRect = child.getBoundingClientRect?.()
+    if (!childRect) {
+      return
+    }
+    const {left: childLeft, right: childRight, width: childWidth} = childRect
+    let dx = 0
+    if (childRight >= parentRight) {
+      dx += childRight - parentRight
+      dx += parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
+    } else if (childLeft <= parentLeft) {
+      dx -= parentLeft - childLeft
+      dx -= parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
+    }
+    let x = parent.scrollLeft + dx
+    x = Math.max(0, x)
+    x = Math.min(x, parent.scrollWidth - parentWidth)
+    if (dx !== 0) {
+      parent.scroll({
+        left: x,
+        behavior: 'smooth',
+      })
+    }
+  }, [scrollElRef, selectedPage, styles])
+
+  const onPressItem = useCallback(
+    (index: number) => {
+      onSelect?.(index)
+      if (index === selectedPage) {
+        onPressSelected?.(index)
+      }
+    },
+    [onSelect, selectedPage, onPressSelected],
+  )
+
+  return (
+    <View
+      testID={testID}
+      style={[pal.view, styles.outer]}
+      accessibilityRole="tablist">
+      <DraggableScrollView
+        testID={`${testID}-selector`}
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
+        ref={scrollElRef}
+        contentContainerStyle={styles.contentContainer}>
+        {items.map((item, i) => {
+          const selected = i === selectedPage
+          return (
+            <PressableWithHover
+              testID={`${testID}-selector-${i}`}
+              key={`${item}-${i}`}
+              ref={node => (itemRefs.current[i] = node as any)}
+              style={styles.item}
+              hoverStyle={pal.viewLight}
+              onPress={() => onPressItem(i)}
+              accessibilityRole="tab">
+              <View style={[styles.itemInner, selected && indicatorStyle]}>
+                <Text
+                  emoji
+                  type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
+                  testID={testID ? `${testID}-${item}` : undefined}
+                  style={[
+                    selected ? pal.text : pal.textLight,
+                    {lineHeight: 20},
+                  ]}>
+                  {item}
+                </Text>
+              </View>
+            </PressableWithHover>
+          )
+        })}
+      </DraggableScrollView>
+      <View style={[pal.border, styles.outerBottomBorder]} />
+    </View>
+  )
+}
+
+const desktopStyles = StyleSheet.create({
+  outer: {
+    flexDirection: 'row',
+    width: 598,
+  },
+  contentContainer: {
+    paddingHorizontal: 0,
+    backgroundColor: 'transparent',
+  },
+  item: {
+    paddingTop: 14,
+    paddingHorizontal: 14,
+    justifyContent: 'center',
+  },
+  itemInner: {
+    paddingBottom: 12,
+    borderBottomWidth: 3,
+    borderBottomColor: 'transparent',
+  },
+  outerBottomBorder: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: '100%',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+})
+
+const mobileStyles = StyleSheet.create({
+  outer: {
+    flexDirection: 'row',
+  },
+  contentContainer: {
+    backgroundColor: 'transparent',
+    paddingHorizontal: 6,
+  },
+  item: {
+    paddingTop: 10,
+    paddingHorizontal: 10,
+    justifyContent: 'center',
+  },
+  itemInner: {
+    paddingBottom: 10,
+    borderBottomWidth: 3,
+    borderBottomColor: 'transparent',
+  },
+  outerBottomBorder: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: '100%',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+})

src/view/screens/Home.tsx

@@ -11,7 +11,7 @@ import {
   HomeTabNavigatorParams,
   NativeStackScreenProps,
 } from '#/lib/routes/types'
-import {logEvent, LogEvents} from '#/lib/statsig/statsig'
+import {logEvent} from '#/lib/statsig/statsig'
 import {isWeb} from '#/platform/detection'
 import {emitSoftReset} from '#/state/events'
 import {SavedFeedSourceInfo, usePinnedFeedsInfos} from '#/state/queries/feed'
@@ -121,7 +121,7 @@ function HomeScreenReady({
     // This is supposed to only happen on the web when you use the right nav.
     if (selectedIndex !== lastPagerReportedIndexRef.current) {
       lastPagerReportedIndexRef.current = selectedIndex
-      pagerRef.current?.setPage(selectedIndex, 'desktop-sidebar-click')
+      pagerRef.current?.setPage(selectedIndex)
     }
   }, [selectedIndex])
 
@@ -156,23 +156,17 @@ function HomeScreenReady({
       setMinimalShellMode(false)
       setDrawerSwipeDisabled(index > 0)
       const feed = allFeeds[index]
-      setSelectedFeed(feed)
+      // Mutate the ref before setting state to avoid the imperative syncing effect
+      // above from starting a loop on Android when swiping back and forth.
       lastPagerReportedIndexRef.current = index
-    },
+      setSelectedFeed(feed)
-    [setDrawerSwipeDisabled, setSelectedFeed, setMinimalShellMode, allFeeds],
-  )
-
-  const onPageSelecting = React.useCallback(
-    (index: number, reason: LogEvents['home:feedDisplayed']['reason']) => {
-      const feed = allFeeds[index]
       logEvent('home:feedDisplayed', {
         index,
         feedType: feed.split('|')[0],
         feedUrl: feed,
-        reason,
       })
     },
-    [allFeeds],
+    [setDrawerSwipeDisabled, setSelectedFeed, setMinimalShellMode, allFeeds],
   )
 
   const onPressSelected = React.useCallback(() => {
@@ -181,6 +175,7 @@ function HomeScreenReady({
 
   const onPageScrollStateChanged = React.useCallback(
     (state: 'idle' | 'dragging' | 'settling') => {
+      'worklet'
       if (state === 'dragging') {
         setMinimalShellMode(false)
       }
@@ -228,7 +223,6 @@ function HomeScreenReady({
       ref={pagerRef}
       testID="homeScreen"
       initialPage={selectedIndex}
-      onPageSelecting={onPageSelecting}
       onPageSelected={onPageSelected}
       onPageScrollStateChanged={onPageScrollStateChanged}
       renderTabBar={renderTabBar}>