react-native-blur

New Architecture · Fabric ready

Native blur & liquid glass for React Native

Six specialized components for real, hardware-accelerated blur and iOS 26+ liquid glass effects — SwiftUI on iOS, Kotlin on Android, full TypeScript support, and smart fallbacks everywhere else.

npm install @sbaiahmed1/react-native-blur
LiquidGlassView on iOS 26+ (falls back to enhanced blur elsewhere)

Everything you need for glass and blur UI

Six specialized components

BlurView, VibrancyView, LiquidGlassView, LiquidGlassContainer, ProgressiveBlurView, and BlurSwitch — each with a focused, dedicated API instead of one component switching modes.

Liquid glass, for real

The only React Native blur library with iOS 26+ UIGlassEffect and UIGlassContainerEffect support, with a well-engineered tinted-blur fallback everywhere else.

Real Android blur

Hardware-accelerated blur via QmBlurView on Android — RenderEffectBlur on API 31+, RenderScriptBlur below that, not a translucent overlay hack.

New Architecture ready

Built as Fabric/Turbo Module native views from the ground up, with SwiftUI on iOS and Kotlin on Android.

Full TypeScript support

Every component ships its own prop types and enums (BlurType, GlassType, ProgressiveBlurDirection) for precise autocomplete and type checking.

Accessible by default

All blur and glass effects automatically respect the "Reduce Transparency" setting, with a configurable fallback color.

How it compares

Compared against @react-native-community/blur and expo-blur, the two most commonly used alternatives.

 @sbaiahmed1/react-native-blur@react-native-community/blurexpo-blur
Component architectureSix dedicated components, each with a focused APISingle BlurView with a mode-switching propSingle BlurView component
Liquid glass effects (iOS 26+)
New Architecture (Fabric) supportBuilt for Fabric/Turbo Modules from the ground upPartialPartial
Android blurReal hardware-accelerated blur (QmBlurView)VariesExperimental
Requires Expo
Per-component TypeScript prop types