Feature Request

Hi guys! Thank you for this very very very good lib.) It really helpfull!

The issue is I trying to add glassmorphism to your modal… Make it blur and transparent using expo-blur… But the issue is when I trying to do it by docs https://gorhom.github.io/react-native-bottom-sheet/custom-background it won’t work properly.

I trying to acieve something like that

Why it is needed

Because glassmorphism is very simple and popular design pattern this days)

Issue

Yes probably backgroundComponent has some issues with displaying specific background like BlurView and so on… At first render view blured and then it’s not. Probably it somehow depend on component animation or rendering system?!

Possible implementation

Make some complex samples of customizing background? Or improve backgroundComponent prop to create specific backgrounds?

Code sample

Sample of custom background

import React from 'react';
import ComponentsStyles from "../../constants/ComponentsStyles";
import {BlurView} from "expo-blur";

export default function PanelBackground({style}) {
    return (
        <BlurView
            style={{
                ...style,
                overflow: 'hidden',
                ...ComponentsStyles.borderRadius.topRadius,
                // backgroundColor: `rgba(255,255,255,0)`
                // backgroundColor: theme.rgbaWhiteComponents,
            }}
            intensity={30}
        />
    )
}

Sample of how I use it

           <BottomSheet
                animateOnMount={false}
                style={{
                    marginHorizontal: 5,
                    ...shadowGenerator(1),
                    ...ComponentsStyles.borderRadius.topRadius
                }}
                backgroundComponent={PanelBackground}
                enableOverDrag={false}