LiquidGlassView

LiquidGlassView uses Apple’s UIGlassEffect API (iOS 26+) for true liquid glass rendering, with customizable tint color, opacity, and touch interactivity.

Platform fallback behavior

• iOS 26+: native UIGlassEffect, hardware-accelerated, with optional touch interactivity via isInteractive.
• iOS below 26, and Android: 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.
• When “Reduce Transparency” is enabled on iOS 26+, the glass effect is hidden and a solid reducedTransparencyFallbackColor view is shown instead.

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+ only
  ignoreSafeArea={false}
  style={{ flex: 1, padding: 30 }}
>
  <Text>Interactive liquid glass that responds to touch</Text>
</LiquidGlassView>

Glass types

Props