@onekeyfe/react-native-native-list 6.7.0-alpha.405 → 6.7.0-alpha.407

package/ios/NativeListActivityDetailsView.swift

@@ -114,8 +114,9 @@ final class NativeListActivityDetailsView: UIStackView {
     let feeColumn = data.dictionary("fee") == nil ? 0 : gap + feeWidth
     let identityWidth: CGFloat
     if table {
-      let shared = (mainWidth - leadingWidth - gap - feeColumn) / 2
-      identityWidth = min(mainWidth * 0.42, shared)
+      let hasFee = data.dictionary("fee") != nil
+      let columnWidth = max(0, mainWidth - gap * (hasFee ? 2 : 1)) / (hasFee ? 2.6 : 2)
+      identityWidth = columnWidth - leadingWidth
     } else {
       identityWidth = mainWidth - leadingWidth - gap - feeColumn - min(amountsWidth, mainWidth * 0.5)
     }
@@ -163,9 +164,17 @@ final class NativeListActivityDetailsView: UIStackView {
     dimensions = [
       visualWidth,
       visual.heightAnchor.constraint(equalToConstant: CGFloat(image.double("height", default: 40))),
-      amounts.widthAnchor.constraint(lessThanOrEqualTo: main.widthAnchor, multiplier: table ? 0.42 : 0.5),
     ]
-    if table { dimensions.append(amounts.widthAnchor.constraint(equalTo: identity.widthAnchor)) }
+    if table {
+      // The leading visual belongs to identity, so its visibility cannot shift amounts.
+      let leadingWidth = hideLeading ? 0 : CGFloat(image.double("width", default: 40)) + gap
+      dimensions.append(amounts.widthAnchor.constraint(equalTo: identity.widthAnchor, constant: leadingWidth))
+      if data.dictionary("fee") != nil {
+        dimensions.append(fee.widthAnchor.constraint(equalTo: amounts.widthAnchor, multiplier: 0.6))
+      }
+    } else {
+      dimensions.append(amounts.widthAnchor.constraint(lessThanOrEqualTo: main.widthAnchor, multiplier: 0.5))
+    }
     NSLayoutConstraint.activate(dimensions)
     visual.isHidden = hideLeading
     if hideLeading {

package/ios/NativeListMarketRenderer.swift

@@ -22,6 +22,15 @@ final class NativeListMarketCell: NativeListRendererCell {
   private let marketSubtitleStack = UIStackView()
   private let marketSubtitleSpacer = UIView()
   private let trailingStack = UIStackView()
+  private let metricStacks = (0..<3).map { _ -> UIStackView in
+    let stack = UIStackView()
+    stack.axis = .vertical
+    stack.alignment = .fill
+    stack.spacing = 2
+    return stack
+  }
+  private let metricPrimaryLabels = (0..<3).map { _ in NativeListTextLabel() }
+  private let metricSecondaryLabels = (0..<3).map { _ in NativeListTextLabel() }
   private let accessoryButtons = (0..<2).map { _ in NativeListAccessoryButton(type: .system) }
   private let marketBadgeButtons = (0..<3).map { _ in NativeListAccessoryButton(type: .system) }
   private let badgeSlots = (0..<3).map { _ in NativeListImageSlot() }
@@ -69,6 +78,10 @@ final class NativeListMarketCell: NativeListRendererCell {
     trailingStack.setContentHuggingPriority(.required, for: .horizontal)
     trailingStack.setContentCompressionResistancePriority(.required, for: .horizontal)
     accessoryButtons.forEach(trailingStack.addArrangedSubview)
+    for index in metricStacks.indices {
+      metricStacks[index].addArrangedSubview(metricPrimaryLabels[index])
+      metricStacks[index].addArrangedSubview(metricSecondaryLabels[index])
+    }
     visual.translatesAutoresizingMaskIntoConstraints = false
     leadingWidth = visual.widthAnchor.constraint(equalToConstant: 32)
     leadingHeight = visual.heightAnchor.constraint(equalToConstant: 32)
@@ -130,6 +143,14 @@ final class NativeListMarketCell: NativeListRendererCell {
       }
     }
     accessoryButtons.forEach(resetButton)
+    for label in metricPrimaryLabels + metricSecondaryLabels {
+      label.attributedText = nil
+      label.text = nil
+      label.isHidden = true
+      label.numberOfLines = 1
+      label.lineBreakMode = .byTruncatingTail
+      label.textAlignment = .natural
+    }
     bindMarket(item, theme: theme)
     let style = item.data.dictionary("style")
     for (label, descriptor) in [
@@ -166,20 +187,38 @@ final class NativeListMarketCell: NativeListRendererCell {
     style.filter { ["lines", "truncate", "verticalAlignment", "offsetY"].contains($0.key) }
   }
   override func accessibilityText(_ item: NativeListItem) -> String {
-    item.data.string(
-      "accessibilityLabel",
-      default: [
-        item.data.string("title"), item.data.string("subtitle"), item.data.string("price"),
-        item.data.dictionary("change")?.string("text") ?? "",
-      ].filter { !$0.isEmpty }.joined(separator: ", "))
+    if let label = item.data["accessibilityLabel"] as? String { return label }
+    var parts = [item.data.string("title"), item.data.string("subtitle")]
+    let metrics = item.data.dictionaries("metrics")
+    if metrics.count == 2 || metrics.count == 3 {
+      for index in metrics.indices {
+        for label in [metricPrimaryLabels[index], metricSecondaryLabels[index]] where !label.isHidden {
+          if let text = label.text { parts.append(text) }
+        }
+      }
+    } else {
+      parts.append(item.data.string("price"))
+      parts.append(item.data.dictionary("change")?.string("text") ?? "")
+    }
+    return parts.filter { !$0.isEmpty }.joined(separator: ", ")
   }
   override func updateMarketQuote(_ item: NativeListItem, theme: [String: Any]?) {
     guard retainBoundItem(item) else { return }
-    bindQuote(item, theme: theme)
+    let metrics = item.data.dictionaries("metrics")
+    if metrics.count == 2 || metrics.count == 3 {
+      updateMetricLabels(metrics, theme: theme)
+    } else {
+      bindQuote(item, theme: theme)
+    }
+    accessibilityLabel = accessibilityText(item)
   }
   override func recycleContent() {
     visual.recycle()
     badgeSlots.forEach { $0.recycle() }
+    for label in metricPrimaryLabels + metricSecondaryLabels {
+      label.attributedText = nil
+      label.text = nil
+    }
     imageSignature = ""
   }
   @objc private func leadingPressed() {
@@ -256,6 +295,61 @@ final class NativeListMarketCell: NativeListRendererCell {
     default: return .natural
     }
   }
+  private func metricColor(_ tone: String, theme: [String: Any]?) -> UIColor {
+    switch tone {
+    case "positive": return nativeListColor(theme, "positive", "#218358")
+    case "negative": return nativeListColor(theme, "negative", "#CE2C31")
+    case "secondary": return nativeListColor(theme, "secondaryText", "#646464")
+    default: return nativeListColor(theme, "primaryText", "#202020")
+    }
+  }
+  private func bindMetrics(
+    _ columns: [[String: Any]], theme: [String: Any]?, gap: CGFloat
+  ) {
+    for (index, column) in columns.enumerated() {
+      let stack = metricStacks[index]
+      root.addArrangedSubview(stack)
+      root.setCustomSpacing(gap, after: stack)
+      let weight = max(1, min(3, column.int("weight", default: 1)))
+      let width = stack.widthAnchor.constraint(
+        equalTo: mainStack.widthAnchor, multiplier: CGFloat(weight) / 2)
+      width.isActive = true
+      selectorConstraints.append(width)
+    }
+    updateMetricLabels(columns, theme: theme)
+  }
+  private func updateMetricLabels(_ columns: [[String: Any]], theme: [String: Any]?) {
+    for (index, column) in columns.enumerated() {
+      let alignment = marketTextAlignment(column.string("alignment", default: "end"))
+      let primary = metricPrimaryLabels[index]
+      let primaryText = column.string("text")
+      show(primary, primaryText, lines: 1)
+      let primaryColor = metricColor(column.string("tone"), theme: theme)
+      applyMarketTextStyle(
+        primary, data: nil, theme: theme, defaultSize: 14, defaultLineHeight: 20,
+        defaultWeight: .medium, defaultColor: primaryColor, defaultAlignment: alignment)
+      if !column.dictionaries("textSegments").isEmpty {
+        primary.attributedText = marketAttributedText(
+          primaryText, segments: column.dictionaries("textSegments"), style: nil,
+          defaultSize: 14, defaultLineHeight: 20, defaultWeight: .medium,
+          color: primaryColor, defaultAlignment: alignment)
+      }
+      let secondary = metricSecondaryLabels[index]
+      let secondaryText = column.string("secondaryText")
+      show(secondary, secondaryText, lines: 1)
+      let secondaryColor = metricColor(
+        column.string("secondaryTone", default: "secondary"), theme: theme)
+      applyMarketTextStyle(
+        secondary, data: nil, theme: theme, defaultSize: 12, defaultLineHeight: 16,
+        defaultWeight: .regular, defaultColor: secondaryColor, defaultAlignment: alignment)
+      if !column.dictionaries("secondaryTextSegments").isEmpty {
+        secondary.attributedText = marketAttributedText(
+          secondaryText, segments: column.dictionaries("secondaryTextSegments"), style: nil,
+          defaultSize: 12, defaultLineHeight: 16, defaultWeight: .regular,
+          color: secondaryColor, defaultAlignment: alignment)
+      }
+    }
+  }
   private func applyMarketTextStyle(
     _ label: UILabel,
     data: [String: Any]?,
@@ -623,11 +717,18 @@ final class NativeListMarketCell: NativeListRendererCell {
       }
       marketSubtitleStack.isHidden = tertiaryLabel.isHidden && subtitleLabel.isHidden
     }
-    root.addArrangedSubview(trailingStack)
-    trailingStack.axis = .horizontal
-    trailingStack.alignment = .center
-    trailingStack.spacing = CGFloat(style?.double("trailingGap", default: 8) ?? 8)
-    bindQuote(item, theme: theme)
+    let metrics = item.data.dictionaries("metrics")
+    if metrics.count == 2 || metrics.count == 3 {
+      let metricGap = CGFloat(style?.double("trailingGap", default: 8) ?? 8)
+      root.setCustomSpacing(metricGap, after: mainStack)
+      bindMetrics(metrics, theme: theme, gap: metricGap)
+    } else {
+      root.addArrangedSubview(trailingStack)
+      trailingStack.axis = .horizontal
+      trailingStack.alignment = .center
+      trailingStack.spacing = CGFloat(style?.double("trailingGap", default: 8) ?? 8)
+      bindQuote(item, theme: theme)
+    }
   }
   private func bindQuote(_ item: NativeListItem, theme: [String: Any]?) {
     NSLayoutConstraint.deactivate(accessorySizeConstraints)
@@ -696,11 +797,5 @@ final class NativeListMarketCell: NativeListRendererCell {
     if let changeStyle = style?.dictionary("change"), !textLayoutStyle(changeStyle).isEmpty {
       NativeListTextStyles.applyStyledButton(change, textLayoutStyle(changeStyle), fonts: fonts)
     }
-    accessibilityLabel = item.data.string(
-      "accessibilityLabel",
-      default: [
-        item.data.string("title"), item.data.string("subtitle"), item.data.string("price"),
-        changeData.string("text"),
-      ].filter { !$0.isEmpty }.joined(separator: ", "))
   }
 }

package/ios/RNCNativeListView.swift

@@ -1524,7 +1524,7 @@ final class NativeListView: UIView {
     var sizeChanged = false
     var reorderStructureChanged = false
     let marketQuoteFields: Set<String> = [
-      "revision", "price", "priceSegments", "change", "accessibilityLabel",
+      "revision", "price", "priceSegments", "change", "accessibilityLabel", "metrics",
     ]
     for (index, changes) in pending {
       let previous = current.items[index]
@@ -1550,7 +1550,20 @@ final class NativeListView: UIView {
         reorderStructureChanged = true
       }
       current.items[index] = item
-      if previous.type == "market", Set(changes.keys).isSubset(of: marketQuoteFields) {
+      let previousMetrics = previous.data.dictionaries("metrics")
+      let nextMetrics = item.data.dictionaries("metrics")
+      let sameMetricStructure = previousMetrics.count == nextMetrics.count &&
+        previousMetrics.indices.allSatisfy { metricIndex in
+          let before = previousMetrics[metricIndex]
+          let after = nextMetrics[metricIndex]
+          return before.string("key") == after.string("key") &&
+            before.int("weight", default: 1) == after.int("weight", default: 1) &&
+            before.string("alignment", default: "end") ==
+              after.string("alignment", default: "end")
+        }
+      if previous.type == "market", Set(changes.keys).isSubset(of: marketQuoteFields),
+        sameMetricStructure
+      {
         marketQuoteKeys.insert(item.key)
       } else {
         changedKeys.insert(item.key)

package/ios/tests/NativeListActivityPresentationTests.swift

@@ -97,6 +97,103 @@ final class NativeListActivityPresentationTests: XCTestCase {
     }
   }
 
+  func testTableColumnsStayStableAcrossFeeLeadingAndAmountReuseWithForcedRendererDirection() throws {
+    let width: CGFloat = 900
+    let horizontal: CGFloat = 16
+    let contentWidth = width - horizontal * 2
+    let gap: CGFloat = 12
+    let container = UIView(frame: CGRect(x: 0, y: 0, width: contentWidth, height: 4000))
+    let details = NativeListActivityDetailsView()
+    details.translatesAutoresizingMaskIntoConstraints = false
+    container.addSubview(details)
+    NSLayoutConstraint.activate([
+      details.leadingAnchor.constraint(equalTo: container.leadingAnchor),
+      details.trailingAnchor.constraint(equalTo: container.trailingAnchor),
+      details.topAnchor.constraint(equalTo: container.topAnchor),
+    ])
+    let main = try XCTUnwrap(details.arrangedSubviews.first as? UIStackView)
+    let amounts = try XCTUnwrap(main.arrangedSubviews[2] as? UIStackView)
+    let fee = try XCTUnwrap(main.arrangedSubviews[3] as? UIStackView)
+    for rtl in [false, true] {
+      let direction: UIUserInterfaceLayoutDirection = rtl ? .rightToLeft : .leftToRight
+      // This fixture covers renderer geometry; App-level RTL propagation is separate.
+      func applyDirection(_ view: UIView) {
+        view.semanticContentAttribute = rtl ? .forceRightToLeft : .forceLeftToRight
+        view.subviews.forEach(applyDirection)
+      }
+      for hasFee in [true, false, true] {
+        var previousHeight: CGFloat = 0
+        for count in [1, 2, 6, 32] {
+          for hideLeading in [false, true, false] {
+            for feeKind in 0...2 {
+              var data: [String: Any] = [
+                "type": "activity", "key": "table", "title": "Send",
+                "description": "Contract interaction with a long description that wraps",
+                "leading": ["kind": "icon", "name": "ArrowTopOutline"],
+                "hideLeading": hideLeading,
+                "amounts": (0..<count).map { index in [
+                  "key": "amount-\(index)", "text": index % 2 == 0 ? "-123456789012345678901234567890.123456789 ETH" : "+1 USDC",
+                  "secondaryText": "$1,000.00",
+                  "leading": ["kind": "icon", "name": "ArrowTopOutline"],
+                ] as [String: Any] },
+              ]
+              if hasFee {
+                data["fee"] = ["label": "Network fee",
+                  "primary": feeKind == 1 ? "0.000000012345678 ETH" : "1 ETH",
+                  "secondary": "$0.20", "hidden": feeKind == 2]
+              }
+              // Create amount views before applying the fixture direction; each transition binds once.
+              details.bind(try NativeListItem(data: data), theme: nil, fonts: NativeListFontFamilies())
+              applyDirection(details)
+              for presentation in ["table", "stacked", "table"] {
+                data["presentation"] = presentation
+                details.bind(try NativeListItem(data: data), theme: nil, fonts: NativeListFontFamilies())
+                XCTAssertEqual(main.effectiveUserInterfaceLayoutDirection, direction)
+                XCTAssertEqual(amounts.effectiveUserInterfaceLayoutDirection, direction)
+                XCTAssertEqual(fee.effectiveUserInterfaceLayoutDirection, direction)
+                container.setNeedsLayout()
+                container.layoutIfNeeded()
+                guard presentation == "table" else { continue }
+                let expected = (contentWidth - gap * (hasFee ? 2 : 1)) / (hasFee ? 2.6 : 2)
+                XCTAssertEqual(amounts.frame.width, expected, accuracy: 1)
+                let start = rtl ? contentWidth - expected * 2 - gap : expected + gap
+                XCTAssertEqual(amounts.frame.minX, start, accuracy: 1)
+                XCTAssertEqual(amounts.frame.midX, start + expected / 2, accuracy: 1)
+                XCTAssertEqual(amounts.arrangedSubviews.count, count)
+                for amount in amounts.arrangedSubviews {
+                  XCTAssertEqual(amount.frame.minX, 0, accuracy: 1)
+                  XCTAssertEqual(amount.frame.width, expected, accuracy: 1)
+                  let row = try XCTUnwrap(amount as? UIStackView)
+                  let leading = row.arrangedSubviews[0]
+                  let labels = row.arrangedSubviews[1]
+                  if rtl { XCTAssertLessThanOrEqual(labels.frame.maxX, leading.frame.minX) }
+                  else { XCTAssertLessThanOrEqual(leading.frame.maxX, labels.frame.minX) }
+                  XCTAssertGreaterThanOrEqual(labels.frame.minX, 0)
+                  XCTAssertLessThanOrEqual(labels.frame.maxX, amount.frame.width + 1)
+                }
+                if hasFee {
+                  XCTAssertEqual(fee.frame.width, expected * 0.6, accuracy: 1)
+                  XCTAssertEqual(fee.alpha, feeKind == 2 ? 0 : 1)
+                  for child in fee.arrangedSubviews {
+                    XCTAssertGreaterThanOrEqual(child.frame.minX, -1)
+                    XCTAssertLessThanOrEqual(child.frame.maxX, fee.frame.width + 1)
+                    if rtl { XCTAssertEqual(child.frame.minX, 0, accuracy: 1) }
+                    else { XCTAssertEqual(child.frame.maxX, fee.frame.width, accuracy: 1) }
+                  }
+                }
+                XCTAssertEqual(
+                  NativeListActivityDetailsView.measure(data, width: width, fonts: NativeListFontFamilies()),
+                  ceil(details.frame.height) + 16, accuracy: 1)
+              }
+            }
+          }
+          XCTAssertGreaterThan(details.frame.height, previousHeight)
+          previousHeight = details.frame.height
+        }
+      }
+    }
+  }
+
   func testAutomaticHeightMatchesRenderedStacks() throws {
     let amount: [String: Any] = ["key": "send", "text": "-0.5 ETH", "secondaryText": "$1,000.00"]
     let cases: [(String, [String: Any])] = [

package/ios/tests/NativeListMarketMetricsTests.swift

@@ -0,0 +1,117 @@
+import UIKit
+import XCTest
+@testable import NativeListModule
+
+@MainActor
+final class NativeListMarketMetricsTests: XCTestCase {
+  private func item(
+    _ metrics: [[String: Any]]? = nil, price: String = "$42", accessibilityLabel: String? = nil
+  ) throws -> NativeListItem {
+    var data: [String: Any] = [
+      "key": "market-eth", "type": "market", "variant": "token", "height": 72,
+      "leading": ["kind": "token", "fallbackIcon": ["name": "CryptoCoinOutline"]],
+      "leadingAction": ["kind": "icon", "name": "StarOutline", "actionKey": "favorite"],
+      "title": "ETH", "subtitle": "Volume", "price": price,
+      "change": ["text": "+2%", "tone": "positive"],
+      "badges": [["key": "community", "text": "Verified", "actionKey": "info"]],
+      "pressActionKey": "detail", "pressInActionKey": "prewarm",
+      "longPressActionKey": "menu",
+      "style": ["horizontalPadding": 20, "leadingGap": 14, "trailingGap": 8],
+    ]
+    if let metrics { data["metrics"] = metrics }
+    data["accessibilityLabel"] = accessibilityLabel
+    return try NativeListItem(data: data)
+  }
+
+  private var two: [[String: Any]] { [
+    ["key": "price", "text": "$42", "alignment": "end"],
+    ["key": "change", "text": "+2%", "tone": "positive", "alignment": "end"],
+  ] }
+
+  func testMetricCountAndCompactReuseClearInactiveViews() throws {
+    let cell = NativeListMarketCell(frame: CGRect(x: 0, y: 0, width: 800, height: 72))
+    let window = UIWindow(frame: CGRect(x: 0, y: 0, width: 800, height: 200))
+    window.addSubview(cell)
+    let bind: (NativeListItem) -> Void = { item in
+      cell.bind(item: item, theme: nil, layout: "linear", selected: false,
+        checkboxState: { _, _, fallback in fallback }, fonts: NativeListFontFamilies())
+      cell.layoutIfNeeded()
+    }
+
+    bind(try item(two))
+    XCTAssertEqual(cell.root.arrangedSubviews.count, 5)
+    let identity = try XCTUnwrap(cell.root.arrangedSubviews[2] as? UIStackView)
+    let firstMetric = try XCTUnwrap(cell.root.arrangedSubviews[3] as? UIStackView)
+    XCTAssertEqual(identity.bounds.width, firstMetric.bounds.width * 2, accuracy: 1)
+    XCTAssertEqual(firstMetric.frame.minX - identity.frame.maxX, 8, accuracy: 1)
+    let metricStack = try XCTUnwrap(cell.root.arrangedSubviews.last as? UIStackView)
+    let metricLabel = try XCTUnwrap(metricStack.arrangedSubviews.first as? UILabel)
+    XCTAssertEqual(metricLabel.text, "+2%")
+
+    bind(try item(two + [["key": "volume", "text": "$1B", "secondaryText": "24h"]]))
+    XCTAssertEqual(cell.root.arrangedSubviews.count, 6)
+    bind(try item())
+    XCTAssertEqual(cell.root.arrangedSubviews.count, 4)
+    XCTAssertFalse(cell.root.arrangedSubviews.contains(metricStack))
+    bind(try item(two))
+    XCTAssertEqual(cell.root.arrangedSubviews.count, 5)
+    XCTAssertEqual(metricLabel.text, "+2%")
+  }
+
+  func testAccessibilityLabelFollowsVisibleMetricsAndExplicitOverride() throws {
+    let cell = NativeListMarketCell(frame: .zero)
+    let bind: (NativeListItem) -> Void = { item in
+      cell.bind(item: item, theme: nil, layout: "linear", selected: false,
+        checkboxState: { _, _, fallback in fallback }, fonts: NativeListFontFamilies())
+    }
+    var metrics: [[String: Any]] = [
+      ["key": "volume", "text": "$5M", "secondaryText": "24h"],
+      ["key": "cap", "text": "$8M"],
+    ]
+    bind(try item(metrics))
+    XCTAssertEqual(cell.accessibilityLabel, "ETH, Volume, $5M, 24h, $8M")
+
+    metrics[0]["textSegments"] = [["text": "$"], ["text": "6M"]]
+    cell.updateMarketQuote(try item(metrics), theme: nil)
+    XCTAssertEqual(cell.accessibilityLabel, "ETH, Volume, $6M, 24h, $8M")
+    cell.updateMarketQuote(try item(metrics, accessibilityLabel: "Market summary"), theme: nil)
+    XCTAssertEqual(cell.accessibilityLabel, "Market summary")
+
+    bind(try item())
+    XCTAssertEqual(cell.accessibilityLabel, "ETH, Volume, $42, +2%")
+  }
+
+  func testQuoteUpdatesKeepMetricViewsAndActionTargetsStable() throws {
+    let cell = NativeListMarketCell(frame: CGRect(x: 0, y: 0, width: 800, height: 72))
+    let window = UIWindow(frame: CGRect(x: 0, y: 0, width: 800, height: 200))
+    window.addSubview(cell)
+    cell.bind(item: try item(two), theme: nil, layout: "linear", selected: false,
+      checkboxState: { _, _, fallback in fallback }, fonts: NativeListFontFamilies())
+    cell.layoutIfNeeded()
+    let metricStack = try XCTUnwrap(cell.root.arrangedSubviews[3] as? UIStackView)
+    let metricLabel = try XCTUnwrap(metricStack.arrangedSubviews.first as? UILabel)
+    let leadingAction = try XCTUnwrap(cell.root.arrangedSubviews.first as? UIButton)
+    var actions: [String] = []
+    cell.onAction = { _, key, _, _ in actions.append(key) }
+
+    for tick in 0..<50 {
+      var updated = two
+      updated[0]["text"] = "$\(tick)"
+      cell.updateMarketQuote(try item(updated, price: "$\(tick)"), theme: nil)
+      XCTAssertEqual(cell.root.arrangedSubviews.count, 5)
+      XCTAssertTrue(cell.root.arrangedSubviews[3] === metricStack)
+      XCTAssertTrue(cell.root.arrangedSubviews.first === leadingAction)
+    }
+    XCTAssertEqual((metricStack.arrangedSubviews.first as? UILabel)?.text, "$49")
+    let changeStack = try XCTUnwrap(cell.root.arrangedSubviews.last as? UIStackView)
+    XCTAssertEqual((changeStack.arrangedSubviews.first as? UILabel)?.text, "+2%")
+    XCTAssertTrue(leadingAction.allTargets.contains(cell))
+    let action = try XCTUnwrap(
+      leadingAction.actions(forTarget: cell, forControlEvent: .touchUpInside)?.first)
+    let selector = NSSelectorFromString(action)
+    XCTAssertTrue(cell.responds(to: selector))
+    _ = cell.perform(selector)
+    XCTAssertEqual(actions, ["favorite"])
+    XCTAssertEqual(metricLabel.text, "$49")
+  }
+}

package/lib/module/NativeList.js

@@ -67,6 +67,7 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
   ...viewProps
 }, forwardedRef) {
   const snapshotRef = useRef(emptyNativeListSnapshot());
+  const needsNativeSnapshotRef = useRef(false);
   const renderedSnapshotRef = useRef(undefined);
   const initializedSnapshot = useRef(false);
   const pendingDisclosureSnapshotRef = useRef(undefined);
@@ -315,10 +316,11 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
         return;
       }
       pendingDisclosureSnapshotRef.current = undefined;
-      const nextSnapshotJson = JSON.stringify(accepted);
-      nativeRef.current?.applySnapshot(nextSnapshotJson);
+      const native = nativeRef.current;
+      if (native) native.applySnapshot(JSON.stringify(accepted));
       snapshotRef.current = accepted;
-      if (nativeRef.current && avatarLifecycle.current !== 'unmounted') {
+      needsNativeSnapshotRef.current = !native;
+      if (native && avatarLifecycle.current !== 'unmounted') {
         avatarModelRef.current?.replaceSnapshot(accepted.rows);
         updateAvatarPrefetchRef.current();
       }
@@ -336,10 +338,15 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
         return;
       }
       const native = nativeRef.current;
-      const dispatch = native ? () => {
+      if (!native) {
+        snapshotRef.current = nextSnapshot;
+        needsNativeSnapshotRef.current = true;
+        return;
+      }
+      const dispatch = () => {
         native.applyPatches(accepted.json);
         snapshotRef.current = nextSnapshot;
-      } : undefined;
+      };
       if (avatarLifecycle.current === 'unmounted') {
         dispatch?.();
         return;
@@ -362,7 +369,10 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
         if (pending) pendingDisclosureSnapshotRef.current = {
           ...pending,
           owned: next
-        };else snapshotRef.current = next;
+        };else {
+          snapshotRef.current = next;
+          if (!nativeRef.current) needsNativeSnapshotRef.current = true;
+        }
       }
     },
     scrollToKey(paramsOrKey, animated, alignment) {
@@ -417,7 +427,16 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
   }));
   const nativeCallbacks = useMemo(() => ({
     hybridRef: callback(ref => {
+      const previous = nativeRef.current;
       nativeRef.current = ref;
+      if (needsNativeSnapshotRef.current || previous && previous !== ref) {
+        // The parent can publish values before Fabric delivers the host.
+        const latest = snapshotRef.current;
+        ref.applySnapshot(JSON.stringify(latest));
+        needsNativeSnapshotRef.current = false;
+        avatarModelRef.current?.replaceSnapshot(latest.rows);
+        updateAvatarPrefetchRef.current();
+      }
       applyInitialScrollCallbackRef.current();
     }),
     onRowAction: callback(payloadJson => {