Is your feature request related to a problem? Please describe.
Currently, when using this library in a project that targets Web (via react-native-web), the BlurView component is not supported. It often results in errors or requires developers to manually implement platform-specific checks (Platform.OS === 'web') to render a fallback component, which breaks the "write once, run anywhere" experience.
Describe the solution you'd like
I would like to request native web support included directly in the library.
This can be achieved effectively by adding a BlurView.web.tsx (or .js) file that utilizes the standard CSS backdrop-filter property.
The implementation should:
Use backdrop-filter (and -webkit-backdrop-filter for Safari) to handle the blur effect.
Map the blurType prop (light, dark, etc.) to semi-transparent backgroundColor overlays (rgba) to simulate the tinting effect found in iOS/Android.
Map blurAmount to the CSS blur pixel radius.
Describe alternatives you've considered
I have considered using expo-blur, but that introduces Expo dependencies which are not always desirable in a bare React Native CLI project. Currently, my alternative is to manually create a wrapper component in my project to handle the web implementation separately, but it would be much better if the library handled this out of the box.
Additional context
Modern browsers have good support for backdrop-filter. Here is a potential implementation logic that could be used for BlurView.web.tsx:
TypeScript
// Example logic for web support
const BlurView = ({ blurType, blurAmount, style, ...props }) => {
const getOverlayColor = (type) => {
// Map 'dark' -> rgba(0,0,0,0.5), 'light' -> rgba(255,255,255,0.4), etc.
};
return ( <View style={[ style, { backgroundColor: getOverlayColor(blurType), backdropFilter: blur(${blurAmount}px), WebkitBackdropFilter: blur(${blurAmount}px) } ]} {...props} /> ); };
Is your feature request related to a problem? Please describe.
Currently, when using this library in a project that targets Web (via react-native-web), the BlurView component is not supported. It often results in errors or requires developers to manually implement platform-specific checks (Platform.OS === 'web') to render a fallback component, which breaks the "write once, run anywhere" experience.
Describe the solution you'd like
I would like to request native web support included directly in the library.
This can be achieved effectively by adding a BlurView.web.tsx (or .js) file that utilizes the standard CSS backdrop-filter property.
The implementation should:
Use backdrop-filter (and -webkit-backdrop-filter for Safari) to handle the blur effect.
Map the blurType prop (light, dark, etc.) to semi-transparent backgroundColor overlays (rgba) to simulate the tinting effect found in iOS/Android.
Map blurAmount to the CSS blur pixel radius.
Describe alternatives you've considered
I have considered using expo-blur, but that introduces Expo dependencies which are not always desirable in a bare React Native CLI project. Currently, my alternative is to manually create a wrapper component in my project to handle the web implementation separately, but it would be much better if the library handled this out of the box.
Additional context
Modern browsers have good support for backdrop-filter. Here is a potential implementation logic that could be used for BlurView.web.tsx:
TypeScript
// Example logic for web support
const BlurView = ({ blurType, blurAmount, style, ...props }) => {
const getOverlayColor = (type) => {
// Map 'dark' -> rgba(0,0,0,0.5), 'light' -> rgba(255,255,255,0.4), etc.
};
return ( <View style={[ style, { backgroundColor: getOverlayColor(blurType), backdropFilter: blur(${blurAmount}px), WebkitBackdropFilter: blur(${blurAmount}px) } ]} {...props} /> ); };