-
-
Save dutradotdev/50c82763fc621ab3c1bd5ba02180ce0d to your computer and use it in GitHub Desktop.
| import React from 'react'; | |
| import WebView from 'react-native-webview'; | |
| export type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`; | |
| export interface BlurContainerProps { | |
| backgroundColor: RGBA; | |
| blurRadius: number; | |
| } | |
| const BlurContainer = ({ backgroundColor, blurRadius }: BlurContainerProps) => { | |
| return ( | |
| <WebView | |
| style={[ | |
| tw('absolute inset-0 bg-white/0'), | |
| { backgroundColor: '#00000000' }, | |
| ]} | |
| source={{ | |
| html: ` | |
| <div style="position: absolute; | |
| top: 0; | |
| right:0; | |
| bottom: 0; | |
| left: 0; | |
| background: ${backgroundColor}; | |
| -webkit-backdrop-filter: blur(${blurRadius}px); | |
| backdrop-filter: blur(${blurRadius}px);" | |
| /> | |
| `, | |
| }} | |
| /> | |
| ); | |
| }; | |
| export default BlurContainer; |
import {View} from 'react-native';
import WebView from 'react-native-webview';
export type RGBA = rgba(${number}, ${number}, ${number}, ${number});
export interface BlurContainerProps {
backgroundColor: RGBA;
blurRadius: number;
borderRadius: number;
containerBorderWidth?: number;
}
const BlurContainer = ({
backgroundColor,
blurRadius,
borderRadius,
containerBorderWidth = 1,
}: BlurContainerProps) => {
return (
<View
style={{
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
}}>
<WebView
containerStyle={{}}
style={[
{
backgroundColor: '#00000000',
},
]}
originWhitelist={['*']}
overScrollMode="never"
scrollEnabled={false}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
source={{
html: `
<style>
* {
padding: 0;
margin: 0;
}
.blur{
position: absolute;
width: calc(100% - ${containerBorderWidth}px);
height: calc(100% - ${containerBorderWidth}px);
background: ${backgroundColor};
-webkit-backdrop-filter: blur(${blurRadius}px);
backdrop-filter: blur(${blurRadius}px);
border-radius: ${borderRadius}px;
}
</style>
</head>
<body>
<div class="blur" />
</body>
</html>`,
}}
/>
</View>
);
};
export default BlurContainer;
Try this solution. It helped me.
And also notice this containerBorderWidth property if you have border in your React Native View you should subtract it from div width and height
<View style={{ borderRadius: 16, overFlow: "hidden" }}>
<BlurView />
</View>
how about use like this
@sayanMidknightStudio can you show me ur code?
Hi , can anyone help me ? There is a problem , when I using this this with border Radius , the blur does not appear.