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

tiagotwistag commented 2 years ago

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