A react-native-blur / expo-blur alternative with real Liquid Glass

Most “glass” in React Native is really just blur: expo-blur and @react-native-community/blur blur the backdrop on both platforms, but there’s no refraction, no edge lensing, and no interactive glass. The newer iOS-native options (expo-glass-effect, @callstack/liquid-glass) render Apple’s real Liquid Glass — but only on iOS 26, leaving Android with nothing. react-native-liquid-glassmorphism is built for the gap: authentic Liquid Glass on iOS and a matching real-time refraction shader on Android, from one component.

Comparison

Capability react-native-liquid-glassmorphism expo-blur @react-native-community/blur expo-glass-effect / @callstack/liquid-glass
Native iOS 26 Liquid Glass (UIGlassEffect) ✅ ❌ (blur only) ❌ (blur only) ✅
Liquid Glass optics on Android ✅ AGSL refraction shader ❌ blur only ❌ blur only ❌ iOS-only
Real refraction / edge lensing (not just blur) ✅ ❌ ❌ ✅ (iOS, OS-rendered)
Chromatic dispersion + Fresnel rim ✅ (Android shader) ❌ ❌ OS-managed (iOS)
Interactive (touch bloom + tilt specular) ✅ ❌ ❌ Partial (iOS interactive glass)
Custom shapes (concave SVG silhouette) ✅ ❌ ❌ ❌
Plain blur view, glass turned off ✅ ✅ ✅ ❌
Explicit blur radius in dp ✅ blurRadius ⚠️ 0–100 intensity ✅ ❌
Dimming scrim for modal backdrops ✅ dim ❌ ❌ ❌
Tuned presets ✅ six ❌ ❌ ❌
Graceful fallback on older OS ✅ blur / tint ✅ ✅ ⚠️ iOS 26 only
Expo config plugin ✅ ✅ ❌ ✅
New Architecture (Fabric) ✅ ✅ ⚠️ ✅
TypeScript ✅ ✅ ✅ ✅

Feature matrices for other libraries move quickly — check each project’s current docs before deciding. This table reflects the honest positioning as of 2026.

When to pick which

  • expo-blur — you only need a blurred backdrop (nav bar, modal scrim) on iOS and Android, don’t need refraction or an iOS-26 glass look, and want the smallest possible dependency. Simple and well-supported.
  • @react-native-community/blur — a bare-workflow blur view if you’re not on Expo.
  • expo-glass-effect / @callstack/liquid-glass — you’re iOS-only and want Apple’s native Liquid Glass with the least code. No Android glass.
  • react-native-liquid-glassmorphism — you want real Liquid Glass on both iOS and Android from one API: native UIGlassEffect on iOS 26, a real-time AGSL refraction shader on Android, interactive touch/tilt, and custom shapes — with clean fallbacks on older OS versions. It also covers the plain-blur, glassmorphism and modal-scrim cases outright, so on iOS 15+ and Android 12+ you don’t need a second library for the surfaces that aren’t glass. See Do I still need a blur library? for the three cases where you do.

Migrating from a blur view

The mental model is the same — wrap content in a view; the backdrop behind it is treated. Where a blur view only blurs, LiquidGlassView blurs and refracts, tints, and (optionally) reacts to touch/tilt:

// Before — expo-blur
<BlurView intensity={60} tint="light" style={styles.card}>
  <Text>Content</Text>
</BlurView>

// After — react-native-liquid-glassmorphism
<LiquidGlassView variant="regular" intensity={60} interactive borderRadius={16} style={styles.card}>
  <Text>Content</Text>
</LiquidGlassView>

Children still render crisply on top; only the backdrop is affected.

If you want exactly a blur view, not glass

The glass-specific parts are individual props, not a mode, so you can turn them off and get a conventional blurred pane — with an explicit radius in dp rather than an opaque 0–100 scale:

<LiquidGlassView rim={false} specular={false} thickness={0} blurRadius={20} style={styles.card}>
  <Text>Content</Text>
</LiquidGlassView>

On iOS this is the signal to stop rendering Liquid Glass entirely and put up a plain UIBlurEffect material instead; on Android it’s a bare RenderEffect blur. Two related primitives round out the surfaces a blur view is usually asked to cover:

// Glassmorphism: transparent, blurred, tinted.
<LiquidGlassView variant="clear" blurRadius={14} tintColor="rgba(255,255,255,0.16)" />

// Modal backdrop: blurred and dimmed, behind a sheet.
<LiquidGlassView dim={0.5} blurRadius={24} rim={false} style={StyleSheet.absoluteFill} />

Do I still need a blur library?

On iOS 15+ and Android 12+, no — the snippets above are a complete replacement, and dim covers modal scrims, which no blur library offers. Three cases where you genuinely still want one:

Case Why
Web This library is mobile-only. expo-blur uses CSS backdrop-filter and works on web.
Android below API 31 Android’s RenderEffect is API 31+. Below that this library falls back to a translucent tint — a wash, not a blur. expo-blur’s experimentalBlurMethod: 'dimezisBlurView' renders a real blur back to API 21.
Dependency weight If a blurred nav bar is genuinely all you need, expo-blur is much smaller than an AGSL shader and an SDF pipeline.

getGlassCapabilities().tier tells you which side of that line a device falls on before you mount anything — a tier of 'tint' means no blur is available.

FAQ

What’s the best react-native-blur / expo-blur alternative for real glass?

expo-blur and @react-native-community/blur remain good, small choices if a blurred backdrop is genuinely all you need. If you want an actual glass material — refraction and edge lensing, not just blur — react-native-liquid-glassmorphism renders native UIGlassEffect on iOS 26 and a matching AGSL refraction shader on Android, which no blur library does. It also does the plain-blur case itself (rim={false} specular={false} thickness={0} blurRadius={20}), so switching to it doesn’t mean giving up the simple surfaces or keeping two libraries around for them.

Does this work on Android, unlike the iOS-only glass libraries?

Yes. expo-glass-effect and @callstack/liquid-glass render Apple’s real Liquid Glass but only on iOS 26, leaving Android with nothing. This library adds a real-time AGSL refraction shader on Android 13 (API 33+), so both platforms get glass from one component, with blur or tint fallbacks below those OS versions.

Can I migrate from a BlurView without rewriting my UI?

Mostly, yes. The mental model is identical — wrap content, the backdrop behind it is treated, children render on top. Swap <BlurView intensity tint> for <LiquidGlassView variant intensity tintColor>; intensity keeps its 0–100 meaning but the two libraries scale it differently, so expect to retune. Standard ViewProps still work since the component extends them.

Does it run in Expo Go?

No — it’s a custom native module (UIGlassEffect on iOS, an AGSL RuntimeShader on Android), so it needs expo prebuild or a dev build. expo-blur runs in Expo Go, which is one reason many apps keep it for utility scrims and use Liquid Glass only for hero surfaces.

See also