@momo-kits/glass-view 0.167.1-duo.3

package/GlassView.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "GlassView"
+  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 }
+  s.source       = { :git => "https://www.npmjs.com/.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm}"
+  s.private_header_files = "ios/**/*.h"
+
+  install_modules_dependencies(s)
+end

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 dung.pham2
+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/ios/RNGlassView.h

@@ -0,0 +1,10 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNGlassView : RCTViewComponentView
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/RNGlassView.mm

@@ -0,0 +1,153 @@
+#import "RNGlassView.h"
+
+#import <react/renderer/components/GlassViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/GlassViewSpec/EventEmitters.h>
+#import <react/renderer/components/GlassViewSpec/Props.h>
+#import <react/renderer/components/GlassViewSpec/RCTComponentViewHelpers.h>
+
+#import <React/RCTConversions.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+using namespace facebook::react;
+
+static const NSTimeInterval kEffectAnimationDuration = 0.25;
+static const float kShadowOpacity = 0.16;
+static const CGFloat kShadowRadius = 16;
+static const CGFloat kShadowOffsetY = 6;
+
+@interface RNGlassView () <RCTRNGlassViewViewProtocol>
+@end
+
+@implementation RNGlassView {
+  UIView *_container;
+  // shadow lives on its own layer since the effect view must clip to round its corners
+  UIView *_shadowView;
+  UIVisualEffectView *_effectView;
+  RNGlassViewEffect _effect;
+  UIColor *_tintColor;
+  BOOL _interactive;
+  BOOL _useShadow;
+  CGFloat _cornerRadius;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<RNGlassViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const RNGlassViewProps>();
+    _props = defaultProps;
+    _effect = RNGlassViewEffect::Glass;
+
+    _container = [[UIView alloc] initWithFrame:frame];
+
+    _shadowView = [[UIView alloc] initWithFrame:frame];
+    _shadowView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    _shadowView.layer.shadowColor = UIColor.blackColor.CGColor;
+    _shadowView.layer.shadowRadius = kShadowRadius;
+    _shadowView.layer.shadowOffset = CGSizeMake(0, kShadowOffsetY);
+    _shadowView.layer.shadowOpacity = 0;
+    [_container addSubview:_shadowView];
+
+    _effectView = [[UIVisualEffectView alloc] initWithEffect:nil];
+    _effectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    _effectView.layer.cornerCurve = kCACornerCurveContinuous;
+    [_container addSubview:_effectView];
+
+    self.contentView = _container;
+    [self applyEffectAnimated:NO];
+  }
+  return self;
+}
+
+- (void)layoutSubviews {
+  [super layoutSubviews];
+  _shadowView.layer.shadowPath =
+      [UIBezierPath bezierPathWithRoundedRect:_shadowView.bounds cornerRadius:_cornerRadius].CGPath;
+}
+
+- (UIVisualEffect *)buildEffect {
+  switch (_effect) {
+    case RNGlassViewEffect::None:
+      return nil;
+    case RNGlassViewEffect::Blur:
+      return [UIBlurEffect effectWithStyle:UIBlurEffectStyleSystemChromeMaterial];
+    case RNGlassViewEffect::Glass:
+    case RNGlassViewEffect::ClearGlass:
+      if (@available(iOS 26.0, *)) {
+        UIGlassEffect *glass = [UIGlassEffect
+            effectWithStyle:_effect == RNGlassViewEffect::ClearGlass ? UIGlassEffectStyleClear
+                                                                     : UIGlassEffectStyleRegular];
+        glass.tintColor = _tintColor;
+        glass.interactive = _interactive;
+        return glass;
+      }
+      return [UIBlurEffect effectWithStyle:UIBlurEffectStyleSystemChromeMaterial];
+  }
+  return nil;
+}
+
+// glass materializes when its effect is set inside an animation block, not via alpha
+- (void)applyEffectAnimated:(BOOL)animated {
+  UIVisualEffect *effect = [self buildEffect];
+  float shadowOpacity = _useShadow && effect != nil ? kShadowOpacity : 0;
+
+  if (animated) {
+    CABasicAnimation *fade = [CABasicAnimation animationWithKeyPath:@"shadowOpacity"];
+    fade.fromValue = @(_shadowView.layer.presentationLayer.shadowOpacity);
+    fade.toValue = @(shadowOpacity);
+    fade.duration = kEffectAnimationDuration;
+    [_shadowView.layer addAnimation:fade forKey:@"shadowOpacity"];
+  }
+  _shadowView.layer.shadowOpacity = shadowOpacity;
+
+  if (!animated) {
+    _effectView.effect = effect;
+    return;
+  }
+  [UIView animateWithDuration:kEffectAnimationDuration
+                   animations:^{
+                     self->_effectView.effect = effect;
+                   }];
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps {
+  const auto &newProps = *std::static_pointer_cast<const RNGlassViewProps>(props);
+  const auto &prevProps = *std::static_pointer_cast<const RNGlassViewProps>(_props);
+
+  if (newProps.cornerRadius != prevProps.cornerRadius) {
+    _cornerRadius = newProps.cornerRadius;
+    _effectView.layer.cornerRadius = _cornerRadius;
+    _effectView.clipsToBounds = _cornerRadius > 0;
+    [self setNeedsLayout];
+  }
+
+  if (newProps.effect != prevProps.effect || newProps.glassTintColor != prevProps.glassTintColor ||
+      newProps.interactive != prevProps.interactive || newProps.useShadow != prevProps.useShadow) {
+    _effect = newProps.effect;
+    _tintColor = RCTUIColorFromSharedColor(newProps.glassTintColor);
+    _interactive = newProps.interactive;
+    _useShadow = newProps.useShadow;
+    [self applyEffectAnimated:oldProps != nullptr];
+  }
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView
+                          index:(NSInteger)index {
+  [_effectView.contentView insertSubview:childComponentView atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView
+                            index:(NSInteger)index {
+  [childComponentView removeFromSuperview];
+}
+
+@end
+
+Class<RCTComponentViewProtocol> RNGlassViewCls(void) {
+  return RNGlassView.class;
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+    "name": "@momo-kits/glass-view",
+    "version": "0.167.1-duo.3",
+    "description": "iOS liquid glass (UIGlassEffect) background view with a blur fallback.",
+    "main": "./src/index.tsx",
+    "files": [
+        "src",
+        "ios",
+        "*.podspec",
+        "!ios/build",
+        "!**/.*"
+    ],
+    "keywords": [
+        "react-native",
+        "ios",
+        "liquid-glass",
+        "blur"
+    ],
+    "author": "MoMo Team",
+    "license": "MIT",
+    "homepage": "https://www.npmjs.com/package/@momo-kits/glass-view",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "codegenConfig": {
+        "name": "GlassViewSpec",
+        "type": "components",
+        "jsSrcsDir": "src",
+        "ios": {
+            "componentProvider": {
+                "RNGlassView": "RNGlassView"
+            }
+        }
+    },
+    "dependencies": {}
+}

package/src/RNGlassViewNativeComponent.ts

@@ -0,0 +1,16 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ColorValue, ViewProps } from 'react-native';
+import type {
+  Float,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface NativeProps extends ViewProps {
+  effect?: WithDefault<'glass' | 'clearGlass' | 'blur' | 'none', 'glass'>;
+  glassTintColor?: ColorValue;
+  interactive?: boolean;
+  cornerRadius?: Float;
+  useShadow?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>('RNGlassView');

package/src/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Platform, View, type ColorValue, type ViewProps } from 'react-native';
+import RNGlassViewNativeComponent from './RNGlassViewNativeComponent';
+
+export type GlassEffect = 'glass' | 'clearGlass' | 'blur' | 'none';
+
+export interface GlassViewProps extends ViewProps {
+  /**
+   * glass needs iOS 26+, older iOS falls back to a system blur; 'none' animates the material out
+   */
+  effect?: GlassEffect;
+  glassTintColor?: ColorValue;
+  interactive?: boolean;
+  /**
+   * rounds the material; RN borderRadius can't clip the effect view
+   */
+  cornerRadius?: number;
+  /**
+   * drop shadow while the material is shown
+   */
+  useShadow?: boolean;
+}
+
+const GlassView: React.FC<GlassViewProps> = props => {
+  if (Platform.OS !== 'ios') {
+    return <View {...props} />;
+  }
+  return <RNGlassViewNativeComponent {...props} />;
+};
+
+export { GlassView };
+export default GlassView;