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).
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
Good workaround is using BottomShitScrollView with scroll false prop
Having the same issue with
BottomSheetView
, replacing it withBottomSheetScrollView
seems to workAs others mentioned, disabling
flex
and adding a min height worked for me:BottomSheetScrollView
maybe does this too but I did not want the contents to be scrollable in my case.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
deleting flex: 1 from BottomSheetView fixed same problem don’t forget r console
Not sure how related is this, but this worked for me.
I had to go back to the deprecated dynamic snap points with the bottomsheetview hook as a workaround
@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.