@likith99/react-native-adaptive-liquid-glass 0.1.0 → 0.1.2

package/README.md

@@ -1,6 +1,20 @@
 # @likith99/react-native-adaptive-liquid-glass
 
-Native iOS Liquid Glass surfaces and UIKit action controls, with ordinary Android counterparts. No Expo dependency. React Native 0.81–0.86 / React 19 / Fabric; requires Xcode 26+, and iOS 15.1+ (glass on iOS 26+).
+Native iOS Liquid Glass surfaces and UIKit action controls, with ordinary Android counterparts. No Expo or third-party glass dependency. No direct npm runtime dependencies; React/React Native peers and native platform dependencies are required. React Native 0.81+ / React 19 / Fabric; requires Xcode 26+, and iOS 15.1+ (glass on iOS 26+).
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/likith099/liquedGlassRecreate/v0.1.1/docs/images/demo.gif" width="280" alt="Screen recording of the demo: tapping a glass button increments a counter, then the action cluster expands into four icons that sit inside the stretching glass, and the live property toggles change the material">
+</p>
+
+Every surface here is a real native view — `UIGlassEffect`, `UIMenu`, `UIToolbar` — not a JavaScript approximation. Glass merging is opt-in, and native menus render checked, disabled and destructive items exactly as the system draws them:
+
+<table>
+  <tr>
+    <td align="center"><img src="https://raw.githubusercontent.com/likith099/liquedGlassRecreate/v0.1.1/docs/images/glass-merging-off.png" width="230" alt="Two separate circular glass surfaces with a Bring together button"><br><sub>Merging off</sub></td>
+    <td align="center"><img src="https://raw.githubusercontent.com/likith099/liquedGlassRecreate/v0.1.1/docs/images/glass-merging-on.png" width="230" alt="The same two circular glass surfaces joined by a liquid bridge of material"><br><sub>Merging on</sub></td>
+    <td align="center"><img src="https://raw.githubusercontent.com/likith099/liquedGlassRecreate/v0.1.1/docs/images/grouped-menu.png" width="230" alt="A native iOS menu with an Order section containing a checked Most recent item and a Maintenance section with a red Clear history item"><br><sub>Grouped native menu</sub></td>
+  </tr>
+</table>
 
 ## Install
 
@@ -15,9 +29,11 @@ Then rebuild both native apps; a JS-only reload is not enough the first time. Au
 
 ### Requirements
 
-The host app must run **React Native 0.81 to 0.86 with the New Architecture (Fabric)** and React 19; these are Fabric codegen components and will not build on the old architecture. Builds are verified on 0.81.5 and 0.86.3. iOS needs Xcode 26+ and a **deployment target of iOS 15.1 or higher** — below that CocoaPods refuses to resolve the pod — with native glass on iOS 26+ and standard controls below it.
+The host app must run **React Native 0.81 or newer with the New Architecture (Fabric)** and React 19; these are Fabric codegen components and will not build on the old architecture. Builds are verified on 0.81.5, 0.86.3 and 0.87.1. The peer range has no upper bound: it controls what npm will install, while the tested versions are listed here. iOS needs Xcode 26+ and a **deployment target of iOS 15.1 or higher** — below that CocoaPods refuses to resolve the pod — with native glass on iOS 26+ and standard controls below it.
+
+On React Native 0.81 specifically, the app must consume React Native's **prebuilt** iOS dependencies, which is the default (`RCT_USE_RN_DEP=1`) and what Expo SDK 54 does. Building React Native from source on 0.81 fails under Xcode 26 inside `Pods/fmt`, independently of this package. On **React Native 0.87** two defects in React Native itself affect any Fabric library, including this one. React's own `ReactCodegen` target fails to compile in 0.87's default prebuilt mode because its header search path misses the `React_RCTFabric` subdirectory; run `RCT_USE_PREBUILT_RNCORE=0 pod install` to build React from source instead. In an npm workspace, `@react-native/metro-config` nests inside the app rather than hoisting, and `@react-native/community-cli-plugin` cannot `require()` it, so Metro will not start until you declare it in the workspace root.
 
-On React Native 0.81 specifically, the app must consume React Native's **prebuilt** iOS dependencies, which is the default (`RCT_USE_RN_DEP=1`) and what Expo SDK 54 does. Building React Native from source on 0.81 fails under Xcode 26 inside `Pods/fmt`, independently of this package. On **iOS 27 the host app must adopt the UIScene lifecycle**, otherwise iOS traps during scene creation before any UI appears; add a `UIApplicationSceneManifest` and a scene delegate that owns the window. Android needs no extra setup. Expo Modules are not used and no router is required.
+On **iOS 27 the host app must adopt the UIScene lifecycle**, otherwise iOS traps during scene creation before any UI appears; add a `UIApplicationSceneManifest` and a scene delegate that owns the window. Android needs no extra setup. Expo Modules are not used and no router is required.
 
 ```tsx
 import {GlassView, GlassButton, GlassContainer, GlassActionCluster} from '@likith99/react-native-adaptive-liquid-glass';
@@ -36,12 +52,36 @@ import {GlassView, GlassButton, GlassContainer, GlassActionCluster} from '@likit
 
 `GlassView` accepts material (`regular`, `clear`, `none`), interactive, tintColor, cornerRadius, colorScheme, animationDuration (seconds), fallbackStyle, and forceFallback. Use cornerRadius instead of style.borderRadius. `GlassPressable` adds custom React children, press semantics and Android ripple. `GlassButton` with a `title` uses a fully native SwiftUI button on iOS 26+. Existing children-based GlassButton calls remain compatible. `GlassContainer.mergingEnabled` defaults to false. Set it to true to allow nearby surfaces to join; `spacing` then controls the merging threshold, independently of layout gap. The action cluster also defaults to `mergingEnabled={false}`; enable it to opt into native glass merging during expansion and collapse. For a GlassContainer, place participating GlassViews inside it.
 
-The UIKit action cluster retains controls by stable IDs and uses the same UIGlassEffect material host as GlassView. The toggle keeps its material, bounds, and opacity unchanged during expansion. UIKit owns the native finger-localized highlight and deformation whenever `interactive` is enabled. There is no custom press overlay, scale, or finger-follow animation. SF Symbols remain inside the effect content view, so UIKit deforms the icon and glass together. A tap recognizer observes activation without cancelling or delaying native glass touches. There is no separate UIControl or forced hit-test target. Default dark-mode actions apply a neutral black native material tint at 0.65 alpha to reduce lightness. This also darkens the resting material; it is not a highlight-strength percentage. Light mode uses transparent tint. An explicit tintColor overrides the default. UIKit still owns the highlight and provides no separate intensity setting. The old `pressFeedback` prop is deprecated and ignored. `interactive={false}` disables native press visuals without disabling callbacks. Android keeps its normal ripple. Opt-in merging uses UIGlassContainerEffect and animated UIKit geometry; SwiftUI matched-geometry transitions are no longer used. Supply unique nonempty action IDs; `__toggle` is reserved. Keep expanded controlled. iOS renders SF Symbols with accessible titles, while Android displays titles on ordinary buttons. Allow approximately `24 + 52 * (actions.length + 1) + 12 * actions.length` points of width and at least 80 of height. Arbitrary React children are supported by the surface, but not the action cluster.
+The UIKit action cluster retains controls by stable IDs and uses the same UIGlassEffect material host as GlassView. The toggle keeps its material, bounds, and opacity unchanged during expansion. UIKit owns the native finger-localized highlight and deformation whenever `interactive` is enabled. There is no custom press overlay, scale, or finger-follow animation. SF Symbols remain inside the effect content view, so UIKit deforms the icon and glass together. A tap recognizer observes activation without cancelling or delaying native glass touches. There is no separate UIControl or forced hit-test target. Default dark-mode actions apply a neutral black native material tint at 0.65 alpha to reduce lightness. This also darkens the resting material; it is not a highlight-strength percentage. Light mode uses transparent tint. An explicit tintColor overrides the default. UIKit still owns the highlight and provides no separate intensity setting. The old `pressFeedback` prop is deprecated and ignored. `interactive={false}` disables native press visuals without disabling callbacks. Android keeps its normal ripple. Opt-in merging uses UIGlassContainerEffect and animated UIKit geometry; The default UIKit branch does not use SwiftUI matched-geometry transitions. Supply unique nonempty action IDs; `__toggle` is reserved. Keep expanded controlled. iOS renders SF Symbols with accessible titles, while Android displays titles on ordinary buttons. Allow approximately `24 + 52 * (actions.length + 1) + 12 * actions.length` points of width and at least 80 of height. On iOS, a narrower measured host automatically uses wrapping standard controls, then returns to native glass when it fits. Controlled state and callbacks are retained. Allow height to grow in narrow layouts rather than forcing a fixed height. Arbitrary React children are supported by the surface, but not the action cluster.
 
 Reduce Transparency replaces our glass surface/cluster materials with opaque backgrounds. Reduce Motion suppresses our native property/morph transitions. Use semantic text colors for your children; the package does not recolor arbitrary content. `forceFallback` previews the standard implementation on surfaces, buttons, selectors, and action clusters. The native slider has no `forceFallback` prop.
 
 See `src/types.ts` for the complete typed API. The repository root README contains the demo commands, architecture, reference study, and verification results. Custom drag/stretch physics, a full native control suite, arbitrary React-tree morphing, physical-device profiling, and broader React Native compatibility remain future work. MIT licensed.
 
+## Choose the action-cluster appearance
+
+```tsx
+<GlassActionCluster
+  iosImplementation="swiftui" // "uikit" is the existing appearance and default
+  actions={actions}
+  expanded={expanded}
+  onExpandedChange={setExpanded}
+  onAction={handleAction}
+/>
+```
+
+On iOS 26+, `swiftui` uses Apple's stock `.glass` button style with standard
+material and touch response, without our default dark-mode shading. Change this
+prop at runtime to switch; the controlled actions/expanded state are retained.
+UIKit-specific `material` and `interactive` props do not alter the SwiftUI mode.
+`tintColor` uses SwiftUI's button tint there. Merging remains opt-in, using
+`GlassEffectContainer`; its transitions may differ from UIKit. Older iOS,
+Android, narrow hosts and `forceFallback` keep standard controls. Standalone
+`GlassButton` is unaffected. Rebuild iOS after installing this update.
+
+The SwiftUI branch compiled and passed simulator switching, merging and RTL
+interaction checks on iOS 26.5. The older-iOS fallback passed on iOS 18.6.
+
 ## Native controls
 
 `GlassButton` accepts `title`, optional `systemImage` (iOS), `variant="regular" | "prominent"`, `disabled`, `loading`, `onPress: () => void`, tintColor, colorScheme, forceFallback, and view layout props. Loading prevents activation. Default native host height: 64 points. For custom children/material/shape, use GlassPressable.
@@ -116,7 +156,7 @@ const [tab, setTab] = useState('home');
 
 Supply 1–5 items with unique nonempty IDs/titles and a `value` present in the list. Empty items require `value={null}`. Items accept icon presets (`home`, `search`, `library`, `favorites`, `inbox`, `settings`), iOS `systemImage`/`selectedSystemImage`, Android app drawable name `androidIcon`, numeric or `'dot'` badge, `disabled`, and `accessibilityLabel`. Numeric badges are nonnegative 32-bit integers; native display caps at 999+. Omitting a badge removes it.
 
-Selection is controlled: update `value` in `onValueChange` to accept a tap. Rejected changes restore the supplied value after the React transaction; tapping the current tab calls only `onTabReselect`. Programmatic values emit no callbacks and may select disabled tabs. Global `disabled` blocks user taps. On the iOS 26.5 simulator, XCTest still reports disabled tabs as enabled despite native dimming and blocked activation; VoiceOver announcements need the planned accessibility audit. `tintColor` changes the selected foreground accent. Stable IDs preserve tab identity across reorder/replacement; native controls own press and selection animations.
+Selection is controlled: update `value` in `onValueChange` to accept a tap. Rejected changes restore the supplied value after the React transaction; tapping the current tab calls only `onTabReselect`. Programmatic values emit no callbacks and may select disabled tabs. Global `disabled` blocks user taps. On the iOS 26.5 simulator, XCTest still reports disabled tabs as enabled despite native dimming and blocked activation; spoken VoiceOver acceptance is deferred by the owner. `tintColor` changes the selected foreground accent. Stable IDs preserve tab identity across reorder/replacement; native controls own press and selection animations.
 
 Default host height is 80 points, minimum width 180. Supply sufficient width/height for your labels. The screen owns safe-area spacing outside the host and the content above it. This primitive does not own a navigation stack, React screens, automatic scroll minimization, or an iPad sidebar. It does not accept React children or `forceFallback`; the native system determines its appearance. The repository demo shows a React Navigation 7 custom tab-bar adapter using route keys, preventable `tabPress`, reselection, retained screen state, and back history.
 
@@ -125,3 +165,14 @@ Default host height is 80 points, minimum width 180. Supply sufficient width/hei
 The deployment floor is iOS 15.1. Below iOS 26, GlassView and GlassPressable use UIKit system blur (`regular`: system material; `clear`: ultra-thin material). `material="none"` is transparent. Reduce Transparency uses an opaque semantic background; `forceFallback` explicitly selects the opaque React surface. `fallbackStyle` still applies below iOS 26 and can cover the blur if it supplies an opaque background. A translucent tint overlays the older-iOS blur. GlassContainer remains ordinary layout with no merging below iOS 26. Other controls retain standard UIKit or React implementations. iOS 18.6 is the installed fallback test runtime; iOS 15–17 and physical older devices remain unverified.
 
 Keep blurred areas bounded, avoid nested material surfaces, and use the opaque opt-out for dense lists where appropriate. The native host retains its effect across unchanged props and layout. These safeguards are not measured frame-rate guarantees; profile Release builds on representative physical devices before making performance claims.
+
+## 0.1.2 iPhone-first scope
+
+Selectable UIKit/stock SwiftUI action clusters, native action RTL, automatic
+narrow-cluster fallback, corrected native title-button containment and fewer
+redundant SwiftUI updates. SwiftUI switching, merging and RTL interactions passed
+on the iOS 26.5 simulator. The broader current-iOS regression and eight iOS 18.6
+fallback/control cases passed. These results do not establish iOS 15–17 execution,
+spoken VoiceOver/TalkBack compatibility, narrow iPad multitasking or a frame-rate
+guarantee. The package needs no new runtime dependency. Full release evidence is
+maintained in the repository's `release/verification-0.1.2.md`.

package/ios/ALGActionClusterComponentView.mm

@@ -9,6 +9,7 @@ using namespace facebook::react;
 
 @implementation ALGActionClusterComponentView {
   ALGActionClusterView *_cluster;
+  ALGSwiftUIActionClusterView *_swiftUICluster;
 }
 + (ComponentDescriptorProvider)componentDescriptorProvider {
   return concreteComponentDescriptorProvider<ALGActionClusterComponentDescriptor>();
@@ -21,13 +22,13 @@ using namespace facebook::react;
     __weak ALGActionClusterComponentView *weakSelf = self;
     _cluster.onAction = ^(NSString *identifier) {
       ALGActionClusterComponentView *strongSelf = weakSelf;
-      if (!strongSelf || !strongSelf->_eventEmitter) return;
+      if (!strongSelf || !strongSelf->_eventEmitter || strongSelf.contentView != strongSelf->_cluster) return;
       auto emitter = std::static_pointer_cast<const ALGActionClusterEventEmitter>(strongSelf->_eventEmitter);
       emitter->onAction({std::string(identifier.UTF8String)});
     };
     _cluster.onExpandedChange = ^(BOOL expanded) {
       ALGActionClusterComponentView *strongSelf = weakSelf;
-      if (!strongSelf || !strongSelf->_eventEmitter) return;
+      if (!strongSelf || !strongSelf->_eventEmitter || strongSelf.contentView != strongSelf->_cluster) return;
       auto emitter = std::static_pointer_cast<const ALGActionClusterEventEmitter>(strongSelf->_eventEmitter);
       emitter->onExpandedChange({static_cast<bool>(expanded)});
     };
@@ -36,11 +37,40 @@ using namespace facebook::react;
 }
 - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps {
   const auto &p = *std::static_pointer_cast<const ALGActionClusterProps>(props);
-  [_cluster configure:[NSString stringWithUTF8String:p.actionsJSON.c_str()]
-             expanded:p.expanded mergingEnabled:p.mergingEnabled spacing:p.spacing tint:RCTUIColorFromSharedColor(p.glassTint)
-             material:p.material == ALGActionClusterMaterial::Clear ? @"clear" : @"regular"
-             interactive:p.interactive
-             duration:p.duration toggleLabel:[NSString stringWithUTF8String:p.toggleLabel.c_str()]];
+  BOOL useSwiftUI = NO;
+  if (@available(iOS 26.0, *)) {
+    useSwiftUI = p.iosImplementation == ALGActionClusterIosImplementation::Swiftui;
+  }
+  if (useSwiftUI) {
+    if (!_swiftUICluster) {
+      _swiftUICluster = [[ALGSwiftUIActionClusterView alloc] initWithFrame:CGRectZero];
+      __weak ALGActionClusterComponentView *weakSelf = self;
+      _swiftUICluster.onAction = ^(NSString *identifier) {
+        ALGActionClusterComponentView *strongSelf = weakSelf;
+        if (!strongSelf || !strongSelf->_eventEmitter || strongSelf.contentView != strongSelf->_swiftUICluster) return;
+        auto emitter = std::static_pointer_cast<const ALGActionClusterEventEmitter>(strongSelf->_eventEmitter);
+        emitter->onAction({std::string(identifier.UTF8String)});
+      };
+      _swiftUICluster.onExpandedChange = ^(BOOL expanded) {
+        ALGActionClusterComponentView *strongSelf = weakSelf;
+        if (!strongSelf || !strongSelf->_eventEmitter || strongSelf.contentView != strongSelf->_swiftUICluster) return;
+        auto emitter = std::static_pointer_cast<const ALGActionClusterEventEmitter>(strongSelf->_eventEmitter);
+        emitter->onExpandedChange({static_cast<bool>(expanded)});
+      };
+    }
+    [_swiftUICluster configure:[NSString stringWithUTF8String:p.actionsJSON.c_str()]
+                      expanded:p.expanded mergingEnabled:p.mergingEnabled spacing:p.spacing
+                      tint:RCTUIColorFromSharedColor(p.glassTint) duration:p.duration
+                      toggleLabel:[NSString stringWithUTF8String:p.toggleLabel.c_str()]];
+    if (self.contentView != _swiftUICluster) self.contentView = _swiftUICluster;
+  } else {
+    [_cluster configure:[NSString stringWithUTF8String:p.actionsJSON.c_str()]
+               expanded:p.expanded mergingEnabled:p.mergingEnabled spacing:p.spacing tint:RCTUIColorFromSharedColor(p.glassTint)
+               material:p.material == ALGActionClusterMaterial::Clear ? @"clear" : @"regular"
+               interactive:p.interactive
+               duration:p.duration toggleLabel:[NSString stringWithUTF8String:p.toggleLabel.c_str()]];
+    if (self.contentView != _cluster) self.contentView = _cluster;
+  }
   [super updateProps:props oldProps:oldProps];
 }
 + (BOOL)shouldBeRecycled { return NO; }

package/ios/ALGActionClusterView.swift

@@ -105,6 +105,7 @@ public final class ALGActionClusterView: UIView {
   private var toggleLabel = "Actions"
   private var duration = 0.45
   private var lastSize = CGSize.zero
+  private var lastLayoutDirection: UIUserInterfaceLayoutDirection?
   private var animationGeneration = 0
   private var configured = false
   @objc public var onAction: ((String) -> Void)?
@@ -187,10 +188,12 @@ public final class ALGActionClusterView: UIView {
     }
   }
   private var toggleFrame: CGRect {
-    CGRect(x: bounds.width - 12 - 52, y: (bounds.height - 52) / 2, width: 52, height: 52)
+    let x: CGFloat = effectiveUserInterfaceLayoutDirection == .rightToLeft ? 12 : bounds.width - 12 - 52
+    return CGRect(x: x, y: (bounds.height - 52) / 2, width: 52, height: 52)
   }
   private func actionFrame(at index: Int) -> CGRect {
-    toggleFrame.offsetBy(dx: -CGFloat(actions.count - index) * 64, dy: 0)
+    let direction: CGFloat = effectiveUserInterfaceLayoutDirection == .rightToLeft ? 1 : -1
+    return toggleFrame.offsetBy(dx: direction * CGFloat(actions.count - index) * 64, dy: 0)
   }
   private func updatePositions(animated: Bool) {
     guard bounds.width > 0, bounds.height > 0 else { setNeedsLayout(); return }
@@ -243,7 +246,12 @@ public final class ALGActionClusterView: UIView {
   public override func layoutSubviews() {
     super.layoutSubviews()
     container.frame = bounds
-    if lastSize != bounds.size { lastSize = bounds.size; updatePositions(animated: false) }
+    let direction = effectiveUserInterfaceLayoutDirection
+    if lastSize != bounds.size || lastLayoutDirection != direction {
+      lastSize = bounds.size
+      lastLayoutDirection = direction
+      updatePositions(animated: false)
+    }
   }
   public override func didMoveToWindow() {
     super.didMoveToWindow()

package/ios/ALGButtonView.swift

@@ -68,46 +68,58 @@ public final class ALGButtonView: UIView {
       let controller = UIHostingController(rootView: NativeButtonContent(model: model))
       controller.view.backgroundColor = .clear
       host = controller
-      addSubview(controller.view)
     }
   }
   required init?(coder: NSCoder) { fatalError("init(coder:) is unavailable") }
 
   @objc public func configure(_ title: String, symbol: String, prominent: Bool, disabled: Bool,
     loading: Bool, tint: UIColor?, scheme: String, label: String, hint: String, identifier: String) {
-    model.title = title
-    model.symbol = symbol
-    model.prominent = prominent
-    model.disabled = disabled
-    model.loading = loading
-    model.tint = tint
-    model.label = label
-    model.hint = hint
-    model.identifier = identifier
+    // @Published emits even for equal assignments. React commits frequently
+    // carry unchanged fields; keep those from invalidating SwiftUI content.
+    if model.title != title { model.title = title }
+    if model.symbol != symbol { model.symbol = symbol }
+    if model.prominent != prominent { model.prominent = prominent }
+    if model.disabled != disabled { model.disabled = disabled }
+    if model.loading != loading { model.loading = loading }
+    if model.tint != tint { model.tint = tint }
+    if model.label != label { model.label = label }
+    if model.hint != hint { model.hint = hint }
+    if model.identifier != identifier { model.identifier = identifier }
     overrideUserInterfaceStyle = scheme == "dark" ? .dark : scheme == "light" ? .light : .unspecified
   }
 
-  public override func layoutSubviews() { super.layoutSubviews(); host?.view.frame = bounds }
+  private func detachHost() {
+    guard let host, host.parent != nil else { return }
+    host.willMove(toParent: nil)
+    host.view.removeFromSuperview()
+    host.removeFromParent()
+  }
+  private func attachHost() {
+    guard window != nil, let host else { return }
+    var responder: UIResponder? = superview
+    while let current = responder, !(current is UIViewController) { responder = current.next }
+    guard let parent = responder as? UIViewController, parent !== host else { return }
+    if host.parent !== parent {
+      detachHost()
+      parent.addChild(host)
+      host.view.frame = bounds
+      addSubview(host.view)
+      host.didMove(toParent: parent)
+    }
+  }
+  public override func layoutSubviews() {
+    super.layoutSubviews()
+    attachHost()
+    host?.view.frame = bounds
+  }
   public override func didMoveToWindow() {
     super.didMoveToWindow()
-    guard let host else { return }
     if window == nil {
-      host.willMove(toParent: nil)
-      host.removeFromParent()
-      return
-    }
-    var responder: UIResponder? = superview
-    while let current = responder {
-      if let parent = current as? UIViewController {
-        if host.parent !== parent {
-          host.willMove(toParent: nil)
-          host.removeFromParent()
-          parent.addChild(host)
-          host.didMove(toParent: parent)
-        }
-        break
-      }
-      responder = current.next
+      detachHost()
+    } else {
+      attachHost()
+      // Fabric may finish connecting the responder chain after window insertion.
+      DispatchQueue.main.async { [weak self] in self?.attachHost() }
     }
   }
 }

package/ios/ALGSwiftUIActionClusterView.swift

@@ -0,0 +1,163 @@
+import UIKit
+import SwiftUI
+
+private struct SwiftUIClusterAction: Decodable, Equatable, Identifiable {
+  let id: String
+  let title: String
+  let systemImage: String?
+  let disabled: Bool?
+}
+
+private struct SwiftUIClusterConfiguration: Equatable {
+  var actions: [SwiftUIClusterAction] = []
+  var expanded = false
+  var mergingEnabled = false
+  var spacing: CGFloat = 20
+  var tint: UIColor?
+  var duration = 0.45
+  var toggleLabel = "Actions"
+}
+
+private final class SwiftUIClusterModel: ObservableObject {
+  @Published var configuration = SwiftUIClusterConfiguration()
+  @Published var rightToLeft = false
+  var activate: (String) -> Void = { _ in }
+  var toggle: () -> Void = {}
+}
+
+@available(iOS 26.0, *)
+private struct SwiftUIClusterContent: View {
+  @ObservedObject var model: SwiftUIClusterModel
+  @Environment(\.accessibilityReduceMotion) private var reduceMotion
+  @Environment(\.accessibilityReduceTransparency) private var reduceTransparency
+  @Namespace private var glassNamespace
+
+  private var configuration: SwiftUIClusterConfiguration { model.configuration }
+
+  private func control(id: String, title: String, symbol: String, disabled: Bool,
+    action: @escaping () -> Void) -> some View {
+    Button(action: action) {
+      Image(systemName: UIImage(systemName: symbol) == nil ? "circle" : symbol)
+        .font(.system(size: 20, weight: .medium))
+    }
+    .buttonBorderShape(.circle)
+    .controlSize(.large)
+    .frame(width: 52, height: 52)
+    .disabled(disabled)
+    .accessibilityLabel(title)
+    .accessibilityIdentifier(id == "__toggle" ? "glass-cluster-toggle" : "glass-action-" + id)
+    .glassEffectID(id, in: glassNamespace)
+  }
+
+  private var row: some View {
+    HStack(spacing: 12) {
+      if configuration.expanded {
+        ForEach(configuration.actions) { item in
+          control(id: item.id, title: item.title, symbol: item.systemImage ?? "circle",
+            disabled: item.disabled == true) { model.activate(item.id) }
+        }
+      }
+      control(id: "__toggle", title: configuration.toggleLabel,
+        symbol: configuration.expanded ? "xmark" : "plus", disabled: false) { model.toggle() }
+        .accessibilityValue(configuration.expanded ? "Expanded" : "Collapsed")
+    }
+  }
+
+  @ViewBuilder private var styledRow: some View {
+    if reduceTransparency { row.buttonStyle(.bordered) }
+    else { row.buttonStyle(.glass) }
+  }
+
+  var body: some View {
+    Group {
+      if configuration.mergingEnabled && !reduceTransparency {
+        GlassEffectContainer(spacing: configuration.spacing) { styledRow }
+      } else { styledRow }
+    }
+    .tint(configuration.tint.map { Color(uiColor: $0) } ?? .accentColor)
+    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .trailing)
+    .padding(.horizontal, 12)
+    .animation(reduceMotion || configuration.duration == 0 ? nil : .easeInOut(duration: configuration.duration),
+      value: configuration.expanded)
+    .environment(\.layoutDirection, model.rightToLeft ? .rightToLeft : .leftToRight)
+  }
+}
+
+/// Optional stock SwiftUI presentation. The default UIKit cluster is separate so
+/// opting into this mode cannot change its accepted tint or native touch behavior.
+@objc(ALGSwiftUIActionClusterView)
+public final class ALGSwiftUIActionClusterView: UIView {
+  private let model = SwiftUIClusterModel()
+  private var host: UIViewController?
+  private var lastJSON = ""
+  private var actions: [SwiftUIClusterAction] = []
+  @objc public var onAction: ((String) -> Void)?
+  @objc public var onExpandedChange: ((Bool) -> Void)?
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    model.activate = { [weak self] id in
+      guard let self, self.window != nil, self.model.configuration.expanded,
+        let item = self.actions.first(where: { $0.id == id }), item.disabled != true else { return }
+      self.onAction?(id)
+    }
+    model.toggle = { [weak self] in
+      guard let self, self.window != nil else { return }
+      self.onExpandedChange?(!self.model.configuration.expanded)
+    }
+    if #available(iOS 26.0, *) {
+      let controller = UIHostingController(rootView: SwiftUIClusterContent(model: model))
+      controller.view.backgroundColor = .clear
+      host = controller
+    }
+  }
+  required init?(coder: NSCoder) { fatalError("init(coder:) is unavailable") }
+
+  @objc public func configure(_ actionsJSON: String, expanded: Bool, mergingEnabled: Bool,
+    spacing: CGFloat, tint: UIColor?, duration: Double, toggleLabel: String) {
+    if actionsJSON != lastJSON {
+      actions = (try? JSONDecoder().decode([SwiftUIClusterAction].self, from: Data(actionsJSON.utf8))) ?? []
+      lastJSON = actionsJSON
+    }
+    let next = SwiftUIClusterConfiguration(actions: actions, expanded: expanded,
+      mergingEnabled: mergingEnabled, spacing: spacing.isFinite ? max(0, spacing) : 20,
+      tint: tint, duration: duration.isFinite ? max(0, duration) : 0, toggleLabel: toggleLabel)
+    // One publication per meaningful prop transaction; state stays React-controlled.
+    if model.configuration != next { model.configuration = next }
+  }
+
+  private func detachHost() {
+    guard let host, host.parent != nil else { return }
+    host.willMove(toParent: nil)
+    host.view.removeFromSuperview()
+    host.removeFromParent()
+  }
+  private func attachHost() {
+    guard window != nil, let host else { return }
+    var responder: UIResponder? = superview
+    while let current = responder, !(current is UIViewController) { responder = current.next }
+    guard let parent = responder as? UIViewController, parent !== host else { return }
+    if host.parent !== parent {
+      detachHost()
+      parent.addChild(host)
+      host.view.frame = bounds
+      addSubview(host.view)
+      host.didMove(toParent: parent)
+    }
+  }
+  public override func layoutSubviews() {
+    super.layoutSubviews()
+    let rightToLeft = effectiveUserInterfaceLayoutDirection == .rightToLeft
+    if model.rightToLeft != rightToLeft { model.rightToLeft = rightToLeft }
+    attachHost()
+    host?.view.frame = bounds
+  }
+  public override func didMoveToWindow() {
+    super.didMoveToWindow()
+    if window == nil { detachHost() }
+    else {
+      attachHost()
+      DispatchQueue.main.async { [weak self] in self?.attachHost() }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likith99/react-native-adaptive-liquid-glass",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Native iOS Liquid Glass surfaces and controls with standard Android counterparts.",
   "license": "MIT",
   "author": "Likith Kanneganti",
@@ -45,7 +45,7 @@
   ],
   "peerDependencies": {
     "react": ">=19.0.0",
-    "react-native": ">=0.81.0 <0.87.0"
+    "react-native": ">=0.81.0"
   },
   "codegenConfig": {
     "name": "AdaptiveLiquidGlassSpec",

package/src/GlassActionCluster.ios.tsx

@@ -1,17 +1,31 @@
-import React from 'react';
+import React, {useState} from 'react';
+import type {LayoutChangeEvent} from 'react-native';
 import NativeCluster from './specs/ALGActionClusterNativeComponent';
 import Fallback from './fallback/GlassActionCluster';
 import {isLiquidGlassSupported} from './support';
 import {validateActions} from './validateActions';
 import type {GlassActionClusterProps} from './types';
 export default function GlassActionCluster({actions, onAction, onExpandedChange, tintColor,
-  animationDuration = 0.45, pressFeedback: _pressFeedback, forceFallback, toggleLabel = 'Actions', style, ...props}: GlassActionClusterProps) {
+  iosImplementation = 'uikit',
+  animationDuration = 0.45, pressFeedback: _pressFeedback, forceFallback, toggleLabel = 'Actions', style, onLayout, ...props}: GlassActionClusterProps) {
+  const [width, setWidth] = useState<number | null>(null);
   validateActions(actions);
-  if (forceFallback || !isLiquidGlassSupported()) {
+  // Match UIKit's 52-point controls, 12-point gaps and 12-point edge insets.
+  // Measure this component, not the screen: a split window or nested panel can
+  // be narrower. Keep the controlled expanded state across renderer changes.
+  const tooNarrow = width !== null && width < 76 + actions.length * 64;
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const nextWidth = event.nativeEvent.layout.width;
+    if (Number.isFinite(nextWidth) && nextWidth > 0) setWidth(nextWidth);
+    onLayout?.(event);
+  };
+  if (forceFallback || !isLiquidGlassSupported() || tooNarrow) {
     return <Fallback {...props} actions={actions} onAction={onAction} onExpandedChange={onExpandedChange}
-      style={style} toggleLabel={toggleLabel} />;
+      style={style} toggleLabel={toggleLabel} onLayout={handleLayout} />;
   }
   return <NativeCluster {...props} style={[{height: 88, minWidth: 80}, style]}
+    iosImplementation={iosImplementation}
+    onLayout={handleLayout}
     actionsJSON={JSON.stringify(actions)} glassTint={tintColor} duration={animationDuration} toggleLabel={toggleLabel}
     onAction={event => onAction(event.nativeEvent.id)}
     onExpandedChange={event => onExpandedChange(event.nativeEvent.expanded)} />;

package/src/fallback/GlassActionCluster.tsx

@@ -6,7 +6,7 @@ import type {GlassActionClusterProps} from '../types';
 export default function GlassActionCluster({actions, expanded, onExpandedChange, onAction,
   toggleLabel = 'Actions', style, spacing: _spacing, tintColor: _tint, material: _material,
   interactive: _interactive, animationDuration: _duration, forceFallback: _force,
-  mergingEnabled: _merging, pressFeedback: _pressFeedback, ...props}: GlassActionClusterProps) {
+  mergingEnabled: _merging, pressFeedback: _pressFeedback, iosImplementation: _implementation, ...props}: GlassActionClusterProps) {
   validateActions(actions);
   const dark = useColorScheme() === 'dark';
   const textStyle = {color: dark ? '#F5F5FA' : '#242630', fontWeight: '600' as const};

package/src/specs/ALGActionClusterNativeComponent.ts

@@ -1,5 +1,6 @@
 import {codegenNativeComponent, type ViewProps, type ColorValue, type CodegenTypes} from 'react-native';
 export interface NativeProps extends ViewProps {
+  iosImplementation?: CodegenTypes.WithDefault<'uikit' | 'swiftui', 'uikit'>;
   actionsJSON?: string;
   expanded?: CodegenTypes.WithDefault<boolean, false>;
   mergingEnabled?: CodegenTypes.WithDefault<boolean, false>;

package/src/types.ts

@@ -84,6 +84,9 @@ export interface GlassAction {
   disabled?: boolean;
 }
 export interface GlassActionClusterProps extends Omit<ViewProps, 'children'> {
+  /** iOS 26+: current UIKit material controls (default) or stock SwiftUI glass buttons.
+   * Older iOS, Android and narrow hosts use the standard fallback in either mode. */
+  iosImplementation?: 'uikit' | 'swiftui';
   actions: readonly GlassAction[];
   expanded: boolean;
   onExpandedChange: (expanded: boolean) => void;
@@ -91,9 +94,12 @@ export interface GlassActionClusterProps extends Omit<ViewProps, 'children'> {
   /** Enable shared glass merging and morphing. Defaults to false. */
   mergingEnabled?: boolean;
   spacing?: number;
-  /** Native material tint. Default: neutral dark-mode shading; overrides replace it. */
+  /** UIKit: material tint (neutral dark-mode shading by default).
+   * SwiftUI: standard button tint; no custom default shading. */
   tintColor?: ColorValue;
+  /** UIKit only; SwiftUI uses its standard glass material. */
   material?: 'regular' | 'clear';
+  /** UIKit only; SwiftUI retains standard button feedback. Does not disable actions. */
   interactive?: boolean;
   /** @deprecated Ignored. Native glass feedback follows interactive; custom feedback was removed. */
   pressFeedback?: 'subtle' | 'native';