[v4] | Footer height not included in dynamic size with scroll view

[smikheiev]

Bug

I have a bottom sheet with a scroll view inside, and with the enableDynamicSizing prop set. Dynamic size calculation seems to work fine - the bottom sheet height is adjusted to the scroll view content height.
But when I add a footer with footerComponent prop, the bottom sheet height is not changed. Footer adds a bottom margin so the content can be scrolled above it, but doesn't change the bottom sheet height.
I'm not sure if this is an expected behavior or not. If it is - is there a way to include footer height in the bottom sheet dynamic height calculation?

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.0
react-native	0.71.15
react-native-reanimated	3.6.1
react-native-gesture-handler	2.9.0

Steps To Reproduce

1. Try to run the code below with footerComponent={Footer} and without it (remove or comment it out)
2. See that the bottom sheet height doesn't change

with footer	without footer
with-footer.mp4	without-footer.mp4

Reproducible sample code

const App = () => {
  const sheetRef = useRef<BottomSheet>(null)

  const data = useMemo(
    () =>
      Array(15)
        .fill(0)
        .map((_, index) => `index-${index}`),
    []
  )

  const handleOpenPress = useCallback(() => {
    sheetRef.current?.expand()
  }, [])
  const handleClosePress = useCallback(() => {
    sheetRef.current?.close()
  }, [])

  const renderItem = useCallback(
    (item) => (
      <View key={item} style={styles.itemContainer}>
        <Text>{item}</Text>
      </View>
    ),
    []
  )
  return (
    <View style={styles.container}>
      <Button title="Open" onPress={handleOpenPress} />
      <Button title="Close" onPress={handleClosePress} />
      <BottomSheet
        //
        enableDynamicSizing
        enablePanDownToClose
        footerComponent={Footer}
        ref={sheetRef}
      >
        <BottomSheetScrollView enableFooterMarginAdjustment>{data.map(renderItem)}</BottomSheetScrollView>
      </BottomSheet>
    </View>
  )
}

const Footer = ({ animatedFooterPosition }: BottomSheetFooterProps) => {
  return (
    <BottomSheetFooter animatedFooterPosition={animatedFooterPosition}>
      <View style={styles.footer}>
        <Text>Some footer</Text>
      </View>
    </BottomSheetFooter>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  itemContainer: {
    padding: 6,
    margin: 6,
    backgroundColor: '#eee',
  },
  footer: {
    backgroundColor: 'pink',
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

[github-actions]

@smikheiev: hello! 👋

This issue is being automatically closed because it does not follow the issue template.

[darshan09200]

I have a temporary solution

Steps to fix the issue

1. Create a patches folder if you don't have one already.
2. Create a file @gorhom+bottom-sheet+5.0.0-alpha.6.patch

I am using @gorhom+bottom-sheet@5.0.0-alpha.6 for my project, if you are using some different version update the files accordingly and generate a new patch using npx patch-package @gorhom/bottom-sheet

3. Paste the following

diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
index 9162b66..52bd563 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
@@ -4,7 +4,7 @@ import React, {
   useImperativeHandle,
   useMemo,
 } from 'react';
-import { useAnimatedProps, useAnimatedStyle } from 'react-native-reanimated';
+import { useAnimatedProps, useAnimatedReaction, useAnimatedStyle } from 'react-native-reanimated';
 import { Gesture } from 'react-native-gesture-handler';
 import { BottomSheetDraggableContext } from '../../contexts/gesture';
 import {
@@ -87,11 +87,17 @@ export function createBottomSheetScrollableComponent<T, P>(
     );
     //#endregion

+    useAnimatedReaction(() => {
+      return animatedFooterHeight.value
+    }, (curr, prev) => {
+      animatedContentHeight.value += curr - (prev || 0);
+    })
+
     //#region callbacks
     const handleContentSizeChange = useStableCallback(
       (contentWidth: number, contentHeight: number) => {
         if (enableDynamicSizing) {
-          animatedContentHeight.value = contentHeight;
+          animatedContentHeight.value = contentHeight + animatedFooterHeight.value;
         }

         if (onContentSizeChange) {

4. Run npx patch-package

Documentation for patch-package for any other

Warning

This solution might not work if your footer changes layout on state update, in my case it was static so this solution did the trick.

[idrakimuhamad]

I also notice this. So if you use flat list fore example, some of the element would be behind the footer, instead of the sheet grow bigger.

[gorhom]

this should be fixed on the next release

[SergioAN007]

Unfortunally don't work without this:

+    useAnimatedReaction(() => {
+      return animatedFooterHeight.value
+    }, (curr, prev) => {
+      animatedContentHeight.value += curr - (prev || 0);
+    })

"@gorhom/bottom-sheet": "^5.0.0-alpha.7",

[idrakimuhamad]

In my case also with latest 4.6.1 the footer height are still not being included. Do i need to wrap my footer with BottomSheetFooter? Or any flag to offset the height?

[weihanyau]

Unfortunally don't work without this:

+    useAnimatedReaction(() => {
+      return animatedFooterHeight.value
+    }, (curr, prev) => {
+      animatedContentHeight.value += curr - (prev || 0);
+    })

"@gorhom/bottom-sheet": "^5.0.0-alpha.7",

Same on 4.6.1 too, it seems like the fix uses the default value of animatedFooterHeight which is 0 instead of using the height when the footer is mounted