@k-workspace/react-native-liquidglass-view 0.1.0

package/README.md

@@ -0,0 +1,140 @@
+# @k-workspace/react-native-liquidglass-view
+
+iOS 26 Liquid Glass effect for React Native. Wraps Apple's native `UIGlassEffect` with configurable styles, shadows, press animations, entrance transitions, and glass container merging.
+
+> **iOS 26+ only.** On older iOS versions and Android, a translucent fallback view is rendered automatically.
+
+## Installation
+
+```bash
+npm install @k-workspace/react-native-liquidglass-view
+```
+
+Then install the native iOS dependency:
+
+```bash
+cd ios && pod install
+```
+
+## Requirements
+
+| Requirement    | Version                 |
+| -------------- | ----------------------- |
+| React Native   | >= 0.73                 |
+| iOS Deployment | >= 15.1                 |
+| Xcode          | 26+ (for UIGlassEffect) |
+| Swift          | 5.0+                    |
+
+## Usage
+
+### GlassCard
+
+An opinionated card component with sensible defaults — the easiest way to add glass surfaces.
+
+```tsx
+import { GlassCard } from "@k-workspace/react-native-liquidglass-view";
+
+<GlassCard cornerRadius={20} effect="clear">
+  <Text>Hello, Glass</Text>
+</GlassCard>;
+```
+
+### GlassView
+
+A lower-level component exposing every native prop for full control.
+
+```tsx
+import { GlassView } from "@k-workspace/react-native-liquidglass-view";
+
+<GlassView
+  style={{ width: 300, height: 200 }}
+  effect="regular"
+  cornerRadius={24}
+  tintColor="rgba(100, 120, 255, 0.15)"
+  colorScheme="dark"
+  interactive={true}
+  shadowIntensity={0.2}
+  enablePressAnimation
+  enableEntrance
+>
+  <Text>Full control</Text>
+</GlassView>;
+```
+
+### GlassContainer
+
+Groups child glass views so their edges merge together (uses `UIGlassContainerEffect`).
+
+```tsx
+import {
+  GlassContainer,
+  GlassView,
+} from "@k-workspace/react-native-liquidglass-view";
+
+<GlassContainer spacing={4}>
+  <GlassView style={{ flex: 1 }}>
+    <Text>Left</Text>
+  </GlassView>
+  <GlassView style={{ flex: 1 }}>
+    <Text>Right</Text>
+  </GlassView>
+</GlassContainer>;
+```
+
+## Props
+
+### LiquidGlassProps (GlassCard & GlassView)
+
+| Prop                   | Type                   | Default     | Description                                        |
+| ---------------------- | ---------------------- | ----------- | -------------------------------------------------- |
+| `effect`               | `'regular' \| 'clear'` | `'clear'`   | Visual weight of the glass material.               |
+| `cornerRadius`         | `number`               | `16`        | Corner radius with continuous (Apple-style) curve. |
+| `tintColor`            | `string`               | `undefined` | Semi-transparent color blended over the glass.     |
+| `colorScheme`          | `'light' \| 'dark'`    | System      | Override the system color scheme for this view.    |
+| `interactive`          | `boolean`              | `true`      | Whether the glass responds to touch.               |
+| `shadowIntensity`      | `number`               | `0.15`      | Elevation shadow opacity (0 – 1).                  |
+| `enablePressAnimation` | `boolean`              | `false`     | Spring scale animation + haptic on press.          |
+| `enableEntrance`       | `boolean`              | `false`     | Fade + translate-up entrance animation.            |
+
+### LiquidGlassContainerProps (GlassContainer)
+
+| Prop      | Type     | Default | Description                                            |
+| --------- | -------- | ------- | ------------------------------------------------------ |
+| `spacing` | `number` | `0`     | Distance at which child glass elements begin to merge. |
+
+## Platform Support Check
+
+```ts
+import { isLiquidGlassSupported } from "@k-workspace/react-native-liquidglass-view";
+
+if (isLiquidGlassSupported) {
+  // iOS 26+ — real glass
+} else {
+  // Fallback rendered automatically
+}
+```
+
+## Platform Support
+
+| Platform | Status                              |
+| -------- | ----------------------------------- |
+| iOS 26+  | Full native `UIGlassEffect` support |
+| iOS < 26 | Translucent fallback view           |
+| Android  | In progress                         |
+
+> Android native support is currently being developed. In the meantime, a translucent `<View>` fallback is rendered automatically so your layout remains intact on all platforms.
+
+## How It Works
+
+- On **iOS 26+**, the native view creates a `UIVisualEffectView` backed by `UIGlassEffect` (or `UIGlassContainerEffect` for the container). It adds:
+  - A subtle white edge border for glass definition
+  - A specular top-highlight gradient simulating overhead light
+  - Dual-layer shadows (contact + elevation) for depth
+  - Optional spring press animation with haptic feedback
+  - Optional fade-in entrance animation
+
+- On **older iOS** and **Android**, a styled `<View>` with translucent background, border, and shadow is rendered as a fallback.
+
+## License
+
+MIT

package/ios/BNGlassContainerView.swift

@@ -0,0 +1,89 @@
+import UIKit
+
+@objcMembers
+@objc(BNGlassContainerView)
+public class BNGlassContainerView: UIView {
+
+    private var containerEffectView: UIVisualEffectView?
+
+    // MARK: - React Native Props
+
+    @objc public var spacing: CGFloat = 0 {
+        didSet { rebuildEffect() }
+    }
+
+    // MARK: - Init
+
+    public override init(frame: CGRect) {
+        super.init(frame: frame)
+        commonInit()
+    }
+
+    public required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        commonInit()
+    }
+
+    private func commonInit() {
+        backgroundColor = .clear
+        clipsToBounds = false
+        buildEffect()
+    }
+
+    // MARK: - Container Effect
+
+    private func buildEffect() {
+        let reactChildren: [UIView] = subviews
+            .filter { $0 !== containerEffectView }
+
+        containerEffectView?.removeFromSuperview()
+        containerEffectView = nil
+
+    #if compiler(>=6.2)
+        if #available(iOS 26.0, *) {
+            guard NSClassFromString("UIGlassContainerEffect") != nil else { return }
+
+            let containerEffect = UIGlassContainerEffect()
+            containerEffect.spacing = spacing
+
+            let ev = UIVisualEffectView(effect: containerEffect)
+            ev.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+            ev.frame = bounds
+            insertSubview(ev, at: 0)
+            containerEffectView = ev
+
+            for child in reactChildren {
+                insertSubview(child, aboveSubview: ev)
+            }
+        }
+    #endif
+    }
+
+    private func rebuildEffect() {
+        buildEffect()
+    }
+
+    // MARK: - Layout
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        containerEffectView?.frame = bounds
+        if let ev = containerEffectView {
+            sendSubviewToBack(ev)
+        }
+    }
+
+    // MARK: - React Native Subview Management
+
+    @objc public func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
+        if let ev = containerEffectView {
+            insertSubview(subview, aboveSubview: ev)
+        } else {
+            insertSubview(subview, at: atIndex)
+        }
+    }
+
+    @objc public func removeReactSubview(_ subview: UIView!) {
+        subview?.removeFromSuperview()
+    }
+}

package/ios/BNGlassView.swift

@@ -0,0 +1,319 @@
+import UIKit
+
+// MARK: - Effect Style Enum
+
+@objc public enum BNGlassEffectStyle: Int {
+    case regular
+    case clear
+
+#if compiler(>=6.2)
+    @available(iOS 26.0, *)
+    var uiGlassStyle: UIGlassEffect.Style {
+        switch self {
+        case .regular: return .regular
+        case .clear:   return .clear
+        }
+    }
+#endif
+}
+
+// MARK: - BNGlassView
+
+@objcMembers
+@objc(BNGlassView)
+public class BNGlassView: UIView {
+
+    // MARK: - Sublayers & Subviews
+
+    private var glassEffectView: UIVisualEffectView?
+    private var contactShadowLayer: CALayer?
+    private var elevationShadowLayer: CALayer?
+    private var specularLayer: CAGradientLayer?
+    private lazy var feedbackGenerator = UIImpactFeedbackGenerator(style: .light)
+
+    // MARK: - React Native Props
+
+    @objc public var cornerRadius: CGFloat = 16 {
+        didSet { applyCornerRadius() }
+    }
+
+    @objc public var glassTintColor: UIColor? {
+        didSet { rebuildEffect() }
+    }
+
+    @objc public var effect: NSString = "regular" {
+        didSet { rebuildEffect() }
+    }
+
+    @objc public var interactive: Bool = true {
+        didSet { rebuildEffect() }
+    }
+
+    @objc public var colorScheme: NSString? {
+        didSet { applyColorScheme() }
+    }
+
+    @objc public var shadowIntensity: CGFloat = 0.15 {
+        didSet { updateShadows() }
+    }
+
+    @objc public var enablePressAnimation: Bool = false
+
+    @objc public var enableEntrance: Bool = false
+
+    // MARK: - Private State
+
+    private var isPressed = false
+    private var hasAnimatedEntrance = false
+    private var currentEffectStyle: BNGlassEffectStyle = .regular
+
+    // MARK: - Init
+
+    public override init(frame: CGRect) {
+        super.init(frame: frame)
+        commonInit()
+    }
+
+    public required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        commonInit()
+    }
+
+    private func commonInit() {
+        backgroundColor = .clear
+        clipsToBounds = false
+        layer.cornerCurve = .continuous
+        setupShadowLayers()
+        buildEffect()
+    }
+
+    // MARK: - Glass Effect
+
+    private func buildEffect() {
+        currentEffectStyle = (effect as String) == "clear" ? .clear : .regular
+
+        let reactChildren: [UIView] = subviews
+            .filter { $0 !== glassEffectView }
+
+        specularLayer?.removeFromSuperlayer()
+        specularLayer = nil
+        glassEffectView?.removeFromSuperview()
+        glassEffectView = nil
+
+    #if compiler(>=6.2)
+        if #available(iOS 26.0, *) {
+            guard let glassEffectClass = NSClassFromString("UIGlassEffect") as? NSObject.Type else { return }
+            guard glassEffectClass.responds(to: Selector(("effectWithStyle:"))) else { return }
+
+            let glass = UIGlassEffect(style: currentEffectStyle.uiGlassStyle)
+            glass.isInteractive = interactive
+
+            if let tint = glassTintColor {
+                glass.tintColor = tint
+            }
+
+            let ev = UIVisualEffectView(effect: glass)
+            ev.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+            ev.frame = bounds
+            ev.clipsToBounds = true
+            ev.layer.cornerRadius = cornerRadius
+            ev.layer.cornerCurve = .continuous
+
+            ev.layer.borderWidth = 0.5
+            ev.layer.borderColor = UIColor.white.withAlphaComponent(0.3).cgColor
+
+            insertSubview(ev, at: 0)
+            glassEffectView = ev
+
+            let specular = CAGradientLayer()
+            specular.colors = [
+                UIColor.white.withAlphaComponent(0.15).cgColor,
+                UIColor.white.withAlphaComponent(0.0).cgColor,
+            ]
+            specular.startPoint = CGPoint(x: 0.5, y: 0)
+            specular.endPoint = CGPoint(x: 0.5, y: 1)
+            specular.frame = CGRect(x: 0, y: 0, width: bounds.width, height: 6)
+            specular.cornerRadius = cornerRadius
+            specular.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
+            ev.contentView.layer.addSublayer(specular)
+            specularLayer = specular
+
+            for child in reactChildren {
+                insertSubview(child, aboveSubview: ev)
+            }
+
+            applyCornerRadius()
+        }
+    #endif
+    }
+
+    private func rebuildEffect() {
+        buildEffect()
+        updateShadows()
+    }
+
+    // MARK: - Shadow System
+
+    private func setupShadowLayers() {
+        let contact = CALayer()
+        contact.shadowColor = UIColor.black.cgColor
+        contact.shadowOffset = CGSize(width: 0, height: 2)
+        contact.shadowRadius = 4
+        contact.shadowOpacity = 0.08
+        layer.insertSublayer(contact, at: 0)
+        contactShadowLayer = contact
+
+        let elevation = CALayer()
+        elevation.shadowColor = UIColor.black.cgColor
+        elevation.shadowOffset = CGSize(width: 0, height: 12)
+        elevation.shadowRadius = 24
+        elevation.shadowOpacity = Float(shadowIntensity)
+        layer.insertSublayer(elevation, at: 0)
+        elevationShadowLayer = elevation
+    }
+
+    private func updateShadows() {
+        guard bounds.width > 0, bounds.height > 0 else { return }
+
+        let shadowPath = UIBezierPath(
+            roundedRect: bounds,
+            cornerRadius: cornerRadius
+        ).cgPath
+
+        contactShadowLayer?.shadowPath = shadowPath
+        contactShadowLayer?.frame = bounds
+
+        elevationShadowLayer?.shadowPath = shadowPath
+        elevationShadowLayer?.frame = bounds
+        elevationShadowLayer?.shadowOpacity = Float(shadowIntensity)
+    }
+
+    // MARK: - Corner Radius
+
+    private func applyCornerRadius() {
+        layer.cornerRadius = cornerRadius
+        glassEffectView?.layer.cornerRadius = cornerRadius
+        specularLayer?.cornerRadius = cornerRadius
+        updateShadows()
+    }
+
+    // MARK: - Color Scheme
+
+    private func applyColorScheme() {
+        guard let scheme = colorScheme as String? else {
+            overrideUserInterfaceStyle = .unspecified
+            return
+        }
+        switch scheme {
+        case "dark":  overrideUserInterfaceStyle = .dark
+        case "light": overrideUserInterfaceStyle = .light
+        default:      overrideUserInterfaceStyle = .unspecified
+        }
+    }
+
+    // MARK: - Touch Animation
+
+    public override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
+        super.touchesBegan(touches, with: event)
+        guard enablePressAnimation, !isPressed else { return }
+        isPressed = true
+        feedbackGenerator.impactOccurred()
+        animatePress(pressed: true)
+    }
+
+    public override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
+        super.touchesEnded(touches, with: event)
+        guard enablePressAnimation, isPressed else { return }
+        isPressed = false
+        animatePress(pressed: false)
+    }
+
+    public override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
+        super.touchesCancelled(touches, with: event)
+        guard enablePressAnimation, isPressed else { return }
+        isPressed = false
+        animatePress(pressed: false)
+    }
+
+    private func animatePress(pressed: Bool) {
+        let scale: CGFloat = pressed ? 0.97 : 1.0
+        let elevationOpacity: Float = pressed
+            ? Float(shadowIntensity * 0.4)
+            : Float(shadowIntensity)
+        let contactOpacity: Float = pressed ? 0.12 : 0.08
+
+        UIView.animate(
+            withDuration: 0.4,
+            delay: 0,
+            usingSpringWithDamping: pressed ? 0.65 : 0.5,
+            initialSpringVelocity: pressed ? 0 : 0.8,
+            options: [.allowUserInteraction, .beginFromCurrentState]
+        ) {
+            self.transform = CGAffineTransform(scaleX: scale, y: scale)
+        }
+
+        let shadowAnim = CABasicAnimation(keyPath: "shadowOpacity")
+        shadowAnim.toValue = elevationOpacity
+        shadowAnim.duration = 0.3
+        shadowAnim.fillMode = .forwards
+        shadowAnim.isRemovedOnCompletion = false
+        elevationShadowLayer?.add(shadowAnim, forKey: "shadowOpacity")
+
+        let contactAnim = CABasicAnimation(keyPath: "shadowOpacity")
+        contactAnim.toValue = contactOpacity
+        contactAnim.duration = 0.3
+        contactAnim.fillMode = .forwards
+        contactAnim.isRemovedOnCompletion = false
+        contactShadowLayer?.add(contactAnim, forKey: "shadowOpacity")
+    }
+
+    // MARK: - Entrance Animation
+
+    public override func didMoveToWindow() {
+        super.didMoveToWindow()
+        guard enableEntrance, !hasAnimatedEntrance, window != nil else { return }
+        hasAnimatedEntrance = true
+
+        alpha = 0
+        transform = CGAffineTransform(translationX: 0, y: 8)
+
+        UIView.animate(
+            withDuration: 0.6,
+            delay: 0,
+            usingSpringWithDamping: 0.7,
+            initialSpringVelocity: 0,
+            options: [.allowUserInteraction]
+        ) {
+            self.alpha = 1
+            self.transform = .identity
+        }
+    }
+
+    // MARK: - Layout
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        glassEffectView?.frame = bounds
+        specularLayer?.frame = CGRect(x: 0, y: 0, width: bounds.width, height: 6)
+
+        if let ev = glassEffectView {
+            sendSubviewToBack(ev)
+        }
+
+        updateShadows()
+    }
+
+    // MARK: - React Native Subview Management
+
+    @objc public func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
+        if let ev = glassEffectView {
+            insertSubview(subview, aboveSubview: ev)
+        } else {
+            insertSubview(subview, at: atIndex)
+        }
+    }
+
+    @objc public func removeReactSubview(_ subview: UIView!) {
+        subview?.removeFromSuperview()
+    }
+}

package/ios/LiquidGlassContainerManager.m

@@ -0,0 +1,21 @@
+#import <React/RCTViewManager.h>
+#import "react_native_liquidGlass_view-Swift.h"
+
+@interface LiquidGlassContainerManager : RCTViewManager
+@end
+
+@implementation LiquidGlassContainerManager
+
+RCT_EXPORT_MODULE(RNLiquidGlassContainer)
+
+- (UIView *)view {
+    return [[BNGlassContainerView alloc] init];
+}
+
+RCT_EXPORT_VIEW_PROPERTY(spacing, CGFloat)
+
++ (BOOL)requiresMainQueueSetup {
+    return YES;
+}
+
+@end

package/ios/LiquidGlassViewManager.m

@@ -0,0 +1,36 @@
+#import <React/RCTViewManager.h>
+#import <React/RCTConvert.h>
+#import "react_native_liquidGlass_view-Swift.h"
+
+@interface LiquidGlassViewManager : RCTViewManager
+@end
+
+@implementation LiquidGlassViewManager
+
+RCT_EXPORT_MODULE(RNLiquidGlass)
+
+- (UIView *)view {
+  return [[BNGlassView alloc] init];
+}
+
+RCT_EXPORT_VIEW_PROPERTY(cornerRadius, CGFloat)
+RCT_EXPORT_VIEW_PROPERTY(effect, NSString)
+RCT_EXPORT_VIEW_PROPERTY(interactive, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(colorScheme, NSString)
+
+// Map JS "tintColor" to the native "glassTintColor" property
+// to avoid conflicting with UIView's built-in tintColor.
+RCT_CUSTOM_VIEW_PROPERTY(tintColor, UIColor, BNGlassView)
+{
+  view.glassTintColor = json ? [RCTConvert UIColor:json] : nil;
+}
+
+RCT_EXPORT_VIEW_PROPERTY(shadowIntensity, CGFloat)
+RCT_EXPORT_VIEW_PROPERTY(enablePressAnimation, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(enableEntrance, BOOL)
+
++ (BOOL)requiresMainQueueSetup {
+  return YES;
+}
+
+@end

package/lib/NativeLiquidGlass.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+export interface LiquidGlassProps {
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+    /**
+     * Blends a semi-transparent color over the glass surface.
+     * Accepts any React Native color string (e.g. "rgba(255,0,0,0.2)").
+     */
+    tintColor?: string;
+    /**
+     * When false, touch events pass through the glass to views below.
+     * @default true
+     */
+    interactive?: boolean;
+    /**
+     * Force the glass material to render in a specific colour scheme
+     * regardless of the system setting.
+     */
+    colorScheme?: "light" | "dark";
+    /**
+     * Visual weight of the glass material.
+     * - "regular" — full glass (default)
+     * - "clear"   — lighter, more transparent glass
+     * @default "regular"
+     */
+    effect?: "regular" | "clear";
+    /**
+     * Corner radius applied to the glass surface.
+     * Uses continuous corner curve for Apple-style rounded corners.
+     * @default 16
+     */
+    cornerRadius?: number;
+    /**
+     * Controls the opacity of the main elevation shadow.
+     * Range: 0 (no shadow) to 1 (fully opaque shadow).
+     * @default 0.15
+     */
+    shadowIntensity?: number;
+    /**
+     * Enables a spring press-in/release scale animation with haptic feedback.
+     * @default false
+     */
+    enablePressAnimation?: boolean;
+    /**
+     * Enables a fade+translate entrance animation when the view first appears.
+     * @default false
+     */
+    enableEntrance?: boolean;
+}
+export interface LiquidGlassContainerProps {
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+    /**
+     * The distance between child glass elements at which they begin to merge.
+     * @default 0
+     */
+    spacing?: number;
+}
+export declare const isLiquidGlassSupported: boolean;
+export declare const NativeLiquidGlassView: import("react-native").HostComponent<LiquidGlassProps> | null;
+export declare const NativeLiquidGlassContainerView: import("react-native").HostComponent<LiquidGlassContainerProps> | null;
+//# sourceMappingURL=NativeLiquidGlass.d.ts.map

package/lib/NativeLiquidGlass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeLiquidGlass.d.ts","sourceRoot":"","sources":["../src/NativeLiquidGlass.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,sBAAsB,SACsC,CAAC;AAE1E,eAAO,MAAM,qBAAqB,+DAE1B,CAAC;AAET,eAAO,MAAM,8BAA8B,wEAEnC,CAAC"}

package/lib/NativeLiquidGlass.js

@@ -0,0 +1,9 @@
+import { Platform, requireNativeComponent, } from "react-native";
+export const isLiquidGlassSupported = Platform.OS === "ios" && parseInt(Platform.Version, 10) >= 26;
+export const NativeLiquidGlassView = isLiquidGlassSupported
+    ? requireNativeComponent("RNLiquidGlass")
+    : null;
+export const NativeLiquidGlassContainerView = isLiquidGlassSupported
+    ? requireNativeComponent("RNLiquidGlassContainer")
+    : null;
+//# sourceMappingURL=NativeLiquidGlass.js.map

package/lib/NativeLiquidGlass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeLiquidGlass.js","sourceRoot":"","sources":["../src/NativeLiquidGlass.ts"],"names":[],"mappings":"AACA,OAAO,EACL,QAAQ,EACR,sBAAsB,GAGvB,MAAM,cAAc,CAAC;AA6DtB,MAAM,CAAC,MAAM,sBAAsB,GACjC,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,QAAQ,CAAC,QAAQ,CAAC,OAAiB,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;AAE1E,MAAM,CAAC,MAAM,qBAAqB,GAAG,sBAAsB;IACzD,CAAC,CAAC,sBAAsB,CAAmB,eAAe,CAAC;IAC3D,CAAC,CAAC,IAAI,CAAC;AAET,MAAM,CAAC,MAAM,8BAA8B,GAAG,sBAAsB;IAClE,CAAC,CAAC,sBAAsB,CAA4B,wBAAwB,CAAC;IAC7E,CAAC,CAAC,IAAI,CAAC"}

package/lib/index.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { isLiquidGlassSupported } from "./NativeLiquidGlass";
+import type { LiquidGlassProps, LiquidGlassContainerProps } from "./NativeLiquidGlass";
+export type { LiquidGlassProps, LiquidGlassContainerProps };
+export { isLiquidGlassSupported };
+export interface GlassCardProps extends Pick<LiquidGlassProps, "tintColor" | "colorScheme" | "effect" | "cornerRadius" | "shadowIntensity" | "enablePressAnimation" | "enableEntrance"> {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare const GlassCard: React.FC<GlassCardProps>;
+export interface GlassViewProps extends LiquidGlassProps {
+    children: React.ReactNode;
+}
+export declare const GlassView: React.FC<GlassViewProps>;
+export interface GlassContainerProps extends LiquidGlassContainerProps {
+    children: React.ReactNode;
+}
+export declare const GlassContainer: React.FC<GlassContainerProps>;
+export default GlassCard;
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EACL,sBAAsB,EAGvB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EACV,gBAAgB,EAChB,yBAAyB,EAC1B,MAAM,qBAAqB,CAAC;AAE7B,YAAY,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,CAAC;AAIlC,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,gBAAgB,EACd,WAAW,GACX,aAAa,GACb,QAAQ,GACR,cAAc,GACd,iBAAiB,GACjB,sBAAsB,GACtB,gBAAgB,CACnB;IACC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAiC9C,CAAC;AAIF,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAmC9C,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,yBAAyB;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAcxD,CAAC;AAeF,eAAe,SAAS,CAAC"}

package/lib/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, View } from "react-native";
+import { isLiquidGlassSupported, NativeLiquidGlassView, NativeLiquidGlassContainerView, } from "./NativeLiquidGlass";
+export { isLiquidGlassSupported };
+export const GlassCard = ({ children, style, tintColor, colorScheme, effect = "clear", cornerRadius = 16, shadowIntensity, enablePressAnimation, enableEntrance, }) => {
+    if (!isLiquidGlassSupported || !NativeLiquidGlassView) {
+        return (_jsx(View, { style: [styles.fallback, { borderRadius: cornerRadius }, style], children: children }));
+    }
+    return (_jsx(NativeLiquidGlassView, { style: style, tintColor: tintColor, colorScheme: colorScheme, effect: effect, cornerRadius: cornerRadius, shadowIntensity: shadowIntensity, enablePressAnimation: enablePressAnimation, enableEntrance: enableEntrance, children: children }));
+};
+export const GlassView = ({ children, style, tintColor, interactive, colorScheme, effect = "clear", cornerRadius = 16, shadowIntensity, enablePressAnimation, enableEntrance, }) => {
+    if (!isLiquidGlassSupported || !NativeLiquidGlassView) {
+        return (_jsx(View, { style: [styles.fallback, { borderRadius: cornerRadius }, style], children: children }));
+    }
+    return (_jsx(NativeLiquidGlassView, { style: [{ borderRadius: cornerRadius }, style], tintColor: tintColor, colorScheme: colorScheme, interactive: interactive, effect: effect, cornerRadius: cornerRadius, shadowIntensity: shadowIntensity, enablePressAnimation: enablePressAnimation, enableEntrance: enableEntrance, children: children }));
+};
+export const GlassContainer = ({ children, style, spacing = 0, }) => {
+    if (!isLiquidGlassSupported || !NativeLiquidGlassContainerView) {
+        return _jsx(View, { style: style, children: children });
+    }
+    return (_jsx(NativeLiquidGlassContainerView, { style: style, spacing: spacing, children: children }));
+};
+const styles = StyleSheet.create({
+    fallback: {
+        backgroundColor: "rgba(225, 234, 240, 0.45)",
+        borderWidth: 0.5,
+        borderColor: "rgba(255, 255, 255, 0.4)",
+        shadowColor: "#000D2E",
+        shadowOffset: { width: 0, height: 12 },
+        shadowOpacity: 0.1,
+        shadowRadius: 24,
+        elevation: 18,
+    },
+});
+export default GlassCard;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@k-workspace/react-native-liquidglass-view",
+  "version": "0.1.0",
+  "description": "iOS 26 Liquid Glass effect for React Native — UIGlassEffect with configurable styles, shadows, press animations, and entrance transitions.",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "ios",
+    "react-native-liquidGlass-view.podspec",
+    "react-native.config.js",
+    "!**/__tests__"
+  ],
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "liquid-glass",
+    "glass-effect",
+    "ios26",
+    "uiglasseffect",
+    "blur",
+    "glassmorphism",
+    "apple",
+    "native-module"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/techytypes/react-native-liquidGlass-view.git"
+  },
+  "author": "techytypes",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/techytypes/react-native-liquidGlass-view/issues"
+  },
+  "homepage": "https://github.com/techytypes/react-native-liquidGlass-view#readme",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "react-native": "^0.84.0",
+    "typescript": "^5.0.0"
+  }
+}

package/react-native-liquidGlass-view.podspec

@@ -0,0 +1,21 @@
+Pod::Spec.new do |s|
+  s.name           = 'react-native-liquidGlass-view'
+  s.version        = '0.1.0'
+  s.summary        = 'iOS 26 Liquid Glass effect for React Native'
+  s.description    = 'Native UIGlassEffect wrapper for React Native with configurable styles, shadows, press animations, entrance transitions, and glass container merging.'
+  s.author         = 'techytypes'
+  s.homepage       = 'https://github.com/techytypes/react-native-liquidGlass-view'
+  s.license        = { :type => 'MIT' }
+  s.platforms      = { :ios => '15.1' }
+  s.source         = { :git => 'https://github.com/techytypes/react-native-liquidGlass-view.git', :tag => s.version.to_s }
+  s.static_framework = true
+
+  s.dependency 'React-Core'
+
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+    'SWIFT_VERSION' => '5.0',
+  }
+
+  s.source_files = 'ios/**/*.{swift,h,m}'
+end

package/react-native.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      ios: {
+        podspecPath: __dirname + "/react-native-liquidGlass-view.podspec",
+      },
+      android: null, // iOS only
+    },
+  },
+};

package/src/NativeLiquidGlass.ts

@@ -0,0 +1,77 @@
+import React from "react";
+import {
+  Platform,
+  requireNativeComponent,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+
+export interface LiquidGlassProps {
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+  /**
+   * Blends a semi-transparent color over the glass surface.
+   * Accepts any React Native color string (e.g. "rgba(255,0,0,0.2)").
+   */
+  tintColor?: string;
+  /**
+   * When false, touch events pass through the glass to views below.
+   * @default true
+   */
+  interactive?: boolean;
+  /**
+   * Force the glass material to render in a specific colour scheme
+   * regardless of the system setting.
+   */
+  colorScheme?: "light" | "dark";
+  /**
+   * Visual weight of the glass material.
+   * - "regular" — full glass (default)
+   * - "clear"   — lighter, more transparent glass
+   * @default "regular"
+   */
+  effect?: "regular" | "clear";
+  /**
+   * Corner radius applied to the glass surface.
+   * Uses continuous corner curve for Apple-style rounded corners.
+   * @default 16
+   */
+  cornerRadius?: number;
+  /**
+   * Controls the opacity of the main elevation shadow.
+   * Range: 0 (no shadow) to 1 (fully opaque shadow).
+   * @default 0.15
+   */
+  shadowIntensity?: number;
+  /**
+   * Enables a spring press-in/release scale animation with haptic feedback.
+   * @default false
+   */
+  enablePressAnimation?: boolean;
+  /**
+   * Enables a fade+translate entrance animation when the view first appears.
+   * @default false
+   */
+  enableEntrance?: boolean;
+}
+
+export interface LiquidGlassContainerProps {
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+  /**
+   * The distance between child glass elements at which they begin to merge.
+   * @default 0
+   */
+  spacing?: number;
+}
+
+export const isLiquidGlassSupported =
+  Platform.OS === "ios" && parseInt(Platform.Version as string, 10) >= 26;
+
+export const NativeLiquidGlassView = isLiquidGlassSupported
+  ? requireNativeComponent<LiquidGlassProps>("RNLiquidGlass")
+  : null;
+
+export const NativeLiquidGlassContainerView = isLiquidGlassSupported
+  ? requireNativeComponent<LiquidGlassContainerProps>("RNLiquidGlassContainer")
+  : null;

package/src/index.tsx

@@ -0,0 +1,145 @@
+import React from "react";
+import { StyleSheet, View, StyleProp, ViewStyle } from "react-native";
+import {
+  isLiquidGlassSupported,
+  NativeLiquidGlassView,
+  NativeLiquidGlassContainerView,
+} from "./NativeLiquidGlass";
+import type {
+  LiquidGlassProps,
+  LiquidGlassContainerProps,
+} from "./NativeLiquidGlass";
+
+export type { LiquidGlassProps, LiquidGlassContainerProps };
+export { isLiquidGlassSupported };
+
+// GlassCard — opinionated card wrapper with sensible defaults
+
+export interface GlassCardProps extends Pick<
+  LiquidGlassProps,
+  | "tintColor"
+  | "colorScheme"
+  | "effect"
+  | "cornerRadius"
+  | "shadowIntensity"
+  | "enablePressAnimation"
+  | "enableEntrance"
+> {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const GlassCard: React.FC<GlassCardProps> = ({
+  children,
+  style,
+  tintColor,
+  colorScheme,
+  effect = "clear",
+  cornerRadius = 16,
+  shadowIntensity,
+  enablePressAnimation,
+  enableEntrance,
+}) => {
+  if (!isLiquidGlassSupported || !NativeLiquidGlassView) {
+    return (
+      <View style={[styles.fallback, { borderRadius: cornerRadius }, style]}>
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <NativeLiquidGlassView
+      style={style}
+      tintColor={tintColor}
+      colorScheme={colorScheme}
+      effect={effect}
+      cornerRadius={cornerRadius}
+      shadowIntensity={shadowIntensity}
+      enablePressAnimation={enablePressAnimation}
+      enableEntrance={enableEntrance}
+    >
+      {children}
+    </NativeLiquidGlassView>
+  );
+};
+
+// GlassView — lower-level view exposing all native props
+
+export interface GlassViewProps extends LiquidGlassProps {
+  children: React.ReactNode;
+}
+
+export const GlassView: React.FC<GlassViewProps> = ({
+  children,
+  style,
+  tintColor,
+  interactive,
+  colorScheme,
+  effect = "clear",
+  cornerRadius = 16,
+  shadowIntensity,
+  enablePressAnimation,
+  enableEntrance,
+}) => {
+  if (!isLiquidGlassSupported || !NativeLiquidGlassView) {
+    return (
+      <View style={[styles.fallback, { borderRadius: cornerRadius }, style]}>
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <NativeLiquidGlassView
+      style={[{ borderRadius: cornerRadius }, style]}
+      tintColor={tintColor}
+      colorScheme={colorScheme}
+      interactive={interactive}
+      effect={effect}
+      cornerRadius={cornerRadius}
+      shadowIntensity={shadowIntensity}
+      enablePressAnimation={enablePressAnimation}
+      enableEntrance={enableEntrance}
+    >
+      {children}
+    </NativeLiquidGlassView>
+  );
+};
+
+// GlassContainer — groups child glass views so they merge together
+
+export interface GlassContainerProps extends LiquidGlassContainerProps {
+  children: React.ReactNode;
+}
+
+export const GlassContainer: React.FC<GlassContainerProps> = ({
+  children,
+  style,
+  spacing = 0,
+}) => {
+  if (!isLiquidGlassSupported || !NativeLiquidGlassContainerView) {
+    return <View style={style}>{children}</View>;
+  }
+
+  return (
+    <NativeLiquidGlassContainerView style={style} spacing={spacing}>
+      {children}
+    </NativeLiquidGlassContainerView>
+  );
+};
+
+const styles = StyleSheet.create({
+  fallback: {
+    backgroundColor: "rgba(225, 234, 240, 0.45)",
+    borderWidth: 0.5,
+    borderColor: "rgba(255, 255, 255, 0.4)",
+    shadowColor: "#000D2E",
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.1,
+    shadowRadius: 24,
+    elevation: 18,
+  },
+});
+
+export default GlassCard;