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

package/android/src/main/java/com/adaptiveglass/ALGTabsView.kt

@@ -0,0 +1,161 @@
+package com.adaptiveglass
+
+import android.content.res.ColorStateList
+import android.content.res.Configuration
+import android.util.TypedValue
+import android.view.ContextThemeWrapper
+import android.view.Menu
+import android.view.MenuItem
+import android.view.View
+import android.widget.FrameLayout
+import androidx.core.view.ViewCompat
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.ReactAccessibilityDelegate
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import com.google.android.material.bottomnavigation.BottomNavigationView
+import com.google.android.material.navigation.NavigationBarView
+import org.json.JSONArray
+
+private data class TabEntry(val id: String, val title: String, val icon: String,
+  val androidIcon: String, val badge: String?, val disabled: Boolean, val label: String)
+private class TabSelectionEvent(surfaceId: Int, tag: Int, private val tabId: String) : Event<TabSelectionEvent>(surfaceId, tag) {
+  override fun getEventName() = "topSelectionChange"
+  override fun canCoalesce() = false
+  override fun getEventData(): WritableMap = Arguments.createMap().apply { putString("id", tabId) }
+}
+
+class ALGTabsView(private val reactContext: ThemedReactContext) : FrameLayout(reactContext) {
+  var itemsJSON = "[]"
+  var selectedValue = ""
+  var disabled = false
+  var glassTint: Int? = null
+  var controlTestID: String? = null
+  private var entries = emptyList<TabEntry>()
+  private var nativeIds = mutableMapOf<String, Int>()
+  private var appliedJSON: String? = null
+  private var applying = false
+  private var bar = makeBar()
+  private var defaultIconTint = bar.itemIconTintList
+  private var defaultTextTint = bar.itemTextColor
+
+  init { addView(bar, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)) }
+  private fun makeBar(): BottomNavigationView {
+    val themeFlag = TypedValue()
+    val themed = if (context.theme.resolveAttribute(com.google.android.material.R.attr.isMaterialTheme, themeFlag, true) && themeFlag.data != 0) context
+      else ContextThemeWrapper(context, com.google.android.material.R.style.Theme_Material3_DayNight_NoActionBar)
+    return BottomNavigationView(themed).apply {
+      labelVisibilityMode = NavigationBarView.LABEL_VISIBILITY_LABELED
+      // Labels scale with the system text size.
+      setLabelFontScalingEnabled(true)
+      setLabelMaxLines(2)
+      isItemHorizontalTranslationEnabled = false
+      // The React screen owns safe-area padding, including the bottom system inset.
+      ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets -> insets }
+      setOnItemSelectedListener { item ->
+        if (applying) true else emitSelection(item)
+      }
+      setOnItemReselectedListener { item -> if (!applying) emitSelection(item) }
+    }
+  }
+  private fun emitSelection(item: MenuItem): Boolean {
+    if (disabled || !isAttachedToWindow || bar.menu.findItem(item.itemId) !== item) return false
+    val entry = entries.firstOrNull { nativeIds[it.id] == item.itemId && !it.disabled } ?: return false
+    UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)?.dispatchEvent(
+      TabSelectionEvent(UIManagerHelper.getSurfaceId(reactContext), id, entry.id))
+    return true // Material owns the provisional native indicator animation.
+  }
+  fun applyConfiguration() {
+    applying = true
+    try {
+      if (appliedJSON != itemsJSON) {
+        appliedJSON = itemsJSON
+        val previousOrder = entries.map { it.id }
+        entries = try {
+          val array = JSONArray(itemsJSON)
+          require(array.length() <= 5)
+          (0 until array.length()).map { index ->
+            val item = array.getJSONObject(index)
+            TabEntry(item.getString("id"), item.getString("title"), item.optString("icon"), item.optString("androidIcon"),
+              if (item.has("badge")) item.get("badge").toString() else null,
+              item.optBoolean("disabled"), item.optString("accessibilityLabel", item.getString("title")))
+          }
+        } catch (_: Exception) { emptyList() }
+        val retained = entries.associate { it.id to (nativeIds[it.id] ?: View.generateViewId()) }.toMutableMap()
+        for ((key, nativeId) in nativeIds) if (!retained.containsKey(key)) bar.removeBadge(nativeId)
+        nativeIds = retained
+        val rebuild = previousOrder != entries.map { it.id } || bar.menu.size() != entries.size
+        if (rebuild) bar.menu.clear()
+        entries.forEachIndexed { index, entry ->
+          val nativeId = nativeIds.getValue(entry.id)
+          val item = if (rebuild) bar.menu.add(Menu.NONE, nativeId, index, entry.title) else bar.menu.findItem(nativeId)
+          item.apply {
+            title = entry.title
+            val custom = if (entry.androidIcon.isEmpty()) 0 else resources.getIdentifier(entry.androidIcon, "drawable", context.packageName)
+            setIcon(if (custom != 0) custom else when (entry.icon) {
+              "home" -> R.drawable.alg_tab_home
+              "search" -> R.drawable.alg_tab_search
+              "library" -> R.drawable.alg_tab_library
+              "favorites" -> R.drawable.alg_tab_favorites
+              "inbox" -> R.drawable.alg_tab_inbox
+              "settings" -> R.drawable.alg_tab_settings
+              else -> R.drawable.alg_tab_circle
+            })
+            if (android.os.Build.VERSION.SDK_INT >= 26) contentDescription = entry.label
+          }
+          if (entry.badge == null) bar.removeBadge(nativeId)
+          else bar.getOrCreateBadge(nativeId).apply {
+            isVisible = true
+            maxCharacterCount = 4
+            if (entry.badge == "dot") clearNumber() else number = entry.badge.toIntOrNull() ?: 0
+          }
+        }
+      }
+      for (entry in entries) {
+        val item = bar.menu.findItem(nativeIds.getValue(entry.id)) ?: continue
+        item.isEnabled = !disabled && !entry.disabled
+        if (entry.id == selectedValue) item.isChecked = true
+      }
+      bar.visibility = if (entries.isEmpty()) View.INVISIBLE else View.VISIBLE
+      bar.setTag(com.facebook.react.R.id.react_test_id, controlTestID)
+      ReactAccessibilityDelegate.setDelegate(bar, bar.isFocusable, bar.importantForAccessibility)
+      fun tint(default: ColorStateList?): ColorStateList? {
+        val accent = glassTint ?: return default
+        return ColorStateList(arrayOf(intArrayOf(-android.R.attr.state_enabled), intArrayOf(android.R.attr.state_checked), intArrayOf()),
+          intArrayOf(default?.getColorForState(intArrayOf(-android.R.attr.state_enabled), accent) ?: accent,
+            accent, default?.defaultColor ?: accent))
+      }
+      bar.itemIconTintList = tint(defaultIconTint)
+      bar.itemTextColor = tint(defaultTextTint)
+      requestLayout()
+      post {
+        if (isAttachedToWindow) {
+          forceNativeLayout()
+          // Material derives each active indicator's layout params from its item view's width
+          // at the moment the item is checked. The first selection happens while the bar is
+          // still unmeasured, so that width is 0, the indicator clamps to 0x0 and stays a stub
+          // beside the icon until a later tap re-checks the item. Re-assigning the desired
+          // width makes every item recompute against its real width. React Native swallows the
+          // requestLayout that changing those params triggers, so lay the bar out again.
+          bar.itemActiveIndicatorWidth = bar.itemActiveIndicatorWidth
+          forceNativeLayout()
+        }
+      }
+    } finally { applying = false }
+  }
+  private fun forceNativeLayout() {
+    forceLayout(); bar.forceLayout()
+    measure(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY))
+    layout(left, top, right, bottom)
+  }
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+    // Re-resolve Material day/night and text resources without changing route IDs.
+    removeView(bar); bar = makeBar()
+    defaultIconTint = bar.itemIconTintList; defaultTextTint = bar.itemTextColor
+    addView(bar, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    appliedJSON = null; applyConfiguration()
+  }
+}

package/android/src/main/java/com/adaptiveglass/AdaptiveLiquidGlassPackage.kt

@@ -0,0 +1,11 @@
+package com.adaptiveglass
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class AdaptiveLiquidGlassPackage : ReactPackage {
+  override fun createNativeModules(context: ReactApplicationContext): List<NativeModule> = emptyList()
+  override fun createViewManagers(context: ReactApplicationContext): List<ViewManager<*, *>> = listOf(ALGSliderManager(), ALGMenuManager(), ALGTabsManager())
+}

package/android/src/main/res/drawable/alg_tab_circle.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
+  <path android:fillColor="#FF000000" android:fillType="evenOdd" android:pathData="M12,4 A8,8 0,1 0,12,20 A8,8 0,1 0,12,4" />
+</vector>

package/android/src/main/res/drawable/alg_tab_favorites.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
+  <path android:fillColor="#FF000000" android:fillType="evenOdd" android:pathData="M12,21 L3,12 C-2,5 7,-1 12,6 C17,-1 26,5 21,12 Z" />
+</vector>

package/android/src/main/res/drawable/alg_tab_home.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
+  <path android:fillColor="#FF000000" android:fillType="evenOdd" android:pathData="M3,11 L12,3 L21,11 L19,11 L19,21 L14,21 L14,14 L10,14 L10,21 L5,21 L5,11 Z" />
+</vector>

package/android/src/main/res/drawable/alg_tab_inbox.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
+  <path android:fillColor="#FF000000" android:fillType="evenOdd" android:pathData="M5,3 L19,3 L23,15 L23,21 L1,21 L1,15 Z M6,5 L3,14 L8,14 L10,17 L14,17 L16,14 L21,14 L18,5 Z" />
+</vector>

package/android/src/main/res/drawable/alg_tab_library.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
+  <path android:fillColor="#FF000000" android:fillType="evenOdd" android:pathData="M3,3 L8,3 L8,21 L3,21 Z M10,3 L15,3 L15,21 L10,21 Z M16,4 L19,3 L23,20 L20,21 Z" />
+</vector>

package/android/src/main/res/drawable/alg_tab_search.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
+  <path android:fillColor="#FF000000" android:fillType="evenOdd" android:pathData="M10,3 A7,7 0,1 0,10,17 A7,7 0,1 0,10,3 M10,5 A5,5 0,1 1,10,15 A5,5 0,1 1,10,5 M15,14 L22,21 L20,23 L13,16 Z" />
+</vector>

package/android/src/main/res/drawable/alg_tab_settings.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
+  <path android:fillColor="#FF000000" android:fillType="evenOdd" android:pathData="M10,1 L14,1 L15,5 L18,6 L22,5 L24,9 L21,12 L22,15 L24,17 L22,21 L18,20 L15,21 L14,24 L10,24 L9,21 L6,20 L2,21 L0,17 L3,14 L3,10 L0,7 L2,3 L6,5 L9,4 Z M12,8 A4,4 0,1 0,12,16 A4,4 0,1 0,12,8" />
+</vector>

package/ios/ALGActionClusterComponentView.h

@@ -0,0 +1,3 @@
+#import <React/RCTViewComponentView.h>
+@interface ALGActionClusterComponentView : RCTViewComponentView
+@end

package/ios/ALGActionClusterComponentView.mm

@@ -0,0 +1,47 @@
+#import "ALGActionClusterComponentView.h"
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/ComponentDescriptors.h>
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/Props.h>
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/EventEmitters.h>
+#import <React/RCTConversions.h>
+#import "AdaptiveLiquidGlass-Swift.h"
+
+using namespace facebook::react;
+
+@implementation ALGActionClusterComponentView {
+  ALGActionClusterView *_cluster;
+}
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<ALGActionClusterComponentDescriptor>();
+}
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    _props = std::make_shared<const ALGActionClusterProps>();
+    _cluster = [[ALGActionClusterView alloc] initWithFrame:CGRectZero];
+    self.contentView = _cluster;
+    __weak ALGActionClusterComponentView *weakSelf = self;
+    _cluster.onAction = ^(NSString *identifier) {
+      ALGActionClusterComponentView *strongSelf = weakSelf;
+      if (!strongSelf || !strongSelf->_eventEmitter) 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;
+      auto emitter = std::static_pointer_cast<const ALGActionClusterEventEmitter>(strongSelf->_eventEmitter);
+      emitter->onExpandedChange({static_cast<bool>(expanded)});
+    };
+  }
+  return self;
+}
+- (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()]];
+  [super updateProps:props oldProps:oldProps];
+}
++ (BOOL)shouldBeRecycled { return NO; }
+@end

package/ios/ALGActionClusterView.swift

@@ -0,0 +1,252 @@
+import UIKit
+
+private struct GlassAction: Decodable, Equatable {
+  let id: String
+  let title: String
+  let systemImage: String?
+  let disabled: Bool?
+}
+
+/// The same plain glass-view hierarchy as GlassView. UIKit owns hit testing,
+/// localized lighting, and deformation of both the material and its content.
+private final class ClusterItem: UIView {
+  // Use the native material tint to restrain dark-mode lightness. This shades
+  // the whole material, including its resting appearance; UIKit still owns
+  // the highlight and deformation. Explicit caller tints take precedence.
+  private static let defaultTint = UIColor { traits in
+    traits.userInterfaceStyle == .dark ? UIColor(white: 0, alpha: 0.65) : .clear
+  }
+  let surface = ALGSurfaceView()
+  let icon = UIImageView()
+  var onPress: (() -> Void)?
+  private var enabled = true
+  private var symbol = ""
+  private var appliedMaterial: String?
+  private var appliedTint: UIColor?
+  private var appliedInteractive: Bool?
+  private lazy var tap = UITapGestureRecognizer(target: self, action: #selector(activateTap(_:)))
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    addSubview(surface)
+    icon.contentMode = .center
+    icon.tintColor = .label
+    icon.isUserInteractionEnabled = false
+    surface.reactContentView.addSubview(icon)
+    isAccessibilityElement = true
+    accessibilityTraits = .button
+    // Observe activation without cancelling or delaying UIKit's glass touches.
+    tap.cancelsTouchesInView = false
+    tap.delaysTouchesBegan = false
+    tap.delaysTouchesEnded = false
+    addGestureRecognizer(tap)
+  }
+  required init?(coder: NSCoder) { fatalError("init(coder:) is unavailable") }
+  @objc private func activateTap(_ recognizer: UITapGestureRecognizer) {
+    guard recognizer.state == .ended, enabled,
+      point(inside: recognizer.location(in: self), with: nil) else { return }
+    onPress?()
+  }
+  override func accessibilityActivate() -> Bool {
+    guard enabled, !isHidden, isUserInteractionEnabled else { return false }
+    onPress?()
+    return true
+  }
+  func configure(symbol: String, title: String, identifier: String, enabled: Bool,
+    material: String, tint: UIColor?, interactive: Bool, toggle: Bool = false) {
+    if self.symbol != symbol {
+      self.symbol = symbol
+      let config = UIImage.SymbolConfiguration(pointSize: toggle ? 22 : 20, weight: .medium)
+      icon.image = (UIImage(systemName: symbol, withConfiguration: config)
+        ?? UIImage(systemName: "circle", withConfiguration: config))?.withRenderingMode(.alwaysTemplate)
+    }
+    self.enabled = enabled
+    tap.isEnabled = enabled
+    icon.alpha = enabled ? 1 : 0.4
+    accessibilityLabel = title
+    accessibilityIdentifier = identifier
+    accessibilityTraits = enabled ? .button : [.button, .notEnabled]
+    // Match GlassView's native material, without an independent press treatment.
+    let responds = interactive && enabled
+    let materialTint = tint ?? Self.defaultTint
+    if appliedMaterial != material || appliedTint != materialTint || appliedInteractive != responds {
+      appliedMaterial = material; appliedTint = materialTint; appliedInteractive = responds
+      surface.configure(material, interactive: responds, tint: materialTint, radius: 26,
+        container: false, mergingEnabled: false, spacing: 0, duration: 0, scheme: "system")
+    }
+  }
+  override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
+    let dx = point.x - bounds.midX, dy = point.y - bounds.midY
+    return dx * dx + dy * dy <= pow(min(bounds.width, bounds.height) / 2, 2)
+  }
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    surface.frame = bounds
+    icon.bounds = CGRect(origin: .zero, size: bounds.size)
+    icon.center = CGPoint(x: bounds.midX, y: bounds.midY)
+  }
+}
+
+/// Stable UIKit controls and material hosts. Both surfaces and action icons now
+/// use ALGSurfaceView; expansion never changes the toggle's material or opacity.
+@objc(ALGActionClusterView)
+public final class ALGActionClusterView: UIView {
+  private let container = ALGSurfaceView()
+  private let toggle = ClusterItem()
+  private var items: [String: ClusterItem] = [:]
+  private var actions: [GlassAction] = []
+  private var lastJSON = ""
+  private var expanded = false
+  private var mergingEnabled = false
+  private var spacing: CGFloat = 20
+  private var material = "regular"
+  private var glassTint: UIColor?
+  private var interactive = true
+  private var toggleLabel = "Actions"
+  private var duration = 0.45
+  private var lastSize = CGSize.zero
+  private var animationGeneration = 0
+  private var configured = false
+  @objc public var onAction: ((String) -> Void)?
+  @objc public var onExpandedChange: ((Bool) -> Void)?
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    addSubview(container)
+    container.reactContentView.addSubview(toggle)
+    toggle.onPress = { [weak self] in
+      guard let self else { return }
+      self.onExpandedChange?(!self.expanded)
+    }
+    NotificationCenter.default.addObserver(self, selector: #selector(accessibilityChanged),
+      name: UIAccessibility.reduceTransparencyStatusDidChangeNotification, object: nil)
+    NotificationCenter.default.addObserver(self, selector: #selector(accessibilityChanged),
+      name: UIAccessibility.reduceMotionStatusDidChangeNotification, object: nil)
+  }
+  required init?(coder: NSCoder) { fatalError("init(coder:) is unavailable") }
+  deinit { NotificationCenter.default.removeObserver(self) }
+
+  @objc public func configure(_ actionsJSON: String, expanded: Bool, mergingEnabled: Bool, spacing: CGFloat,
+    tint: UIColor?, material: String, interactive: Bool, duration: Double, toggleLabel: String) {
+    var nextActions = actions
+    if lastJSON != actionsJSON {
+      nextActions = (try? JSONDecoder().decode([GlassAction].self, from: Data(actionsJSON.utf8))) ?? []
+      lastJSON = actionsJSON
+    }
+    let actionsChanged = nextActions != actions
+    let groupChanged = !configured || self.mergingEnabled != mergingEnabled || self.spacing != max(0, spacing)
+    let appearanceChanged = !configured || self.glassTint != tint || self.material != material || self.interactive != interactive
+    let labelChanged = self.toggleLabel != toggleLabel
+    let expansionChanged = self.expanded != expanded
+    let wasConfigured = configured
+    self.expanded = expanded
+    self.mergingEnabled = mergingEnabled
+    self.spacing = max(0, spacing)
+    self.material = material
+    self.glassTint = tint
+    self.interactive = interactive
+    self.duration = duration.isFinite ? max(0, duration) : 0
+    self.toggleLabel = toggleLabel
+    configured = true
+
+    if actionsChanged {
+      let nextIDs = Set(nextActions.map(\.id))
+      for id in Array(items.keys) where !nextIDs.contains(id) { items.removeValue(forKey: id)?.removeFromSuperview() }
+      for action in nextActions where items[action.id] == nil {
+        let item = ClusterItem()
+        item.isHidden = true
+        item.frame = toggleFrame
+        item.onPress = { [weak self] in
+          guard let self, self.expanded,
+            let current = self.actions.first(where: { $0.id == action.id }), !(current.disabled ?? false) else { return }
+          self.onAction?(action.id)
+        }
+        items[action.id] = item
+      }
+      actions = nextActions
+      container.reactContentView.bringSubviewToFront(toggle)
+    }
+    if groupChanged {
+      container.configure("regular", interactive: false, tint: nil, radius: 0, container: true,
+        mergingEnabled: mergingEnabled, spacing: self.spacing, duration: 0, scheme: "system")
+    }
+    if appearanceChanged || actionsChanged || labelChanged { updateAppearance() }
+    toggle.accessibilityValue = expanded ? "Expanded" : "Collapsed"
+    if expansionChanged || actionsChanged || groupChanged || !wasConfigured {
+      updatePositions(animated: expansionChanged && wasConfigured && !groupChanged && !actionsChanged)
+    }
+  }
+
+  private func updateAppearance() {
+    toggle.configure(symbol: "plus", title: toggleLabel, identifier: "glass-cluster-toggle", enabled: true,
+      material: material, tint: glassTint, interactive: interactive, toggle: true)
+    for action in actions {
+      items[action.id]?.configure(symbol: action.systemImage ?? "circle", title: action.title,
+        identifier: "glass-action-" + action.id, enabled: !(action.disabled ?? false),
+        material: material, tint: glassTint, interactive: interactive)
+    }
+  }
+  private var toggleFrame: CGRect {
+    CGRect(x: bounds.width - 12 - 52, 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)
+  }
+  private func updatePositions(animated: Bool) {
+    guard bounds.width > 0, bounds.height > 0 else { setNeedsLayout(); return }
+    animationGeneration += 1
+    let generation = animationGeneration
+    let animate = animated && window != nil && duration > 0 && !UIAccessibility.isReduceMotionEnabled
+    toggle.frame = toggleFrame
+    for (index, action) in actions.enumerated() {
+      guard let item = items[action.id] else { continue }
+      // Hidden controls cannot receive taps or accessibility focus during collapse.
+      item.isUserInteractionEnabled = expanded
+      item.accessibilityElementsHidden = !expanded
+      if expanded && item.isHidden {
+        item.frame = mergingEnabled && animate ? toggleFrame : actionFrame(at: index)
+        item.alpha = mergingEnabled || !animate ? 1 : 0
+        if item.superview == nil { container.reactContentView.addSubview(item) }
+        item.isHidden = false
+      }
+    }
+    container.reactContentView.bringSubviewToFront(toggle)
+    let changes = {
+      for (index, action) in self.actions.enumerated() {
+        guard let item = self.items[action.id] else { continue }
+        item.frame = self.mergingEnabled && !self.expanded ? self.toggleFrame : self.actionFrame(at: index)
+        item.alpha = self.mergingEnabled || self.expanded ? 1 : 0
+      }
+      // Rotate only the glyph. The toggle's glass stays at the same bounds/opacity.
+      self.toggle.icon.transform = CGAffineTransform(rotationAngle: self.expanded ? .pi / 4 : 0)
+    }
+    let finish: (Bool) -> Void = { [weak self] _ in
+      guard let self, generation == self.animationGeneration else { return }
+      for item in self.items.values {
+        item.isHidden = !self.expanded
+        // Retain identity in the dictionary, but remove collapsed controls from
+        // UIKit's hierarchy so accessibility cannot discover hidden actions.
+        if !self.expanded { item.removeFromSuperview() }
+      }
+    }
+    if animate {
+      UIView.animate(withDuration: duration, delay: 0,
+        options: [.beginFromCurrentState, .allowUserInteraction, .curveEaseInOut], animations: changes, completion: finish)
+    } else {
+      for item in items.values { item.layer.removeAllAnimations() }
+      toggle.icon.layer.removeAllAnimations()
+      UIView.performWithoutAnimation(changes)
+      finish(true)
+    }
+  }
+  @objc private func accessibilityChanged() { updateAppearance(); updatePositions(animated: false) }
+  public override func layoutSubviews() {
+    super.layoutSubviews()
+    container.frame = bounds
+    if lastSize != bounds.size { lastSize = bounds.size; updatePositions(animated: false) }
+  }
+  public override func didMoveToWindow() {
+    super.didMoveToWindow()
+    updatePositions(animated: false)
+  }
+}

package/ios/ALGButtonComponentView.h

@@ -0,0 +1,3 @@
+#import <React/RCTViewComponentView.h>
+@interface ALGButtonComponentView : RCTViewComponentView
+@end

package/ios/ALGButtonComponentView.mm

@@ -0,0 +1,37 @@
+#import "ALGButtonComponentView.h"
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/ComponentDescriptors.h>
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/Props.h>
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/EventEmitters.h>
+#import <React/RCTConversions.h>
+#import "AdaptiveLiquidGlass-Swift.h"
+using namespace facebook::react;
+@implementation ALGButtonComponentView {
+  ALGButtonView *_button;
+}
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<ALGButtonComponentDescriptor>();
+}
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    _props = std::make_shared<const ALGButtonProps>();
+    _button = [[ALGButtonView alloc] initWithFrame:CGRectZero];
+    self.contentView = _button;
+    __weak ALGButtonComponentView *weakSelf = self;
+    _button.onActivate = ^{
+      ALGButtonComponentView *strongSelf = weakSelf;
+      if (!strongSelf || !strongSelf->_eventEmitter) return;
+      std::static_pointer_cast<const ALGButtonEventEmitter>(strongSelf->_eventEmitter)->onActivate({true});
+    };
+  }
+  return self;
+}
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps {
+  const auto &p = *std::static_pointer_cast<const ALGButtonProps>(props);
+  NSString *scheme = p.colorScheme == ALGButtonColorScheme::Dark ? @"dark" : p.colorScheme == ALGButtonColorScheme::Light ? @"light" : @"system";
+  [_button configure:@(p.title.c_str()) symbol:@(p.systemImage.c_str()) prominent:p.variant == ALGButtonVariant::Prominent
+            disabled:p.disabled loading:p.loading tint:RCTUIColorFromSharedColor(p.glassTint) scheme:scheme
+            label:@(p.controlLabel.c_str()) hint:@(p.controlHint.c_str()) identifier:@(p.controlTestID.c_str())];
+  [super updateProps:props oldProps:oldProps];
+}
++ (BOOL)shouldBeRecycled { return NO; }
+@end