react-native-tinyui 1.1.0 → 2.0.0

package/README.md

@@ -80,7 +80,7 @@ Available components:
 - `Stepper`
 - `ConcentricView`
 - `SFSymbol`
-- `TipKit` (enables `TipKit.Popover`, `TipKit.configure` and `TipKit.invalidate`)
+- `TipKit` (enables `TipKit.Popover`, `TipKit.configure`, `TipKit.resetDatastore` and `TipKit.invalidate`)
 
 All components are enabled by default. Use an empty `components` array to
 compile only the TurboModule core. Run `pod install` again whenever this list
@@ -165,6 +165,10 @@ or `type: 'divider'` for structural entries; nested entries use their own
 `options` array. SF Symbols are passed with `systemImage`; missing symbols
 simply render no image.
 
+The trigger can be nested inside a React Native `Pressable` or `Touchable`.
+Tapping an enabled menu trigger opens the menu without firing the parent's
+touch or press handlers; tapping elsewhere in the parent keeps its normal behavior.
+
 To open the menu from another control, call `open()` on its ref:
 
 ```tsx
@@ -324,12 +328,46 @@ Coordinate this startup configuration with any other native TipKit integration.
 Initialization errors reject the promise; an enabled view mounted too early
 reports `E_TIPS_NOT_CONFIGURED` and can recover after configuration succeeds.
 
+`TipKit.resetDatastore()` returns a promise and clears all persisted tip, event
+and parameter records, making previously invalidated tips eligible again when
+their display conditions allow. It is primarily for testing the first-launch
+experience and **must be awaited before `TipKit.configure()`**:
+
+```ts
+// At app startup, when deliberately resetting tip history for testing:
+await TipKit.resetDatastore();
+await TipKit.configure({ displayFrequency: 'immediate' });
+```
+
+Once TinyUI has configured TipKit, resetting rejects with
+`E_TIPS_ALREADY_CONFIGURED`; restart the app process to run this sequence again.
+Fast Refresh does not reset native configuration. Other native reset failures
+also reject the promise (fallback code `E_TIPS_RESET`). Calling reset on every
+launch will erase users' tip history on every launch.
+
 `TipKit.invalidate(tipId, reason = 'actionPerformed')` also returns a promise and
 requires configuration first. It persistently invalidates the ID even when no
 view for that tip is mounted. `reason` may be `actionPerformed` or `tipClosed`.
 System invalidations can additionally report `displayCountExceeded`,
 `displayDurationExceeded`, or `unknown` through `onStatusChange`.
 
+`onStatusChange` reports eligibility, independently of actual bubble visibility:
+
+| Status | Meaning |
+| --- | --- |
+| `pending` | Currently ineligible, such as while waiting for the display frequency interval |
+| `available` | Eligible; presentation still requires `enabled`, a visible anchor and a free presenter |
+| `invalidated` | Persistently ineligible, with an invalidation `reason`; does not recover just by remounting or restarting |
+
+Invalidation reasons are `actionPerformed` (explicitly call `invalidate` after
+the feature is used), `tipClosed` (the system close button or explicit
+invalidation), `displayCountExceeded` (the `maxDisplayCount` limit), and
+`displayDurationExceeded` (a native duration limit; this wrapper does not expose
+a duration option). `unknown` is a fallback for future native reasons.
+Action buttons only emit `onActionPress`; they do not automatically invalidate.
+Setting `enabled={false}` or unmounting a tip does not itself invalidate it.
+Use `onVisibleChange` to observe whether the bubble is actually on screen.
+
 Keep IDs stable across renders, app launches and translations. All instances
 with the same ID share their TipKit history. Keep `maxDisplayCount` and
 `ignoresDisplayFrequency` consistent for each ID; conflicting values report
@@ -345,7 +383,7 @@ toggle `enabled` off and on to allow another attempt, subject to TipKit's state.
 The system close button can permanently invalidate a tip.
 
 This first version exposes popover tips and JS eligibility conditions. Inline
-`TipUIView`, native rule/event builders, TipGroup and datastore reset APIs are
+`TipUIView`, native rule/event builders and TipGroup are
 not exposed. The example's **New demo tip** button deliberately creates another
 ID for trying the behavior again without clearing the app's TipKit datastore.
 
@@ -385,7 +423,7 @@ import { LiquidGlassText } from 'react-native-tinyui';
 | Prop                     | Values                                           | Default   |
 | ------------------------ | ------------------------------------------------ | --------- |
 | `text`                   | String (including text translated in JavaScript) | Required  |
-| `effect`                 | `clear`, `regular`, `identity`                   | `clear`   |
+| `effect`                 | `clear`, `regular`                               | `clear`   |
 | `tint`                   | React Native `ColorValue`                        | —         |
 | `interactive`            | Whether the glass responds to interaction        | `false`   |
 | `fontDesign`             | `default`, `serif`, `monospaced`, `rounded`      | `default` |
@@ -399,7 +437,7 @@ 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.
+`DynamicColorIOS`.
 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.
@@ -560,9 +598,7 @@ function Favorite() {
 | `size` | Positive point size; default `17`. |
 | `weight` | `unspecified` (default), `ultraLight`, `thin`, `light`, `regular`, `medium`, `semibold`, `bold`, `heavy`, `black`. |
 | `scale` | `default`, `unspecified`, `small`, `medium`, `large`. |
-| `textStyle` | `extraLargeTitle`, `extraLargeTitle2`, `largeTitle`, `title1`–`title3`, `headline`, `subheadline`, `body`, `callout`, `footnote`, `caption1`, `caption2`. Overrides `size` and supplies the style's weight unless explicitly set. |
-| `fontFamily` | Font/PostScript name used to derive symbol metrics; unknown fonts use system metrics. |
-| `allowFontScaling` | Default `true`. Scales the base point size by React Native's `fontScale`, including when using `textStyle`. |
+| `allowFontScaling` | Default `true`. Scales the base point size by React Native's `fontScale`. |
 | `maxFontSizeMultiplier` | Cap on that scale, >= 1. Omitted or `0` means unlimited. |
 | `renderingMode` | `automatic` (default), `monochrome`, `hierarchical`, `palette`, `multicolor`. |
 | `color` | React Native `ColorValue`, including `PlatformColor` and `DynamicColorIOS`. Defaults to semantic label color. |

package/ios/Core/Tinyui.mm

@@ -35,6 +35,24 @@
   return components;
 }
 
+- (void)resetTipsDatastore:(RCTPromiseResolveBlock)resolve
+                    reject:(RCTPromiseRejectBlock)reject
+{
+#if TINYUI_FEATURE_TIP_KIT
+  dispatch_async(dispatch_get_main_queue(), ^{
+    [TinyuiTipsRuntime resetDatastore:^(NSError *error) {
+      if (error != nil) {
+        reject(error.userInfo[@"code"] ?: @"E_TIPS_RESET", error.localizedDescription, error);
+      } else {
+        resolve(nil);
+      }
+    }];
+  });
+#else
+  reject(@"E_TIP_NOT_INSTALLED", @"Enable TipKit in react-native-tinyui.components and run pod install.", nil);
+#endif
+}
+
 - (void)configureTips:(NSString *)displayFrequency
              resolve:(RCTPromiseResolveBlock)resolve
               reject:(RCTPromiseRejectBlock)reject

package/ios/LiquidGlassText/TinyuiLiquidGlassTextProvider.swift

@@ -138,7 +138,6 @@ private struct LiquidGlassTextEffect: View {
     var result: Glass
     switch effect {
     case "regular": result = .regular
-    case "identity": result = .identity
     default: result = .clear
     }
     if let tintColor {

package/ios/Menu/TinyuiMenuView.mm

@@ -64,6 +64,21 @@ using namespace facebook::react;
   }
 }
 
+#pragma mark - Touch handling
+
+- (SharedTouchEventEmitter)touchEventEmitterAtPoint:(CGPoint)point
+{
+  // The provider's hitTest returns its UIButton, so the surface touch handler
+  // finds this Fabric view first. Keep the trigger's touch sequence in UIKit:
+  // forwarding it to JS lets an ancestor Pressable/Touchable claim the same
+  // touch and run its press callbacks while the native menu is opening.
+  if (_menuProvider.isEnabled) {
+    return nullptr;
+  }
+
+  return [super touchEventEmitterAtPoint:point];
+}
+
 #pragma mark - Commands
 
 - (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args

package/ios/SFSymbol/TinyuiSFSymbolEffects.swift

@@ -0,0 +1,184 @@
+import Symbols
+import UIKit
+
+// Preserve the native Swift effect protocols so UIKit checks supported effects
+// at compile time, including the availability of newer presets.
+enum TinyuiSFSymbolEffect {
+  case discrete(any SymbolEffect & DiscreteSymbolEffect)
+  case indefinite(any SymbolEffect & IndefiniteSymbolEffect)
+
+  static func make(_ configuration: [String: Any]) -> TinyuiSFSymbolEffect? {
+    let scope = configuration["scope"] as? String
+    let direction = configuration["direction"] as? String
+    switch configuration["type"] as? String {
+    case "pulse":
+      var effect: PulseSymbolEffect = .pulse
+      if scope == "byLayer" { effect = effect.byLayer }
+      if scope == "wholeSymbol" { effect = effect.wholeSymbol }
+      return .discrete(effect)
+    case "bounce":
+      var effect: BounceSymbolEffect = .bounce
+      if direction == "up" { effect = effect.up }
+      if direction == "down" { effect = effect.down }
+      if scope == "byLayer" { effect = effect.byLayer }
+      if scope == "wholeSymbol" { effect = effect.wholeSymbol }
+      return .discrete(effect)
+    case "scale":
+      var effect: ScaleSymbolEffect = .scale
+      if direction == "up" { effect = effect.up }
+      if direction == "down" { effect = effect.down }
+      if scope == "byLayer" { effect = effect.byLayer }
+      if scope == "wholeSymbol" { effect = effect.wholeSymbol }
+      return .indefinite(effect)
+    case "appear":
+      var effect: AppearSymbolEffect = .appear
+      if direction == "up" { effect = effect.up }
+      if direction == "down" { effect = effect.down }
+      if scope == "byLayer" { effect = effect.byLayer }
+      if scope == "wholeSymbol" { effect = effect.wholeSymbol }
+      return .indefinite(effect)
+    case "disappear":
+      var effect: DisappearSymbolEffect = .disappear
+      if direction == "up" { effect = effect.up }
+      if direction == "down" { effect = effect.down }
+      if scope == "byLayer" { effect = effect.byLayer }
+      if scope == "wholeSymbol" { effect = effect.wholeSymbol }
+      return .indefinite(effect)
+    case "variableColor":
+      var effect: VariableColorSymbolEffect = .variableColor
+      if configuration["iteration"] as? String == "iterative" { effect = effect.iterative }
+      if configuration["iteration"] as? String == "cumulative" { effect = effect.cumulative }
+      if let reversing = configuration["reversing"] as? NSNumber {
+        effect = reversing.boolValue ? effect.reversing : effect.nonReversing
+      }
+      if configuration["inactiveLayers"] as? String == "hide" { effect = effect.hideInactiveLayers }
+      if configuration["inactiveLayers"] as? String == "dim" { effect = effect.dimInactiveLayers }
+      return .discrete(effect)
+    case "wiggle":
+      guard #available(iOS 18.0, *) else { return nil }
+      var effect: WiggleSymbolEffect = .wiggle
+      switch direction {
+      case "up": effect = effect.up
+      case "down": effect = effect.down
+      case "left": effect = effect.left
+      case "right": effect = effect.right
+      case "forward": effect = effect.forward
+      case "backward": effect = effect.backward
+      case "clockwise": effect = effect.clockwise
+      case "counterClockwise": effect = effect.counterClockwise
+      default: break
+      }
+      if let angle = (configuration["angle"] as? NSNumber)?.doubleValue, angle.isFinite {
+        effect = WiggleSymbolEffect.wiggle.custom(angle: angle)
+      }
+      if scope == "byLayer" { effect = effect.byLayer }
+      if scope == "wholeSymbol" { effect = effect.wholeSymbol }
+      return .discrete(effect)
+    case "rotate":
+      guard #available(iOS 18.0, *) else { return nil }
+      var effect: RotateSymbolEffect = .rotate
+      if direction == "clockwise" { effect = effect.clockwise }
+      if direction == "counterClockwise" { effect = effect.counterClockwise }
+      if scope == "byLayer" { effect = effect.byLayer }
+      if scope == "wholeSymbol" { effect = effect.wholeSymbol }
+      return .discrete(effect)
+    case "breathe":
+      guard #available(iOS 18.0, *) else { return nil }
+      var effect: BreatheSymbolEffect = .breathe
+      if configuration["style"] as? String == "plain" { effect = effect.plain }
+      if configuration["style"] as? String == "pulse" { effect = effect.pulse }
+      if scope == "byLayer" { effect = effect.byLayer }
+      if scope == "wholeSymbol" { effect = effect.wholeSymbol }
+      return .discrete(effect)
+    case "drawOn":
+      guard #available(iOS 26.0, *) else { return nil }
+      var effect: DrawOnSymbolEffect = .drawOn
+      if scope == "byLayer" { effect = effect.byLayer }
+      if scope == "wholeSymbol" { effect = effect.wholeSymbol }
+      if scope == "individually" { effect = effect.individually }
+      return .indefinite(effect)
+    case "drawOff":
+      guard #available(iOS 26.0, *) else { return nil }
+      var effect: DrawOffSymbolEffect = .drawOff
+      if scope == "byLayer" { effect = effect.byLayer }
+      if scope == "wholeSymbol" { effect = effect.wholeSymbol }
+      if scope == "individually" { effect = effect.individually }
+      if let reversed = configuration["reversed"] as? NSNumber {
+        effect = reversed.boolValue ? effect.reversed : effect.nonReversed
+      }
+      return .indefinite(effect)
+    default: return nil
+    }
+  }
+
+  @MainActor
+  func add(to imageView: UIImageView, options: SymbolEffectOptions, animated: Bool) {
+    switch self {
+    case .discrete(let effect): imageView.addSymbolEffect(effect, options: options, animated: animated)
+    case .indefinite(let effect): imageView.addSymbolEffect(effect, options: options, animated: animated)
+    }
+  }
+
+  @MainActor
+  func remove(from imageView: UIImageView, options: SymbolEffectOptions, animated: Bool) {
+    switch self {
+    case .discrete(let effect):
+      imageView.removeSymbolEffect(ofType: effect, options: options, animated: animated)
+    case .indefinite(let effect):
+      imageView.removeSymbolEffect(ofType: effect, options: options, animated: animated)
+    }
+  }
+}
+
+func tinyuiSFSymbolOptions(_ configuration: [String: Any]?) -> SymbolEffectOptions {
+  var options = SymbolEffectOptions.default
+  guard let configuration else { return options }
+  let speed = (configuration["speed"] as? NSNumber)?.doubleValue ?? 1
+  if speed.isFinite, speed > 0 { options = options.speed(speed) }
+  let repetition = configuration["repeat"] as? NSNumber
+  if repetition == NSNumber(value: false) { return options.nonRepeating }
+  // JS validates safe integers; cap the conversion at the native integer range.
+  let rawCount = repetition?.doubleValue ?? 1
+  let count = rawCount.isFinite ? Int(max(1, min(rawCount, Double(Int.max) / 2))) : 1
+  let behavior = configuration["repeatBehavior"] as? String
+  let delayValue = configuration["repeatDelay"] as? NSNumber
+  let rawDelay = delayValue?.doubleValue ?? 0
+  let delay = rawDelay.isFinite && rawDelay >= 0 ? rawDelay : 0
+  let forever = configuration["repeat"] as? String == "forever" || behavior != nil || delayValue != nil
+
+  if #available(iOS 18.0, *) {
+    if behavior == "continuous" {
+      options = options.repeat(.continuous)
+    } else if repetition != nil {
+      options = options.repeat(.periodic(count, delay: delayValue == nil ? nil : delay))
+    } else if forever {
+      options = options.repeat(.periodic(nil, delay: delayValue == nil ? nil : delay))
+    }
+  } else {
+    if repetition != nil { options = options.repeat(count) }
+    else if forever { options = options.repeating }
+  }
+  return options
+}
+
+func tinyuiSFSymbolTransition(
+  _ configuration: [String: Any]
+) -> (any SymbolEffect & ContentTransitionSymbolEffect)? {
+  let type = configuration["type"] as? String
+  if type == "automatic" { return AutomaticSymbolEffect.automatic }
+  guard type == "replace" || type == "magicReplace" else { return nil }
+
+  var transition: ReplaceSymbolEffect = .replace
+  switch configuration["direction"] as? String {
+  case "downUp": transition = transition.downUp
+  case "upUp": transition = transition.upUp
+  case "offUp": transition = transition.offUp
+  default: break
+  }
+  if configuration["scope"] as? String == "byLayer" { transition = transition.byLayer }
+  if configuration["scope"] as? String == "wholeSymbol" { transition = transition.wholeSymbol }
+  if #available(iOS 18.0, *), type == "magicReplace" {
+    return ReplaceSymbolEffect.replace.magic(fallback: transition)
+  }
+  return transition
+}

package/ios/SFSymbol/TinyuiSFSymbolImage.swift

@@ -0,0 +1,103 @@
+import React
+import UIKit
+
+// Shared by Fabric measurement and the mounted view so their metrics match.
+// Keep image creation independent of UIView and the main actor: Fabric measures
+// on a background thread without dispatching synchronously to the main queue.
+@objc(TinyuiSFSymbolImage)
+public final class TinyuiSFSymbolImage: NSObject {
+  @objc(imageWithConfiguration:includeColors:)
+  public static func image(
+    configuration: [String: Any],
+    includeColors: Bool
+  ) -> UIImage? {
+    guard let name = configuration["name"] as? String, !name.isEmpty else { return nil }
+
+    var size = (configuration["size"] as? NSNumber)?.doubleValue ?? 17
+    if !size.isFinite || size <= 0 { size = 17 }
+    let weight = symbolWeight(configuration["weight"] as? String)
+    let scale = symbolScale(configuration["scale"] as? String)
+    if let fontScale = (configuration["fontScale"] as? NSNumber)?.doubleValue,
+      fontScale.isFinite, fontScale > 0
+    {
+      size *= fontScale
+    }
+
+    var symbol = UIImage.SymbolConfiguration(pointSize: CGFloat(size), weight: weight, scale: scale)
+
+    if includeColors {
+      let color = configuration["color"].flatMap(RCTConvert.uiColor) ?? .label
+      let colors: UIImage.SymbolConfiguration?
+      switch configuration["renderingMode"] as? String {
+      case "monochrome": colors = .preferringMonochrome()
+      case "multicolor": colors = .preferringMulticolor()
+      case "hierarchical": colors = UIImage.SymbolConfiguration(hierarchicalColor: color)
+      case "palette":
+        let values = configuration["paletteColors"] as? [Any] ?? []
+        let palette = Array(values.compactMap(RCTConvert.uiColor).prefix(3))
+        colors = UIImage.SymbolConfiguration(paletteColors: palette.isEmpty ? [color] : palette)
+      default: colors = nil
+      }
+      if let colors { symbol = symbol.applying(colors) }
+    }
+
+    if #available(iOS 26.0, *) {
+      let variableMode: UIImage.SymbolVariableValueMode
+      switch configuration["variableValueMode"] as? String {
+      case "color": variableMode = .color
+      case "draw": variableMode = .draw
+      default: variableMode = .automatic
+      }
+      symbol = symbol.applying(UIImage.SymbolConfiguration(variableValueMode: variableMode))
+
+      let colorMode: UIImage.SymbolColorRenderingMode
+      switch configuration["colorRenderingMode"] as? String {
+      case "flat": colorMode = .flat
+      case "gradient": colorMode = .gradient
+      default: colorMode = .automatic
+      }
+      symbol = symbol.applying(UIImage.SymbolConfiguration(colorRenderingMode: colorMode))
+    }
+
+    let asset = configuration["source"] as? String == "asset"
+    let image: UIImage?
+    if let variableValue = configuration["variableValue"] as? NSNumber {
+      let value = variableValue.doubleValue
+      let clamped = value.isFinite ? min(1, max(0, value)) : 0
+      image = asset
+        ? UIImage(named: name, in: .main, variableValue: clamped, configuration: symbol)
+        : UIImage(systemName: name, variableValue: clamped, configuration: symbol)
+    } else {
+      image = asset
+        ? UIImage(named: name, in: .main, with: symbol)
+        : UIImage(systemName: name, withConfiguration: symbol)
+    }
+    // Symbol content transitions are undefined for ordinary bitmap assets.
+    return image?.isSymbolImage == true ? image : nil
+  }
+
+  private static func symbolWeight(_ value: String?) -> UIImage.SymbolWeight {
+    switch value {
+    case "ultraLight": return .ultraLight
+    case "thin": return .thin
+    case "light": return .light
+    case "regular": return .regular
+    case "medium": return .medium
+    case "semibold": return .semibold
+    case "bold": return .bold
+    case "heavy": return .heavy
+    case "black": return .black
+    default: return .unspecified
+    }
+  }
+
+  private static func symbolScale(_ value: String?) -> UIImage.SymbolScale {
+    switch value {
+    case "small": return .small
+    case "medium": return .medium
+    case "large": return .large
+    case "unspecified": return .unspecified
+    default: return .default
+    }
+  }
+}

package/ios/SFSymbol/TinyuiSFSymbolProvider.swift

@@ -0,0 +1,135 @@
+import React
+import Symbols
+import UIKit
+
+@objc(TinyuiSFSymbolProvider)
+public final class TinyuiSFSymbolProvider: UIImageView {
+  private var configuration: NSDictionary?
+  private var effects: [[String: Any]] = []
+  private var appliedEffects: [String: [String: Any]] = [:]
+  private var respectReduceMotion = true
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    contentMode = .center
+    isAccessibilityElement = false
+    NotificationCenter.default.addObserver(
+      self,
+      selector: #selector(reduceMotionChanged),
+      name: UIAccessibility.reduceMotionStatusDidChangeNotification,
+      object: nil
+    )
+  }
+
+  @available(*, unavailable)
+  required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
+
+  private var reduceMotion: Bool {
+    respectReduceMotion && UIAccessibility.isReduceMotionEnabled
+  }
+
+  @objc(configure:effects:contentTransition:respectReduceMotion:resizeMode:)
+  public func configure(
+    _ value: Any?,
+    effects: Any?,
+    contentTransition: Any?,
+    respectReduceMotion: Bool,
+    resizeMode: String
+  ) {
+    let changedMotion = self.respectReduceMotion != respectReduceMotion
+    self.respectReduceMotion = respectReduceMotion
+    if changedMotion { clearEffects() }
+
+    let next = value as? [String: Any] ?? [:]
+    if configuration?.isEqual(to: next) != true {
+      let nextImage = TinyuiSFSymbolImage.image(configuration: next, includeColors: true)
+      tintColor = next["color"].flatMap(RCTConvert.uiColor) ?? .label
+      let transitionConfiguration = contentTransition as? [String: Any] ?? [:]
+      if let nextImage, image != nil, window != nil, !reduceMotion,
+        let transition = tinyuiSFSymbolTransition(transitionConfiguration)
+      {
+        setSymbolImage(
+          nextImage,
+          contentTransition: transition,
+          options: tinyuiSFSymbolOptions(transitionConfiguration)
+        )
+      } else {
+        image = nextImage
+      }
+      configuration = next as NSDictionary
+      if nextImage == nil { clearEffects() }
+    }
+
+    switch resizeMode {
+    case "contain": contentMode = .scaleAspectFit
+    case "cover": contentMode = .scaleAspectFill
+    case "stretch": contentMode = .scaleToFill
+    default: contentMode = .center
+    }
+    self.effects = effects as? [[String: Any]] ?? []
+  }
+
+  @objc public func clearEffects() {
+    removeAllSymbolEffects(options: .default, animated: false)
+    appliedEffects.removeAll()
+  }
+
+  @objc public func applyEffects() {
+    guard window != nil, image != nil else { return }
+    var requested: [String: [String: Any]] = [:]
+    for configuration in effects {
+      guard let type = configuration["type"] as? String else { continue }
+      requested[type] = configuration
+    }
+    for (type, old) in appliedEffects {
+      let next = requested[type]
+      if next.map({ NSDictionary(dictionary: old).isEqual(to: $0) }) != true
+        || (next?["active"] as? NSNumber)?.boolValue == false
+      {
+        // Reset immediately when replaying/reconfiguring so removal cannot race
+        // the replacement effect. Only animate an actual deactivation.
+        let reapplying = next != nil && (next?["active"] as? NSNumber)?.boolValue != false
+        let animated = !reapplying && !reduceMotion
+          && ((next ?? old)["animated"] as? NSNumber)?.boolValue != false
+        TinyuiSFSymbolEffect.make(old)?.remove(
+          from: self,
+          options: tinyuiSFSymbolOptions((next ?? old)["options"] as? [String: Any]),
+          animated: animated
+        )
+        appliedEffects.removeValue(forKey: type)
+      }
+    }
+    for (type, configuration) in requested {
+      if (configuration["active"] as? NSNumber)?.boolValue == false
+        || appliedEffects[type].map({ NSDictionary(dictionary: $0).isEqual(to: configuration) }) == true
+      {
+        continue
+      }
+      let stateful = ["scale", "appear", "disappear", "drawOn", "drawOff"].contains(type)
+      // Keep visibility/scale state under Reduce Motion without animating it.
+      if reduceMotion && !stateful { continue }
+      guard let effect = TinyuiSFSymbolEffect.make(configuration) else { continue }
+      effect.add(
+        to: self,
+        options: tinyuiSFSymbolOptions(configuration["options"] as? [String: Any]),
+        animated: !reduceMotion && (configuration["animated"] as? NSNumber)?.boolValue != false
+      )
+      appliedEffects[type] = configuration
+    }
+  }
+
+  public override func didMoveToWindow() {
+    super.didMoveToWindow()
+    if window == nil { clearEffects() }
+    else { applyEffects() }
+  }
+
+  @objc private func reduceMotionChanged() {
+    clearEffects()
+    applyEffects()
+  }
+
+  deinit {
+    NotificationCenter.default.removeObserver(self)
+  }
+}

package/ios/SFSymbol/TinyuiSFSymbolShadowNode.mm

@@ -1,7 +1,7 @@
 #if TINYUI_FEATURE_SF_SYMBOL
 
 #import "TinyuiSFSymbolShadowNode.h"
-#import "TinyuiSFSymbolImage.h"
+#import "Tinyui-Swift.h"
 #import <react/utils/FollyConvert.h>
 #include <react/renderer/core/LayoutConstraints.h>
 #include <react/renderer/core/LayoutContext.h>
@@ -16,7 +16,9 @@ Size TinyuiSFSymbolShadowNode::measureContent(
   @autoreleasepool {
     // UIImage and UIFont creation are safe off the main thread. No UIView or
     // main-queue sync is needed during concurrent Fabric layout.
-    UIImage *image = TinyuiSFSymbolImage(convertFollyDynamicToId(getConcreteProps().configuration), NO);
+    id configuration = convertFollyDynamicToId(getConcreteProps().configuration);
+    if (![configuration isKindOfClass:NSDictionary.class]) configuration = @{};
+    UIImage *image = [TinyuiSFSymbolImage imageWithConfiguration:configuration includeColors:NO];
     CGSize size = image == nil ? CGSizeZero : image.size;
     auto scale = layoutContext.pointScaleFactor > 0 ? layoutContext.pointScaleFactor : 1;
     return layoutConstraints.clamp({