rn-liquid-glass-bottom-tabs 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Oskar Kwaśniewski
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/LiquidGlass.podspec

@@ -0,0 +1,21 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "LiquidGlass"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported, :tvos => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/callstack/liquid-glass.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,cpp,swift}"
+  s.private_header_files = "ios/**/*.h"
+
+
+  install_modules_dependencies(s)
+end

package/README.md

@@ -0,0 +1,144 @@
+<div align="center">
+  <h1>React Native Liquid Glass 🔍</h1>
+
+[![mit licence](https://img.shields.io/dub/l/vibe-d.svg?style=for-the-badge)](https://github.com/kashif8299/rn-liquid-glass-bottom-tabs/blob/main/LICENSE)
+[![npm version](https://img.shields.io/npm/v/rn-liquid-glass-bottom-tabs?style=for-the-badge)](https://www.npmjs.org/package/rn-liquid-glass-bottom-tabs)
+[![npm downloads](https://img.shields.io/npm/dt/rn-liquid-glass-bottom-tabs.svg?style=for-the-badge)](https://www.npmjs.org/package/rn-liquid-glass-bottom-tabs)
+[![npm downloads](https://img.shields.io/npm/dm/rn-liquid-glass-bottom-tabs.svg?style=for-the-badge)](https://www.npmjs.org/package/rn-liquid-glass-bottom-tabs)
+
+`rn-liquid-glass-bottom-tabs` brings iOS 26 liquid glass effect to React Native apps on iOS.
+
+https://github.com/user-attachments/assets/44c18136-8760-49f2-ae16-62557c3ae2e1
+
+</div>
+
+## Features
+
+- ✨ iOS 26 liquid glass visual effect
+- 🎨 Customizable tint colors
+- 🔧 Two effect modes: `clear` and `regular`
+
+## Documentation
+
+### Installation
+
+```bash
+npm install rn-liquid-glass-bottom-tabs
+# or
+yarn add rn-liquid-glass-bottom-tabs
+```
+
+> [!WARNING]
+> Make sure to compile your app with Xcode >= 26. React Native 0.80+ is required.
+
+> [!WARNING]
+> This library is not supported in [Expo Go](https://expo.dev/go).
+
+
+
+### Usage
+
+```tsx
+import {
+  LiquidGlassView,
+  LiquidGlassContainerView,
+  isLiquidGlassSupported,
+} from 'rn-liquid-glass-bottom-tabs';
+
+function MyComponent() {
+  return (
+    <LiquidGlassView
+      style={[
+        { width: 200, height: 100, borderRadius: 20 },
+        !isLiquidGlassSupported && { backgroundColor: 'rgba(255,255,255,0.5)' },
+      ]}
+      interactive
+      effect="clear"
+    >
+      <Text>Hello World</Text>
+    </LiquidGlassView>
+  );
+}
+
+// For combining multiple glass elements
+function MergingGlassElements() {
+  return (
+    <LiquidGlassContainerView spacing={20}>
+      <LiquidGlassView style={{ width: 100, height: 100, borderRadius: 50 }} />
+      <LiquidGlassView style={{ width: 100, height: 100, borderRadius: 50 }} />
+    </LiquidGlassContainerView>
+  );
+}
+```
+
+To achieve automatic text color adaptation based on the background behind the glass view, use `PlatformColor` from `react-native`:
+
+> [!NOTE]
+> There appears to be a size limit for the glass to automatically adapt the text color. If the glass view height is >= 65 it won't automatically adapt to the material behind it.
+
+https://github.com/user-attachments/assets/199bce70-dab4-43bc-9de1-605f561760e5
+
+```tsx
+import { PlatformColor } from 'react-native';
+import { LiquidGlassView } from 'rn-liquid-glass-bottom-tabs';
+
+function MyComponent() {
+  return (
+    <LiquidGlassView style={{ padding: 20, borderRadius: 20 }}>
+      <Text style={{ color: PlatformColor('labelColor') }}>Hello World</Text>
+    </LiquidGlassView>
+  );
+}
+```
+
+> [!NOTE]
+> On unsupported iOS version (below iOS 26), it will render a normal `View` without any effects.
+
+### API
+
+#### `isLiquidGlassSupported`
+
+A boolean constant that indicates whether the current device supports the liquid glass effect.
+
+```tsx
+import { isLiquidGlassSupported } from 'rn-liquid-glass-bottom-tabs';
+
+if (isLiquidGlassSupported) {
+  // Device supports liquid glass effect
+} else {
+  // Provide fallback UI
+}
+```
+
+### LiquidGlassView - Props
+
+| Prop          | Type                            | Default     | Description                                                                                                                         |
+| ------------- | ------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `interactive` | `boolean`                       | `false`     | Enables touch interaction effects when pressing the view                                                                            |
+| `effect`      | `'clear' \| 'regular' \| 'none'` | `'regular'` | Visual effect mode:<br/>• `clear` - More transparent glass effect<br/>• `regular` - Standard glass blur effect<br/>• `none` - No glass effect (transparent view)<br/>**Note:** Changing this property animates the materialization/dematerialization of the glass effect |
+| `tintColor`   | `ColorValue`                    | `undefined` | Overlay color tint applied to the glass effect. Accepts any React Native color format (hex, rgba, named colors)                     |
+| `colorScheme` | `'light' \| 'dark' \| 'system'` | `'system'`  | Color scheme adaptation:<br/>• `light` - Light appearance<br/>• `dark` - Dark appearance<br/>• `system` - Follows system appearance |
+
+### LiquidGlassContainerView - Props
+
+| Prop      | Type     | Default | Description                                                                                                 |
+| --------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------- |
+| `spacing` | `number` | `0`     | The distance between child elements at which they begin to merge their glass effects into a combined effect |
+
+## Known issues
+
+- `interactive` prop is not changed dynamically, it is only set on mount.
+
+## Made with ❤️ at Callstack
+
+`liquid-glass` is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.
+
+[Callstack][callstack-readme-with-love] is a group of React and React Native geeks, contact us at [hello@callstack.com](mailto:hello@callstack.com) if you need any help with these or just want to say hi!
+
+Like the project? ⚛️ [Join the team](https://callstack.com/careers/?utm_campaign=Senior_RN&utm_source=github&utm_medium=readme) who does amazing stuff for clients and drives React Native Open Source! 🔥
+
+[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=liquid-glass&utm_term=readme-with-love
+[version-badge]: https://img.shields.io/npm/v/rn-liquid-glass-bottom-tabs?style=for-the-badge
+[version]: https://github.com/kashif8299/rn-liquid-glass-bottom-tabs/blob/main/LICENSE
+[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge
+[prs-welcome]: ./CONTRIBUTING.md

package/ios/LiquidGlassContainerView.h

@@ -0,0 +1,15 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+#ifndef LiquidGlassContainerViewNativeComponent_h
+#define LiquidGlassContainerViewNativeComponent_h
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface LiquidGlassContainerView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* LiquidGlassContainerViewNativeComponent_h */
+

package/ios/LiquidGlassContainerView.mm

@@ -0,0 +1,70 @@
+#import "LiquidGlassContainerView.h"
+
+#import <react/renderer/components/LiquidGlassViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/LiquidGlassViewSpec/EventEmitters.h>
+#import <react/renderer/components/LiquidGlassViewSpec/Props.h>
+#import <react/renderer/components/LiquidGlassViewSpec/RCTComponentViewHelpers.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+#if __has_include("LiquidGlass/LiquidGlass-Swift.h")
+#import "LiquidGlass/LiquidGlass-Swift.h"
+#else
+#import "LiquidGlass-Swift.h"
+#endif
+
+using namespace facebook::react;
+
+@interface LiquidGlassContainerView () <RCTLiquidGlassContainerViewViewProtocol>
+
+@end
+
+@implementation LiquidGlassContainerView {
+  LiquidGlassConatinerViewImpl * _view;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<LiquidGlassContainerViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const LiquidGlassContainerViewProps>();
+    _props = defaultProps;
+    
+    _view = [[LiquidGlassConatinerViewImpl alloc] init];
+    
+    self.contentView = _view;
+  }
+  
+  return self;
+}
+
+#if (defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 260000) || \
+    (defined(__TV_OS_VERSION_MAX_ALLOWED) && __TV_OS_VERSION_MAX_ALLOWED >= 260000)
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  const auto &oldViewProps = *std::static_pointer_cast<LiquidGlassContainerViewProps const>(_props);
+  const auto &newViewProps = *std::static_pointer_cast<LiquidGlassContainerViewProps const>(props);
+  
+  if (oldViewProps.spacing != newViewProps.spacing) {
+    [_view setSpacing:newViewProps.spacing];
+  }
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+  [_view.contentView insertSubview:childComponentView atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+  [childComponentView removeFromSuperview];
+}
+#endif
+
+@end
+

package/ios/LiquidGlassContainerView.swift

@@ -0,0 +1,28 @@
+import UIKit
+
+#if compiler(>=6.2)
+
+@available(iOS 26.0, tvOS 26.0, *)
+@objc public class LiquidGlassConatinerViewImpl: UIVisualEffectView {
+  @objc public var spacing: CGFloat = 0 {
+    didSet {
+      setupView()
+    }
+  }
+  
+  public override func layoutSubviews() {
+    setupView()
+  }
+  
+  private func setupView() {
+    let effect = UIGlassContainerEffect()
+    effect.spacing = spacing
+    self.effect = effect
+  }
+}
+
+#else
+
+@objc public class LiquidGlassConatinerViewImpl: UIView {}
+
+#endif

package/ios/LiquidGlassModule.h

@@ -0,0 +1,9 @@
+#import <UIKit/UIKit.h>
+
+#import <React/RCTBridge.h>
+#import <LiquidGlassViewSpec/LiquidGlassViewSpec.h>
+
+@interface LiquidGlassModule : NSObject <NativeLiquidGlassModuleSpec>
+
+@end
+

package/ios/LiquidGlassModule.mm

@@ -0,0 +1,47 @@
+#import "LiquidGlassModule.h"
+
+@implementation LiquidGlassModule {
+  facebook::react::ModuleConstants<JS::NativeLiquidGlassModule::Constants> _constants;
+}
+
+- (void)initialize
+{
+#if (defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 260000) || \
+    (defined(__TV_OS_VERSION_MAX_ALLOWED) && __TV_OS_VERSION_MAX_ALLOWED >= 260000)
+  if (@available(iOS 26.0, tvOS 26.0, *)) {
+    NSDictionary *infoPlist = [[NSBundle mainBundle] infoDictionary];
+    BOOL requiresDesignCompatibility = [infoPlist[@"UIDesignRequiresCompatibility"] boolValue];
+    
+    _constants = facebook::react::typedConstants<JS::NativeLiquidGlassModule::Constants>({
+      .isLiquidGlassSupported = !requiresDesignCompatibility
+    });
+    
+    return;
+  }
+#endif
+  
+  _constants = facebook::react::typedConstants<JS::NativeLiquidGlassModule::Constants>({
+    .isLiquidGlassSupported = NO
+  });
+}
+
+- (facebook::react::ModuleConstants<JS::NativeLiquidGlassModule::Constants>)constantsToExport
+{
+  return (facebook::react::ModuleConstants<JS::NativeLiquidGlassModule::Constants>)[self getConstants];
+}
+
++ (NSString *)moduleName {
+  return @"NativeLiquidGlassModule";
+}
+
+
+- (facebook::react::ModuleConstants<JS::NativeLiquidGlassModule::Constants>)getConstants
+{
+  return _constants;
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params {
+  return std::make_shared<facebook::react::NativeLiquidGlassModuleSpecJSI>(params);
+}
+
+@end

package/ios/LiquidGlassView.h

@@ -0,0 +1,14 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+#ifndef LiquidGlassViewNativeComponent_h
+#define LiquidGlassViewNativeComponent_h
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface LiquidGlassView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* LiquidGlassViewNativeComponent_h */

package/ios/LiquidGlassView.mm

@@ -0,0 +1,170 @@
+#import "LiquidGlassView.h"
+
+#import <react/renderer/components/LiquidGlassViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/LiquidGlassViewSpec/EventEmitters.h>
+#import <react/renderer/components/LiquidGlassViewSpec/Props.h>
+#import <react/renderer/components/LiquidGlassViewSpec/RCTComponentViewHelpers.h>
+#import "RCTImagePrimitivesConversions.h"
+
+#import "RCTFabricComponentsPlugins.h"
+#import "RCTConversions.h"
+
+#if __has_include("LiquidGlass/LiquidGlass-Swift.h")
+#import "LiquidGlass/LiquidGlass-Swift.h"
+#else
+#import "LiquidGlass-Swift.h"
+#endif
+
+using namespace facebook::react;
+
+@interface LiquidGlassView () <RCTLiquidGlassViewViewProtocol>
+
+@end
+
+@implementation LiquidGlassView {
+  LiquidGlassViewImpl * _view;
+  BOOL _needsInvalidateLayer;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<LiquidGlassViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const LiquidGlassViewProps>();
+    _props = defaultProps;
+    
+    _view = [[LiquidGlassViewImpl alloc] init];
+    
+    self.contentView = _view;
+  }
+  
+  return self;
+}
+
+#if (defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 260000) || \
+    (defined(__TV_OS_VERSION_MAX_ALLOWED) && __TV_OS_VERSION_MAX_ALLOWED >= 260000)
+- (void)layoutSubviews {
+  [super layoutSubviews];
+  _view.layer.cornerRadius = self.layer.cornerRadius;
+  _view.layer.cornerCurve = self.layer.cornerCurve;
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  const auto &oldViewProps = *std::static_pointer_cast<LiquidGlassViewProps const>(_props);
+  const auto &newViewProps = *std::static_pointer_cast<LiquidGlassViewProps const>(props);
+  BOOL needsSetup = NO;
+  
+  if (oldViewProps.tintColor != newViewProps.tintColor) {
+    _view.effectTintColor = RCTUIColorFromSharedColor(newViewProps.tintColor);
+    needsSetup = YES;
+  }
+  
+  if (oldViewProps.effect != newViewProps.effect) {
+    switch (newViewProps.effect) {
+      case LiquidGlassViewEffect::Regular:
+        [_view setStyle:LiquidGlassEffectRegular];
+        break;
+        
+      case LiquidGlassViewEffect::Clear:
+        [_view setStyle:LiquidGlassEffectClear];
+        break;
+        
+      case LiquidGlassViewEffect::None:
+        [_view setStyle:LiquidGlassEffectNone];
+        break;
+    }
+    
+    needsSetup = YES;
+  }
+  
+  if (oldViewProps.interactive != newViewProps.interactive) {
+    _view.interactive = newViewProps.interactive;
+    needsSetup = YES;
+  }
+  
+  if (oldViewProps.colorScheme != newViewProps.colorScheme) {
+    switch (newViewProps.colorScheme) {
+      case LiquidGlassViewColorScheme::System:
+        _view.overrideUserInterfaceStyle = UIUserInterfaceStyleUnspecified;
+        break;
+        
+      case LiquidGlassViewColorScheme::Dark:
+        _view.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;
+        break;
+        
+      case LiquidGlassViewColorScheme::Light:
+        _view.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
+        break;
+    }
+    needsSetup = YES;
+  }
+  
+  // `border`
+  if (oldViewProps.borderStyles != newViewProps.borderStyles || oldViewProps.borderRadii != newViewProps.borderRadii ||
+      oldViewProps.borderColors != newViewProps.borderColors) {
+    _needsInvalidateLayer = YES;
+  }
+  
+  if (needsSetup) {
+    [_view setupView];
+  }
+  
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask {
+  [super finalizeUpdates:updateMask];
+  
+  if (!_needsInvalidateLayer) {
+    return;
+  }
+  
+  _needsInvalidateLayer = NO;
+  
+  if (@available(iOS 26.0, tvOS 26.0, *)) {
+    const auto borderMetrics = _props->resolveBorderMetrics(_layoutMetrics);
+
+
+    auto borderRadii = borderMetrics.borderRadii;
+    
+    CGFloat topLeftRadius = MAX(borderRadii.topLeft.horizontal, borderRadii.topLeft.vertical);
+    CGFloat topRightRadius = MAX(borderRadii.topRight.horizontal, borderRadii.topRight.vertical);
+    CGFloat bottomLeftRadius = MAX(borderRadii.bottomLeft.horizontal, borderRadii.bottomLeft.vertical);
+    CGFloat bottomRightRadius = MAX(borderRadii.bottomRight.horizontal, borderRadii.bottomRight.vertical);
+
+    UICornerRadius *topLeft = [UICornerRadius fixedRadius:topLeftRadius];
+    UICornerRadius *topRight = [UICornerRadius fixedRadius:topRightRadius];
+    UICornerRadius *bottomLeft = [UICornerRadius fixedRadius:bottomLeftRadius];
+    UICornerRadius *bottomRight = [UICornerRadius fixedRadius:bottomRightRadius];
+
+    _view.cornerConfiguration = [UICornerConfiguration configurationWithTopLeftRadius:topLeft topRightRadius:topRight bottomLeftRadius:bottomLeft bottomRightRadius:bottomRight];
+  }
+}
+
+- (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
+           oldLayoutMetrics:(const LayoutMetrics &)oldLayoutMetrics
+{
+  [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
+
+  _needsInvalidateLayer = YES;
+
+  // Fixes an issue with padding set only on the external view (the container holding content view).
+  [_view setFrame:RCTCGRectFromRect(layoutMetrics.getPaddingFrame())];
+}
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+  [_view.contentView insertSubview:childComponentView atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+  [childComponentView removeFromSuperview];
+}
+
+#endif
+
+@end

package/ios/LiquidGlassView.swift

@@ -0,0 +1,93 @@
+import UIKit
+
+@objc public enum LiquidGlassEffect: Int {
+  case regular
+  case clear
+  case none
+
+#if compiler(>=6.2)
+  @available(iOS 26.0, tvOS 26.0, *)
+  var converted: UIGlassEffect.Style? {
+    switch self {
+    case .regular:
+      return .regular
+    case .clear:
+      return .clear
+    case .none:
+      return nil
+    }
+  }
+#endif
+
+}
+
+#if compiler(>=6.2)
+
+@available(iOS 26.0, tvOS 26.0, *)
+@objc public class LiquidGlassViewImpl: UIVisualEffectView {
+  private var isFirstMount: Bool = true
+  @objc public var effectTintColor: UIColor?
+  @objc public var interactive: Bool = false
+  @objc public var style: LiquidGlassEffect = .regular
+
+  public override func layoutSubviews() {
+    if (self.effect != nil) { return }
+    setupView()
+
+    if isFirstMount {
+      isFirstMount = false
+    }
+  }
+
+
+  @objc public func setupView() {
+    guard #available(iOS 26.0, tvOS 26.0, *) else {
+      return
+    }
+
+    // Runtime check to ensure UIGlassEffect is available
+    // This handles cases where early iOS 26 beta releases may not have this API
+    guard let glassEffectClass = NSClassFromString("UIGlassEffect") as? NSObject.Type else {
+      return
+    }
+    
+    // Verify that the effectWithStyle: selector is available
+    // This provides an additional safety check for early beta versions
+    guard glassEffectClass.responds(to: Selector(("effectWithStyle:"))) else {
+      return
+    }
+
+    guard let preferredStyle = style.converted else {
+      UIView.animate {
+        // TODO: Looks like only assigning nil is not working, check this after stable iOS 26 is rolled out.
+        self.effect = UIVisualEffect()
+      }
+      return
+    }
+
+    let glassEffect = UIGlassEffect(style: preferredStyle)
+    glassEffect.isInteractive = interactive
+    glassEffect.tintColor = effectTintColor
+
+    if isFirstMount {
+      self.effect = glassEffect
+    } else {
+      // Animate only the effect is changed after first mount.
+      UIView.animate { self.effect = glassEffect }
+    }
+
+    // UIGlassEffect can reconfigure the internal contentView in a way that
+    // disables user interaction when no subviews are present at the time the
+    // effect is applied. In React Native (Fabric), child component views may
+    // be mounted into contentView *after* layoutSubviews triggers setupView(),
+    // leaving contentView with userInteractionEnabled == false for the
+    // lifetime of this view. Force it back on so touches always reach children.
+    self.contentView.isUserInteractionEnabled = true
+  }
+}
+
+#else
+
+@objc public class LiquidGlassViewImpl: UIView {}
+
+#endif

package/lib/module/LiquidGlassContainerView.ios.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default as LiquidGlassContainerView } from './LiquidGlassViewContainerNativeComponent';
+//# sourceMappingURL=LiquidGlassContainerView.ios.js.map

package/lib/module/LiquidGlassContainerView.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","LiquidGlassContainerView"],"sourceRoot":"../../src","sources":["LiquidGlassContainerView.ios.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,wBAAwB,QAAQ,2CAA2C","ignoreList":[]}

package/lib/module/LiquidGlassContainerView.js

@@ -0,0 +1,9 @@
+"use strict";
+
+import { View } from 'react-native';
+
+/**
+ * A view that renders multiple glass elements into a combined effect.
+ */
+export const LiquidGlassContainerView = View;
+//# sourceMappingURL=LiquidGlassContainerView.js.map

package/lib/module/LiquidGlassContainerView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","LiquidGlassContainerView"],"sourceRoot":"../../src","sources":["LiquidGlassContainerView.tsx"],"mappings":";;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA;AACA;AACA,OAAO,MAAMC,wBAA0D,GAAGD,IAAI","ignoreList":[]}