Features

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

Documentation

$3

``bash
npm install @callstack/liquid-glass


or

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

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

);
}

// For combining multiple glass elements
function MergingGlassElements() {
return (




);
}
`

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

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

function MyComponent() {
return (

Hello World

);
}
`

> [!NOTE]
> On unsupported iOS version (below iOS 26), it will render a normal View without any effects.

$3

#### isLiquidGlassSupported

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

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

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

$3

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

$3

| 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][callstack-readme-with-love] 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! 🔥

[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=liquid-glass&utm_term=readme-with-love
[version-badge]: https://img.shields.io/npm/v/@callstack/liquid-glass?style=for-the-badge
[version]: https://github.com/callstack/liquid-glass/blob/main/LICENSE
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge
[prs-welcome]: ./CONTRIBUTING.md