LiquidGlass

A glass effect component for React Native built on top of

with gluestack-ui styling and NativeWind className support.

Important Note

Note: LiquidGlass is not supported in Next.js. It is intended for React Native and Expo environments only.

expo-glass-effect

requires native iOS/Android APIs that are not available in browser environments. On iOS, liquid glass requires iOS 26+ (

isLiquidGlassAvailable

). On Android and older iOS, a standard glass blur fallback is used (

isGlassEffectAPIAvailable

This is an illustration of the LiquidGlass component. A simple GlassView displaying content with the default glass effect style.

React Native / Expo onlyThis component is not supported in Next.js. Preview it in a React Native or Expo environment.

With GlassContainer

Use GlassContainer to group multiple GlassView elements so they visually merge together when close to each other.

React Native / Expo onlyThis component is not supported in Next.js. Preview it in a React Native or Expo environment.

With Color Scheme

Override the glass effect's appearance independently from the system theme using the colorScheme prop.

React Native / Expo onlyThis component is not supported in Next.js. Preview it in a React Native or Expo environment.

With Glass Style

Compare the 'regular' and 'clear' glass effect styles side by side.

React Native / Expo onlyThis component is not supported in Next.js. Preview it in a React Native or Expo environment.

Installation

Run the following command:

npx gluestack-ui@alpha add liquid-glass

This command will copies all the code from git repo — excluding the docs and examples folders — into your project's

components/ui

directory.

API Reference

To use this component in your project, include the following import statement in your file.

import {
  GlassView,
  GlassContainer,
  isLiquidGlassAvailable,
  isGlassEffectAPIAvailable,
} from '@/components/ui/liquid-glass';

export default () => (
  <GlassContainer className="p-4 rounded-2xl">
    <GlassView className="p-6 rounded-xl items-center">
      <Text className="text-foreground font-semibold">Glass Effect</Text>
    </GlassView>
  </GlassContainer>
);

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

GlassView

A view that applies a native glass blur effect. Extends React Native's

View

with glass-specific props.

Props

Prop	Type	Default	Description
glassEffectStyle	'regular' \| 'clear'	'regular'	The visual style of the glass effect. 'regular' gives a frosted look; 'clear' is more transparent.
tintColor	string	-	A color tint applied on top of the glass blur effect.
isInteractive	boolean	false	When true, the glass effect responds to user interaction (e.g. press feedback on iOS 26+ liquid glass).
colorScheme	'auto' \| 'light' \| 'dark'	'auto'	Overrides the system appearance for the glass effect. Use when your app has its own theme toggle independent of the system setting.
className	string	-	NativeWind className for layout, sizing, border radius, and other style utilities.

Also inherits all props of React Native's

View

GlassContainer

A container that groups multiple

GlassView

elements together. When glass views are close enough (controlled by

spacing

), they visually merge into one connected glass surface on iOS 26+ with liquid glass enabled.

Props

Prop	Type	Default	Description
spacing	number	-	The distance threshold at which glass elements start merging together. Controls when adjacent GlassView elements blend into one surface.
className	string	-	NativeWind className for layout, sizing, padding, and other style utilities.

Also inherits all props of React Native's

View

Utility Functions

isLiquidGlassAvailable

import { isLiquidGlassAvailable } from '@/components/ui/liquid-glass';

Returns

true

on iOS 26+ devices that support the native liquid glass effect. Use this to conditionally render enhanced UI when the full liquid glass API is available.

isGlassEffectAPIAvailable

import { isGlassEffectAPIAvailable } from '@/components/ui/liquid-glass';

Returns

true

when any glass effect is supported (iOS and Android with blur fallback). Use this to gate glass-based UI behind a capability check.

Edit this page on GitHub