Skip to content

Instantly share code, notes, and snippets.

@tgmarinho
Forked from dutradotdev/.tsx
Created February 16, 2024 17:44
Show Gist options
  • Save tgmarinho/bd071c4b8c92d3c01e742d6c87761c6e to your computer and use it in GitHub Desktop.
Save tgmarinho/bd071c4b8c92d3c01e742d6c87761c6e 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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment