fix(collapsible-style): use minHeaderHeight when calculating the iOS …

…min height
PedroBern · Oct 25, 2022 · bd373ac · bd373ac
1 parent 9671587
commit bd373ac
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/src/Container.tsx b/src/Container.tsx
@@ -361,6 +361,7 @@ export const Container = React.memo(
             accDiffClamp,
             indexDecimal,
             containerHeight,
+            minHeaderHeight,
             scrollYCurrent,
             scrollY,
             setRef,

diff --git a/src/hooks.tsx b/src/hooks.tsx
@@ -135,20 +135,29 @@ export function useCollapsibleStyle(): CollapsibleStyle {
     containerHeight,
     width,
     allowHeaderOverscroll,
+    minHeaderHeight,
   } = useTabsContext()
   const [containerHeightVal, tabBarHeightVal, headerHeightVal] = [
     useConvertAnimatedToValue(containerHeight),
     useConvertAnimatedToValue(tabBarHeight),
     useConvertAnimatedToValue(headerHeight),
   ]
+
+  const containerHeightWithMinHeader = Math.max(
+    0,
+    (containerHeightVal ?? 0) - minHeaderHeight
+  )
+
+  console.log('containerHeightWithMinHeader', containerHeightWithMinHeader)
+
   return useMemo(
     () => ({
       style: { width },
       contentContainerStyle: {
         minHeight:
           IS_IOS && !allowHeaderOverscroll
-            ? (containerHeightVal || 0) - (tabBarHeightVal || 0)
-            : (containerHeightVal || 0) + (headerHeightVal || 0),
+            ? containerHeightWithMinHeader - (tabBarHeightVal || 0)
+            : containerHeightWithMinHeader + (headerHeightVal || 0),
         paddingTop:
           IS_IOS && !allowHeaderOverscroll
             ? 0
@@ -163,10 +172,10 @@ export function useCollapsibleStyle(): CollapsibleStyle {
     }),
     [
       allowHeaderOverscroll,
-      containerHeightVal,
       headerHeightVal,
       tabBarHeightVal,
       width,
+      containerHeightWithMinHeader,
     ]
   )
 }

diff --git a/src/types.ts b/src/types.ts
@@ -217,6 +217,8 @@ export type ContextType<T extends TabName = TabName> = {
    * @default false
    */
   allowHeaderOverscroll?: boolean
+
+  minHeaderHeight: number
 }
 
 export type ScrollViewProps = ComponentProps<typeof Animated.ScrollView>