From 14b0bed36da10b8af8700a6e00a1740ad69dfea7 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 17 Oct 2023 21:28:54 +0100
Subject: [PATCH] Fix container calculation for web resize

---
 src/view/com/pager/TabBar.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index 8a38358da7..2f4ab2507c 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -1,6 +1,6 @@
 import React, {useMemo, useCallback, useEffect, useState} from 'react'
 import Animated, {useAnimatedReaction, useAnimatedRef, useAnimatedStyle, useDerivedValue, useSharedValue, measure, interpolate, interpolateColor, scrollTo, withSpring} from 'react-native-reanimated'
-import {Dimensions, StyleSheet, View, ScrollView, useWindowDimensions} from 'react-native'
+import {Dimensions, StyleSheet, View, ScrollView} from 'react-native'
 import {PressableWithHover} from '../util/PressableWithHover'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useTheme} from 'lib/ThemeContext'
@@ -28,8 +28,8 @@ export function TabBar({
   onPressSelected,
 }: TabBarProps) {
   const pal = usePalette('default')
-  const {width: windowWidth} = useWindowDimensions()
   const contentSize = useSharedValue(0)
+  const containerSize = useSharedValue(0)
   const scrollElRef = useAnimatedRef(null)
   const {isDesktop, isTablet} = useWebMediaQueries()
   const [layouts, setLayouts] = useState([])
@@ -54,7 +54,7 @@ export function TabBar({
   const onPressItem = (index: number) => {
     if (!didScroll.value) {
       scrollElRef.current.scrollTo({
-        x: scrollX.value + ((index - selectedPage) / (items.length - 1)) * (contentSize.value - windowWidth),
+        x: scrollX.value + ((index - selectedPage) / (items.length - 1)) * (contentSize.value - containerSize.value),
         animated: true
       })
     }
@@ -66,7 +66,7 @@ export function TabBar({
   };
 
   useAnimatedReaction(() => {
-    return (dragProgress.value / (items.length - 1)) * (contentSize.value - windowWidth)
+    return (dragProgress.value / (items.length - 1)) * (contentSize.value - containerSize.value)
   }, (nextX, prevX) => {
     if (prevX !== nextX && dragState.value !== 'idle' && !didScroll.value) {
       scrollTo(scrollElRef, nextX, 0, false);
@@ -77,7 +77,7 @@ export function TabBar({
     return dragState.value
   }, (nextDragState, prevDragState) => {
     if (nextDragState === 'idle' && nextDragState !== prevDragState) {
-      const nextX = (dragProgress.value / (items.length - 1)) * (contentSize.value - windowWidth)
+      const nextX = (dragProgress.value / (items.length - 1)) * (contentSize.value - containerSize.value)
       scrollTo(scrollElRef, nextX, 0, true);
       didScroll.value = false
     }
@@ -109,6 +109,9 @@ export function TabBar({
         onScrollBeginDrag={e => {
           didScroll.value = true
         }}
+        onLayout={e => {
+          containerSize.value = e.nativeEvent.layout.width
+        }}
         onScroll={e => {
           scrollX.value = Math.round(e.nativeEvent.contentOffset.x)
         }}