dutradotdev/.tsx

Aboa123 · 2023-03-17T07:50:10Z

If the height is too small on Android 13, the blur effect does not apply.

import BlurContainer from '<your-path>';
import { Dimensions, Image, View, Text } from 'react-native';

const page = () => {
  const windowWidth = Dimensions.get('window').width;

  return (
     <View style={{ height: 120  }}>
      <BlurContainer backgroundColor="rgba(240, 68, 56, 0.1)" blurRadius={10} />
     </View>
  );
};

In this code, the blur effect was ignored for Android.

import React from "react";
import { Dimensions, 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;
}

const BlurContainer: React.FC<BlurContainerProps> = ({ backgroundColor, blurRadius }) => {
	return (
	<View
		style={{
			position: "absolute",
			top: 0,
			bottom: 0,
			left: 0,
			right: 0,
			backgroundColor: "#00000000",
			overflow: "hidden"
		}}
	>
		<WebView
			style={{
				width: "100%",
				height: "100%",
				backgroundColor: "#00000000"
			}}
			originWhitelist={["*"]}
			overScrollMode='never'
			scrollEnabled={false}
			source={{
				html: `
          <html>
            <head>
              <meta name="viewport" content="initial-scale=1.0 maximum-scale=1.0" />
              <style>
                .blur {
                  position: absolute;
                  top: 0;
                  right:0;
                  bottom: 0;
                  left: 0;
                  height: ${Dimensions.get("screen").height}px;
                  background: ${backgroundColor};
                  -webkit-backdrop-filter: blur(${blurRadius}px);
                  backdrop-filter: blur(${blurRadius}px);
                }
              </style>
            </head>
            <body>
              <div class="blur" />
            </body>
          </html>
        `
				}}
			/>
		</View>
	);
};

export default BlurContainer;

i'm sorry the code line.
the important thing is the height.

height: ${Dimensions.get("screen").height}px;

sayanMidknightStudio · 2023-10-12T16:23:58Z

Hi , can anyone help me ? There is a problem , when I using this this with border Radius , the blur does not appear.

shav95 · 2023-12-09T20:04:11Z

@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 · 2023-12-12T04:25:54Z

@sayanMidknightStudio

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

how about use like this

sayanMidknightStudio · 2023-12-18T12:37:02Z

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

Aboa123 · 2023-12-20T05:15:32Z

@sayanMidknightStudio can you show me ur code?

hoorsa · 2024-11-21T04:26:55Z

Great solution.
Thank you for sharing.

andhikaalgo · 2024-12-16T06:17:32Z

@sayanMidknightStudio

export type RGBA = rgba(${number}, ${number}, ${number}, ${number});

export interface BlurWebViewProps {
backgroundColor: RGBA;
blurRadius: number;
borderRadius: number;
}

export const BlurWebView = ({ backgroundColor, blurRadius, borderRadius }: BlurWebViewProps) => {
return (
<View style={[
{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
]}>
<WebView
style={[
{ backgroundColor: 'transparent' },
]}
source={{

        html: `
          <html>
          <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
          </head>
            <body style="
              margin: 0;
            ">
              <div style="
                border-radius: ${borderRadius}px;
                background: ${backgroundColor};
                -webkit-backdrop-filter: blur(${blurRadius}px);
                backdrop-filter: blur(${blurRadius}px);
                width: 100%;
                height: 100%;
              ">
              </div>
            </body>
          </html>
      `,
      }}
    />
</View>

);
};

bekiCK · 2025-03-24T23:24:11Z

what did i do wrong i followed your steps

dutradotdev/.tsx

Aboa123 commented Mar 17, 2023 •

edited

Loading

sayanMidknightStudio commented Oct 12, 2023

shav95 commented Dec 9, 2023

Aboa123 commented Dec 12, 2023

sayanMidknightStudio commented Dec 18, 2023

Aboa123 commented Dec 20, 2023

hoorsa commented Nov 21, 2024

andhikaalgo commented Dec 16, 2024

bekiCK commented Mar 24, 2025

	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;

dutradotdev/.tsx

Aboa123 commented Mar 17, 2023 • edited Loading

sayanMidknightStudio commented Oct 12, 2023

shav95 commented Dec 9, 2023

Aboa123 commented Dec 12, 2023

sayanMidknightStudio commented Dec 18, 2023

Aboa123 commented Dec 20, 2023

hoorsa commented Nov 21, 2024

andhikaalgo commented Dec 16, 2024

bekiCK commented Mar 24, 2025

Aboa123 commented Mar 17, 2023 •

edited

Loading