---
title: "How to Use Liquid Glass in React Native"
description: "Learn how to bring Apple’s new Liquid Glass design material into your React Native apps. This guide covers design best practices, performance tips, and examples using LiquidGlassView and LiquidGlassContainerView."
url: https://www.callstack.com/blog/how-to-use-liquid-glass-in-react-native
updated: 2026-10-24T08:39:31.454Z
---

# How to Use Liquid Glass in React Native

Learn how to bring Apple’s new Liquid Glass design material into your React Native apps. This guide covers design best practices, performance tips, and examples using LiquidGlassView and LiquidGlassContainerView.

_By Mike Grabowski, CEO & Founder @ Callstack · Published 2025-09-11 · Category: iOS_

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.

Your browser does not support the video tag.

## 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:

```bash
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 `tintColor`overlay 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.

```swift
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.

Your browser does not support the video tag.

**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.

```swift
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.

Your browser does not support the video tag.

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. ](https://github.com/callstack/liquid-glass)It’s open source and free to use. Happy coding!