Liquid glass for React Native and Expo

Liquid glass is Apple's translucent material from iOS 26: panes that refract what's behind them, catch light and melt into each other. In React Native you reach it through expo-glass-effect or @callstack/liquid-glass, which only work on iOS 26. LumioUI's free Glass component uses the native glass where it exists and falls back gracefully everywhere else, so one component covers iOS, Android and the web.

How it looks on each platform

Both native modules are optional: if neither is installed, your app still bundles and Glass uses the fallback. useGlass() tells you which backend is live.

Using Glass

import { Glass, GlassContainer } from "@/components/ui/glass/glass";
import { Icon } from "@/components/ui/icon/icon";

// One pane: a floating glass button.
<Glass interactive specular className="h-11 w-11 items-center justify-center rounded-full">
  <Icon name="heart" />
</Glass>

// Panes that sit within 12pt of each other melt into one shape
// on iOS 26+ and the web.
<GlassContainer spacing={12} className="flex-row items-center gap-2">
  <Glass interactive className="h-11 w-11 rounded-full" />
  <Glass interactive className="h-11 w-11 rounded-full" />
</GlassContainer>

• effect is "regular" (default) or "clear"; tintColor tints it.
• interactive adds the press squish and glow (native on iOS 26). specular gathers light under your finger on every platform.
• frost adds backdrop blur. bend, sheen, dispersion and curvature tune the web lens.
• Use glass for floating controls over content (tab bars, toolbars, buttons over photos), not for every card: on a flat background it just looks grey.

Liquid glass components

• Glass Glass surface for cards and controls: system glass on newer iOS, real refraction on the web and a frosted look elsewhere. Light can gather under your finger, and panes merge on newer iOS and the web.
• Glass Dock MorphPro Glass tab bar whose selection blob stretches and reshapes as it glides between tabs, lighting each tab as it passes and flaring gently when it lands.
• Glass Search MorphPro Glass search button that stretches into a full search field when tapped, then pours back into a small disc when you close it.
• Glass Fab MorphPro Glass floating button that opens a column or row of glass action bubbles. The chosen action lights briefly while the others fade and pull back into the button.
• Glass ClusterPro Group of glass buttons whose segments melt into one shape on newer iOS and the web. The selected segment lights up from its top edge while the previous one fades.
• Glass Sheet EdgePro Glass card with a glowing top edge that you pull by its handle. Pull far enough and it can open into a detail view or tuck down out of the way; let go early and it slides back.
• Glass OrbPro Draggable droplet of glass that follows your finger, squashes and stretches with speed and catches light on its rim. Let go and it springs home, or fling it to dock in the nearest corner.
• Glass LabPro Interactive glass pane that responds to touch: light gathers under your finger and, on the web, the glass bends while you hold, then settles on release. Includes a frost control that works everywhere.

Add it to your app

npx @lumioui/cli init
npx @lumioui/cli add glass
npx expo install expo-glass-effect   # optional: native glass on iOS 26

Pro glass controls install with the pro/ prefix, for example npx @lumioui/cli add pro/glass-dock-morph. See pricing.

Questions

More: React Native guides · React Native UI libraries compared · Screen templates