Enable Auto sizing on web if detents=['auto'] then enableDynamicSizing=true

[bc-tinker]

Summary

It appears from our testing and from a note we saw somewhere that for the web implementation settings detents to 'auto' doesn't work correctly. This is an issue for us since the majority of our sheets are auto sized for mobile and forcing a detent on them for web would cause the content to look incorrect. Since the Truesheets web implementation uses @gorhom/bottom-sheet, it should be possible to support detents={['auto']} by enabling dynamic sizing internally.

Proposal

When detents includes 'auto' in the web implementation, automatically pass:

enableDynamicSizing={true}

to the underlying Gorhom Bottom Sheet.

In our previous implementation using Gorhom Bottom Sheet directly (prior to migrating to TrueSheet), we enabled enableDynamicSizing to ensure dynamically sized modals correctly auto-sized to their content. This worked reliably for our use case and allowed 'auto' behavior without requiring fixed numeric detents.

Enabling this internally would allow:

<TrueSheet detents={['auto']}>
  {/* content */}
</TrueSheet>

to size to content height on web without additional configuration.

Acceptance Criteria

• detents={['auto']} works on web.
• No additional configuration required from consumers.
• No change in behavior when 'auto' is not used.

[lodev09]

Hey @bc-tinker.. what exactly is not working for you? I'm already doing that internally:

react-native-true-sheet/src/TrueSheet.web.tsx

Line 491 in c9dc42a

enableDynamicSizing: hasAutoDetent,

[mahcloud-tinker]

Thanks for the quick turn around. I'm going to try some options and see if I can get you some repro steps. Thanks for the support!

[mahcloud-tinker]

k, it looks like this is totally on me @lodev09 . I thought we were passing in scrollable where we weren't. That and a combination of adding ScrollViews, got everything working perfect. Thanks!

Feel free to close.

thanks @bc-tinker for posting this and thanks @lodev09 for being willing to help.