React Native Liquid Glass 🔍
@callstack/liquid-glass brings iOS 26 liquid glass effect to React Native apps on iOS.
https://github.com/user-attachments/assets/44c18136-8760-49f2-ae16-62557c3ae2e1
Features
- ✨ iOS 26 liquid glass visual effect
- 🎨 Customizable tint colors
- 🔧 Two effect modes:
clearandregular
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.
https://github.com/user-attachments/assets/199bce70-dab4-43bc-9de1-605f561760e5
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
Viewwithout 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 |
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 [email protected] 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! 🔥