Documentation

@sbaiahmed1/react-native-blur ships six components for native blur, vibrancy, and liquid glass effects on iOS 26+ and Android 13+. Start with installation, then look up whichever component fits your use case.

Installation

Requirements and setup steps for @sbaiahmed1/react-native-blur on iOS, Android, and Web.

BlurView

Native blur effects for iOS, Android, and Web with precise intensity control.

VibrancyView

iOS only

iOS vibrancy effects that make content shine through a blurred background.

LiquidGlassView

iOS 26+

Native liquid glass on iOS 26+ (UIGlassEffect) and Android 13+ (AndroidLiquidGlassView shader), with a tinted-blur fallback elsewhere.

LiquidGlassContainer

iOS 26+

Group multiple glass elements with configurable spacing using UIGlassContainerEffect.

ProgressiveBlurView

Smooth, variable/gradient blur transitions on iOS, Android, and Web.

BlurSwitch

A switch button with a blurred track on Android.

Props reference

Consolidated prop tables for all six components, plus the BlurType and GlassType enums.

Migration & breaking changes

Upgrading from v3.x, and migrating from @react-native-community/blur or expo-blur.