[Nicer Tabs] New native pager (#6868)

* Remove tab bar autoscroll

This will be replaced by a different mechanism.

* Track pager drag gesture in a worklet

* Track pager state change in a worklet

* Track offset relative to current page

* Sync scroll to swipe

* Extract TabBarItem

* Sync scroll to swipe properly

* Implement all interactions

* Clarify more hacks

* Simplify the implementation

I was trying to be too smart and this was causing the current page event to lag behind if you continuously drag. Better to let the library do its job.

* Interpolate the indicator

* Fix an infinite swipe loop

* Add TODO

* Animate header color

* Respect initial page

* Keep layouts in a shared value

* Fix profile and types

* Fast path for initial styles

* Scroll to initial

* Factor out a helper

* Fix positioning

* Scroll into view on tap if needed

* Divide free space proportionally

* Scroll into view more aggressively

* Fix corner case

* Ignore spurious event on iOS

* Simplify the condition

Due to RN onLayout event ordering, we know that by now we'll have container and content sizes already.

* Change boolean state to enum

* Better syncing heuristic

* Rm extra return

1 files changed, 4 insertions, 1 deletions

diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 7bd0b6e57..1218a5ba0 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -156,8 +156,10 @@ 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)
       logEvent('home:feedDisplayed', {
         index,
         feedType: feed.split('|')[0],
@@ -173,6 +175,7 @@ function HomeScreenReady({
 
   const onPageScrollStateChanged = React.useCallback(
     (state: 'idle' | 'dragging' | 'settling') => {
+      'worklet'
       if (state === 'dragging') {
         setMinimalShellMode(false)
       }