fix: fixed dynamic scrollables content size with footer in place

Author: gorhom

src/components/bottomSheet/BottomSheet.tsx

@@ -212,6 +212,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedContainerHeight,
         animatedContentHeight,
         animatedHandleHeight,
+        animatedFooterHeight,
         enableDynamicSizing,
         maxDynamicContentSize
       );

src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx

@@ -66,9 +66,7 @@ export function createBottomSheetScrollableComponent<T, P>(
       animatedScrollableState,
       enableContentPanningGesture,
     } = useBottomSheetInternal();
-    const { setContentSize } = useBottomSheetContentSizeSetter(
-      enableFooterMarginAdjustment
-    );
+    const { setContentSize } = useBottomSheetContentSizeSetter();
     //#endregion
 
     if (!draggableGesture && enableContentPanningGesture) {

src/components/bottomSheetScrollable/useBottomSheetContentSizeSetter.ts

@@ -4,33 +4,22 @@ import { useBottomSheetInternal } from '../../hooks';
 /**
  * A hook to set the content size properly into the bottom sheet,
  * internals.
- *
- * @param enableFooterMarginAdjustment Adjust the scrollable bottom margin to avoid the animated footer.
- * @returns
  */
-export function useBottomSheetContentSizeSetter(
-  enableFooterMarginAdjustment: boolean
-) {
+export function useBottomSheetContentSizeSetter() {
   //#region hooks
-  const { enableDynamicSizing, animatedContentHeight, animatedFooterHeight } =
+  const { enableDynamicSizing, animatedContentHeight } =
     useBottomSheetInternal();
   //#endregion
 
   //#region methods
   const setContentSize = useCallback(
     (contentHeight: number) => {
-      if (enableDynamicSizing) {
-        animatedContentHeight.value =
-          contentHeight +
-          (enableFooterMarginAdjustment ? animatedFooterHeight.value : 0);
+      if (!enableDynamicSizing) {
+        return;
       }
+      animatedContentHeight.value = contentHeight;
     },
-    [
-      enableDynamicSizing,
-      animatedContentHeight,
-      animatedFooterHeight,
-      enableFooterMarginAdjustment,
-    ]
+    [enableDynamicSizing, animatedContentHeight]
   );
   //#endregion
 

src/hooks/useAnimatedSnapPoints.ts

@@ -18,6 +18,7 @@ import { normalizeSnapPoint } from '../utilities';
  * @param containerHeight BottomSheetContainer height.
  * @param contentHeight content size.
  * @param handleHeight handle size.
+ * @param footerHeight footer size.
  * @param enableDynamicSizing
  * @param maxDynamicContentSize
  * @returns {Animated.SharedValue<number[]>}
@@ -27,6 +28,7 @@ export const useAnimatedSnapPoints = (
   containerHeight: SharedValue<number>,
   contentHeight: SharedValue<number>,
   handleHeight: SharedValue<number>,
+  footerHeight: SharedValue<number>,
   enableDynamicSizing: BottomSheetProps['enableDynamicSizing'],
   maxDynamicContentSize: BottomSheetProps['maxDynamicContentSize']
 ): [SharedValue<number[]>, SharedValue<number>, SharedValue<boolean>] => {
@@ -71,7 +73,7 @@ export const useAnimatedSnapPoints = (
     const dynamicSnapPoint =
       containerHeight.value -
       Math.min(
-        contentHeight.value + handleHeight.value,
+        contentHeight.value + handleHeight.value + footerHeight.value,
         maxDynamicContentSize !== undefined
           ? maxDynamicContentSize
           : containerHeight.value
@@ -92,11 +94,12 @@ export const useAnimatedSnapPoints = (
 
     return _normalizedSnapPoints;
   }, [
-    containerHeight.value,
     snapPoints,
+    containerHeight,
+    handleHeight,
+    contentHeight,
+    footerHeight,
     enableDynamicSizing,
-    handleHeight.value,
-    contentHeight.value,
     maxDynamicContentSize,
     dynamicSnapPointIndex,
   ]);