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

package/ios/ALGSurfaceView.swift

@@ -0,0 +1,108 @@
+import UIKit
+
+/// Material rendering lives entirely in UIKit. Fabric only supplies props and children.
+@objc(ALGSurfaceView)
+public final class ALGSurfaceView: UIView {
+  private let effectView = UIVisualEffectView()
+  private var material = "regular"
+  private var interactive = false
+  private var glassTint: UIColor?
+  private var radius: CGFloat = 24
+  private var isContainer = false
+  private var mergingEnabled = false
+  private var spacing: CGFloat = 20
+  private var duration: Double = 0.35
+  private var dirty = true
+  private var mounted = false
+  private var resetInteraction = false
+
+  @objc public var reactContentView: UIView { effectView.contentView }
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    addSubview(effectView)
+    NotificationCenter.default.addObserver(self, selector: #selector(accessibilityChanged),
+      name: UIAccessibility.reduceTransparencyStatusDidChangeNotification, object: nil)
+  }
+  required init?(coder: NSCoder) { fatalError("init(coder:) is unavailable") }
+  deinit { NotificationCenter.default.removeObserver(self) }
+
+  @objc public func configure(_ material: String, interactive: Bool, tint: UIColor?,
+    radius: CGFloat, container: Bool, mergingEnabled: Bool, spacing: CGFloat, duration: Double, scheme: String) {
+    resetInteraction = resetInteraction || self.interactive != interactive || self.isContainer != container || self.mergingEnabled != mergingEnabled
+    dirty = dirty || self.material != material || self.interactive != interactive ||
+      self.glassTint != tint || self.isContainer != container || self.spacing != spacing || self.mergingEnabled != mergingEnabled
+    self.material = material
+    self.interactive = interactive
+    self.glassTint = tint
+    self.radius = max(0, radius)
+    self.isContainer = container
+    self.mergingEnabled = mergingEnabled
+    self.spacing = max(0, spacing)
+    self.duration = max(0, duration)
+    overrideUserInterfaceStyle = scheme == "dark" ? .dark : scheme == "light" ? .light : .unspecified
+    setNeedsLayout()
+  }
+
+  @objc private func accessibilityChanged() { dirty = true; setNeedsLayout() }
+
+  public override func didMoveToWindow() {
+    super.didMoveToWindow()
+    mounted = false
+    dirty = true
+    setNeedsLayout()
+  }
+
+  public override func layoutSubviews() {
+    super.layoutSubviews()
+    effectView.frame = bounds
+    if #available(iOS 26.0, *) {
+      effectView.cornerConfiguration = .uniformCorners(radius: .fixed(isContainer ? 0 : radius))
+    } else {
+      effectView.layer.cornerRadius = isContainer ? 0 : radius
+      effectView.clipsToBounds = !isContainer
+    }
+    guard window != nil, bounds.width > 0, bounds.height > 0, dirty else { return }
+    dirty = false
+    let animate = mounted && !resetInteraction && !UIAccessibility.isReduceMotionEnabled && duration > 0
+    if !mounted || resetInteraction { effectView.effect = UIVisualEffect() }
+    resetInteraction = false
+    mounted = true
+    let effect: UIVisualEffect
+    if #available(iOS 26.0, *), !UIAccessibility.isReduceTransparencyEnabled {
+      if isContainer {
+        if mergingEnabled {
+          let group = UIGlassContainerEffect()
+          group.spacing = spacing
+          effect = group
+        } else {
+          // Keep the children mounted, but remove shared glass compositing.
+          effect = UIVisualEffect()
+        }
+      } else if material != "none" {
+        let glass = UIGlassEffect(style: material == "clear" ? .clear : .regular)
+        glass.isInteractive = interactive
+        glass.tintColor = glassTint
+        effect = glass
+      } else { effect = UIVisualEffect() }
+      effectView.backgroundColor = .clear
+    } else if !UIAccessibility.isReduceTransparencyEnabled && !isContainer && material != "none" {
+      // Standard system material on pre-glass iOS. Keep the same contentView and
+      // dirty-prop gate, so layout/React updates do not allocate another blur.
+      effect = UIBlurEffect(style: material == "clear" ? .systemUltraThinMaterial : .systemMaterial)
+      effectView.backgroundColor = .clear
+      effectView.contentView.backgroundColor = glassTint ?? .clear
+    } else {
+      effect = UIVisualEffect()
+      effectView.backgroundColor = isContainer || material == "none" ? .clear : .secondarySystemBackground
+    }
+    if #available(iOS 26.0, *) {
+      effectView.contentView.backgroundColor = .clear
+    } else if UIAccessibility.isReduceTransparencyEnabled || isContainer || material == "none" {
+      effectView.contentView.backgroundColor = .clear
+    }
+    let apply = { self.effectView.effect = effect }
+    if animate { UIView.animate(withDuration: duration, animations: apply) } else { apply() }
+    effectView.contentView.isUserInteractionEnabled = true
+  }
+}

package/ios/ALGTabsComponentView.h

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

package/ios/ALGTabsComponentView.mm

@@ -0,0 +1,33 @@
+#import "ALGTabsComponentView.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 ALGTabsComponentView {
+  ALGTabsView *_tabs;
+}
++ (ComponentDescriptorProvider)componentDescriptorProvider { return concreteComponentDescriptorProvider<ALGTabsComponentDescriptor>(); }
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    _props = std::make_shared<const ALGTabsProps>();
+    _tabs = [[ALGTabsView alloc] initWithFrame:CGRectZero];
+    self.contentView = _tabs;
+    __weak ALGTabsComponentView *weakSelf = self;
+    _tabs.onSelectionChange = ^(NSString *identifier) {
+      ALGTabsComponentView *self = weakSelf;
+      if (self && self->_eventEmitter) std::static_pointer_cast<const ALGTabsEventEmitter>(self->_eventEmitter)->onSelectionChange({std::string(identifier.UTF8String)});
+    };
+  }
+  return self;
+}
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps {
+  const auto &p = *std::static_pointer_cast<const ALGTabsProps>(props);
+  // selectionRevision forces this transaction when React rejects a native tap.
+  [_tabs configure:@(p.itemsJSON.c_str()) selectedValue:@(p.selectedValue.c_str()) disabled:p.disabled
+    tint:RCTUIColorFromSharedColor(p.glassTint) identifier:@(p.controlTestID.c_str())];
+  [super updateProps:props oldProps:oldProps];
+}
++ (BOOL)shouldBeRecycled { return NO; }
+@end

package/ios/ALGTabsView.swift

@@ -0,0 +1,194 @@
+import UIKit
+
+private struct TabItem: Decodable {
+  let id: String
+  let title: String
+  let icon: String?
+  let systemImage: String?
+  let selectedSystemImage: String?
+  let badge: Badge?
+  let disabled: Bool?
+  let accessibilityLabel: String?
+  enum Badge: Decodable {
+    case number(Int), dot
+    init(from decoder: Decoder) throws {
+      let value = try decoder.singleValueContainer()
+      if let number = try? value.decode(Int.self) { self = .number(number) }
+      else if try value.decode(String.self) == "dot" { self = .dot }
+      else { throw DecodingError.dataCorruptedError(in: value, debugDescription: "Invalid badge") }
+    }
+    var text: String {
+      switch self { case .dot: return ""; case .number(let number): return number > 999 ? "999+" : String(number) }
+    }
+  }
+}
+private final class TabDestination: UIViewController {
+  let tabID: String
+  init(id: String) { tabID = id; super.init(nibName: nil, bundle: nil) }
+  required init?(coder: NSCoder) { fatalError("init(coder:) is unavailable") }
+  override func loadView() { view = UIView(); view.backgroundColor = .clear }
+}
+
+/// The contained controller owns the native tab bar; React owns the screen above it.
+@objc(ALGTabsView)
+public final class ALGTabsView: UIView, UITabBarControllerDelegate {
+  private let controller = UITabBarController()
+  private var destinations: [String: TabDestination] = [:]
+  private var items: [TabItem] = []
+  private var lastJSON = ""
+  private var applying = false
+  private var disabled = false
+  @objc public var onSelectionChange: ((String) -> Void)?
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    controller.delegate = self
+    controller.view.backgroundColor = .clear
+    controller.customizableViewControllers = []
+    if #available(iOS 17.0, *) { controller.traitOverrides.horizontalSizeClass = .compact }
+    if #available(iOS 18.0, *) { controller.mode = .tabBar }
+    if #available(iOS 26.0, *) { controller.tabBarMinimizeBehavior = .never }
+  }
+  required init?(coder: NSCoder) { fatalError("init(coder:) is unavailable") }
+
+  @objc public func configure(_ json: String, selectedValue: String, disabled: Bool,
+    tint: UIColor?, identifier: String) {
+    applying = true
+    defer { applying = false }
+    self.disabled = disabled
+    let metadataChanged = json != lastJSON
+    if metadataChanged {
+      lastJSON = json
+      items = (try? JSONDecoder().decode([TabItem].self, from: Data(json.utf8))) ?? []
+      var next: [String: TabDestination] = [:]
+      let ordered = items.map { item -> TabDestination in
+        let destination = destinations[item.id] ?? TabDestination(id: item.id)
+        next[item.id] = destination
+        return destination
+      }
+      destinations = next
+      if #available(iOS 18.4, *) {
+        // Modern UIKit owns enabled state on UITab, not the legacy tabBarItem.
+        let tabs = ordered.map { destination in
+          controller.tabs.first { $0.identifier == destination.tabID } ??
+            UITab(title: "", image: nil, identifier: destination.tabID) { _ in destination }
+        }
+        if controller.tabs.map(\.identifier) != tabs.map(\.identifier) {
+          controller.setTabs(tabs, animated: false)
+        }
+      }
+      // UIKit adopts the UITab API from the app's deployment target, not just the running
+      // OS, so #available alone can leave an app built for an older target with tabs that
+      // UIKit ignores and no view controllers at all. Drive the legacy array whenever the
+      // controller's own contents do not match, which is a no-op once UITab took effect.
+      let currentIDs = controller.viewControllers?.compactMap { ($0 as? TabDestination)?.tabID } ?? []
+      if currentIDs != ordered.map(\.tabID) {
+        controller.setViewControllers(ordered, animated: false)
+        controller.customizableViewControllers = []
+      }
+    }
+    for item in items {
+      guard let destination = destinations[item.id] else { continue }
+      if metadataChanged {
+        let preset: String
+        switch item.icon {
+        case "home": preset = "house"
+        case "search": preset = "magnifyingglass"
+        case "library": preset = "books.vertical"
+        case "favorites": preset = "heart"
+        case "inbox": preset = "tray"
+        case "settings": preset = "gearshape"
+        default: preset = "circle"
+        }
+        let symbol = item.systemImage ?? preset
+        destination.tabBarItem.title = item.title
+        destination.tabBarItem.image = UIImage(systemName: symbol) ?? UIImage(systemName: "circle")
+        destination.tabBarItem.selectedImage = item.selectedSystemImage.flatMap { UIImage(systemName: $0) }
+        destination.tabBarItem.badgeValue = item.badge?.text
+      }
+      // UIKit derives the tab button, its label and its selected trait from the tab itself.
+      // Neither UITab nor UITabBarItem declares a public accessibilityTraits property, so
+      // isEnabled is the only public control over the disabled state; see docs/accessibility.md.
+      let enabled = !disabled && item.disabled != true
+      destination.tabBarItem.isEnabled = enabled
+      destination.tabBarItem.accessibilityLabel = item.accessibilityLabel ?? item.title
+      destination.tabBarItem.accessibilityIdentifier = identifier.isEmpty ? item.id : "\(identifier)-\(item.id)"
+      if #available(iOS 18.4, *), let tab = controller.tab(forIdentifier: item.id) {
+        tab.title = item.title
+        tab.image = item.id == selectedValue
+          ? (destination.tabBarItem.selectedImage ?? destination.tabBarItem.image)
+          : destination.tabBarItem.image
+        tab.badgeValue = item.badge?.text
+        tab.isEnabled = enabled
+        tab.preferredPlacement = .fixed
+        tab.accessibilityLabel = item.accessibilityLabel ?? item.title
+        tab.accessibilityIdentifier = destination.tabBarItem.accessibilityIdentifier
+      }
+    }
+    // Fall through to the view-controller path when UITab is not in effect, rather than
+    // silently skipping selection on an app whose deployment target predates it.
+    if #available(iOS 18.4, *), let selected = controller.tab(forIdentifier: selectedValue) {
+      if controller.selectedTab !== selected { controller.selectedTab = selected }
+    } else if let selected = destinations[selectedValue], controller.selectedViewController !== selected {
+      controller.selectedViewController = selected
+    }
+    controller.tabBar.tintColor = tint
+    controller.tabBar.accessibilityIdentifier = identifier
+    controller.view.isHidden = items.isEmpty
+    setNeedsLayout()
+  }
+  private func currentItem(_ destination: UIViewController) -> TabItem? {
+    guard let tab = destination as? TabDestination, destinations[tab.tabID] === tab else { return nil }
+    return items.first { $0.id == tab.tabID }
+  }
+  public func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool {
+    guard !applying, window != nil, !disabled, let item = currentItem(viewController) else { return false }
+    return item.disabled != true
+  }
+  public func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
+    guard !applying, window != nil, !disabled, let item = currentItem(viewController), item.disabled != true else { return }
+    onSelectionChange?(item.id)
+  }
+  @available(iOS 18.0, *)
+  public func tabBarController(_ tabBarController: UITabBarController, shouldSelectTab tab: UITab) -> Bool {
+    guard !applying, window != nil, !disabled, controller.tab(forIdentifier: tab.identifier) === tab else { return false }
+    return items.contains { $0.id == tab.identifier && $0.disabled != true }
+  }
+  @available(iOS 18.0, *)
+  public func tabBarController(_ tabBarController: UITabBarController, didSelectTab selectedTab: UITab, previousTab: UITab?) {
+    guard self.tabBarController(tabBarController, shouldSelectTab: selectedTab) else { return }
+    onSelectionChange?(selectedTab.identifier)
+  }
+  private func attachController() {
+    guard window != nil else { return }
+    var responder: UIResponder? = superview
+    while let current = responder, !(current is UIViewController) { responder = current.next }
+    guard let parent = responder as? UIViewController, parent !== controller else { return }
+    if controller.parent !== parent {
+      detachController()
+      parent.addChild(controller)
+      addSubview(controller.view)
+      controller.didMove(toParent: parent)
+    }
+    controller.view.frame = bounds
+  }
+  private func detachController() {
+    guard controller.parent != nil else { return }
+    controller.willMove(toParent: nil)
+    controller.view.removeFromSuperview()
+    controller.removeFromParent()
+  }
+  public override func didMoveToWindow() {
+    super.didMoveToWindow()
+    if window == nil { detachController() }
+    else {
+      attachController()
+      DispatchQueue.main.async { [weak self] in self?.attachController() }
+    }
+  }
+  public override func layoutSubviews() {
+    super.layoutSubviews()
+    attachController()
+    controller.view.frame = bounds
+  }
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@likith99/react-native-adaptive-liquid-glass",
+  "version": "0.1.0",
+  "description": "Native iOS Liquid Glass surfaces and controls with standard Android counterparts.",
+  "license": "MIT",
+  "author": "Likith Kanneganti",
+  "homepage": "https://github.com/likith099/liquedGlassRecreate#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/likith099/liquedGlassRecreate.git",
+    "directory": "packages/liquid-glass"
+  },
+  "bugs": {
+    "url": "https://github.com/likith099/liquedGlassRecreate/issues"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "liquid-glass",
+    "glass",
+    "uikit",
+    "swiftui",
+    "material",
+    "fabric",
+    "new-architecture",
+    "tabs",
+    "toolbar",
+    "menu",
+    "accessibility"
+  ],
+  "main": "src/index.ts",
+  "react-native": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "ios",
+    "android",
+    "!android/build",
+    "!android/.gradle",
+    "AdaptiveLiquidGlass.podspec",
+    "react-native.config.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-native": ">=0.81.0 <0.87.0"
+  },
+  "codegenConfig": {
+    "name": "AdaptiveLiquidGlassSpec",
+    "type": "components",
+    "jsSrcsDir": "src/specs",
+    "android": {
+      "javaPackageName": "com.adaptiveglass"
+    },
+    "ios": {
+      "componentProvider": {
+        "ALGSurface": "ALGSurfaceComponentView",
+        "ALGButton": "ALGButtonComponentView",
+        "ALGSegmented": "ALGSegmentedComponentView",
+        "ALGSlider": "ALGSliderComponentView",
+        "ALGActionCluster": "ALGActionClusterComponentView",
+        "ALGMenu": "ALGMenuComponentView",
+        "ALGTabs": "ALGTabsComponentView"
+      }
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/react-native.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  dependency: {platforms: {android: {componentDescriptors: ['ALGSliderComponentDescriptor', 'ALGMenuComponentDescriptor', 'ALGTabsComponentDescriptor']}}},
+};

package/src/GlassActionCluster.ios.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+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) {
+  validateActions(actions);
+  if (forceFallback || !isLiquidGlassSupported()) {
+    return <Fallback {...props} actions={actions} onAction={onAction} onExpandedChange={onExpandedChange}
+      style={style} toggleLabel={toggleLabel} />;
+  }
+  return <NativeCluster {...props} style={[{height: 88, minWidth: 80}, style]}
+    actionsJSON={JSON.stringify(actions)} glassTint={tintColor} duration={animationDuration} toggleLabel={toggleLabel}
+    onAction={event => onAction(event.nativeEvent.id)}
+    onExpandedChange={event => onExpandedChange(event.nativeEvent.expanded)} />;
+}

package/src/GlassActionCluster.tsx

@@ -0,0 +1 @@
+export {default} from './fallback/GlassActionCluster';

package/src/GlassButton.ios.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {useWindowDimensions} from 'react-native';
+import adaptiveHeight from './adaptiveHeight';
+import NativeButton from './specs/ALGButtonNativeComponent';
+import GlassPressable from './GlassPressable';
+import Fallback from './fallback/NativeGlassButton';
+import {isLiquidGlassSupported} from './support';
+import type {GlassButtonProps} from './types';
+export default function GlassButton(props: GlassButtonProps) {
+  const {fontScale} = useWindowDimensions();
+  if (props.title === undefined) return <GlassPressable {...props} />;
+  if (props.forceFallback || !isLiquidGlassSupported()) return <Fallback {...props} />;
+  const {onPress, tintColor, forceFallback: _fallback, accessibilityLabel, accessibilityHint,
+    accessibilityState: _state, testID, style, ...nativeProps} = props;
+  return <NativeButton {...nativeProps} style={[{height: adaptiveHeight(64, 20, fontScale)}, style]} glassTint={tintColor}
+    accessible={false} controlLabel={accessibilityLabel ?? props.title} controlHint={accessibilityHint}
+    controlTestID={testID} onActivate={() => {if (!props.disabled && !props.loading) onPress();}} />;
+}

package/src/GlassButton.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import GlassPressable from './GlassPressable';
+import Fallback from './fallback/NativeGlassButton';
+import type {GlassButtonProps} from './types';
+export default function GlassButton(props: GlassButtonProps) {
+  return props.title === undefined ? <GlassPressable {...props} /> : <Fallback {...props} />;
+}

package/src/GlassContainer.ios.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {View} from 'react-native';
+import NativeSurface from './specs/ALGSurfaceNativeComponent';
+import {isLiquidGlassSupported} from './support';
+import type {GlassContainerProps} from './types';
+export default function GlassContainer({forceFallback, mergingEnabled = false, spacing, ...props}: GlassContainerProps) {
+  return forceFallback || !isLiquidGlassSupported() ? <View {...props} /> :
+    <NativeSurface {...props} container mergingEnabled={mergingEnabled} spacing={spacing} />;
+}

package/src/GlassContainer.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {GlassContainerProps} from './types';
+export default function GlassContainer({spacing: _spacing, mergingEnabled: _merging, forceFallback: _force, ...props}: GlassContainerProps) {
+  return <View {...props} />;
+}

package/src/GlassMenuButton.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {useWindowDimensions} from 'react-native';
+import adaptiveHeight from './adaptiveHeight';
+import NativeMenu from './specs/ALGMenuNativeComponent';
+import type {GlassMenuButtonProps, GlassMenuElement} from './types';
+import {enabledMenuAction, validateMenuItems} from './menuTree';
+
+export function validateMenu(title: string, items: readonly GlassMenuElement[]) {
+  if (!title.trim()) throw new Error('GlassMenuButton title must be nonempty.');
+  validateMenuItems(items);
+}
+
+export default function GlassMenuButton({title, items, onAction, systemImage, disabled = false,
+  tintColor, forceFallback = false, accessibilityLabel, accessibilityHint,
+  accessibilityState: _state, testID, style, ...props}: GlassMenuButtonProps) {
+  const {fontScale} = useWindowDimensions();
+  validateMenu(title, items);
+  return <NativeMenu {...props} accessible={false} style={[{height: adaptiveHeight(64, 20, fontScale), minWidth: 120}, style]}
+    title={title} systemImage={systemImage} itemsJSON={JSON.stringify(items)}
+    disabled={disabled || items.length === 0} glassTint={tintColor} forceFallback={forceFallback}
+    controlLabel={accessibilityLabel ?? title} controlHint={accessibilityHint} controlTestID={testID}
+    onMenuAction={event => {
+      const item = enabledMenuAction(items, event.nativeEvent.id);
+      if (!disabled && item) onAction(item.id);
+    }} />;
+}

package/src/GlassPressable.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {Platform, Pressable} from 'react-native';
+import GlassView from './GlassView';
+import type {GlassPressableProps} from './types';
+export default function GlassPressable({children, style, contentStyle, material, tintColor, cornerRadius = 28,
+  fallbackStyle, forceFallback, disabled, accessibilityState, android_ripple, ...props}: GlassPressableProps) {
+  return <Pressable {...props} disabled={disabled} accessibilityRole="button"
+    accessibilityState={{...accessibilityState, disabled: !!disabled}}
+    android_ripple={android_ripple ?? {color: '#80808030', foreground: true}}
+    style={[{borderRadius: cornerRadius, overflow: Platform.OS === 'android' ? 'hidden' : 'visible'}, style]}>
+    <GlassView material={material} tintColor={tintColor} cornerRadius={cornerRadius}
+      interactive={!disabled} forceFallback={forceFallback} fallbackStyle={fallbackStyle}
+      style={[{minHeight: 52, paddingHorizontal: 22, paddingVertical: 14, justifyContent: 'center', alignItems: 'center'}, contentStyle]}>
+      {children}
+    </GlassView>
+  </Pressable>;
+}

package/src/GlassSegmentedControl.ios.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {useWindowDimensions} from 'react-native';
+import adaptiveHeight from './adaptiveHeight';
+import NativeSegmented from './specs/ALGSegmentedNativeComponent';
+import Fallback from './fallback/GlassSegmentedControl';
+import {isLiquidGlassSupported} from './support';
+import {validateSegments} from './validateSegments';
+import type {GlassSegmentedControlProps} from './types';
+export default function GlassSegmentedControl(props: GlassSegmentedControlProps) {
+  const {fontScale} = useWindowDimensions();
+  validateSegments(props.options, props.value);
+  if (fontScale > 1.3 || props.forceFallback || !isLiquidGlassSupported()) return <Fallback {...props} />;
+  const {options, value, onValueChange, tintColor, forceFallback: _fallback, accessibilityLabel,
+    accessibilityState: _state, testID, style, ...nativeProps} = props;
+  return <NativeSegmented {...nativeProps} style={[{height: adaptiveHeight(52, 18, fontScale)}, style]} accessible={false}
+    optionsJSON={JSON.stringify(options)} selectedValue={value ?? ''} glassTint={tintColor}
+    controlLabel={accessibilityLabel} controlTestID={testID} onSelectionChange={event => {
+      const option = options.find(item => item.value === event.nativeEvent.value);
+      if (!props.disabled && option && !option.disabled && option.value !== value) onValueChange(option.value);
+    }} />;
+}

package/src/GlassSegmentedControl.tsx

@@ -0,0 +1 @@
+export {default} from './fallback/GlassSegmentedControl';

package/src/GlassSlider.tsx

@@ -0,0 +1,24 @@
+import React, {useState} from 'react';
+import NativeSlider from './specs/ALGSliderNativeComponent';
+import {normalizeSliderValue, validateSlider} from './sliderMath';
+import type {GlassSliderProps} from './types';
+export default function GlassSlider({value, minimumValue = 0, maximumValue = 1, step = 0,
+  disabled, tintColor, onValueChange, onSlidingStart, onSlidingComplete, onSlidingCancel,
+  accessibilityLabel, accessibilityHint, accessibilityState: _state, testID, style, ...props}: GlassSliderProps) {
+  validateSlider(value, minimumValue, maximumValue, step);
+  const [revision, setRevision] = useState(0);
+  const normalize = (next: number) => normalizeSliderValue(next, minimumValue, maximumValue, step);
+  const reconcile = () => setRevision(previous => (previous + 1) % 2147483647);
+  return <NativeSlider {...props} style={[{height: 52}, style]} accessible={false}
+    value={normalize(value)} minimumValue={minimumValue} maximumValue={maximumValue} step={step}
+    disabled={disabled} glassTint={tintColor} revision={revision} controlLabel={accessibilityLabel}
+    controlHint={accessibilityHint} controlTestID={testID}
+    onSliderChange={event => {if (!disabled) onValueChange(normalize(event.nativeEvent.value));}}
+    onSliderStart={event => {if (!disabled) onSlidingStart?.(normalize(event.nativeEvent.value));}}
+    onSliderComplete={event => {
+      // Also force native reconciliation if the parent deliberately keeps the same value.
+      reconcile();
+      if (!disabled) onSlidingComplete?.(normalize(event.nativeEvent.value));
+    }}
+    onSliderCancel={event => {reconcile(); onSlidingCancel?.(normalize(event.nativeEvent.value));}} />;
+}

package/src/GlassTabBar.tsx

@@ -0,0 +1,25 @@
+import React, {useReducer} from 'react';
+import {useWindowDimensions} from 'react-native';
+import adaptiveHeight from './adaptiveHeight';
+import NativeTabs from './specs/ALGTabsNativeComponent';
+import {validateTabs} from './validateTabs';
+import type {GlassTabBarProps} from './types';
+
+export default function GlassTabBar({items, value, onValueChange, onTabReselect, disabled = false,
+  tintColor, testID, style, accessibilityState: _state, ...props}: GlassTabBarProps) {
+  const {fontScale} = useWindowDimensions();
+  validateTabs(items, value);
+  const [selectionRevision, reconcile] = useReducer((revision: number) => (revision + 1) & 0x7fffffff, 0);
+  return <NativeTabs {...props} accessible={false} style={[{height: adaptiveHeight(80, 24, fontScale), minWidth: 180}, style]}
+    itemsJSON={JSON.stringify(items)} selectedValue={value ?? ''} selectionRevision={selectionRevision}
+    disabled={disabled || items.length === 0} glassTint={tintColor} controlTestID={testID}
+    onSelectionChange={event => {
+      // A native tap may select provisionally. Always send a prop transaction,
+      // even if React rejects the request and the controlled value is unchanged.
+      reconcile();
+      const item = items.find(candidate => candidate.id === event.nativeEvent.id);
+      if (disabled || !item || item.disabled) return;
+      if (item.id === value) onTabReselect?.(item.id);
+      else onValueChange(item.id);
+    }} />;
+}

package/src/GlassToolbar.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {useWindowDimensions} from 'react-native';
+import adaptiveHeight from './adaptiveHeight';
+import NativeMenu from './specs/ALGMenuNativeComponent';
+import {enabledMenuAction, validateMenuItems} from './menuTree';
+import type {GlassToolbarProps} from './types';
+
+export default function GlassToolbar({items, onAction, disabled = false, maxVisibleItems = 3,
+  mergingEnabled = false, tintColor, forceFallback = false, accessibilityLabel, accessibilityHint,
+  accessibilityState: _state, testID, style, ...props}: GlassToolbarProps) {
+  const {fontScale} = useWindowDimensions();
+  validateMenuItems(items);
+  if (!Number.isInteger(maxVisibleItems) || maxVisibleItems < 0 || maxVisibleItems > 256) {
+    throw new Error('GlassToolbar maxVisibleItems must be an integer from 0 to 256.');
+  }
+  return <NativeMenu {...props} accessible={false} toolbar title="" itemsJSON={JSON.stringify(items)}
+    style={[{height: adaptiveHeight(64, 20, fontScale), minWidth: 64}, style]} disabled={disabled || items.length === 0}
+    maxVisibleItems={maxVisibleItems} mergingEnabled={mergingEnabled}
+    glassTint={tintColor} forceFallback={forceFallback} controlLabel={accessibilityLabel}
+    controlHint={accessibilityHint} controlTestID={testID}
+    onMenuAction={event => {
+      const item = enabledMenuAction(items, event.nativeEvent.id);
+      if (!disabled && item) onAction(item.id);
+    }} />;
+}

package/src/GlassView.ios.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import NativeSurface from './specs/ALGSurfaceNativeComponent';
+import Fallback from './fallback/GlassView';
+import {isLiquidGlassSupported} from './support';
+import type {GlassViewProps} from './types';
+export default function GlassView({tintColor, cornerRadius = 24, fallbackStyle, forceFallback,
+  style, ...props}: GlassViewProps) {
+  if (forceFallback) {
+    return <Fallback {...props} style={style} tintColor={tintColor} cornerRadius={cornerRadius} fallbackStyle={fallbackStyle} />;
+  }
+  return <NativeSurface {...props} glassTint={tintColor} glassRadius={cornerRadius}
+    style={isLiquidGlassSupported() ? style : [style, fallbackStyle]} />;
+}

package/src/GlassView.tsx

@@ -0,0 +1 @@
+export {default} from './fallback/GlassView';