✨ Features

• 🧊 Native glassEffect on iOS
• 🍏 Powered by SwiftUI for ultra-smooth performance
• 🧱 Configurable corner radius and style (continuous or circular)
• 🌈 Custom tint overlays and blur strength types
• 🧩 Supports nesting React Native children

🚀 Installation

1. Add the package

npx expo install expo-liquid-glass-view

2. Install CocoaPods

cd ios && pod install

3. Prebuild the iOS project

npx expo prebuild --platform ios

4. Run your app

npx expo run:ios

⚠️ iOS only — This view uses SwiftUI and does not support Android.

📦 Usage

import { ExpoLiquidGlassView } from "expo-liquid-glass-view";

export default function App() {
  return (
    <ExpoLiquidGlassView
      cornerStyle={CornerStyle.Circular}
      type={LiquidGlassType.Tint}
      tint="#000000"
      cornerRadius={24}
      style={{ width: 200, height: 200, alignSelf: "center", marginTop: 100 }}
    >
      <Text style={{ color: "#fff", textAlign: "center" }}>
        Liquid Glass ✨
      </Text>
    </ExpoLiquidGlassView>
  );
}

⚙️ Props

| Prop | Type | Default | Description | | -------------- | --------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------- | | type | "clear" \| "tint" \| "regular" \| "interactive" \| "identity" | "regular" | Defines the glass blur intensity and system effect | | tint | string | undefined | Optional iOS system tint, like "systemUltraThinMaterial" or custom color | | cornerRadius | number | 12 | Border radius in points | | cornerStyle | "continuous" | "circular" | "continuous" | Defines the curvature style of the corners | | style | StyleProp<ViewStyle> | undefined | React Native style object | | children | React.ReactNode | undefined | Optional React children to render inside the glass |

🧪 Types

export enum CornerStyle {
  Continuous = "continuous",
  Circular = "circular",
}

export enum LiquidGlassType {
  Clear = "clear",
  Tint = "tint",
  Regular = "regular",
  Interactive = "interactive",
  Identity = "identity",
}

export interface ExpoLiquidGlassViewProps {
  type?: LiquidGlassType;
  tint?: string;
  cornerRadius?: number;
  cornerStyle?: CornerStyle;
  style?: StyleProp<ViewStyle>;
  children?: React.ReactNode;
}

📱 Platform Support

• ✅ iOS (SwiftUI)
• ❌ Android (not supported)

🛠 Built With

• ⚛️ Expo Modules
• 🍎 SwiftUI
• 📱 React Native

🧩 Related Ideas

If you're building glassmorphic UIs, try pairing this with:

• expo-blur
• expo-symbols
• react-native-skia

🎥 Preview

https://github.com/user-attachments/assets/a08878fb-6a90-474b-8f21-1b46fe990177

❤️ Contributing

PRs and issues are welcome! Let’s keep building beautiful native UIs with React Native + SwiftUI!

📄 License

MIT © rit3zh