A beautiful, SwiftUI-powered glass effect view for React Native built with Expo

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

npx expo install expo-liquid-glass-view

cd ios && pod install

npx expo prebuild --platform ios

npx expo run:ios

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

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>
  );
}

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

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

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

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

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

MIT © rit3zh