React Native Liquid Glass 🔍

@callstack/liquid-glass brings iOS 26 liquid glass effect to React Native apps on iOS.

liquid-glass.mp4

Features

• ✨ iOS 26 liquid glass visual effect
• 🎨 Customizable tint colors
• 🔧 Two effect modes: clear and regular

Documentation

Installation

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

Warning

Make sure to compile your app with Xcode >= 26. React Native 0.80+ is required.

Warning

This library is not supported in Expo Go.

Usage

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>
  );
}

// For combining 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>
  );
}

To achieve automatic text color adaptation based on the background behind the glass view, use PlatformColor from react-native:

Note

There appears to be a size limit for the glass to automatically adapt the text color. If the glass view height is >= 65 it won't automatically adapt to the material behind it.

auto-adapting-glass.mp4

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>
  );
}

Note

On unsupported iOS version (below iOS 26), it will render a normal View without any effects.

API

isLiquidGlassSupported

A boolean constant that indicates whether the current device supports the liquid glass effect.

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

if (isLiquidGlassSupported) {
  // Device supports liquid glass effect
} else {
  // Provide fallback UI
}

LiquidGlassView - Props

Prop	Type	Default	Description
interactive	boolean	false	Enables touch interaction effects when pressing the view
effect	'clear' | 'regular' | 'none'	'regular'	Visual effect mode: • clear - More transparent glass effect • regular - Standard glass blur effect • none - No glass effect (transparent view) Note: Changing this property animates the materialization/dematerialization of the glass effect
animated	boolean	true	Whether to animate changes to the glass effect
animationDuration	number	undefined	Duration of the glass effect animation in milliseconds. If omitted, the default UIKit animation duration is used
tintColor	ColorValue	undefined	Overlay color tint applied to the glass effect. Accepts any React Native color format (hex, rgba, named colors)
colorScheme	'light' | 'dark' | 'system'	'system'	Color scheme adaptation: • light - Light appearance • dark - Dark appearance • system - Follows system appearance

LiquidGlassContainerView - Props

Prop	Type	Default	Description
spacing	number	0	The distance between child elements at which they begin to merge their glass effects into a combined effect

Known issues

• interactive prop is not changed dynamically, it is only set on mount.

Made with ❤️ at Callstack

liquid-glass is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.

Callstack is a group of React and React Native geeks, contact us at hello@callstack.com if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥