[v4] enableDynamicSizing does not work

[mstaniewski]

Bug

I need bottom sheet modals to adjust to its content height. I have found enableDynamicSizing prop in documentation and a pull request regarding dynamic sizing:
#1513

I have checked the example on how to use it here:

https://github.com/gorhom/react-native-bottom-sheet/pull/1513/files#diff-3f9ab4750993038cd43946db156ced8ad2138a75159f43862a3906e0747af3e7R52

Unfortunately bottom sheet height is not calculated properly. First modal appears good because it has snap points set. Second is displaying like content would be of height 0

Screen.Recording.2024-01-23.at.23.32.06.mov

Environment info

"@gorhom/bottom-sheet": "^4.6.0",
"react-native": "^0.73.2",

Library	Version
@gorhom/bottom-sheet	4.6.0
react-native	0.73.2
react-native-reanimated	3.6.1
react-native-gesture-handler	2.14.0

Steps To Reproduce

Import BottomSheetModal from module, use it as presented in example and docs. Content height is not calculated

Describe what you expected to happen:

Modal appears with height adjusted to its content

Reproducible sample code

<BottomSheetModal ref={ref} enableDynamicSizing>
  <BottomSheetView>
    <View style={{height: 200, backgroundColor: 'black'}} />
  </BottomSheetView>
</BottomSheetModal>

[MANIKANDAN1709]

I tried to reproduce this not able to reproduce @mstaniewski please share details.if possible share along with snack example

[stewardccm]

Same issues with the bottom sheet cannot be get the correct height without set any snapPoints.

export default function Test() {
  const [item, setItem] = useState<String>();
  const bottomSheetRef = useRef<BottomSheet>(null);

  useEffect(() => {
    new Promise((resolve) => {
      resolve(setItem("Test"));
    }).then(() => bottomSheetRef.current?.expand());
  });

  return (
    <BottomSheet
      ref={bottomSheetRef}
      snapPoints={[]}
      enablePanDownToClose
      enableDynamicSizing
      animateOnMount
      index={-1}
    >
      <BottomSheetView>{item && <Text>Testing</Text>}</BottomSheetView>
    </BottomSheet>
  );
}

[VolkerLieber]

Make sure to wrap your app/screen in BottomSheetModalProvider and provide a valid (snap point) index (e.g. 0)

[stewardccm]

The app/screen is in BottomSheetModalProvider and updates the method to bottomSheetRef.current?.snapToIndex(0). Still getting the same result, is there any misunderstanding on my part?

[theyanniss23002]

I also encountered a problem. any other ideas?

[adelbeke]

#1573

You can find a workaround here

[shamilovtim]

My workaround: #1573 (comment)

[andrecrimb]

I found a hacky workaround adding a minHeight or padding to BottomSheetView.

  <BottomSheetBase
      ref={bottomSheetRef}
      backdropComponent={BackdropView}
      footerComponent={Footer}
      handleComponent={handleComponent}
      enablePanDownToClose
      onClose={onClose}
      enableDynamicSizing
    >
      <BottomSheetView
        style={{ minHeight: 10 }} // <----- It works 🤷🏽‍♂️ 
      >

Still this is super hacky and should be solved 👍🏽

[Inferno-Ripper]

if you give the BottomSheetView and a wrapping View inside padding the enableDynamicSizing works.
note index={0} and enableDynamicSizing={true} needs to be in BottomSheetModal
also if BottomSheetView is given any other padding like padding-bottom etc it does not work.

P.S: no idea if this is a proper solution or not, it worked for me so i thought i would share it.

`
<BottomSheetModal
index={0}
enableDynamicSizing={true}

<BottomSheetView style={{padding: '40px'>
<View style={{padding-bottom: '80px'>
// all the code in the modal should be placed inside this view



`

[hassanad94]

if you give the BottomSheetView and a wrapping View inside padding the enableDynamicSizing works. note index={0} and enableDynamicSizing={true} needs to be in BottomSheetModal also if BottomSheetView is given any other padding like padding-bottom etc it does not work.

P.S: no idea if this is a proper solution or not, it worked for me so i thought i would share it.

` <BottomSheetModal index={0} enableDynamicSizing={true}

<BottomSheetView style={{padding: '40px'> <View style={{padding-bottom: '80px'> // all the code in the modal should be placed inside this view `

Thats the only thing which worked for me. Thank you for your solution!!