Skip to content

feat: Add support for React Native Web (BlurView) #79

@javier545dev

Description

@javier545dev

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} /> ); };

Metadata

Metadata

Assignees

Labels

enhancementNew feature or requestwebWeb only

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions