LiquidGlass

A glass effect component for React Native built on top of
expo-glass-effect
 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

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

PropTypeDefaultDescription
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
Go backDrawer
Up nextMenu