expo-liquid-glass-view

To use expo-liquid-glass-view, install the package and run a prebuild for iOS. Note that this library is iOS only. On Android and web, components will render as plain views.

npx expo install expo-liquid-glass-view
npx expo prebuild --platform ios
npx expo run:ios

The LiquidGlassView component provides a glass material effect. You can customize its appearance using props like variant, cornerRadius, and tint.

Corners can be set using a single number for all corners or an object for per-corner control.

import { LiquidGlassView } from "expo-liquid-glass-view";

<LiquidGlassView
  variant="regular"
  cornerRadius={32}
  tint="#4da3ff33"
  interactive
  style={{ width: 260, height: 120 }}
  containerStyle={{ alignItems: "center", justifyContent: "center" }}
>
  <Text style={{ color: "#fff" }}>Liquid Glass</Text>
</LiquidGlassView>;

The LiquidGlassContainer component wraps sibling LiquidGlassView components so they merge into one another as they get close, mimicking system controls. This behavior is available on iOS 26+; on other platforms, it behaves as a plain View.

Use the spacing prop to define the distance (in points) at which nested glass elements begin to merge.

import { LiquidGlassContainer, LiquidGlassView } from "expo-liquid-glass-view";

<LiquidGlassContainer spacing={40} style={{ flexDirection: "row", gap: 12 }}>
  <LiquidGlassView cornerRadius={24} style={{ width: 64, height: 64 }} />
  <LiquidGlassView cornerRadius={24} style={{ width: 64, height: 64 }} />
</LiquidGlassContainer>;

The renderer prop defaults to "auto". It uses UIGlassEffect on iOS 26+ and the custom Metal renderer on older versions. You can force a specific backend using renderer="native" or renderer="metal".

To check if the device supports the native iOS 26+ glass effect, use the supportsNativeGlass boolean, which is resolved once at import.

You can monitor which renderer is active using the onRendererChange callback.

import { supportsNativeGlass } from "expo-liquid-glass-view";

// Check support
console.log(supportsNativeGlass);

// Monitor renderer changes
<LiquidGlassView onRendererChange={(renderer) => console.log(renderer)} />

The metal prop allows fine-grained tuning of the custom Metal renderer. These settings are ignored when the renderer is set to "native" (iOS 26+). Use this prop when renderer="metal" to shape the visual characteristics like refraction, dispersion, and frost.

<LiquidGlassView
  renderer="metal"
  metal={{
    blurRadius: 4,
    frost: 0.4,
    saturation: 1.8,
    refraction: { amount: 80, width: 24, height: 24, depth: 1 },
    dispersion: { amount: 8 },
    highlight: { intensity: 0.3, angle: 135 },
    border: { width: 1, opacity: 0.3 },
  }}
/>

The expo-module.config.json defines the native module mapping for the Expo module. For Apple platforms (iOS/tvOS/etc.), the module is identified by the native class ExpoLiquidGlassModule.

{
  "platforms": ["apple"],
  "apple": {
    "modules": ["ExpoLiquidGlassModule"]
  }
}

The available backend depends on the iOS version:

On Android and web, the components render as plain views.

The LiquidGlassView component is the primary entrypoint for the library. It provides a view that implements liquid glass visual effects. You can import it directly from the package root.

import { LiquidGlassView } from 'expo-liquid-glass-view';

// Usage within a component
<LiquidGlassView />