Eli nathan/dynamic size bottom sheet with max height

[Eli-Nathan]

Inspired by #1402 @ororsatti
Adding a hook to have a sheet with a max height that will dynamically change its height until reaching the limit, following this discussion: #1363

• Added useBottomSheetMaxHeight hook
• Call above hook from useBottomSheetDynamicSnapPoints
• Updated the example to show the max height & scrolling functionality.
  • Example update also changes it from adding blank empty height to adding new rows of content

Motivation
People are asking for this feature for a while now, and asked me in the discussion to share the code.
Closes: (#658 , #32)

Example

Screen.Recording.2023-09-08.at.18.38.42.mov

[ororsatti]

May the odds be in your favour !

[gorhom]

could we use internal container height instead using react-native-safe-area-context library ?

[gorhom]

first, thanks @ororsatti for submitting the initial PR, i do apologies for not reviewing it on time , your contribution is appreciated.

second, @Eli-Nathan i left a comment about the usage of react-native-safe-area-context, im wondering if we could just use the internal container height value ?

[Eli-Nathan]

Thanks so much!
My thinking was that bottom sheets (especially modals) can wrap the entire app including the react navigation elements like the header and bottom tabs. Using the safe area guarantees that on newer iOS devices that the bottom sheet never goes higher than the notch and covers the status bar.
Also, actually getting the parent container height would need to be done by the developer using it and passed in to this hook as the library doesn't have context of where it's rendered right? Felt like it would make user error more likely. What do you think? You'll know this code far better than myself.

[Eli-Nathan]

@gorhom examples with and without safe area when modal provider wraps the whole app 😄

With safe area	Without safe area

[gorhom]

I have already expose the container height animatedContainerHeight from useBottomSheetInternal, which you can access with unsafe flag, since the hook is out of the bottom sheet node

const { animatedContainerHeight } = useBottomSheetInternal(true);

[Eli-Nathan]

It's telling me it's not available 😞

[gorhom]

hmmm ,, let me think of a different approach .. my main concern is now we are adding another hard dependency to the project which is something i try to avoid

[gorhom]

i was thinking about this for a while now, what if we moved the while dynamic sizing internally , where users do not need to do anything 🧐 , except using a view from the library ( scrollable or just static view )

[Eli-Nathan]

Edit: Ah wait it works without the boolean...
Although technically we wouldn't be using it from within the bottom sheet so the internal context throws an error

[Eli-Nathan]

where users do not need to do anything

Hmm, would that still allow them to specify a maxHeight though?

[gorhom]

we could introduce a prop for max snap point to address that issue, so users who wants dynamic size they will need to provide two props:

<BottomSheet enableDynamicSizing={true} maxSnapPoint={500 | "100%"} />

with this, we will remove the dynamic hook and remove handling layout complexity

[Eli-Nathan]

So we'd be applying these styles to <BottomSheetContainer /> within the main bottom sheet component based on the presence of a enableDynamicSizing prop?

I've had a look at that component and it's very complex.

What are your thoughts on doing applying this as a solution for V4 and the enableDynamicSizing solution for V5 since it seems like it'd be a much bigger refactor?

[gorhom]

So we'd be applying these styles to within the main bottom sheet component based on the presence of a enableDynamicSizing prop?

no, i would apply it to the content container and scrollables

What are your thoughts on doing applying this as a solution for V4 and the enableDynamicSizing solution for V5 since it seems like it'd be a much bigger refactor?

mm i think the code should be sharable with v5 if we do it correctly for v4. im going to draft something as a poc and get back to you

[Eli-Nathan]

Sounds good! Thanks again!

[ororsatti]

i was thinking about this for a while now, what if we moved the while dynamic sizing internally , where users do not need to do anything 🧐 , except using a view from the library ( scrollable or just static view )

First of all, I'm so glad to hear from you, I thought this lib is going to dei down slowly,
Second, It seems like a big project and I'll be more than happy to help move it, and v5.
I'd be happy to contact you & @Eli-Nathan and maybe get a quick rundown on your lib, and start helping you with it.

[Eli-Nathan]

@ororsatti Count me in, this has been hugely valuable to me in multiple projects so happy to help where I can

[gorhom]

@Eli-Nathan @ororsatti managed to get dynamic sizing by prop working with View with the approach i suggested , going to apply it on scrollables and i'll prepare a draft PR by tomorrow

[gorhom]

closing this PR in favour of #1513, which it has been merged. Thanks @Eli-Nathan