Installation

Requirements

This library ships Fabric components only and does not support the legacy (Paper) architecture. Use React Native 0.80+ with the New Architecture enabled.

LiquidGlassView needs Xcode 26.0+ and iOS 26+ for the full glass effect on iOS, and Android 13+ (API 33, where AGSL RuntimeShader is available) on Android. On older iOS and Android versions it automatically falls back to an enhanced blur approximation. LiquidGlassContainer’s merge effect is iOS 26+ only.

Install the package

npm install @sbaiahmed1/react-native-blur
# or
yarn add @sbaiahmed1/react-native-blur

iOS setup

Install pods after adding the package:

cd ios && pod install

Android setup

No additional configuration is required beyond meeting the minimum requirements:

• Min SDK: API 24 (Android 7.0)
• Android Gradle Plugin: 8.9.1 or newer

Check android/build.gradle if you hit a build error related to AGP:

classpath "com.android.tools.build:gradle:8.9.1" // or higher

The library depends on QmBlurView (com.github.qmdeve:qmblurview:v1.3.0, resolved from JitPack) for blur, pulled in automatically — no manual Gradle dependency setup needed. Liquid glass adds no dependency: the AndroidLiquidGlassView AGSL shader is bundled (MIT, attributed in the resource).

Under the hood, Android blur is produced by capturing the view into a downsampled bitmap and applying a native blur pass. Downsampling (and the configurable blurRounds) keeps it fast across all supported API levels (24+). Liquid glass (Android 13+) captures the backdrop the same safe way and feeds it to the AndroidLiquidGlassView AGSL shader, which runs refraction, dispersion, blur and tint on the GPU — the library’s own widgets bind backdrops through live RenderNode references, which form render-tree cycles inside a React Native hierarchy, so only its shader is used.

Web setup

No configuration is needed: in an Expo Web or react-native-web project (Metro, webpack, or Vite), the package automatically resolves its web implementations, which render the effects with CSS backdrop-filter.

• Browser support: backdrop-filter is available in Chrome 76+, Edge 79+, Safari 9+ (via -webkit-), and Firefox 103+ — see Can I Use for current coverage. In browsers without it (and while server-side rendering), components gracefully degrade to their semi-transparent tint without blur.
• Server-side rendering: fully supported, including Expo Router static output (web.output: "static").
• Native-only props (blurRounds, reducedTransparencyFallbackColor, ignoreSafeArea, isInteractive, spacing) are accepted and ignored on web; each component’s page lists its web behavior.

Next steps

Head to BlurView for the most common component, or browse the props reference for a consolidated view of every component’s API.