LiquidGlassView

LiquidGlassView renders true liquid glass natively on both mobile platforms: Apple’s UIGlassEffect API on iOS 26+, and the AndroidLiquidGlassView AGSL shader on Android 13+, with customizable tint color, opacity, and touch interactivity.

Platform behavior

• iOS 26+: native UIGlassEffect, hardware-accelerated, with optional touch interactivity via isInteractive.
• Android 13+: the AndroidLiquidGlassView RuntimeShader runs refraction, dispersion, blur and tint on the GPU. The library’s own widgets bind the backdrop through live RenderNode references, which form cyclic render trees inside a React Native hierarchy — so the backdrop is instead captured software-side from the nearest screen, downsampled, and shared by glass views with the same capture root. Glass subtrees are excluded. Idle captures are reused for up to 100 ms; movement can request a fresh capture at a 33 ms interval, while each view’s position is tracked on rendered frames. glassTintColor/glassOpacity modulate the shader tint (no scrim, no alpha cap). isInteractive enables an iOS-style press-scale animation; ignoreSafeArea and reducedTransparencyFallbackColor are iOS-only no-ops.
• iOS below 26, Android below 13, and Web: automatically falls back to BlurView with blurType="regular", blurAmount={70}, and a tinted overlayColor computed from glassTintColor/glassOpacity (capped at 35% alpha) — a deliberately engineered approximation of the glass look, not a generic blur. On web this renders with CSS backdrop-filter; glassType and isInteractive are no-ops there.
• When “Reduce Transparency” is enabled on iOS 26+, the glass effect is hidden and a solid reducedTransparencyFallbackColor view is shown instead.

⚠️ Use it wisely on Android: liquid glass is emulated through backdrop captures and a GPU shader. Views with the same capture root share a downsampled bitmap and capture work, but each glass surface still has its own shader and rendering cost; separate roots require separate captures. Prefer a few well-placed surfaces over dozens in long lists, and profile on target devices. The shader requires Android 13 (API 33) or newer; older Android versions automatically fall back to BlurView, like iOS below 26.

Note: non-uniform corner radii (e.g. only borderTopLeftRadius) clip correctly on Android, but the glass lens geometry (bevel/refraction) follows the uniform borderRadius value.

Note: the component’s actual runtime default for ignoreSafeArea is true. (An earlier version of the inline type documentation stated false — the table below reflects the real behavior.)

Basic usage

import { LiquidGlassView } from '@sbaiahmed1/react-native-blur';

<LiquidGlassView
  glassType="regular"
  glassTintColor="#007AFF"
  glassOpacity={0.8}
  style={{ padding: 20, borderRadius: 20 }}
>
  <Text>Beautiful liquid glass effect</Text>
</LiquidGlassView>

Interactive glass

<LiquidGlassView
  glassType="regular"
  glassTintColor="#007AFF"
  glassOpacity={0.9}
  isInteractive={true} // iOS 26+ and Android 13+
  ignoreSafeArea={false}
  style={{ flex: 1, padding: 30 }}
>
  <Text>Interactive liquid glass that responds to touch</Text>
</LiquidGlassView>

Glass types

Props