Bringing iOS 26's Liquid Glass to Your React Native Apps

You've seen the demos—iOS 26's liquid glass effect is one of those visual details that makes Apple's design language feel genuinely fresh. But if you're building with React Native, you might have assumed that effect was off-limits, reserved for native SwiftUI apps. That assumption is exactly what @callstack/liquid-glass challenges. It's a library that brings that same iOS 26 liquid glass visual treatment to React Native apps on iOS, and it's surprisingly straightforward to drop into your existing components.

What It Does

@callstack/liquid-glass is a React Native component library that replicates the iOS 26 liquid glass effect—that translucent, refractive material you see in the latest Apple OS. Under the hood, it provides two core components: LiquidGlassView for individual glass elements and LiquidGlassContainerView for grouping multiple glass views so their effects merge properly (think overlapping glass panels that behave like one continuous surface).

The library is built specifically for iOS, and it has some hard requirements. You'll need Xcode 26 or newer to compile, and React Native 0.80+ is mandatory. It also won't work in Expo Go—you'll need a development build if you're on the Expo ecosystem. On devices running iOS below 26, the component gracefully degrades to a plain View without any visual effects, so you're not shipping broken UI to older devices.

The effect itself comes in two flavors: clear, which gives you a more transparent glass look, and regular, which is the standard liquid glass appearance. You can also tint the glass with customizable colors, and there's an interactive prop that adds touch-based visual feedback when users press the view.

Why It's Cool

The obvious appeal is aesthetic—liquid glass looks premium, and it's the kind of detail that makes an app feel current. But there are a few design decisions here that go beyond just copying a visual style:

• It handles the fallback for you. The isLiquidGlassSupported export is a boolean constant you can check at runtime. The README shows a clean pattern: use it to conditionally apply a semi-transparent background when the effect isn't available. That's thoughtful API design—you're not left guessing whether the effect will render; you get an explicit signal.

• Text adaptation is built in. The library works with React Native's PlatformColor to automatically adapt text colors based on what's behind the glass. That's a subtle but crucial detail for readability. Though there's an interesting caveat: if your glass view is 65 pixels tall or more, the automatic text color adaptation stops working. That's the kind of honest limitation you don't usually see documented upfront.

• Merging glass elements is a first-class feature. If you've worked with translucent materials in UI, you know that two separate glass panels sitting next to each other look wrong—the effect breaks at the seam. The LiquidGlassContainerView solves this by letting you wrap multiple glass views with a defined spacing, so they visually merge into a cohesive glass surface.

• It's from Callstack. This isn't a random weekend project. Callstack is a well-known name in the React Native community (they maintain things like react-native-builder-bob and have contributed to core RN tooling). That pedigree suggests the library will be maintained and tested against real-world usage.

How to Try It

Getting started is a two-step process. First, install the package:

npm install @callstack/liquid-glass
# or
yarn add @callstack/liquid-glass

Then make sure your environment meets the requirements: Xcode 26+, React Native 0.80+, and a development build (not Expo Go).

Here's the basic usage pattern from the README:

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

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

And for merging multiple glass elements:

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

For automatic text color adaptation, pair it with PlatformColor:

import { PlatformColor } from 'react-native';
import { LiquidGlassView } from '@callstack/liquid-glass';

function MyComponent() {
  return (
    <LiquidGlassView style={{ padding: 20, borderRadius: 20 }}>
      <Text style={{ color: PlatformColor('labelColor') }}>Hello World</Text>
    </LiquidGlassView>
  );
}

You can find the full documentation and source on the GitHub repository.

Final Thoughts

This library is squarely aimed at developers building iOS apps with React Native who want to stay current with Apple's design language without waiting for the platform to catch up. The hard requirements (Xcode 26, RN 0.80+) mean it's not for everyone yet—if you're supporting older toolchains or need Expo Go compatibility, this will have to wait. But if you're already on the latest versions and want that iOS 26 polish, this is a clean, well-documented way to get it. The graceful degradation on older iOS versions is a smart touch that makes it safe to adopt incrementally.

Follow @githubprojects for more developer tools and open source projects.