react-native-tinyui 0.4.0 → 0.5.0

package/README.md

@@ -167,8 +167,8 @@ while the popover is visible.
 ## LiquidGlassText
 
 `LiquidGlassText` renders native glass inside the glyph outlines, based on
-[GlassText](https://github.com/ailtonvivaz/GlassText). It supports the reference
-library's text, glass, font and alignment APIs through React props.
+[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+**;
@@ -180,48 +180,49 @@ import { LiquidGlassText } from 'react-native-tinyui';
 
 <LiquidGlassText
   text="Liquid Glass"
-  glass={{ effect: 'regular', tint: '#00BBDD' }}
-  font={{ size: 48, weight: 'bold', design: 'rounded' }}
+  effect="regular"
+  tint="#00BBDD"
+  interactive
+  fontDesign="rounded"
+  textStyle={{ fontSize: 48, fontWeight: '700' }}
 />;
 
 <LiquidGlassText
   text={'Multi-line\nGlass Text\nEffect'}
-  glass="clear"
-  font="largeTitle"
-  fontWeight="heavy"
   fontDesign="serif"
+  textStyle={{ fontSize: 34, fontWeight: '800' }}
   multilineTextAlignment="center"
 />;
 ```
 
-| Prop                     | Values                                                                                   | Default       |
-| ------------------------ | ---------------------------------------------------------------------------------------- | ------------- |
-| `text`                   | String (including text translated in JavaScript)                                         | Required      |
-| `glass`                  | `'clear'`, `'regular'`, `'identity'`, or `{ effect?, tint?, interactive? }`              | `'clear'`     |
-| `font`                   | A semantic text style, or `{ size, weight?, design?, family? }`                          | `'body'`      |
-| `fontWeight`             | `ultraLight`, `thin`, `light`, `regular`, `medium`, `semibold`, `bold`, `heavy`, `black` | Font's weight |
-| `fontDesign`             | `default`, `serif`, `monospaced`, `rounded`                                              | Font's design |
-| `multilineTextAlignment` | `leading`, `center`, `trailing`                                                          | `leading`     |
-
-Semantic font styles are `largeTitle`, `title`, `title2`, `title3`, `headline`,
-`subheadline`, `body`, `callout`, `footnote`, `caption`, and `caption2`. They
-follow SwiftUI Dynamic Type. Explicit `size` values use fixed point sizes;
-`family` accepts the PostScript name of a font installed in the app.
-`fontWeight` and `fontDesign` override the corresponding system font options.
-A custom font family determines its own design.
-
-Glass options accept `tint` as a React Native `ColorValue`, including
-`PlatformColor` and `DynamicColorIOS`. The object form defaults to the clear
-effect, with no tint or interactivity. `identity` applies no glass effect.
+| 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.
 
-Native content measurements supply the default width and height. 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.
+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.

package/ios/LiquidGlassText/TinyuiLiquidGlassTextProvider.swift

@@ -2,60 +2,64 @@ import CoreText
 import SwiftUI
 import UIKit
 
-private struct LiquidGlassTextConfiguration: Decodable {
-  struct FontConfiguration: Decodable {
-    let style: String?
-    let size: CGFloat?
-    let weight: String?
-    let design: String?
-    let family: String?
+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 glass: String?
+  var effect: String?
   var interactive: Bool?
-  var font: FontConfiguration?
-  var fontWeight: String?
   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 ?? font?.design {
+    switch fontDesign {
     case "serif": design = .serif
     case "monospaced": design = .monospaced
     case "rounded": design = .rounded
     default: design = .default
     }
 
-    let style: Font.TextStyle
-    switch font?.style {
-    case "largeTitle": style = .largeTitle
-    case "title": style = .title
-    case "title2": style = .title2
-    case "title3": style = .title3
-    case "headline": style = .headline
-    case "subheadline": style = .subheadline
-    case "callout": style = .callout
-    case "footnote": style = .footnote
-    case "caption": style = .caption
-    case "caption2": style = .caption2
-    default: style = .body
-    }
-
+    let size = textStyle?.fontSize
+    let family = textStyle?.fontFamily
     var result: Font
-    if let size = font?.size, size.isFinite, size > 0 {
-      if let family = font?.family, !family.isEmpty {
+    if let family, !family.isEmpty {
+      if let size, size.isFinite, size > 0 {
         result = .custom(family, fixedSize: size)
       } else {
-        result = .system(size: size, design: design)
+        result = .custom(family, size: 17, relativeTo: .body)
       }
+    } else if let size, size.isFinite, size > 0 {
+      result = .system(size: size, design: design)
     } else {
-      result = .system(style, design: design)
+      result = .system(.body, design: design)
     }
 
-    // Preserve a semantic style's default weight (e.g. headline) unless overridden.
-    if let weight = fontWeight ?? font?.weight {
+    if let weight = textStyle?.fontWeight {
       switch weight {
       case "ultraLight": result = result.weight(.ultraLight)
       case "thin": result = result.weight(.thin)
@@ -68,6 +72,9 @@ private struct LiquidGlassTextConfiguration: Decodable {
       default: result = result.weight(.regular)
       }
     }
+    if textStyle?.fontStyle == "italic" {
+      result = result.italic()
+    }
     return result
   }
 
@@ -78,6 +85,11 @@ private struct LiquidGlassTextConfiguration: Decodable {
     default: return .leading
     }
   }
+
+  var resolvedLetterSpacing: CGFloat {
+    guard let letterSpacing = textStyle?.letterSpacing, letterSpacing.isFinite else { return 0 }
+    return letterSpacing
+  }
 }
 
 private struct LiquidGlassTextContent: View {
@@ -90,12 +102,14 @@ private struct LiquidGlassTextContent: View {
       if #available(iOS 26.0, *) {
         LiquidGlassTextEffect(
           text: text,
-          effect: configuration.glass ?? "clear",
+          effect: configuration.effect ?? "clear",
           tintColor: tintColor,
-          interactive: configuration.interactive ?? false
+          interactive: configuration.interactive ?? false,
+          letterSpacing: configuration.resolvedLetterSpacing
         )
       } else {
         Text(verbatim: text)
+          .tracking(configuration.resolvedLetterSpacing)
           .foregroundStyle(tintColor.map { Color(uiColor: $0) } ?? .primary)
       }
     }
@@ -114,6 +128,7 @@ private struct LiquidGlassTextEffect: View {
   let effect: String
   let tintColor: UIColor?
   let interactive: Bool
+  let letterSpacing: CGFloat
 
   @Environment(\.font) private var font
   @Environment(\.fontResolutionContext) private var fontResolutionContext
@@ -141,14 +156,21 @@ private struct LiquidGlassTextEffect: View {
     let width = lines.reduce(CGFloat.zero) { width, line in
       let attributed = NSAttributedString(
         string: line,
-        attributes: [kCTFontAttributeName as NSAttributedString.Key: ctFont]
+        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
+      text: text,
+      ctFont: ctFont,
+      fontSize: resolved.pointSize,
+      alignment: alignment,
+      letterSpacing: letterSpacing
     )
     Rectangle()
       .fill(.clear)
@@ -157,44 +179,22 @@ private struct LiquidGlassTextEffect: View {
   }
 }
 
-@objc public protocol TinyuiLiquidGlassTextViewDelegate: AnyObject {
-  func onContentSizeChange(width: Double, height: Double, configuration: String)
-}
-
 @objc public class TinyuiLiquidGlassTextProvider: UIView {
-  private weak var delegate: TinyuiLiquidGlassTextViewDelegate?
   private var hostingController: UIHostingController<LiquidGlassTextContent>?
   private var configuration = LiquidGlassTextConfiguration()
-  private var configurationJSON = "{}"
   private var tintColorValue: UIColor?
-  private var lastSize: CGSize?
 
   @objc public weak var parentViewController: UIViewController? {
     didSet { setNeedsLayout() }
   }
 
-  @objc public convenience init(delegate: TinyuiLiquidGlassTextViewDelegate) {
-    self.init(frame: .zero)
-    self.delegate = delegate
-    registerForTraitChanges([UITraitPreferredContentSizeCategory.self]) {
-      (view: TinyuiLiquidGlassTextProvider, _: UITraitCollection) in
-      view.invalidateMeasurement()
-    }
-  }
-
-  @objc public func configure(_ json: String, tintColor: UIColor?) {
-    guard json != configurationJSON || tintColor != tintColorValue else { return }
-    configurationJSON = json
-    configuration = (try? JSONDecoder().decode(
-      LiquidGlassTextConfiguration.self, from: Data(json.utf8)
-    )) ?? LiquidGlassTextConfiguration()
+  @objc public func configure(
+    _ dictionary: [String: Any],
+    tintColor: UIColor?
+  ) {
+    configuration = LiquidGlassTextConfiguration(dictionary)
     tintColorValue = tintColor
     hostingController?.rootView = content
-    invalidateMeasurement()
-  }
-
-  @objc public func invalidateMeasurement() {
-    lastSize = nil
     setNeedsLayout()
   }
 
@@ -207,7 +207,7 @@ private struct LiquidGlassTextEffect: View {
     if window == nil {
       detachController()
     } else {
-      invalidateMeasurement()
+      setNeedsLayout()
     }
   }
 
@@ -221,10 +221,8 @@ private struct LiquidGlassTextEffect: View {
   @objc public func reset() {
     detachController()
     parentViewController = nil
-    configurationJSON = "{}"
     configuration = LiquidGlassTextConfiguration()
     tintColorValue = nil
-    lastSize = nil
   }
 
   override public func layoutSubviews() {
@@ -248,18 +246,5 @@ private struct LiquidGlassTextEffect: View {
       controller.didMove(toParent: parentViewController)
     }
     controller.view.frame = bounds
-
-    // GlassText uses explicit newlines and intrinsic sizing, never automatic wrapping.
-    let measured = controller.sizeThatFits(in: CGSize(width: 100_000, height: 100_000))
-    let scale = traitCollection.displayScale > 0 ? traitCollection.displayScale : 1
-    let size = CGSize(
-      width: ceil(measured.width * scale) / scale,
-      height: ceil(measured.height * scale) / scale
-    )
-    guard size.width.isFinite, size.height.isFinite, size != lastSize else { return }
-    lastSize = size
-    delegate?.onContentSizeChange(
-      width: size.width, height: size.height, configuration: configurationJSON
-    )
   }
 }

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.mm

@@ -4,17 +4,16 @@
 
 #import <React/RCTConversions.h>
 #import <React/UIView+React.h>
-#import <react/renderer/components/TinyuiSpec/ComponentDescriptors.h>
-#import <react/renderer/components/TinyuiSpec/EventEmitters.h>
+#import <react/utils/FollyConvert.h>
 #import <react/renderer/components/TinyuiSpec/Props.h>
 #import <react/renderer/components/TinyuiSpec/RCTComponentViewHelpers.h>
 #import "RCTFabricComponentsPlugins.h"
 #import "Tinyui-Swift.h"
+#import "TinyuiLiquidGlassTextShadowNode.h"
 
 using namespace facebook::react;
 
-@interface TinyuiLiquidGlassTextView () <RCTTinyuiLiquidGlassTextViewViewProtocol,
-                                        TinyuiLiquidGlassTextViewDelegate>
+@interface TinyuiLiquidGlassTextView () <RCTTinyuiLiquidGlassTextViewViewProtocol>
 @end
 
 @implementation TinyuiLiquidGlassTextView {
@@ -23,7 +22,7 @@ using namespace facebook::react;
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
 {
-  return concreteComponentDescriptorProvider<TinyuiLiquidGlassTextViewComponentDescriptor>();
+  return concreteComponentDescriptorProvider<TinyuiLiquidGlassTextComponentDescriptor>();
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -31,7 +30,7 @@ using namespace facebook::react;
   if (self = [super initWithFrame:frame]) {
     static const auto defaultProps = std::make_shared<const TinyuiLiquidGlassTextViewProps>();
     _props = defaultProps;
-    _provider = [[TinyuiLiquidGlassTextProvider alloc] initWithDelegate:self];
+    _provider = [[TinyuiLiquidGlassTextProvider alloc] initWithFrame:CGRectZero];
     self.contentView = _provider;
   }
   return self;
@@ -48,31 +47,11 @@ using namespace facebook::react;
 - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
 {
   const auto &newProps = *std::static_pointer_cast<TinyuiLiquidGlassTextViewProps const>(props);
-  [_provider configure:RCTNSStringFromString(newProps.configuration)
+  [_provider configure:convertFollyDynamicToId(newProps.configuration)
              tintColor:RCTUIColorFromSharedColor(newProps.tintColor)];
   [super updateProps:props oldProps:oldProps];
 }
 
-- (void)updateEventEmitter:(EventEmitter::Shared const &)eventEmitter
-{
-  [super updateEventEmitter:eventEmitter];
-  [_provider invalidateMeasurement];
-}
-
-- (void)onContentSizeChangeWithWidth:(double)width
-                            height:(double)height
-                     configuration:(NSString *)configuration
-{
-  if (_eventEmitter == nullptr) {
-    return;
-  }
-  std::static_pointer_cast<const TinyuiLiquidGlassTextViewEventEmitter>(_eventEmitter)
-      ->onContentSizeChange(TinyuiLiquidGlassTextViewEventEmitter::OnContentSizeChange{
-          .width = width,
-          .height = height,
-          .configuration = RCTStringFromNSString(configuration)});
-}
-
 - (void)prepareForRecycle
 {
   [_provider reset];

package/ios/LiquidGlassText/TinyuiTextOutlineShape.swift

@@ -16,6 +16,7 @@ struct TinyuiTextOutlineShape: Shape {
     var ctFont: CTFont
     var fontSize: CGFloat
     var alignment: TextAlignment = .center
+    var letterSpacing: CGFloat = 0
 
     func path(in rect: CGRect) -> Path {
         // Split into explicit lines (no wrapping here)
@@ -25,9 +26,11 @@ struct TinyuiTextOutlineShape: Shape {
         var ctLines: [CTLine] = []
         ctLines.reserveCapacity(rawLines.count)
 
-        let attrKey = kCTFontAttributeName as NSAttributedString.Key
         for l in rawLines {
-            let attr = [attrKey: ctFont]
+            let attr: [NSAttributedString.Key: Any] = [
+                kCTFontAttributeName as NSAttributedString.Key: ctFont,
+                kCTKernAttributeName as NSAttributedString.Key: letterSpacing,
+            ]
             let astr = NSAttributedString(string: l, attributes: attr)
             let line = CTLineCreateWithAttributedString(astr)
             ctLines.append(line)

package/ios/Menu/TinyuiMenuProvider.swift

@@ -31,8 +31,8 @@ import UIKit
     }
   }
 
-  /// JSON menu configuration passed to the SwiftUI view.
-  @objc public var menuConfig: String = "{}" {
+  /// Menu configuration passed to the SwiftUI view.
+  @objc public var menuConfig: [String: Any] = [:] {
     didSet {
       props.menuConfig = menuConfig
     }

package/ios/Menu/TinyuiMenuView.mm

@@ -4,6 +4,7 @@
 
 #import <React/RCTConversions.h>
 #import <React/UIView+React.h>
+#import <react/utils/FollyConvert.h>
 
 #import <react/renderer/components/TinyuiSpec/ComponentDescriptors.h>
 #import <react/renderer/components/TinyuiSpec/EventEmitters.h>
@@ -82,7 +83,7 @@ using namespace facebook::react;
   const auto &newMenuProps = *std::static_pointer_cast<TinyuiMenuViewProps const>(props);
 
   if (oldMenuProps.menuConfig != newMenuProps.menuConfig) {
-    _menuProvider.menuConfig = RCTNSStringFromString(newMenuProps.menuConfig);
+    _menuProvider.menuConfig = convertFollyDynamicToId(newMenuProps.menuConfig);
   }
   if (oldMenuProps.title != newMenuProps.title) {
     _menuProvider.title = RCTNSStringFromString(newMenuProps.title);