[v4] enableDynamicSizing prop does not work when BottomSheetView contains a single View wrapping children

[gotcha84]

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).

repro.mov

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

1. Run example app
2. Scroll down and click Dynamic Sizing

Describe what you expected to happen:

1. 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>

[erickcrus]

Same here.

I set a minHeight in the style property of the BottomSheetView to ensure my app's functionality, but it doesn't dynamically define the height.
It apparently works normally with BottomSheetScrollView instead of BottomSheetView.

Some solution for this?

[fendermany]

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

[FredrikErikJohansson]

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

[salman-ar-sar]

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>
);

[kaceycleveland]

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.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[salman-ar-sar]

@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.

[hosseinmd]

Has anyone a solution for this?

[fendermany]

Has anyone a solution for this?

Good workaround is using BottomShitScrollView with scroll false prop