Liquid Glass View

🚧 RESERVATION PACKAGE 🚧

Apple just announced Liquid Glass UI at WWDC 2025! This package reserves the name for the upcoming React Native/Expo module.

What's Coming

Once Apple releases the Liquid Glass APIs, this will become a full-featured Expo module providing:

• ✨ Native iOS Liquid Glass effects using Apple's APIs
• 🤖 Android fallback with custom glass morphism
• 🌐 Web support for cross-platform compatibility
• ⚡ Expo integration for seamless development

Future Usage

import { LiquidGlassView } from 'liquid-glass-view';

export default function App() {
  return (
    <LiquidGlassView intensity="medium" tint="light">
      <Text>Beautiful native glass effects</Text>
    </LiquidGlassView>
  );
}

Current Demo

For now, this package includes a basic React web component with CSS-based glass morphism effects as a placeholder.

Status

📅 Apple Announcement: June 9, 2025 (WWDC)
🔄 Expected Release: iOS 19 launch
📦 Package Status: Name reserved, implementation pending Apple's API release

Following Apple's announcement at WWDC 2025, this package will be updated with native Liquid Glass support as soon as Apple's APIs become available.

Installation

npm install liquid-glass-view

Usage

import { LiquidGlassView } from 'liquid-glass-view';

function App() {
  return (
    <LiquidGlassView intensity="medium" tint="light">
      <h1>Your content here</h1>
      <p>Beautiful glass morphism effect</p>
    </LiquidGlassView>
  );
}

Props

• children: React nodes to render inside the glass view
• intensity: Blur intensity - 'light' | 'medium' | 'heavy' (default: 'medium')
• tint: Glass tint color - 'none' | 'light' | 'dark' (default: 'light')
• style: Custom CSS styles
• className: Additional CSS classes

License

MIT