Skip to content

Instantly share code, notes, and snippets.

@dutradotdev
Last active May 31, 2024 02:16
Show Gist options
  • Save dutradotdev/50c82763fc621ab3c1bd5ba02180ce0d to your computer and use it in GitHub Desktop.
Save dutradotdev/50c82763fc621ab3c1bd5ba02180ce0d to your computer and use it in GitHub Desktop.
BlurContainer in React Native
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;
@Aboa123
Copy link

Aboa123 commented Dec 12, 2023

@sayanMidknightStudio

<View style={{ borderRadius: 16, overFlow: "hidden" }}>
   <BlurView />
</View>

how about use like this

@sayanMidknightStudio
Copy link

@Aboa123 @shav95 i did the same and all types of modification.... but every time i add borderRadious the is vanished

@Aboa123
Copy link

Aboa123 commented Dec 20, 2023

@sayanMidknightStudio can you show me ur code?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment