react-native-collapsible-tab-view Flatlist allows the user to scroll down even though there's no more content to show

Flatlist allows the user to scroll down even though there's no more content to show

Open tiagotwistag opened this issue 2 years ago • 10 comments

While configuring the tabs.container to allow a minHeaderHeight I noticed that I was able to scroll past the content, this means I was able to keep scrolling even if I didn't had more content, I also noticed that the amount of scroll I was able to go past was exactly the minHeaderHeight value. After some testing I updated the useCollapsibleStyle hook to take into consideration the minHeaderHeight for the minHeight calculation

Here's a demo of the version 4.5.2:

https://user-images.githubusercontent.com/88672357/158640029-616ec99a-88db-42e9-82aa-48f664fe9111.MP4

And here the demo of the version 4.5.2 with the fix:

https://user-images.githubusercontent.com/88672357/158640045-9fb86b46-05d6-401f-ae50-4f53863cde3e.MP4

Here's a quick diff(the changes were applied on the builded code since I needed a patch)

diff --git a/node_modules/react-native-collapsible-tab-view/lib/module/Container.js b/node_modules/react-native-collapsible-tab-view/lib/module/Container.js
index ee79551..e23afe0 100644
--- a/node_modules/react-native-collapsible-tab-view/lib/module/Container.js
+++ b/node_modules/react-native-collapsible-tab-view/lib/module/Container.js
@@ -307,6 +307,7 @@ export const Container = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
       accDiffClamp,
       indexDecimal,
       containerHeight,
+      minHeaderHeight,
       scrollYCurrent,
       scrollY,
       setRef,
diff --git a/node_modules/react-native-collapsible-tab-view/lib/module/hooks.js b/node_modules/react-native-collapsible-tab-view/lib/module/hooks.js
index 0de361d..4d3c7b1 100644
--- a/node_modules/react-native-collapsible-tab-view/lib/module/hooks.js
+++ b/node_modules/react-native-collapsible-tab-view/lib/module/hooks.js
@@ -86,21 +86,24 @@ export function useCollapsibleStyle() {
     tabBarHeight,
     containerHeight,
     width,
-    allowHeaderOverscroll
+    allowHeaderOverscroll,
+    minHeaderHeight,
   } = useTabsContext();
   const [containerHeightVal, tabBarHeightVal, headerHeightVal] = [useConvertAnimatedToValue(containerHeight), useConvertAnimatedToValue(tabBarHeight), useConvertAnimatedToValue(headerHeight)];
+  
+  const containerHeightWithMinHeader = containerHeightVal - minHeaderHeight
   return useMemo(() => ({
     style: {
       width
     },
     contentContainerStyle: {
-      minHeight: IS_IOS && !allowHeaderOverscroll ? (containerHeightVal || 0) - (tabBarHeightVal || 0) : (containerHeightVal || 0) + (headerHeightVal || 0),
+      minHeight: IS_IOS && !allowHeaderOverscroll ? (containerHeightWithMinHeader || 0) - (tabBarHeightVal || 0) : (containerHeightWithMinHeader || 0) + (headerHeightVal || 0),
       paddingTop: IS_IOS && !allowHeaderOverscroll ? 0 : (headerHeightVal || 0) + (tabBarHeightVal || 0)
     },
     progressViewOffset: // on iOS we need the refresh control to be at the top if overscrolling
     IS_IOS && allowHeaderOverscroll ? 0 : // on android we need it below the header or it doesn't show because of z-index
     (headerHeightVal || 0) + (tabBarHeightVal || 0)
-  }), [allowHeaderOverscroll, containerHeightVal, headerHeightVal, tabBarHeightVal, width]);
+  }), [allowHeaderOverscroll, containerHeightWithMinHeader, headerHeightVal, tabBarHeightVal, width]);
 }
 export function useUpdateScrollViewContentSize({
   name

I was about to open a PR but I'm not sure if such changes can break other things, so let me know about it