fix(ios): scroll sync issues between tabs

PedroBern · May 5, 2022 · 14dfc79 · 14dfc79
1 parent ab57352
commit 14dfc79
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 33 deletions.
diff --git a/src/FlatList.tsx b/src/FlatList.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { FlatList as RNFlatList, FlatListProps } from 'react-native'
 
-import { AnimatedFlatList, IS_IOS } from './helpers'
+import { AnimatedFlatList } from './helpers'
 import {
   useAfterMountEffect,
   useChainCallback,
@@ -36,7 +36,7 @@ function FlatListImpl<R>(
   passRef: React.Ref<RNFlatList>
 ): React.ReactElement {
   const name = useTabNameContext()
-  const { setRef, contentInset, scrollYCurrent } = useTabsContext()
+  const { setRef, contentInset } = useTabsContext()
   const ref = useSharedAnimatedRef<RNFlatList<unknown>>(passRef)
 
   const { scrollHandler, enable } = useScrollHandlerY(name)
@@ -76,13 +76,7 @@ function FlatListImpl<R>(
       }),
     [progressViewOffset, refreshControl]
   )
-  const memoContentOffset = React.useMemo(
-    () => ({
-      y: IS_IOS ? -contentInset.value + scrollYCurrent.value : 0,
-      x: 0,
-    }),
-    [contentInset.value, scrollYCurrent.value]
-  )
+
   const memoContentInset = React.useMemo(() => ({ top: contentInset.value }), [
     contentInset.value,
   ])
@@ -109,7 +103,6 @@ function FlatListImpl<R>(
       onContentSizeChange={scrollContentSizeChangeHandlers}
       scrollEventThrottle={16}
       contentInset={memoContentInset}
-      contentOffset={memoContentOffset}
       automaticallyAdjustContentInsets={false}
       refreshControl={memoRefreshControl}
       // workaround for: https://github.com/software-mansion/react-native-reanimated/issues/2735

diff --git a/src/ScrollView.tsx b/src/ScrollView.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import { ScrollViewProps, ScrollView as RNScrollView } from 'react-native'
 import Animated from 'react-native-reanimated'
 
-import { IS_IOS } from './helpers'
 import {
   useAfterMountEffect,
   useChainCallback,
@@ -52,7 +51,7 @@ export const ScrollView = React.forwardRef<
   ) => {
     const name = useTabNameContext()
     const ref = useSharedAnimatedRef<RNScrollView>(passRef)
-    const { setRef, contentInset, scrollYCurrent } = useTabsContext()
+    const { setRef, contentInset } = useTabsContext()
     const {
       style: _style,
       contentContainerStyle: _contentContainerStyle,
@@ -89,13 +88,7 @@ export const ScrollView = React.forwardRef<
         }),
       [progressViewOffset, refreshControl]
     )
-    const memoContentOffset = React.useMemo(
-      () => ({
-        y: IS_IOS ? -contentInset.value + scrollYCurrent.value : 0,
-        x: 0,
-      }),
-      [contentInset.value, scrollYCurrent.value]
-    )
+
     const memoContentInset = React.useMemo(
       () => ({ top: contentInset.value }),
       [contentInset.value]
@@ -121,7 +114,6 @@ export const ScrollView = React.forwardRef<
         onContentSizeChange={scrollContentSizeChangeHandlers}
         scrollEventThrottle={16}
         contentInset={memoContentInset}
-        contentOffset={memoContentOffset}
         automaticallyAdjustContentInsets={false}
         refreshControl={memoRefreshControl}
         // workaround for: https://github.com/software-mansion/react-native-reanimated/issues/2735

diff --git a/src/SectionList.tsx b/src/SectionList.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { SectionList as RNSectionList, SectionListProps } from 'react-native'
 
-import { AnimatedSectionList, IS_IOS } from './helpers'
+import { AnimatedSectionList } from './helpers'
 import {
   useAfterMountEffect,
   useChainCallback,
@@ -37,7 +37,7 @@ function SectionListImpl<R>(
   passRef: React.Ref<RNSectionList>
 ): React.ReactElement {
   const name = useTabNameContext()
-  const { setRef, contentInset, scrollYCurrent } = useTabsContext()
+  const { setRef, contentInset } = useTabsContext()
   const ref = useSharedAnimatedRef<RNSectionList<unknown>>(passRef)
 
   const { scrollHandler, enable } = useScrollHandlerY(name)
@@ -77,13 +77,7 @@ function SectionListImpl<R>(
       }),
     [progressViewOffset, refreshControl]
   )
-  const memoContentOffset = React.useMemo(
-    () => ({
-      y: IS_IOS ? -contentInset.value + scrollYCurrent.value : 0,
-      x: 0,
-    }),
-    [contentInset.value, scrollYCurrent.value]
-  )
+
   const memoContentInset = React.useMemo(() => ({ top: contentInset.value }), [
     contentInset.value,
   ])
@@ -110,7 +104,6 @@ function SectionListImpl<R>(
       onContentSizeChange={scrollContentSizeChangeHandlers}
       scrollEventThrottle={16}
       contentInset={memoContentInset}
-      contentOffset={memoContentOffset}
       automaticallyAdjustContentInsets={false}
       refreshControl={memoRefreshControl}
       // workaround for: https://github.com/software-mansion/react-native-reanimated/issues/2735

diff --git a/src/hooks.tsx b/src/hooks.tsx
@@ -226,9 +226,9 @@ export function useScroller<T extends RefComponent>() {
       'worklet'
       if (!ref) return
       //! this is left here on purpose to ease troubleshooting (uncomment when necessary)
-      // console.log(
-      //   `${_debugKey}, y: ${y}, y adjusted: ${y - contentInset.value}`
-      // )
+      console.log(
+        `${_debugKey}, y: ${y}, y adjusted: ${y - contentInset.value}`
+      )
       scrollToImpl(ref, x, y - contentInset.value, animated)
     },
     [contentInset]