fix: initial scroll position sometimes wrong on iOS

PedroBern · May 19, 2022 · e349941 · e349941
1 parent f3e90b9
commit e349941
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/src/FlatList.tsx b/src/FlatList.tsx
@@ -6,6 +6,7 @@ import {
   useAfterMountEffect,
   useChainCallback,
   useCollapsibleStyle,
+  useConvertAnimatedToValue,
   useScrollHandlerY,
   useSharedAnimatedRef,
   useTabNameContext,
@@ -77,9 +78,17 @@ function FlatListImpl<R>(
     [progressViewOffset, refreshControl]
   )
 
-  const memoContentInset = React.useMemo(() => ({ top: contentInset.value }), [
-    contentInset.value,
+  const contentInsetValue = useConvertAnimatedToValue(contentInset)
+
+  const memoContentInset = React.useMemo(() => ({ top: contentInsetValue }), [
+    contentInsetValue,
   ])
+
+  const memoContentOffset = React.useMemo(
+    () => ({ x: 0, y: -contentInsetValue }),
+    [contentInsetValue]
+  )
+
   const memoContentContainerStyle = React.useMemo(
     () => [
       _contentContainerStyle,
@@ -103,6 +112,7 @@ 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
@@ -6,6 +6,7 @@ import {
   useAfterMountEffect,
   useChainCallback,
   useCollapsibleStyle,
+  useConvertAnimatedToValue,
   useScrollHandlerY,
   useSharedAnimatedRef,
   useTabNameContext,
@@ -89,10 +90,17 @@ export const ScrollView = React.forwardRef<
       [progressViewOffset, refreshControl]
     )
 
-    const memoContentInset = React.useMemo(
-      () => ({ top: contentInset.value }),
-      [contentInset.value]
+    const contentInsetValue = useConvertAnimatedToValue(contentInset)
+
+    const memoContentInset = React.useMemo(() => ({ top: contentInsetValue }), [
+      contentInsetValue,
+    ])
+
+    const memoContentOffset = React.useMemo(
+      () => ({ x: 0, y: -contentInsetValue }),
+      [contentInsetValue]
     )
+
     const memoContentContainerStyle = React.useMemo(
       () => [
         _contentContainerStyle,
@@ -114,6 +122,7 @@ 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
@@ -6,6 +6,7 @@ import {
   useAfterMountEffect,
   useChainCallback,
   useCollapsibleStyle,
+  useConvertAnimatedToValue,
   useScrollHandlerY,
   useSharedAnimatedRef,
   useTabNameContext,
@@ -78,9 +79,17 @@ function SectionListImpl<R>(
     [progressViewOffset, refreshControl]
   )
 
-  const memoContentInset = React.useMemo(() => ({ top: contentInset.value }), [
-    contentInset.value,
+  const contentInsetValue = useConvertAnimatedToValue(contentInset)
+
+  const memoContentInset = React.useMemo(() => ({ top: contentInsetValue }), [
+    contentInsetValue,
   ])
+
+  const memoContentOffset = React.useMemo(
+    () => ({ x: 0, y: -contentInsetValue }),
+    [contentInsetValue]
+  )
+
   const memoContentContainerStyle = React.useMemo(
     () => [
       _contentContainerStyle,
@@ -104,6 +113,7 @@ 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