react-native-tinyui 0.3.0 → 0.5.0

package/README.md

@@ -1,6 +1,6 @@
 # react-native-tinyui
 
-Dependency-free, native iOS `Menu` and `Popover` components for React Native's
+Dependency-free, native iOS `Menu`, `Popover` and `LiquidGlassText` components for React Native's
 New Architecture. The public API follows normal React composition patterns;
 the native UI is implemented with SwiftUI behind Fabric components.
 
@@ -44,8 +44,9 @@ Available components:
 
 - `Menu`
 - `Popover`
+- `LiquidGlassText`
 
-Both components are enabled by default. Use an empty `components` array to
+All components are enabled by default. Use an empty `components` array to
 compile only the TurboModule core. Run `pod install` again whenever this list
 changes. Rendering a component whose native part was not selected throws an
 error that names the missing component.
@@ -55,6 +56,7 @@ Component-specific JavaScript entry points are also available:
 ```tsx
 import { Menu } from 'react-native-tinyui/menu';
 import { Popover } from 'react-native-tinyui/popover';
+import { LiquidGlassText } from 'react-native-tinyui/liquid-glass-text';
 ```
 
 The root `react-native-tinyui` imports remain supported for backwards
@@ -162,6 +164,72 @@ Use `open` with `onOpenChange` for a controlled popover, or `defaultOpen` for an
 uncontrolled one. `contentSize` defaults to 320 × 240 points and can be updated
 while the popover is visible.
 
+## LiquidGlassText
+
+`LiquidGlassText` renders native glass inside the glyph outlines, based on
+[GlassText](https://github.com/ailtonvivaz/GlassText). It exposes the effect and
+typography through React props.
+Background image loading is not part of this component.
+
+Building this component requires **Xcode 26+**. Glass is rendered on **iOS 26+**;
+on iOS 17–25 it displays ordinary SwiftUI text using the same font, alignment
+and optional tint. The rest of TinyUI continues to support iOS 17+.
+
+```tsx
+import { LiquidGlassText } from 'react-native-tinyui';
+
+<LiquidGlassText
+  text="Liquid Glass"
+  effect="regular"
+  tint="#00BBDD"
+  interactive
+  fontDesign="rounded"
+  textStyle={{ fontSize: 48, fontWeight: '700' }}
+/>;
+
+<LiquidGlassText
+  text={'Multi-line\nGlass Text\nEffect'}
+  fontDesign="serif"
+  textStyle={{ fontSize: 34, fontWeight: '800' }}
+  multilineTextAlignment="center"
+/>;
+```
+
+| Prop                     | Values                                           | Default   |
+| ------------------------ | ------------------------------------------------ | --------- |
+| `text`                   | String (including text translated in JavaScript) | Required  |
+| `effect`                 | `clear`, `regular`, `identity`                   | `clear`   |
+| `tint`                   | React Native `ColorValue`                        | —         |
+| `interactive`            | Whether the glass responds to interaction        | `false`   |
+| `fontDesign`             | `default`, `serif`, `monospaced`, `rounded`      | `default` |
+| `textStyle`              | Supported React Native text properties           | —         |
+| `multilineTextAlignment` | `leading`, `center`, `trailing`                  | `leading` |
+
+`textStyle` accepts arrays and `StyleSheet.create` references. Explicit
+`multilineTextAlignment` overrides `textStyle.textAlign`. `textStyle.color`
+supplies the glass tint and fallback text color; an explicit `tint` takes
+precedence. `fontFamily` accepts the PostScript name of a font installed in the
+app, and `fontDesign` only applies to system fonts.
+
+`tint` accepts a React Native `ColorValue`, including `PlatformColor` and
+`DynamicColorIOS`. `identity` applies no glass effect.
+The component also accepts standard `ViewProps`, including `style`, `testID`,
+accessibility props and a native view ref. The supplied text is used for
+the default accessibility label; pass `accessibilityLabel` to override it.
+
+Fabric measures the native text during layout and supplies its default width and
+height without a JavaScript measurement pass. Layout styles can override these
+dimensions, but do not resize the font or wrap text. As in GlassText, use
+explicit `\n` characters for multiple lines. Keep padding on a surrounding
+`View`. Color emoji and other glyphs without vector outlines cannot produce a
+glass shape.
+
+`text` accepts a string. Applications using JavaScript localization can pass
+their translated string directly.
+
+The adapted Core Text outline implementation retains the upstream MIT notice in
+[`ios/LiquidGlassText/GlassText-LICENSE`](ios/LiquidGlassText/GlassText-LICENSE).
+
 ## Contributing
 
 - [Development workflow](CONTRIBUTING.md#development-workflow)

package/Tinyui.podspec

@@ -14,6 +14,11 @@ components = {
     :definition => "TINYUI_FEATURE_POPOVER=1",
     :frameworks => ["UIKit"],
   },
+  "LiquidGlassText" => {
+    :source_files => "ios/LiquidGlassText/**/*.{h,m,mm,swift,cpp}",
+    :definition => "TINYUI_FEATURE_LIQUID_GLASS_TEXT=1",
+    :frameworks => ["UIKit", "SwiftUI", "CoreText"],
+  },
 }
 
 configured_components = nil
@@ -74,7 +79,8 @@ Pod::Spec.new do |s|
   s.source       = { :git => "https://github.com/luoxuhai/react-native-tinyui.git", :tag => "#{s.version}" }
 
   s.source_files = source_files
-  s.private_header_files = ["ios/Core/**/*.h", "ios/Menu/**/*.h", "ios/Popover/**/*.h"]
+  s.private_header_files = ["ios/Core/**/*.h", "ios/Menu/**/*.h", "ios/Popover/**/*.h", "ios/LiquidGlassText/**/*.h"]
+  s.preserve_paths = "ios/LiquidGlassText/GlassText-LICENSE"
   s.swift_version = "5.0"
   s.frameworks = frameworks unless frameworks.empty?
   s.pod_target_xcconfig = {

package/ios/Core/Tinyui.mm

@@ -13,6 +13,10 @@
   [components addObject:@"Popover"];
 #endif
 
+#if TINYUI_FEATURE_LIQUID_GLASS_TEXT
+  [components addObject:@"LiquidGlassText"];
+#endif
+
   return components;
 }
 

package/ios/Core/TinyuiComponentClasses.mm

@@ -1,27 +1,53 @@
-#import <React/RCTComponentViewProtocol.h>
+#import <React/RCTViewComponentView.h>
+#import <react/renderer/components/TinyuiSpec/ComponentDescriptors.h>
+
+using namespace facebook::react;
+
+// Newer Codegen providers put every declared component into an NSDictionary
+// using NSClassFromString, which cannot be nil. Keep a lightweight Fabric class
+// for disabled components; the JS availability check prevents rendering them.
+// Their actual UIKit/SwiftUI implementations remain excluded by the podspec.
+#define TINYUI_DISABLED_COMPONENT(ViewClass, DescriptorClass)                 \
+  @interface ViewClass : RCTViewComponentView                                \
+  @end                                                                      \
+  @implementation ViewClass                                                 \
+  + (ComponentDescriptorProvider)componentDescriptorProvider                 \
+  {                                                                         \
+    return concreteComponentDescriptorProvider<DescriptorClass>();          \
+  }                                                                         \
+  @end
 
 #if TINYUI_FEATURE_MENU
 #import "TinyuiMenuView.h"
+#else
+TINYUI_DISABLED_COMPONENT(TinyuiMenuView, TinyuiMenuViewComponentDescriptor)
 #endif
 
 #if TINYUI_FEATURE_POPOVER
 #import "TinyuiPopoverView.h"
+#else
+TINYUI_DISABLED_COMPONENT(TinyuiPopoverView, TinyuiPopoverViewComponentDescriptor)
 #endif
 
+#if TINYUI_FEATURE_LIQUID_GLASS_TEXT
+#import "TinyuiLiquidGlassTextView.h"
+#else
+TINYUI_DISABLED_COMPONENT(TinyuiLiquidGlassTextView, TinyuiLiquidGlassTextViewComponentDescriptor)
+#endif
+
+#undef TINYUI_DISABLED_COMPONENT
+
 Class<RCTComponentViewProtocol> TinyuiMenuViewCls(void)
 {
-#if TINYUI_FEATURE_MENU
   return TinyuiMenuView.class;
-#else
-  return nil;
-#endif
 }
 
 Class<RCTComponentViewProtocol> TinyuiPopoverViewCls(void)
 {
-#if TINYUI_FEATURE_POPOVER
   return TinyuiPopoverView.class;
-#else
-  return nil;
-#endif
+}
+
+Class<RCTComponentViewProtocol> TinyuiLiquidGlassTextViewCls(void)
+{
+  return TinyuiLiquidGlassTextView.class;
 }

package/ios/LiquidGlassText/GlassText-LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ailton Vieira
+
+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/LiquidGlassText/TinyuiLiquidGlassTextProvider.swift

@@ -0,0 +1,250 @@
+import CoreText
+import SwiftUI
+import UIKit
+
+private struct LiquidGlassTextConfiguration {
+  struct TextStyleConfiguration {
+    let fontSize: CGFloat?
+    let fontFamily: String?
+    let fontWeight: String?
+    let fontStyle: String?
+    let letterSpacing: CGFloat?
+
+    init(_ dictionary: [String: Any]) {
+      fontSize = (dictionary["fontSize"] as? NSNumber).map { CGFloat($0.doubleValue) }
+      fontFamily = dictionary["fontFamily"] as? String
+      fontWeight = dictionary["fontWeight"] as? String
+      fontStyle = dictionary["fontStyle"] as? String
+      letterSpacing = (dictionary["letterSpacing"] as? NSNumber).map { CGFloat($0.doubleValue) }
+    }
+  }
+
+  var text: String?
+  var effect: String?
+  var interactive: Bool?
+  var fontDesign: String?
+  var textStyle: TextStyleConfiguration?
+  var multilineTextAlignment: String?
+
+  init(_ dictionary: [String: Any] = [:]) {
+    text = dictionary["text"] as? String
+    effect = dictionary["effect"] as? String
+    interactive = dictionary["interactive"] as? Bool
+    fontDesign = dictionary["fontDesign"] as? String
+    textStyle = (dictionary["textStyle"] as? [String: Any]).map(TextStyleConfiguration.init)
+    multilineTextAlignment = dictionary["multilineTextAlignment"] as? String
+  }
+
+  var resolvedFont: Font {
+    let design: Font.Design
+    switch fontDesign {
+    case "serif": design = .serif
+    case "monospaced": design = .monospaced
+    case "rounded": design = .rounded
+    default: design = .default
+    }
+
+    let size = textStyle?.fontSize
+    let family = textStyle?.fontFamily
+    var result: Font
+    if let family, !family.isEmpty {
+      if let size, size.isFinite, size > 0 {
+        result = .custom(family, fixedSize: size)
+      } else {
+        result = .custom(family, size: 17, relativeTo: .body)
+      }
+    } else if let size, size.isFinite, size > 0 {
+      result = .system(size: size, design: design)
+    } else {
+      result = .system(.body, design: design)
+    }
+
+    if let weight = textStyle?.fontWeight {
+      switch weight {
+      case "ultraLight": result = result.weight(.ultraLight)
+      case "thin": result = result.weight(.thin)
+      case "light": result = result.weight(.light)
+      case "medium": result = result.weight(.medium)
+      case "semibold": result = result.weight(.semibold)
+      case "bold": result = result.weight(.bold)
+      case "heavy": result = result.weight(.heavy)
+      case "black": result = result.weight(.black)
+      default: result = result.weight(.regular)
+      }
+    }
+    if textStyle?.fontStyle == "italic" {
+      result = result.italic()
+    }
+    return result
+  }
+
+  var alignment: TextAlignment {
+    switch multilineTextAlignment {
+    case "center": return .center
+    case "trailing": return .trailing
+    default: return .leading
+    }
+  }
+
+  var resolvedLetterSpacing: CGFloat {
+    guard let letterSpacing = textStyle?.letterSpacing, letterSpacing.isFinite else { return 0 }
+    return letterSpacing
+  }
+}
+
+private struct LiquidGlassTextContent: View {
+  let configuration: LiquidGlassTextConfiguration
+  let text: String
+  let tintColor: UIColor?
+
+  var body: some View {
+    Group {
+      if #available(iOS 26.0, *) {
+        LiquidGlassTextEffect(
+          text: text,
+          effect: configuration.effect ?? "clear",
+          tintColor: tintColor,
+          interactive: configuration.interactive ?? false,
+          letterSpacing: configuration.resolvedLetterSpacing
+        )
+      } else {
+        Text(verbatim: text)
+          .tracking(configuration.resolvedLetterSpacing)
+          .foregroundStyle(tintColor.map { Color(uiColor: $0) } ?? .primary)
+      }
+    }
+    .font(configuration.resolvedFont)
+    .multilineTextAlignment(configuration.alignment)
+    .fixedSize()
+    // React Native exposes one accessible text element with the supplied label.
+    .accessibilityHidden(true)
+  }
+}
+
+// Adapted from ailtonvivaz/GlassText (MIT). See GlassText-LICENSE.
+@available(iOS 26.0, *)
+private struct LiquidGlassTextEffect: View {
+  let text: String
+  let effect: String
+  let tintColor: UIColor?
+  let interactive: Bool
+  let letterSpacing: CGFloat
+
+  @Environment(\.font) private var font
+  @Environment(\.fontResolutionContext) private var fontResolutionContext
+  @Environment(\.multilineTextAlignment) private var alignment
+
+  private var glass: Glass {
+    var result: Glass
+    switch effect {
+    case "regular": result = .regular
+    case "identity": result = .identity
+    default: result = .clear
+    }
+    if let tintColor {
+      result = result.tint(Color(uiColor: tintColor))
+    }
+    return result.interactive(interactive)
+  }
+
+  var body: some View {
+    let resolved = (font ?? .body).resolve(in: fontResolutionContext)
+    let ctFont = resolved.ctFont
+    let lines = text.components(separatedBy: CharacterSet.newlines)
+    let lineHeight = CTFontGetAscent(ctFont) + CTFontGetDescent(ctFont)
+      + max(CTFontGetLeading(ctFont), resolved.pointSize * 0.2)
+    let width = lines.reduce(CGFloat.zero) { width, line in
+      let attributed = NSAttributedString(
+        string: line,
+        attributes: [
+          kCTFontAttributeName as NSAttributedString.Key: ctFont,
+          kCTKernAttributeName as NSAttributedString.Key: letterSpacing,
+        ]
+      )
+      return max(width, CGFloat(CTLineGetTypographicBounds(
+        CTLineCreateWithAttributedString(attributed), nil, nil, nil
+      )))
+    }
+    let shape = TinyuiTextOutlineShape(
+      text: text,
+      ctFont: ctFont,
+      fontSize: resolved.pointSize,
+      alignment: alignment,
+      letterSpacing: letterSpacing
+    )
+    Rectangle()
+      .fill(.clear)
+      .glassEffect(glass, in: shape)
+      .frame(width: width, height: text.isEmpty ? 0 : lineHeight * CGFloat(lines.count))
+  }
+}
+
+@objc public class TinyuiLiquidGlassTextProvider: UIView {
+  private var hostingController: UIHostingController<LiquidGlassTextContent>?
+  private var configuration = LiquidGlassTextConfiguration()
+  private var tintColorValue: UIColor?
+
+  @objc public weak var parentViewController: UIViewController? {
+    didSet { setNeedsLayout() }
+  }
+
+  @objc public func configure(
+    _ dictionary: [String: Any],
+    tintColor: UIColor?
+  ) {
+    configuration = LiquidGlassTextConfiguration(dictionary)
+    tintColorValue = tintColor
+    hostingController?.rootView = content
+    setNeedsLayout()
+  }
+
+  private var content: LiquidGlassTextContent {
+    LiquidGlassTextContent(configuration: configuration, text: configuration.text ?? "", tintColor: tintColorValue)
+  }
+
+  override public func didMoveToWindow() {
+    super.didMoveToWindow()
+    if window == nil {
+      detachController()
+    } else {
+      setNeedsLayout()
+    }
+  }
+
+  private func detachController() {
+    hostingController?.willMove(toParent: nil)
+    hostingController?.view.removeFromSuperview()
+    hostingController?.removeFromParent()
+    hostingController = nil
+  }
+
+  @objc public func reset() {
+    detachController()
+    parentViewController = nil
+    configuration = LiquidGlassTextConfiguration()
+    tintColorValue = nil
+  }
+
+  override public func layoutSubviews() {
+    super.layoutSubviews()
+    guard window != nil, let parentViewController else { return }
+
+    if hostingController == nil {
+      let controller = UIHostingController(rootView: content)
+      controller.safeAreaRegions = []
+      controller.view.backgroundColor = .clear
+      parentViewController.addChild(controller)
+      addSubview(controller.view)
+      controller.didMove(toParent: parentViewController)
+      hostingController = controller
+    }
+    guard let controller = hostingController else { return }
+    if controller.parent !== parentViewController {
+      controller.willMove(toParent: nil)
+      controller.removeFromParent()
+      parentViewController.addChild(controller)
+      controller.didMove(toParent: parentViewController)
+    }
+    controller.view.frame = bounds
+  }
+}

package/ios/LiquidGlassText/TinyuiLiquidGlassTextShadowNode.h

@@ -0,0 +1,46 @@
+#pragma once
+
+#include <react/renderer/components/TinyuiSpec/ShadowNodes.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook::react {
+
+class TinyuiLiquidGlassTextShadowNode final
+    : public ConcreteViewShadowNode<
+          TinyuiLiquidGlassTextViewComponentName,
+          TinyuiLiquidGlassTextViewProps,
+          TinyuiLiquidGlassTextViewEventEmitter,
+          TinyuiLiquidGlassTextViewState> {
+ public:
+  using BaseShadowNode = ConcreteViewShadowNode<
+      TinyuiLiquidGlassTextViewComponentName,
+      TinyuiLiquidGlassTextViewProps,
+      TinyuiLiquidGlassTextViewEventEmitter,
+      TinyuiLiquidGlassTextViewState>;
+  using BaseShadowNode::BaseShadowNode;
+
+  static ShadowNodeTraits BaseTraits()
+  {
+    auto traits = BaseShadowNode::BaseTraits();
+    traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
+    traits.set(ShadowNodeTraits::Trait::MeasurableYogaNode);
+    return traits;
+  }
+
+  Size measureContent(
+      const LayoutContext &layoutContext,
+      const LayoutConstraints &layoutConstraints) const override;
+};
+
+class TinyuiLiquidGlassTextComponentDescriptor final
+    : public ConcreteComponentDescriptor<TinyuiLiquidGlassTextShadowNode> {
+ public:
+  TinyuiLiquidGlassTextComponentDescriptor(
+      const ComponentDescriptorParameters &parameters)
+      : ConcreteComponentDescriptor(parameters)
+  {
+  }
+};
+
+} // namespace facebook::react

package/ios/LiquidGlassText/TinyuiLiquidGlassTextShadowNode.mm

@@ -0,0 +1,159 @@
+#import <CoreText/CoreText.h>
+#import <UIKit/UIKit.h>
+
+#include <algorithm>
+#include <cmath>
+#include <string>
+
+#include <react/renderer/core/LayoutConstraints.h>
+#include <react/renderer/core/LayoutContext.h>
+
+#include "TinyuiLiquidGlassTextShadowNode.h"
+
+namespace facebook::react {
+
+static std::string stringValue(
+    const folly::dynamic &object,
+    folly::StringPiece key,
+    const std::string &fallback = "")
+{
+  if (!object.isObject()) {
+    return fallback;
+  }
+  auto value = object.getDefault(key, fallback);
+  return value.isString() ? value.getString() : fallback;
+}
+
+static CGFloat numberValue(
+    const folly::dynamic &object,
+    folly::StringPiece key,
+    CGFloat fallback)
+{
+  if (!object.isObject()) {
+    return fallback;
+  }
+  auto value = object.getDefault(key, fallback);
+  return value.isNumber() ? static_cast<CGFloat>(value.asDouble()) : fallback;
+}
+
+static UIFontWeight fontWeight(const std::string &value)
+{
+  if (value == "ultraLight") return UIFontWeightUltraLight;
+  if (value == "thin") return UIFontWeightThin;
+  if (value == "light") return UIFontWeightLight;
+  if (value == "medium") return UIFontWeightMedium;
+  if (value == "semibold") return UIFontWeightSemibold;
+  if (value == "bold") return UIFontWeightBold;
+  if (value == "heavy") return UIFontWeightHeavy;
+  if (value == "black") return UIFontWeightBlack;
+  return UIFontWeightRegular;
+}
+
+static UIFontDescriptorSystemDesign fontDesign(const std::string &value)
+{
+  if (value == "serif") return UIFontDescriptorSystemDesignSerif;
+  if (value == "monospaced") return UIFontDescriptorSystemDesignMonospaced;
+  if (value == "rounded") return UIFontDescriptorSystemDesignRounded;
+  return nil;
+}
+
+static UIFont *resolvedFont(
+    const folly::dynamic &configuration,
+    const folly::dynamic &textStyle,
+    Float fontSizeMultiplier)
+{
+  auto configuredSize = numberValue(textStyle, "fontSize", 0);
+  auto multiplier = std::isfinite(fontSizeMultiplier) && fontSizeMultiplier > 0
+      ? fontSizeMultiplier
+      : 1;
+  auto size = std::isfinite(configuredSize) && configuredSize > 0
+      ? configuredSize
+      : 17 * multiplier;
+  auto family = stringValue(textStyle, "fontFamily");
+  auto weight = stringValue(textStyle, "fontWeight");
+
+  UIFont *font = nil;
+  if (!family.empty()) {
+    NSString *familyName = [NSString stringWithUTF8String:family.c_str()];
+    font = familyName == nil ? nil : [UIFont fontWithName:familyName size:size];
+  }
+  if (font == nil) {
+    font = [UIFont systemFontOfSize:size weight:fontWeight(weight)];
+  }
+
+  UIFontDescriptor *descriptor = font.fontDescriptor;
+  if (family.empty()) {
+    auto design = fontDesign(stringValue(configuration, "fontDesign"));
+    if (design != nil) {
+      descriptor = [descriptor fontDescriptorWithDesign:design] ?: descriptor;
+    }
+  }
+
+  if (!weight.empty() && !family.empty()) {
+    descriptor = [descriptor fontDescriptorByAddingAttributes:@{
+      UIFontDescriptorTraitsAttribute: @{UIFontWeightTrait: @(fontWeight(weight))}
+    }];
+  }
+  if (stringValue(textStyle, "fontStyle") == "italic") {
+    descriptor = [descriptor fontDescriptorWithSymbolicTraits:
+        descriptor.symbolicTraits | UIFontDescriptorTraitItalic] ?: descriptor;
+  }
+  return [UIFont fontWithDescriptor:descriptor size:size];
+}
+
+Size TinyuiLiquidGlassTextShadowNode::measureContent(
+    const LayoutContext &layoutContext,
+    const LayoutConstraints &layoutConstraints) const
+{
+  @autoreleasepool {
+    const auto &configuration = getConcreteProps().configuration;
+    if (!configuration.isObject()) {
+      return layoutConstraints.clamp({});
+    }
+
+    auto textValue = stringValue(configuration, "text");
+    if (textValue.empty()) {
+      return layoutConstraints.clamp({});
+    }
+    NSString *text = [NSString stringWithUTF8String:textValue.c_str()] ?: @"";
+    auto textStyle = configuration.getDefault("textStyle", folly::dynamic::object);
+    UIFont *font = resolvedFont(configuration, textStyle, layoutContext.fontSizeMultiplier);
+    auto letterSpacing = numberValue(textStyle, "letterSpacing", 0);
+    if (!std::isfinite(letterSpacing)) {
+      letterSpacing = 0;
+    }
+
+    CTFontRef ctFont = CTFontCreateWithName(
+        (__bridge CFStringRef)font.fontName,
+        font.pointSize,
+        nullptr);
+    auto lineHeight = CTFontGetAscent(ctFont) + CTFontGetDescent(ctFont) +
+        std::max(CTFontGetLeading(ctFont), CTFontGetSize(ctFont) * 0.2);
+    CGFloat width = 0;
+    auto lines = [text componentsSeparatedByCharactersInSet:NSCharacterSet.newlineCharacterSet];
+    NSDictionary<NSAttributedStringKey, id> *attributes = @{
+      (__bridge NSAttributedStringKey)kCTFontAttributeName: (__bridge id)ctFont,
+      (__bridge NSAttributedStringKey)kCTKernAttributeName: @(letterSpacing),
+    };
+    for (NSString *line in lines) {
+      auto attributed = [[NSAttributedString alloc] initWithString:line attributes:attributes];
+      CTLineRef ctLine = CTLineCreateWithAttributedString(
+          (__bridge CFAttributedStringRef)attributed);
+      width = std::max(
+          width,
+          static_cast<CGFloat>(CTLineGetTypographicBounds(ctLine, nullptr, nullptr, nullptr)));
+      CFRelease(ctLine);
+    }
+    CFRelease(ctFont);
+
+    auto height = lineHeight * lines.count;
+    auto scale = layoutContext.pointScaleFactor > 0 ? layoutContext.pointScaleFactor : 1;
+    Size measured{
+        .width = static_cast<Float>(std::ceil(width * scale) / scale),
+        .height = static_cast<Float>(std::ceil(height * scale) / scale),
+    };
+    return layoutConstraints.clamp(measured);
+  }
+}
+
+} // namespace facebook::react

package/ios/LiquidGlassText/TinyuiLiquidGlassTextView.h

@@ -0,0 +1,12 @@
+#if TINYUI_FEATURE_LIQUID_GLASS_TEXT
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface TinyuiLiquidGlassTextView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif