DEV Community: Wrack

Liquid Glass on Android in React Native — I refracted the backdrop with a real-time AGSL shader (the keyword-optimized title from your posting kit)

Wrack — Mon, 27 Jul 2026 10:16:36 +0000

TL;DR — React Native has no built-in Liquid Glass on Android. The library react-native-liquid-glassmorphism reproduces it: every frame it captures the backdrop, blurs it with RenderEffect, then runs a hand-written AGSL refraction shader (RuntimeShader, Android 13 / API 33+) that bends the backdrop through a modelled glass slab — edge refraction, chromatic dispersion, a Fresnel rim, and a device-tracking specular. On iOS 26 the same <LiquidGlassView> uses Apple's native UIGlassEffect. This post walks the Android pipeline end to end.

Key takeaways

Android gives you only two primitives for this — RenderEffect.createBlurEffect and RuntimeShader (AGSL). Everything Apple's material does for free, you model yourself.
What makes it read as glass and not blur: refracting the backdrop through a surface normal, chromatic dispersion, a mirrored edge echo, and a Fresnel + specular rim.
The performance work is in backdrop capture + dirty-tracking, not the shader.
The full lens needs Android 13 / API 33+ (and the iOS 26 SDK on iOS); it degrades gracefully below both.

When Apple shipped Liquid Glass with iOS 26, it landed as a system material. You add UIGlassEffect to a view and the OS does the rest: it captures what's behind you, blurs it, warps it through a modelled slab of glass, and paints a specular highlight that tracks the device. Real edge refraction, chromatic dispersion at the rim, an inverted echo of the content just outside the frame. Not a blur — a lens.

Android has none of this. There is no glass material, no View, no Compose modifier. What Android gives you, from API 33 (Android 13), is two lower-level primitives: RenderEffect.createBlurEffect (a Gaussian blur you can attach to a render node) and RuntimeShader (a way to run AGSL — Android Graphics Shading Language, Skia's dialect of SkSL — per pixel as a render effect). That's it. Everything Apple's material does for free, you have to model yourself.

This is the story of doing exactly that inside a React Native view — react-native-liquid-glassmorphism. The whole Android renderer is one Kotlin ReactViewGroup subclass plus one AGSL string. I'll walk the pipeline back-to-front, the same order iOS composites in, and explain why each stage exists — because most of the interesting decisions are about what goes wrong when you skip a step.

The pipeline, in one breath

Every frame the backdrop changes, the view does this:

Capture the hierarchy behind it into a downscaled bitmap (software canvas).
Skip repaint if the backdrop didn't actually change (dirty hash).
Draw that bitmap into a hardware RenderNode and attach a blur RenderEffect.
Chain an AGSL RuntimeShader onto the blur — that's where the optics live.
Let the React children draw crisply on top as normal ViewGroup children.

Stages 3–4 are the whole trick, but stages 1–2 are where the performance and the bugs are.

Capturing the backdrop without recording yourself

The shader needs pixels to bend. Those pixels are whatever is behind the glass — sibling views, the screen underneath. So on every onPreDraw, the view rasterises the view tree behind it into a Bitmap:

override fun onPreDraw(): Boolean {
  if (isCapturing || width == 0 || height == 0) return true
  captureBackdrop()
  ...
}

The obvious approach — record the live view tree into a RenderNode and read it back — deadlocks. The recorded tree keeps references back to your own node, and HWUI stack-overflows walking it. So instead the capture goes through a plain software Canvas backed by a bitmap, which rasterises immediately with no live references:

canvas.save()
val scale = 1f / captureScale
canvas.scale(scale, scale)
canvas.translate(-(locThis[0] - locRoot[0]).toFloat(), -(locThis[1] - locRoot[1]).toFloat())
// draw() short-circuits while capturing so we never record ourselves.
isCapturing = true
try {
  root.draw(canvas)
} finally {
  isCapturing = false
}
canvas.restore()

Two details matter here. First, the translate offsets the root by the glass view's window position, so the bitmap holds exactly the region behind this view. Second — the important one — the view guards its own draw():

override fun draw(canvas: Canvas) {
  if (isCapturing) return
  super.draw(canvas)
}

Without that guard, root.draw(canvas) would recurse into the glass view itself, which would try to capture, which would draw the root again — infinite feedback, a hall of mirrors. The isCapturing flag makes the glass invisible to its own capture pass.

The 2× downscale, and why it's not free detail

The capture isn't full resolution. It's downscaled by a constant:

private val captureScale = 2

Half-resolution capture is a deliberate trade. It's cheaper to rasterise, cheaper to upload to the GPU, and — conveniently — it pre-softens the image before the blur even runs, so you can get away with a lighter blur radius and keep more structure for the lens to bend. The cost is honest: fine text in the backdrop loses crispness before it's refracted. For a backdrop being blurred and warped anyway, that's invisible; if you ever wanted a near-lossless lens you'd pay for captureScale = 1. (Worth flagging: the code comment next to this constant discusses values 3 and 6, leftovers from earlier tuning — the shipped value is 2, which the docs and the render path both use.)

Dirty tracking: the difference between free and 60fps-forever

Here's the trap with onPreDraw capture: if you invalidate() yourself every time you capture, you've built a perpetual-motion machine. Capturing schedules a draw, the draw triggers onPreDraw, which captures, which schedules a draw... 60fps forever, on a completely static screen, burning battery for nothing.

The fix is to only repaint when the backdrop actually changed. Comparing every pixel each frame would cost as much as the redraw. Instead the view hashes a sparse 6×5 grid of sampled pixels:

private fun backdropHash(): Int {
  val bmp = captured ?: return 0
  var hash = 1
  val cols = 6; val rows = 5
  for (r in 0 until rows) {
    val y = (h - 1) * r / (rows - 1)
    for (c in 0 until cols) {
      val x = (w - 1) * c / (cols - 1)
      hash = hash * 31 + bmp.getPixel(x, y)
    }
  }
  return hash
}

Then in onPreDraw, repaint only on a hash change (or the first good frame):

val hash = backdropHash()
if (!haveGoodCapture || hash != lastBackdropHash) {
  lastBackdropHash = hash
  haveGoodCapture = true
  postInvalidateOnAnimation()
}

On a static screen the hash settles after one frame and the loop stops dead. When something behind the glass scrolls or animates, that invalidation fires onPreDraw, the hash differs, and exactly one fresh frame is drawn. The postInvalidateOnAnimation() (rather than a plain invalidate() from inside the draw pass) matters too: an invalidate() issued mid-onPreDraw gets unreliably coalesced by HWUI, and a dropped repaint is exactly what would let a black first-capture stick on screen as a ghost overlay.

Blur → shader: the RenderEffect chain

Now the GPU stage. The captured bitmap is recorded into a hardware RenderNode, and a RenderEffect is attached to it. The effect is built back-to-front to mirror iOS's compositing order — blur first, then the material shader chained on top:

private fun buildEffect(w: Int, h: Int): RenderEffect {
  val radius = GlassParams.blurRadiusPx(intensity, variantClear, density)
  val blur = RenderEffect.createBlurEffect(radius, radius, Shader.TileMode.CLAMP)

  val shader = glassShader ?: run { shaderActive = false; return blur }

  shader.setInputShader("sdf", ...)
  shader.setFloatUniform("iResolution", w.toFloat(), h.toFloat())
  shader.setFloatUniform("iCorner", ...)
  shader.setFloatUniform("iLens", GlassParams.lensStrengthPx(...) * thickness)
  // ... vibrancy, tint, specular, tilt, touch uniforms ...

  val material = RenderEffect.createRuntimeShaderEffect(shader, "content")
  shaderActive = true
  return RenderEffect.createChainEffect(material, blur)
}

createChainEffect(material, blur) means: run blur first, feed its output into the content sampler of the shader. Note the blur is deliberately light (a few dp, scaled by intensity, and clear gets a fraction of that) — a heavy blur destroys the very structure the lens needs to bend. The shader is compiled once, at construction, and reused every frame; recompiling AGSL per frame would stutter visibly:

private val glassShader: RuntimeShader? = try {
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) RuntimeShader(GLASS_AGSL) else null
} catch (_: Throwable) { null }

If the SDK is below 33, or the AGSL fails to compile, glassShader is null and buildEffect returns the bare blur. That's the first fallback tier, and it happens without a branch anywhere else in the code.

The shader: modelling a slab of glass, one pixel at a time

This is the heart of it. The content sampler is the blurred backdrop; the shader's job is to figure out, for each output pixel, where in that backdrop to sample from so the result looks like light bending through a rounded slab of glass.

Step 1 — Signed distance field. Treat the view as a rounded rectangle and compute the exact signed distance to its edge:

float sdRoundRect(float2 p, float2 b, float r) {
  float2 q = abs(p) - b + r;
  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
}

The SDF is the backbone: it gives distance-to-edge for free, and its gradient gives the surface normal. From d the shader derives a rim ramp (0 in the interior → 1 at the very edge, across a band lensW px wide).

Step 2 — Surface normal by differentiating the SDF. The direction of steepest distance change is the outward normal — which way the glass surface tilts:

float gx = sdRoundRect(p + float2(e,0.0), b, iCorner) - sdRoundRect(p - float2(e,0.0), b, iCorner);
float gy = sdRoundRect(p + float2(0.0,e), b, iCorner) - sdRoundRect(p - float2(0.0,e), b, iCorner);
float2 n2 = float2(gx, gy) / (length(float2(gx,gy)) + 1e-5);

Step 3 — Inward refraction. This is the signature move. Take a steep power of the rim ramp so almost all the bending happens in the outer ring, then push the sample coordinate inward along the normal:

float bend = rim * rim * axisFade;
float2 disp = n2 * bend * iLens * edgeGuard;
float2 uv = magCoord - disp - reflDisp;

Because the shader samples from further inside the backdrop near the rim, content behind the edge is magnified outward and appears to wrap around it — like the fat edge of a water droplet. The centre, where rim is ~0, stays clear. iLens is the edge displacement in pixels, scaled by the thickness prop. axisFade deserves a note: the SDF gradient collapses along a shape's medial axis (the ridge equidistant from two edges), and on a short pill the top and bottom lens rings meet there and the normal flips, producing a hard seam. Fading the lens to zero where the gradient magnitude drops kills the seam and leaves flat clear glass down the middle.

Step 4 — Chromatic dispersion. Real glass splits wavelengths at the rim. Sample R, G, B at slightly offset coordinates along the normal:

float2 ca = n2 * bend * iLens * 0.018;
src.r = content.eval(clamp(uv + ca, float2(0.0), iResolution - 1.0)).r;
src.g = content.eval(clamp(uv,      float2(0.0), iResolution - 1.0)).g;
src.b = content.eval(clamp(uv - ca, float2(0.0), iResolution - 1.0)).b;

The 0.018 factor is tiny on purpose. iOS UI glass shows almost no prismatic rainbow; crank the split and it reads as a chromatic-aberration artefact, not glass.

Step 5 — The mirrored edge band. Look at a glass pill on iOS and you'll see an upside-down echo of the content just outside it, folded back along the top and bottom. That's a second, broader displacement band at the rim (reflDisp above, scaled independently by the edgeReflectionStrength prop). Verified against iOS 26 side-by-side, the OS band is broad and soft — a thin band reads as a hard streak, so this one spans roughly a third of the surface with a squared falloff.

Step 6 — Vibrancy, then adaptive frost. Glass over-saturates what it transmits, so boost saturation while preserving luma, then lift only dark backdrop toward neutral so foreground text stays legible — never a milky fill:

float luma = dot(src, half3(0.2126, 0.7152, 0.0722));
half3 col = half3(luma) + (src - half3(luma)) * iSat;
float adapt = clamp(iLift + (1.0 - luma) * iAdapt, 0.0, 0.5);
col = mix(col, half3(1.0), adapt);

Step 7 — Rim, Fresnel, specular, and the touch/tilt terms. A clean even bright rim outline (independent of lighting, so it never clumps into blobs), a gentle Fresnel term, a broad diagonal sheen band, and a small specular hotspot whose light direction is driven by the gravity sensor when tilt is on:

float rimLine = 1.0 - smoothstep(0.0, 3.0, -d);
float fres = pow(1.0 - N.z, 3.0);
float3 L = normalize(float3(-0.5 + iTilt.x * 1.5, -0.7 + iTilt.y * 1.5, 0.8));
float spec = pow(clamp(dot(N, L), 0.0, 1.0), 10.0);

And the interactive touch magnifier — press and the glass optically zooms toward your finger without the element changing size, exactly as iOS presses lens harder rather than resizing:

float2 td = coord - iTouch;
float tFall = exp(-dot(td, td) / (tmr * tmr));
float2 magCoord = coord - td * (iTouchAmt * tFall * 0.30);

One subtlety I'll call out because it bit me: an edgeGuard = smoothstep(0.0, 12.0, -d) tapers all refraction to zero across the outermost ~12px. Displacement peaks right at the rim, which is exactly where it magnifies sub-pixel normal noise into radial "cracked glass" hairlines. A thin calm bevel there erases the fringe; the crisp rim line still draws the edge.

Being honest about the constraints

API 33+ for the full lens. RuntimeShader only exists from Android 13. That's the top tier.
API 31–32: RenderEffect blur exists, but no runtime shader, so you get blur + a Canvas-drawn tint and specular — no refraction.
Below API 31: a translucent tint with a rim outline, and that's all.
minSdkVersion is 24, so it installs and renders something everywhere; only the lens needs 33. The view logs its actual tier once (render tier=agsl|blur|tint) so you can tell "flat because fallback" from "flat because misconfigured" straight from adb logcat -s LiquidGlass.
The 2× capture trades backdrop crispness for cost, per above.
Performance: the dirty hash means a static screen costs nothing after the first frame, and the shader compiles once. I'm deliberately not quoting fps numbers — I don't have a rigorous benchmark, and made-up frame rates help no one.

The result isn't Apple's material — it's a model of it, tuned by eye against the real thing. But on a mid-range Android phone, over a photo or a scrolling feed, it reads as glass, not blur. That was the whole goal.

FAQ

Does React Native support Liquid Glass on Android?
Not natively — Android has no system Liquid Glass material. react-native-liquid-glassmorphism adds it by capturing the backdrop and running a real-time AGSL refraction shader (RuntimeShader) on Android 13 / API 33+, with graceful fallbacks below that.

What Android version do I need for Liquid Glass in React Native?
API 33+ (Android 13) for the full refraction lens. API 31–32 falls back to blur + a Canvas tint/specular; below API 31, a translucent tint. minSdkVersion is 24, so it installs and renders something everywhere.

Is this just a blur view?
No. A blur softens the backdrop in place; this refracts it — displacing the backdrop through a modelled glass surface normal, with chromatic dispersion, a mirrored edge echo, and a Fresnel + specular rim. It's a lens, not a blur.

How is it different from expo-blur or @react-native-community/blur?
Those are blur-only. This renders real Liquid Glass optics (refraction) on Android, and Apple's native UIGlassEffect on iOS 26 — one <LiquidGlassView> component, both platforms.

Does react-native-liquid-glassmorphism work in Expo Go?
No — it's a native module, so it needs a dev build / expo prebuild. It ships an Expo config plugin to make that setup one line.

What does it do on iOS?
On iOS 26 the same component composites Apple's native UIGlassEffect; below iOS 26 it falls back to UIBlurEffect. Full details and the per-OS fallback matrix are in the docs.

If you want to try it or read the source:

npm: npm install react-native-liquid-glassmorphism
GitHub: https://github.com/himanshu-lal4/react-native-liquid-glassmorphism
Docs: https://himanshu-lal4.github.io/react-native-liquid-glassmorphism/

And if you build onboarding into your app, my other library — @wrack/react-native-tour-guide — does spotlight tours and coach marks with auto shape-matching, and runs in Expo Go.

Questions about any stage of the pipeline — the capture, the dirty-hash, the SDF math, the fallback tiers — are exactly what the comments are for. And if you've attempted glass on Android a different way (Compose, SurfaceView, Vulkan…), I'd really like to compare notes.

The Best React Native App Tour & Onboarding Libraries in 2026 (Compared)

Wrack — Mon, 27 Jul 2026 10:10:09 +0000

Adding a guided tour, walkthrough, or coach marks to a React Native app sounds simple until you hit the real problems: measuring a component's position, dimming everything except it, keeping the tooltip on screen, and scrolling to targets that are below the fold. Several libraries solve this. Here's an honest, hands-on comparison of the main options in 2026.

Quick answer: react-native-copilot is the long-standing default with the biggest community. rn-tourguide adds SVG masking on top of the copilot model. react-native-spotlight-tour is the cleanest simple option. react-native-tour-guide is the pick if you want the spotlight to automatically match your component's shape, auto-scroll to off-screen targets, and run in Expo Go with zero native dependencies.

TL;DR

Library	Expo Go	Native deps	Auto shape-match	Auto-scroll	TS	Best for
react-native-copilot	⚠️ needs config	Some	No	Partial	Yes	The long-time default, large install base
rn-tourguide	⚠️	react-native-svg	No	No	Yes	Fork of copilot with SVG masking
react-native-spotlight-tour	⚠️	Some	Circle/rect only	No	Yes	Simple spotlight, good docs
react-native-tour-guide	✅ works in Go	Zero (svg peer only)	Yes (per-corner)	Yes	Yes	Shape-accurate spotlights, Expo Go, scrolling screens

What to look for in a React Native tour library

Spotlight accuracy — does the cutout match your component's shape (a circular avatar, a pill button, a card with 12px corners), or is it always a rectangle/circle you configure by hand?
Scrolling — will it scroll a target into view if it's off-screen, keeping the tooltip visible too?
Expo compatibility — does it run in Expo Go, or do you need a custom dev build (native modules)?
Tooltip positioning — does it auto-pick a side and stay within safe-area insets, or do you position every step manually?
New Architecture (Fabric) — does the overlay render correctly without a white film over the highlight?

1. react-native-copilot

The most-installed option and the one most tutorials reference. You wrap components with copilotStep/walkthroughable HOCs and start a tour. Mature and battle-tested, with a large community.

Trade-offs: highlight shapes are basic, positioning often needs manual tuning, and getting it running under Expo/New Architecture can require extra setup.

2. rn-tourguide

A popular fork of copilot that uses react-native-svg for the mask and adds circle/rectangle shapes and some animation. A solid step up in visuals if you're already in the copilot mental model.

Trade-offs: no automatic per-corner shape matching, no built-in auto-scroll, and the SVG <Mask> approach can show a faint film over the highlight on Fabric in some setups.

3. react-native-spotlight-tour

A clean, well-documented library built around a spotlight metaphor with a nice hook-based API. Great if you want something simple and readable.

Trade-offs: spotlight shapes are limited to circle/rectangle, and scrolling to off-screen targets is on you.

4. react-native-tour-guide

A newer, lightweight library focused on the two things the others make you do by hand: shape-accurate spotlights and auto-scroll.

Auto shape matching — pass the same style you use on the component as targetStyle, and the spotlight reads its borderRadius and matches it exactly. Circular avatars get circular spotlights; a chat bubble with asymmetric corners gets an asymmetric spotlight; a borderRadius: 12 card stays 12px.
Smart auto-scroll — give it a scrollRef and it scrolls so the target and its tooltip are both fully visible, hiding the highlight mid-scroll to avoid flicker.
Smart tooltip positioning — auto-detects the best side and clamps within safe-area insets so it never renders off-screen.
Runs in Expo Go — zero native dependencies (only react-native-svg, which Expo ships). No custom dev build.
Fabric-safe — the overlay is a single even-odd SVG path (a real punched-out hole), not a <Mask>, so there's no white film on the New Architecture.
Themeable tooltips + createTheme(), pulse animation, pause/resume, conditional steps, and a useTourPersistence hook for "show only once."

npm install @wrack/react-native-tour-guide

import { TourGuideProvider, TourGuideOverlay, useTourGuide } from '@wrack/react-native-tour-guide';

// Wrap once
<TourGuideProvider>
  <App />
  <TourGuideOverlay />
</TourGuideProvider>

// Start a tour
const { startTour } = useTourGuide();
startTour([
  { id: 'welcome', targetRef: buttonRef, title: 'Welcome', description: 'Tap here to begin.', targetStyle: styles.button },
  { id: 'avatar',  targetRef: avatarRef, title: 'Profile', description: 'View your profile.', targetStyle: styles.avatar }, // circular → circular spotlight
]);

Trade-offs: it's newer and has a smaller community than copilot. If you need the exact copilot API or its ecosystem of examples, that's still the incumbent.

Which should you pick?

Want the safe, most-referenced default and don't mind manual tuning? → react-native-copilot.
Already like the copilot model but want nicer SVG visuals? → rn-tourguide.
Want something minimal and well-documented, rectangles/circles are fine? → react-native-spotlight-tour.
Want the spotlight to match your real component shapes, need auto-scroll on long screens, and want it to just work in Expo Go with no dev build? → react-native-tour-guide.

FAQ

How do I add an app tour or walkthrough in React Native?

Use a tour library instead of hand-rolling the overlay: wrap your app in the library's provider, attach a ref to each component you want to highlight, and start the tour with an array of steps. The hard parts a library solves for you are measuring the target's position, punching a hole in the dimmed overlay, and positioning the tooltip.

Which React Native tour library works with Expo Go?

react-native-tour-guide runs in Expo Go out of the box because its only dependency is react-native-svg, which Expo Go already ships. Most alternatives need extra configuration or a custom development build.

How do I highlight a component with a spotlight that matches its shape?

With react-native-tour-guide, pass the component's own style object as targetStyle — the spotlight reads its borderRadius (including per-corner values) and matches the cutout exactly. Other libraries limit you to configured rectangles or circles.

How do I scroll to a tour step that's off-screen?

Pass a scrollRef to react-native-tour-guide and it auto-scrolls so both the target and its tooltip are fully visible, hiding the highlight mid-scroll to avoid flicker. In copilot, rn-tourguide, and spotlight-tour, scrolling to off-screen targets is largely manual.

How do I show an onboarding tour only once?

react-native-tour-guide ships a useTourPersistence hook for exactly this — it records completion so the tour only runs on first launch. With other libraries you'd wire this up yourself with AsyncStorage.

Links: Docs · GitHub (source + demos) · npm package — if it saves you time, a ⭐ on GitHub helps other people find it.

I wrote this comparison after building the fourth library on the list, so I'm biased but I've tried to be fair — if your experience with copilot, rn-tourguide, or spotlight-tour differs, tell me in the comments and I'll update the post. Also curious: what's the most annoying part of building onboarding in RN for you?

The Best React Native Liquid Glass & Glassmorphism Libraries in 2026 (Compared)

Wrack — Mon, 27 Jul 2026 08:59:07 +0000

Apple's Liquid Glass (iOS 26) made translucent, refractive glass the default look for modern apps — and every React Native developer now wants it. The catch: most "glass" in React Native is really just blur, and the libraries that render real Liquid Glass are iOS-only, leaving Android out. Here's an honest, hands-on comparison of the options in 2026, including the one that does Android too.

Quick answer: If you only need a blurred backdrop on both platforms, use expo-blur. If you're iOS-only and want Apple's native Liquid Glass, use expo-glass-effect or @callstack/liquid-glass. If you want real Liquid Glass on iOS and a matching refractive glass effect on Android, react-native-liquid-glassmorphism is currently the only option — it renders native UIGlassEffect on iOS 26 and a real-time AGSL refraction shader on Android.

TL;DR

	expo-blur	@react-native-community/blur	expo-glass-effect	@callstack/liquid-glass	react-native-liquid-glassmorphism
Real Liquid Glass	❌	❌	✅	✅	✅
Works on Android	✅ (blur only)	✅ (blur only)	❌ iOS-only	❌ iOS-only	✅ AGSL shader
Refraction (not just blur)	❌	❌	✅ (iOS, OS-rendered)	✅ (iOS, OS-rendered)	✅ both platforms
Custom shapes	❌	❌	❌	❌	✅
Best for	Simple backdrop blur, both platforms	Bare-workflow blur	iOS-only apps, least code	iOS-only, native wrapper	Real glass on iOS and Android

Notice the Works on Android row: every other option gives Android either a plain blur or nothing at all. As of 2026, react-native-liquid-glassmorphism is the only React Native library that renders real glass optics — refraction, not blur — on Android. That single difference is what this comparison mostly comes down to.

What to look for in a React Native glass library

Real glass vs. blur — does it refract the backdrop (bend and magnify it through a glass surface), or just blur it? Real Liquid Glass has edge lensing, a Fresnel rim, and chromatic dispersion; a blur view has none of that.
Android — Apple's Liquid Glass is iOS-only. Does the library give you anything comparable on Android, or does Android fall back to a flat blur (or nothing)?
Interactivity — does the glass react to touch and device tilt with a moving specular highlight, like the real thing?
Shapes — can the glass be a circle, a squircle, or a notched tab-bar silhouette, or is it always a rectangle?
Fallbacks — does it degrade cleanly on iOS < 26 and older Android, or break?

1. expo-blur

The default for a quick blurred backdrop in Expo apps. Cross-platform, well-supported, trivial to use. But it's blur only — no refraction, no iOS-26 glass material, no interactivity. Great for a frosted nav bar; not a Liquid Glass look.

2. @react-native-community/blur

The long-standing bare-workflow blur view. Same story as expo-blur: solid blur, no glass optics.

3. expo-glass-effect / @callstack/liquid-glass

These wrap Apple's native iOS 26 Liquid Glass material and look fantastic — because it's the real OS effect. The limitation is fundamental: iOS 26 only. On Android (and older iOS) both simply fall back to a plain, opaque View — there's no glass. Perfect if your app is iOS-only.

4. react-native-liquid-glassmorphism — the only one that does Android

Built specifically for the gap: real Liquid Glass on both platforms from one component. Your Android users are probably half your user base or more — with every other library on this list, they get a flat blur at best while your iOS users get glass.

iOS 26 — renders Apple's native UIGlassEffect (with a UIBlurEffect fallback below 26).
Android — there's no system Liquid Glass, so it reproduces the optics in a real-time AGSL refractive-lens shader: it captures the backdrop each frame, blurs it, and bends it through a rounded-glass lozenge with edge refraction, chromatic dispersion, a mirrored edge reflection, a Fresnel rim, and tilt/touch specular highlights. This is the part no other RN library does.
Interactive — a specular bloom + optical magnification under the finger, and a specular that tracks device tilt.
Custom shapes — circle, squircle, polygon, explicit points, or an arbitrary (even concave) SVG path (a notched tab bar, for example). The glass lenses the backdrop through the silhouette.
Degrades cleanly — Android 12 → blur + tint; below 12 → translucent tint. iOS < 26 → blur.

npm install react-native-liquid-glassmorphism

import { LiquidGlassView } from 'react-native-liquid-glassmorphism';

<LiquidGlassView variant="regular" tintColor="rgba(10,132,255,0.5)" interactive borderRadius={24}>
  <Text>Frosted glass content</Text>
</LiquidGlassView>

Trade-offs: it's a native module (needs a dev build / prebuild, not Expo Go), it's newer with a smaller community than expo-blur, and it's mobile-only (no web yet). If you only need a blur, expo-blur is simpler; if you're iOS-only, expo-glass-effect is less code.

Which should you pick?

Just need a blurred backdrop on both platforms? → expo-blur.
iOS-only and want Apple's native Liquid Glass with minimal code? → expo-glass-effect / @callstack/liquid-glass.
Want real Liquid Glass on iOS and a matching refractive glass effect on Android, with custom shapes and interactivity? → react-native-liquid-glassmorphism.

FAQ

Does Liquid Glass work on Android?

Not natively — Liquid Glass is an Apple system material and Android has no equivalent. The only way to get the look on Android today is to reproduce the optics with a shader, which is what react-native-liquid-glassmorphism does: per-frame backdrop capture, a RenderEffect blur, and an AGSL refraction shader (Android 13+, with blur/tint fallbacks below that).

Is expo-blur the same as Liquid Glass?

No. expo-blur is a backdrop blur — it softens what's behind the view. Liquid Glass is a lens: it refracts and magnifies the backdrop at the edges, disperses color at the rim, and reacts to touch and tilt. A blur view gives you none of that.

How do I add a glassmorphism effect in React Native?

For a simple frosted look, wrap your content in expo-blur's BlurView with a translucent background color. For actual glass optics on both platforms, use LiquidGlassView from react-native-liquid-glassmorphism — one component, no per-platform code.

Does react-native-liquid-glassmorphism work in Expo Go?

No — it's a native module, so you need a development build (npx expo prebuild or EAS Build). It ships a config plugin, so setup in a managed Expo project is still one line in app.json.

What happens on older iOS and Android versions?

It degrades tier by tier instead of breaking: iOS below 26 gets UIBlurEffect; Android 12 gets blur + tint; below Android 12 gets a translucent tint with a rim outline.

Links: Docs & guides · GitHub (source + side-by-side iOS/Android demos) · npm package — if it saves you time, a ⭐ on GitHub helps other people find it.

I built the Android renderer for this library from scratch (backdrop capture + AGSL refraction shader), so if you have questions about how any of it works — or you think I got a comparison wrong — drop a comment. I'd genuinely like to hear what glass effect you're trying to build.