fix: initial scroll position if starting with undefined header height

PedroBern · May 9, 2022 · 9378af6 · 9378af6
1 parent 62f52b5
commit 9378af6
Showing 1 changed file with 23 additions and 9 deletions.
diff --git a/src/Container.tsx b/src/Container.tsx
@@ -165,6 +165,18 @@ export const Container = React.memo(
         )
       }, [afterRender, tabNamesArray])
 
+      const resyncTabScroll = () => {
+        'worklet'
+        for (const name of tabNamesArray) {
+          scrollToImpl(
+            refMap[name],
+            0,
+            scrollYCurrent.value - contentInset.value,
+            false
+          )
+        }
+      }
+
       // the purpose of this is to scroll to the proper position if dynamic tabs are changing
       useAnimatedReaction(
         () => {
@@ -173,15 +185,7 @@ export const Container = React.memo(
         (trigger) => {
           if (trigger) {
             afterRender.value = 0
-            tabNamesArray.forEach((name) => {
-              'worklet'
-              scrollToImpl(
-                refMap[name],
-                0,
-                scrollY.value[index.value] - contentInset.value,
-                false
-              )
-            })
+            resyncTabScroll()
           }
         },
         [tabNamesArray, refMap, afterRender, contentInset]
@@ -233,6 +237,16 @@ export const Container = React.memo(
         []
       )
 
+      useAnimatedReaction(
+        () => headerHeight.value,
+        (_current, prev) => {
+          if (prev === undefined) {
+            // sync scroll if we started with undefined header height
+            resyncTabScroll()
+          }
+        }
+      )
+
       const headerTranslateY = useDerivedValue(() => {
         return revealHeaderOnScroll
           ? -accDiffClamp.value