[v4] | [v2] The enableDynamicSizing feature does not recalculate when the size of the content changes.

[JCYDigitalinnov]

Bug

At first, enableDynamicSizing works as expected. However, when the content of the BottomSheetModal changes, it does not function properly. It does not re-calculate again for the height of the content.

In this context, when the user performs a search in the Flatlist, the number of items changes, and as a result, the height of the content also changes.

I used react-native-gesture-handler's Flatlist

Environment info

Library	Version
@gorhom/bottom-sheet	^4.5.1
react-native	0.72.4
react-native-reanimated	^3.3.0
react-native-gesture-handler	^2.9.0

Steps To Reproduce

Describe what you expected to happen:

Reproducible sample code

[Shugar]

Maybe I'm looking for something similar. I have a multiline TextField inside a BottomSheet, and I want it to start go up as far as new lines in input added.

[Shugar]

@JCYDigitalinnov I removed extra wrappers around input and it worked for me.

UPD: sometimes it works, sometimes not.

[Shugar]

It worked only 2-3 times, then I always get the same behavior — looks like sheet stops increasing it's size once gets to latest snap point.

For sure it's fine for me to have constraints where first value is start value, last value is end value and height won't be bigger than end value, but with that I'm having another issue - once keyboard opens the sheet expands to the full size.

[mertafor]

Unfortunately this feature is not stable. In my case, the height of content doesn't change yet enableDynamicSizing prop works arbitrarily. Sometimes it works first 2 or 3 times and after reloading app the height won't get calculated at all. But deprecated useBottomSheetDynamicSnapPoints works pretty well.

Obviously useBottomSheetDynamicSnapPoints will be removed on future releases. Hope this feature gets stable.

[mertafor]

I've been able to fix the problem by wrapping inner content with BottomSheetView :

import {
  BottomSheetModal,
  BottomSheetView
} from '@gorhom/bottom-sheet'

<BottomSheetModal
   ref={bottomSheetModalRef}
   animateOnMount={true}
   enableDynamicSizing>
      <BottomSheetView>
          {title && <RenderHeader />}
          {children}
      </BottomSheetView>
</BottomSheetModal>

I was using BottomSheetView inside RenderHeader component as well. I realized it was causing a weird behavior. Now it works fine even if I change the content size.

[JCYDigitalinnov]

I've been able to fix the problem by wrapping inner content with BottomSheetView :

import {
  BottomSheetModal,
  BottomSheetView
} from '@gorhom/bottom-sheet'

<BottomSheetModal
   ref={bottomSheetModalRef}
   animateOnMount={true}
   enableDynamicSizing>
      <BottomSheetView>
          {title && <RenderHeader />}
          {children}
      </BottomSheetView>
</BottomSheetModal>

I was using BottomSheetView inside RenderHeader component as well. I realized it was causing a weird behavior. Now it works fine even if I change the content size.

Maybe it will work that way. But I have FlatList inside of the BottomSheetView

[mertafor]

@JCYDigitalinnov I haven't tested with Flatlist or Scrollview. Both my RenderHeader component and children wrapped inside View. Tested on both ios and android and I can confirm both work without any problems. Maybe wrapping Flatlist with View would help. Unfortunately library documentation is a bit unclear and has become outdated after recent updates. That would be much appreciated if author provides better examples.

[jinsung-kim]

+1

[ary31415]

+1, it works fine sometimes, and sometimes it looks like it just doesn't calculate the size at all and gives the sheet the minimum height. I was forced to go back to the old useBottomSheetDynamicSnapPoints because of the broken behavior

[lsdimagine]

I got the same issue and fixed it by making sure there's no bottomsheet scrollable other than BottomSheetView. Apparently we should only have one scrollable updating internal animatedContentHeight https://github.com/gorhom/react-native-bottom-sheet/blob/master/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx#L88

[qdanik]

I've been able to fix the problem by wrapping inner content with BottomSheetView :

import {
  BottomSheetModal,
  BottomSheetView
} from '@gorhom/bottom-sheet'

<BottomSheetModal
   ref={bottomSheetModalRef}
   animateOnMount={true}
   enableDynamicSizing>
      <BottomSheetView>
          {title && <RenderHeader />}
          {children}
      </BottomSheetView>
</BottomSheetModal>

I was using BottomSheetView inside RenderHeader component as well. I realized it was causing a weird behavior. Now it works fine even if I change the content size.

It's working for me but with a couple of problems. Firstly, when height of content height is changing the bottom sheet is jumping or not smoothly updating. Second problem, sometimes content height is not calculated and only background component is displaying. useBottomSheetDynamicSnapPoints hook working better in most of cases.

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

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.

[ary31415]

This is still an issue, is there any timeline for a fix?

[kavinraju]

For me when enableDynamicSizing is set to true bottom sheet isn't opening at all. I am currently using "@gorhom/bottom-sheet": "^4",

[AndyYablonskii]

Same on "@gorhom/bottom-sheet": "^4.6.4". Any fixes yet?

[Hiba-Bazerbashi]

For me when enableDynamicSizing is set to true bottom sheet isn't opening at all. I am currently using "@gorhom/bottom-sheet": "^4",

@kavinraju have you found it ?

[THowland1]

I fixed this by getting rid of the flex:1 on the styles.contentContainer value from the examples