fix: reset scrollable offset when its size change (#301)

gorhom · Feb 20, 2021 · bf7a255 · bf7a255
1 parent 10be2f1
commit bf7a255
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 0 deletions.
diff --git a/src/components/flatList/FlatList.tsx b/src/components/flatList/FlatList.tsx
@@ -41,6 +41,7 @@ const BottomSheetFlatListComponent = forwardRef(
     const {
       scrollableRef,
       handleOnBeginDragEvent,
+      handleOnContentSizeChange,
       handleSettingScrollable,
     } = useScrollableInternal('FlatList');
     const {
@@ -74,6 +75,7 @@ const BottomSheetFlatListComponent = forwardRef(
             bounces={false}
             decelerationRate={decelerationRate}
             scrollEventThrottle={16}
+            onContentSizeChange={handleOnContentSizeChange}
             onScrollBeginDrag={handleOnBeginDragEvent}
           />
         </NativeViewGestureHandler>

diff --git a/src/components/scrollView/ScrollView.tsx b/src/components/scrollView/ScrollView.tsx
@@ -41,6 +41,7 @@ const BottomSheetScrollViewComponent = forwardRef(
     const {
       scrollableRef,
       handleOnBeginDragEvent,
+      handleOnContentSizeChange,
       handleSettingScrollable,
     } = useScrollableInternal('ScrollView');
     const {
@@ -72,6 +73,7 @@ const BottomSheetScrollViewComponent = forwardRef(
             bounces={false}
             decelerationRate={decelerationRate}
             scrollEventThrottle={16}
+            onContentSizeChange={handleOnContentSizeChange}
             onScrollBeginDrag={handleOnBeginDragEvent}
           />
         </NativeViewGestureHandler>

diff --git a/src/components/sectionList/SectionList.tsx b/src/components/sectionList/SectionList.tsx
@@ -41,6 +41,7 @@ const BottomSheetSectionListComponent = forwardRef(
     const {
       scrollableRef,
       handleOnBeginDragEvent,
+      handleOnContentSizeChange,
       handleSettingScrollable,
     } = useScrollableInternal('SectionList');
     const {
@@ -73,6 +74,7 @@ const BottomSheetSectionListComponent = forwardRef(
             bounces={false}
             decelerationRate={decelerationRate}
             scrollEventThrottle={16}
+            onContentSizeChange={handleOnContentSizeChange}
             onScrollBeginDrag={handleOnBeginDragEvent}
           />
         </NativeViewGestureHandler>

diff --git a/src/hooks/useScrollableInternal.ts b/src/hooks/useScrollableInternal.ts
@@ -7,6 +7,7 @@ import type { Scrollable, ScrollableType } from '../types';
 
 export const useScrollableInternal = (type: ScrollableType) => {
   // refs
+  const scrollableContentHeightRef = useRef<number>(0);
   const scrollableContentOffsetYRef = useRef<number>(0);
   const scrollableContentOffsetY = useValue<number>(0);
   const scrollableRef = useRef<Scrollable>(null);
@@ -19,6 +20,19 @@ export const useScrollableInternal = (type: ScrollableType) => {
   } = useBottomSheetInternal();
 
   // callbacks
+  /**
+   * Reset the scrollable offset y when its size get smaller,
+   * this fixes #286.
+   */
+  const handleOnContentSizeChange = useCallback(
+    (_, height: number) => {
+      if (scrollableContentHeightRef.current > height) {
+        scrollableContentOffsetY.setValue(0);
+      }
+      scrollableContentHeightRef.current = height;
+    },
+    [scrollableContentOffsetY]
+  );
   const handleOnBeginDragEvent = useMemo(
     () =>
       event([
@@ -66,6 +80,7 @@ export const useScrollableInternal = (type: ScrollableType) => {
   return {
     scrollableRef,
     handleOnBeginDragEvent,
+    handleOnContentSizeChange,
     handleSettingScrollable,
   };
 };