Glassmorphism with this modal?

[GeorgeHop]

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}

[ansh]

This would be cool. What isn't working?

[GeorgeHop]

You can check the issue description more detailed) I described the problem.

[GeorgeHop]

Almost month ago I created this thread and no response from maintainers. For some reasons you can make workaround with backdropComponent and it will work okay... Why? Why with backgroundComponent it's working sometimes and sometimes no? How I said before it is something about the render -_-

[ansh]

It is possible to do. Just set the Bottom Sheet's style={{backgroundColor: "transparent"}} then put a BlurView inside with flex: 1

I just tried it and it works perfectly. @GeorgeHop

[GeorgeHop]

And what should I do with FlatList inside? I this case you cant just wrap everything inside BottomSheet in BlurView with flex 1. And probably this is not best practice if authors added external prop like backgroundComponent.

[GeorgeHop]

Any comments from author @gorhom ?

[2Senn]

I would love to see this being added as a prop too !

[github-actions[bot]]

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[bot]]

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

[GeorgeHop]

Guys more than month ago I created this issue! Maybe you will answer something?

[RGarrido03]

I'm trying to use a BlurView-powered bottom sheet modal. However, when I try @ansh's solution, the BlurView is only visible below the handle position, so the handle is completely transparent:

I created a custom handle (based on this one) that features a BlurView, but since there are two different blur surfaces (the main one and the one on the handle), the blur is not smooth between these two elements.

The dark green color background is there for showing purposes, it's planned to put a map there.

Any suggestions?

[GeorgeHop]

Hah, I added this issue like a half year ago... And no response from the author so far. I was not able to add blueview + flatlist inside this modal. Most of workarounds I found was pretty bad and low quality.

[aurelkpr]

Same issue here, BlurView is not displayed :(

[IordanisSap]

Also having the same issue

[eloisp]

Same issue, but found a workaround. On first render, BlurView is not displayed, on second it's displayed. So I forced a rerender by changing the tint

const bottomSheetRef = useRef(null)
const [blurTint, setBlurTint] = useState('light')

const onButtonBottomSheetPressed = () => {
        setBlurTint('dark')
        bottomSheetFlashRef.current?.expand()
}

useEffect(() => {
        bottomSheetRef.current?.present();
}, [bottomSheetRef]);

return (
<BottomSheetModal
     ref={bottomSheetRef}
     index={-1} 
     snapPoints={snapPoints} 
     enablePanDownToClose={true} 
     backgroundStyle={{backgroundColor: 'transparent'}} 
     enableDismissOnClose={false}
     handleComponent={null}
>
     <BlurView intensity={50} tint={blurTint} style={{flex:1}}>
                 ....
     </BlurView>
</BottomSheetModal>
)

[GeorgeHop]

Nice, but we need a cleaner solution... Or at least author description why we can't use external components to style container.

[eloisp]

Did you try with StyleSheet.absoluteFill with self-closing tag ? Seems to work with me

<BottomSheetModal
                ref={bottomSheetRef} 
                index={0} 
                snapPoints={snapPoints} 
                enablePanDownToClose={true} 
                backgroundStyle={{backgroundColor: 'transparent'}} 
                enableDismissOnClose={true}
                handleComponent={null}
            >
                <View style={styles.bottomSheetContainer}>
                    <BlurView intensity={50} tint={'light'} style={{...StyleSheet.absoluteFill, overflow: 'hidden', backgroundColor: 'transparent'}} />
                   {YOUR CONTENT}
                </View>
</BottomSheetModal>

[GeorgeHop]

This workaround is not working properly with FlatList from this lib. You can read topic one more time to see all corner cases ☺️

[mccraveiro]

I find this a better solution:

<BottomSheet
  ...
  backgroundComponent={({ style }) => (
    <BlurView
      tint="light"
      intensity={50}
      style={[style, { borderRadius: 20, overflow: "hidden" }]}
    />
  )}
/>

[GeorgeHop]

Have you tried this solution with BottomSheetFlatList?

[GeorgeHop]

I wondering why is this issue closed?

[ParthNandaniya]

anyone found the solution ?

[mccraveiro]

@ParthNandaniya have you tried this solution? https://github.com/gorhom/react-native-bottom-sheet/issues/1192#issuecomment-2002288444