react-native-bottom-sheet: [v4] enableDynamicSizing prop does not work when BottomSheetView contains a single View wrapping children

Bug

The enableDynamicSize prop does not work when BottomSheetView contains a single View component with multiple children. I am seeing inconsistent behavior where most of the time, the bottom sheet has no height and no content. Very rarely it renders correctly (maybe 1 in 50 attempts?).

I was able to reproduce this using the example app on both Android & iOS (see repro steps below).

https://github.com/gorhom/react-native-bottom-sheet/assets/2507829/739ccb21-4bd4-4af7-9044-f27b46fe2b59

Environment info

Reproduced on latest master (65b5dc0).

Library	Version
@gorhom/bottom-sheet	4.5.1
react-native	0.62.2
react-native-reanimated	2.8.0
react-native-gesture-handler	1.10.3

Steps To Reproduce

Run example app
Scroll down and click Dynamic Sizing

Describe what you expected to happen:

Bottom sheet should render with content

Reproducible sample code

Modify the render of example/app/src/screens/advanced/DynamicSnapPointExample.tsx to add a View that wraps all children of BottomSheetView

Here is a patch file to apply with the changes: repro.patch

diff --git a/example/app/src/screens/advanced/DynamicSnapPointExample.tsx b/example/app/src/screens/advanced/DynamicSnapPointExample.tsx
index 8c3e63e..a91855e 100644
--- a/example/app/src/screens/advanced/DynamicSnapPointExample.tsx
+++ b/example/app/src/screens/advanced/DynamicSnapPointExample.tsx
@@ -54,6 +54,7 @@ const DynamicSnapPointExample = () => {
         animateOnMount={true}
       >
         <BottomSheetView style={contentContainerStyle}>
+          <View>
           <Text style={styles.message}>
             Could this sheet resize to its content height ?
           </Text>
@@ -62,6 +63,7 @@ const DynamicSnapPointExample = () => {
           </View>
           <Button label="Yes" onPress={handleIncreaseContentPress} />
           <Button label="Maybe" onPress={handleDecreaseContentPress} />
+          </View>
         </BottomSheetView>
       </BottomSheet>
     </View>

About this issue

Original URL
State: open
Created 9 months ago
Reactions: 17
Comments: 20

Most upvoted comments

Has anyone a solution for this?

Good workaround is using BottomShitScrollView with scroll false prop

+22

fendermany on Dec 24, 2023

Having the same issue with BottomSheetView, replacing it with BottomSheetScrollView seems to work

+15

FredrikErikJohansson on Oct 18, 2023

As others mentioned, disabling flex and adding a min height worked for me:

        <BottomSheetView style={{ flex: 0, minHeight: 100 }}>{children}</BottomSheetView>

BottomSheetScrollView maybe does this too but I did not want the contents to be scrollable in my case.

+10

kaceycleveland on Nov 10, 2023

Having the same issue with BottomSheetView, replacing it with BottomSheetScrollView seems to work

This seems to be a workaround but I can’t get paddingBottom to work with it. How are you styling on devices with safe area bottom? I was giving paddingBottom as bottom from useSafeAreaInsets and giving a backgroundColor to BottomSheetView. That doesn’t work anymore using enableDynamicSizing.

@gorhom Any idea on how to fix this?

Adding code below

const { top, bottom } = useSafeAreaInsets();

return (
  <BottomSheetModal
    ref={ref}
    index={0}
    enableDynamicSizing
    enablePanDownToClose
    backdropComponent={RenderBackdrop}
    onDismiss={onDismiss}
    onChange={setCurrentIndex}
    name={name}
    topInset={top}
    keyboardBehavior={Platform.OS === 'android' ? 'extend' : 'interactive'}
    keyboardBlurBehavior="restore"
    handleComponent={handleComponent}
    backgroundStyle={{
      backgroundColor: colors.background[100],
    }}>
    <BottomSheetView
      style={[themeStyle.contentContainer, { paddingBottom: bottom }]}>
      {children}
    </BottomSheetView>
  </BottomSheetModal>
);

salman-ar-sar on Oct 20, 2023

deleting flex: 1 from BottomSheetView fixed same problem don’t forget r console

fendermany on Oct 13, 2023

Not sure how related is this, but this worked for me.

      <BottomSheetModal
        index={1}
        ref={ref}
        snapPoints={[1]} // ********* HERE, Add a default snapPoint 1
        enableDynamicSizing // ********* HERE Enable to dynamic sizing
      >
        <BottomSheetView style={styles.container}> // ********* HERE { flex: 0, minHeight: 100 }
          ...dynmic content
            
        </BottomSheetView>
      </BottomSheetModal>

suhailk16 on Apr 3, 2024

I had to go back to the deprecated dynamic snap points with the bottomsheetview hook as a workaround

shamilovtim on Feb 19, 2024

@gorhom Hey man. Thanks for all your hard work. Tagging you here as this is stopping me from upgrading. It would be amazing if you could look into it.

salman-ar-sar on Dec 11, 2023