The making of a scrollable, dynamically size drawer

[ororsatti]

Hello @gorhom,
Using your lib I was able to create a scrollable, dynamically size drawer that:

• Can have maximum height. (havent tested minimum but I assume its possible too)
• resizes according to your content size
• is scrollable

I hit a couple of road bumps on the development,
and i need your help to proceed with this idea.

Is it possible we will chat further on this ? This library helped us alot in our development,
and it seems its a long requested feature.
(#658 , #32)

Im finishing with a visual example of the described above behavior,

Simulator.Screen.Recording.-.iPhone.14.-.2023-05-10.at.11.06.14.mp4

Hope you liked it,
Please contact me so we can make this possible.
Email address: [email protected]

[ororsatti]

@gorhom
Panning motion is working as well, but your lib is quite complex.
Would you like to discuss on it ?

[DipoAreoye]

Hey can I take a look at your implementation?

[ororsatti]

Sure, want me to share it here or something?

[ororsatti]

#1402

[g-todorov]

Great work, just tried it with BottomSheetScrollView in my code and works like charm.
Did you have any success with BottomSheetFlatList? Seems that contentHeight is again an issue like most of the workaround solutions so far.

[ororsatti]

Hello, thanks for the kind words @g-todorov .
I have tested it with flat list and it seems to work just fine, heres a video:

Simulator.Screen.Recording.-.iPhone.11.-.2023-06-17.at.01.20.49.mp4

I have even added a sticky header for good measure.

Make sure you pass the innerScrollViewAnimatedStyles from the hook to the list's styles and not override the maxHeight style since the hook relay on it. I might need to change the name since its a little bit misleading.

Any review/more testing will be appreciated.
Thanks.

[g-todorov]

You are right, it works as expected. Probably it was a misconfiguration on my end. Great work again and I hope it gets merged soon.

[Eli-Nathan]

I found some problems with the solution in the linked PR when using this hook with dynamic content that changes before showing the bottom sheet.

The solution I opted for is:

// ....
const initialSnapPoints = useMemo(() => ["CONTENT_HEIGHT"], [])
const {
    animatedHandleHeight,
    animatedSnapPoints,
    animatedContentHeight,
    handleContentLayout,
} = useBottomSheetDynamicSnapPoints(initialSnapPoints)

const maxHeightStyle = useBottomSheetMaxHeight(maxHeight)

return (
    <BottomSheetModal
        // .... other props
        snapPoints={animatedSnapPoints as any}
        handleHeight={animatedHandleHeight}
        contentHeight={animatedContentHeight}
    >
        <BottomSheetScrollView
            onLayout={handleContentLayout}
            style={{
                maxHeight: maxHeightStyle,
            }}
        >
            {children}
        </BottomSheetScrollView>
    </BottomSheetModal>
)
// ...

With the custom useBottomSheetMaxHeight hook looking like this:

/*
    Designed to take the specified max height, take away top safe
    area inset and convert to a decimal
*/
import { useWindowDimensions } from "react-native"
import { useSafeAreaInsets } from "react-native-safe-area-context"

export const useBottomSheetMaxHeight = (maxHeight = "85%"): number => {
    const { height: deviceHeight } = useWindowDimensions()
    const maxHeightDecimal = parseFloat(`${maxHeight}`) / 100.0
    const { top: topSafeAreaInset } = useSafeAreaInsets()

    return (deviceHeight - topSafeAreaInset) * maxHeightDecimal
}

Hope that helps someone 😄

[Eli-Nathan]

I think both my and your original (awesome btw) solution only really work when there's just 1 snapPoint of "CONTENT_HEIGHT"
If you add one that's higher than the computed content height it doesn't behave so great

[Eli-Nathan]

For example: if the computed max height makes the sheet span (roughly) 90% of the window height (minus safe areas) and the snapPoints are set to ["CONTENT_HEIGHT", "99%"] then you get the following behaviour:
Maybe that just relies on developers using sensible values though?

[ororsatti]

intresting point,
quite overwhelmed currently by work, but id like to take a look into this issue further

[Eli-Nathan]

Were you able to run the example app when forking to the repo? I've got a solution with extending theuseBottomSheetDynamicSnapPoints hook but can't get any of the examples running. Not sure if the contributing guide is out of date.

[Eli-Nathan]

#1510 for reference.
It just pulls most of the logic from my example above (extended to allow a number value), calls it from the useBottomSheetDynamicSnapPoints hook and returns a child view style with max height that can be applied to the View/ScrollView/FlatList

[Eli-Nathan]

#1510 Raised this PR to allow both View's and Scrollables to work with dynamic heights and to apply an optional maximum height.

Hard to tell if @gorhom is still active on this library or not but if so please could you take a look?

[gorhom]

Sorry I've been busy with my daily job, I'll have a look at it tomorrow 👍

[Eli-Nathan]

Perfect thanks very much!!