How to Use Liquid Glass in React Native

Liquid Glass is Apple's new design material for iOS 26 and beyond, giving UI elements a translucent, glass-like appearance that reflects and refracts the surroundings in real time. Used throughout the interface on elements like widgets and tab bars, its primary goal is to highlight underlying content without obscuring it, maintaining a clear separation between foreground and background. It's a dynamic evolution of the classic blur effect first seen in iOS 7.

Bringing Liquid Glass to React Native

To make sure React Native developers can use this from day one, we created @callstack/liquid-glass. Getting started is simple. Just install the package:

npm install @callstack/liquid-glass

Once installed, you have access to our Liquid Glass components that behave just like Apple's. In this article, we'll cover best practices for using Liquid Glass and explore its API.

Best Practices for Using Liquid Glass

Before diving into usage, a word on design best practices: Liquid Glass is a powerful visual effect, but it should be used thoughtfully.

Apple’s Human Interface Guidelines warn against overusing Liquid Glass: "If you apply Liquid Glass effects to a custom control, do so sparingly. Liquid Glass seeks to bring attention to the underlying content, and overusing this material in multiple custom controls can provide a subpar user experience by distracting from that content. Limit these effects to the most important functional elements in your app."

In other words, reserve Liquid Glass for key UI elements like headers, navigation bars, cards, or action buttons where a touch of translucency can highlight content behind them. Using it everywhere can dilute its impact and even reduce usability.

• Don’t make entire screens transparent. The effect works best when applied to controls and panels floating above content, not to full-screen backgrounds. Apple explicitly designed Liquid Glass for interface chrome (navigation, widgets, etc.).
• Ensure readability and contrast. The content behind Liquid Glass can influence its appearance. Our component provides a colorScheme prop so you can explicitly control the appearance. Additionally, you can apply a tintColoroverlay to the glass to match your brand color or improve contrast.
• Performance considerations. Liquid Glass uses real-time, GPU-accelerated blur effects. It’s efficient for a few elements, but avoid stacking a large number of translucent views or animating them excessively, which could stress the GPU.
• Graceful fallback. The Liquid Glass effect is only supported on iOS 26 and above. Our library automatically renders a normal, opaque View on older iOS versions or on Android. You should ensure the design still looks acceptable by providing a translucent fallback background color.

Available Features and API Overview

Our library exposes two main components: LiquidGlassView for individual elements, and LiquidGlassContainerView for grouping them.

Single Glass Element: LiquidGlassView

The LiquidGlassView is a drop-in component that acts like a “glass panel.” Simply wrap any content you want to appear on the glass.

import { LiquidGlassView, isLiquidGlassSupported } from '@callstack/liquid-glass';
import { Text } from 'react-native';

function MyCard() {
  return (
    <LiquidGlassView
      style={[
        { width: 200, height: 100, borderRadius: 20 },
        !isLiquidGlassSupported && { backgroundColor: 'rgba(255,255,255,0.5)' }
      ]}
      interactive
      effect="clear"
    >
      <Text style={{ fontWeight: '600' }}>Hello World</Text>
    </LiquidGlassView>
  );
}

In this snippet, we create a rounded box that becomes a translucent glass surface if supported; otherwise, we fall back to a semi-transparent white background. The text renders on top of the panel.

Key Props for LiquidGlassView:

• interactive (boolean, default: false): If true, the view will have subtle touch interaction effects when pressed.
• effect ('clear' | 'regular', default: 'regular'): Chooses the visual style. regular is the standard frosted blur, while clear is more transparent with minimal blurring.
• tintColor (ColorValue, optional): An overlay tint color for the glass to match your app's theme or improve contrast.
• colorScheme ('light' | 'dark' | 'system', default: 'system'): Controls the appearance mode, allowing it to adapt to the system's Light/Dark mode or be fixed.

You can also import isLiquidGlassSupported to check if the device is running iOS 26+ and apply fallback styling or render a different component.

Grouped Glass Elements: LiquidGlassContainerView

One of the coolest features of Liquid Glass is how multiple elements can visually merge. When two glass elements get close, they can morph into a single connected shape. We’ve brought this to React Native with our LiquidGlassContainerView.

Use LiquidGlassContainerView as a parent wrapper for two or more LiquidGlassView elements to enable the blending effect.

import { LiquidGlassContainerView, LiquidGlassView } from '@callstack/liquid-glass';

function MergingGlassExample() {
  return (
    <LiquidGlassContainerView spacing={20}>
      <LiquidGlassView style={{ width: 100, height: 100, borderRadius: 50 }} />
      <LiquidGlassView style={{ width: 100, height: 100, borderRadius: 50 }} />
    </LiquidGlassContainerView>
  );
}

Here, two circular glass blobs are inside a container.

The spacing={20} prop tells the container to start merging their effects when they come within 20 points of each other, creating a slick morphing animation.

Try it out!

Liquid Glass brings a fresh, modern look to your React Native apps by embracing Apple's latest design language.

We’ve made it straightforward to use: just add our LiquidGlassView components to your React component tree, tune a few props, and you’ll have instant iOS 26 aesthetics. The library works on both vanilla React Native and Expo and gracefully falls back on unsupported platforms.

Go ahead and check out the library on GitHub. It’s open source and free to use. Happy coding!

‍