Skip to content

Instantly share code, notes, and snippets.

@dutradotdev

dutradotdev/.tsx

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.
Download ZIP
BlurContainer in React Native
Raw
.tsx
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;
@shav95
Copy link

shav95 commented Dec 9, 2023

@sayanMidknightStudio

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

@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