@momo-kits/native-kits 0.167.1-duo.8-debug → 0.167.1-duo.9

package/ios/InputMoney/InputMoney.swift

@@ -3,9 +3,8 @@
 //  MoMoUIKits
 //
 //  Native SwiftUI reimplementation of Compose `InputMoney`.
-//  The bound `text` holds RAW DIGITS only (mirrors Compose, where the
-//  field stores the numeric string and a VisualTransformation renders the
-//  thousands-separated currency). Display formatting is applied live.
+//  The bound `text` holds RAW DIGITS only, as in Compose; the field shows
+//  the thousands-separated currency and edits apply at the caret.
 //
 
 import Foundation
@@ -165,17 +164,18 @@ public struct InputMoney: View {
     // MARK: - Body
 
     public var body: some View {
-        VStack(alignment: .leading, spacing: 4) {
+        VStack(alignment: .leading, spacing: 0) {
             ZStack(alignment: .topLeading) {
                 // Floating label
                 if !floatingValue.isEmpty || !floatingIcon.isEmpty {
-                    HStack(spacing: Spacing.XS) {
+                    HStack(spacing: 0) {
                         MomoText(floatingValue, typography: .labelSMedium, color: floatingTitleColor)
                         if required {
                             MomoText("*", typography: .labelSMedium, color: theme.colors.error.primary)
                         }
                         if !floatingIcon.isEmpty {
                             Icon(source: floatingIcon, size: 16, color: floatingIconTintColor)
+                                .padding(.leading, Spacing.XS)
                         }
                     }
                     .padding(.horizontal, Spacing.S)
@@ -204,17 +204,19 @@ public struct InputMoney: View {
 
                     // Money field
                     ZStack(alignment: .leading) {
-                        if text.filter({ $0.isNumber }).isEmpty {
+                        if !hasDigits {
                             MomoText(
                                 placeholder,
                                 typography: fontWeight == .bold ? .actionSBold : .bodyDefaultRegular,
                                 color: placeholderColor
                             )
+                            .fontSize(20, lineHeight: 24)
                         }
                         MoneyTextField(
                             digits: $text,
                             keyboardType: keyboardType,
                             fontWeight: fontWeight == .bold ? .bold : .regular,
+                            fontFamily: theme.font,
                             textColor: UIColor(textColor),
                             cursorColor: UIColor(theme.colors.primary),
                             isDisabled: disabled,
@@ -225,7 +227,7 @@ public struct InputMoney: View {
                     .frame(maxWidth: .infinity, alignment: .leading)
 
                     // Clear button (focused + has value)
-                    if isFocused && !text.filter({ $0.isNumber }).isEmpty {
+                    if isFocused && hasDigits {
                         SwiftUI.Button(action: {
                             text = ""
                             onChangeText?("")
@@ -239,7 +241,7 @@ public struct InputMoney: View {
                     // Loading indicator and right icon can both render (mirrors
                     // Compose's two independent `if` blocks, not if/else).
                     if loading {
-                        ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                        ActivityIndicator(isAnimating: .constant(true), style: .medium, color: iconTintColor)
                             .frame(width: 16, height: 16)
                             .padding(.leading, Spacing.S)
                     }
@@ -264,6 +266,9 @@ public struct InputMoney: View {
 
             ErrorView(errorMessage: error, errorSpacing: errorSpacing, hintText: "")
         }
+        .accessibilityElement(children: .contain)
+        .accessibilityLabel(floatingValue)
+        .accessibilityIdentifier(disabled ? "input_\(floatingValue)_disabled" : "input_\(floatingValue)")
         .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillHideNotification)) { _ in
             if isFocused {
                 DispatchQueue.main.async { handleFocusChange(false) }
@@ -273,6 +278,8 @@ public struct InputMoney: View {
 
     // MARK: - Helpers
 
+    private var hasDigits: Bool { text.contains(where: isMoneyDigit) }
+
     private func handleFocusChange(_ focused: Bool) {
         guard isFocused != focused else { return }
         isFocused = focused
@@ -303,6 +310,7 @@ private struct MoneyTextField: UIViewRepresentable {
     @Binding var digits: String
     var keyboardType: UIKeyboardType
     var fontWeight: UIFont.Weight
+    var fontFamily: String
     var textColor: UIColor
     var cursorColor: UIColor
     var isDisabled: Bool
@@ -315,7 +323,7 @@ private struct MoneyTextField: UIViewRepresentable {
         let field = UITextField()
         field.delegate = context.coordinator
         field.keyboardType = keyboardType
-        field.font = UIFont.systemFont(ofSize: context.environment.momoFontScale(20), weight: fontWeight)
+        field.font = font(context)
         field.textColor = textColor
         field.isEnabled = !isDisabled
         field.tintColor = cursorColor
@@ -328,10 +336,14 @@ private struct MoneyTextField: UIViewRepresentable {
     func updateUIView(_ field: UITextField, context: Context) {
         context.coordinator.parent = self
         // Re-applied here, not just in makeUIView, so a font-scale change reaches an existing field.
-        field.font = UIFont.systemFont(ofSize: context.environment.momoFontScale(20), weight: fontWeight)
+        field.font = font(context)
         field.isEnabled = !isDisabled
         field.textColor = textColor
         field.tintColor = cursorColor
+        if field.keyboardType != keyboardType {
+            field.keyboardType = keyboardType
+            field.reloadInputViews()
+        }
         let expected = displayValue(digits)
         if field.text != expected {
             field.text = expected
@@ -340,10 +352,20 @@ private struct MoneyTextField: UIViewRepresentable {
     }
 
     fileprivate func displayValue(_ raw: String) -> String {
-        let numeric = raw.filter { $0.isNumber }
+        let numeric = raw.filter(isMoneyDigit)
         return numeric.isEmpty ? "" : formatNumberToMoney(numeric)
     }
 
+    // Theme family as Compose `getFontFamily`: Momo Trust Sans only for whitelisted hosts, else system.
+    private func font(_ context: Context) -> UIFont {
+        let size = context.environment.momoFontScale(20)
+        if KitDesignSystem.shared.isWhiteList, fontFamily == "MomoTrustSans",
+           let font = UIFont(name: fontWeight == .bold ? "MomoTrustSans-Bold" : "MomoTrustSans-Regular", size: size) {
+            return font
+        }
+        return .systemFont(ofSize: size, weight: fontWeight)
+    }
+
     final class Coordinator: NSObject, UITextFieldDelegate {
         var parent: MoneyTextField
 

package/ios/InputOTP/InputOTP.swift

@@ -48,6 +48,7 @@ public struct InputOTP: View {
 
     @FocusState private var isFocused: Bool
     @State private var hasBeenFocused: Bool = false
+    @State private var fieldText: String
 
     private var maxLength: Int { length ?? 10 }
 
@@ -64,6 +65,7 @@ public struct InputOTP: View {
         onBlur: (() -> Void)? = nil
     ) {
         self._value = value
+        self._fieldText = State(initialValue: value.wrappedValue)
         self.length = length
         self.errorMessage = errorMessage
         self.errorSpacing = errorSpacing
@@ -105,7 +107,7 @@ public struct InputOTP: View {
                 HStack {
                     Spacer()
                     SwiftUI.Button(action: clearText) {
-                        Icon(source: "24_navigation_close_circle_full", size: 12, color: theme.colors.text.hint)
+                        Icon(source: "24_navigation_close_circle_full", size: 12, color: theme.colors.text.default)
                             .padding(.trailing, 12)
                     }
                 }
@@ -122,17 +124,24 @@ public struct InputOTP: View {
     // MARK: Subviews
 
     private var hiddenField: some View {
-        TextField("", text: Binding(
-            get: { value },
-            set: { handleChangeText($0) }
-        ))
+        TextField("", text: $fieldText)
         .keyboardType(dataType == "number" ? .numberPad : .asciiCapable)
+        .textInputAutocapitalization(.never)
+        .autocorrectionDisabled()
         .focused($isFocused)
         .foregroundColor(.clear)
         .accentColor(.clear)
         .frame(maxWidth: .infinity)
         .frame(height: 56)
         .opacity(0.01)
+        // Writes a rejected edit back, so the field stays in step with `value` like Compose's
+        // controlled field instead of keeping the extra character and swallowing the next key.
+        .onChange(of: fieldText) { text in
+            if text != value && !handleChangeText(text) { fieldText = value }
+        }
+        .onChange(of: value) { newValue in
+            if fieldText != newValue { fieldText = newValue }
+        }
         .onChange(of: isFocused) { focused in
             if focused {
                 onFocus?()
@@ -147,7 +156,7 @@ public struct InputOTP: View {
     private var cells: some View {
         if let length = length {
             HStack(spacing: Spacing.L) {
-                ForEach(0 ..< length, id: \.self) { i in
+                ForEach(0 ..< max(length, 0), id: \.self) { i in
                     cell(at: i)
                 }
             }
@@ -155,7 +164,7 @@ public struct InputOTP: View {
         } else {
             HStack(spacing: Spacing.L) {
                 if value.isEmpty && !isFocused && !placeholder.isEmpty {
-                    MomoText(placeholder, typography: .descriptionDefaultRegular, color: theme.colors.text.hint)
+                    MomoText(placeholder, typography: .bodyDefaultRegular, color: theme.colors.text.hint)
                 } else {
                     ForEach(Array(value.enumerated()), id: \.offset) { _, ch in
                         MomoText(String(ch), typography: .headerDefaultBold, color: theme.colors.text.default)
@@ -186,13 +195,14 @@ public struct InputOTP: View {
 
     // MARK: Logic
 
-    private func handleChangeText(_ text: String) {
+    @discardableResult
+    private func handleChangeText(_ text: String) -> Bool {
         let validData = dataType != "number" || text.allSatisfy { $0.isNumber }
         let changed = text.count != value.count
-        if text.count <= maxLength && validData && changed {
-            value = text
-            onChangeText?(text)
-        }
+        guard text.count <= maxLength && validData && changed else { return false }
+        value = text
+        onChangeText?(text)
+        return true
     }
 
     private func clearText() {

package/ios/Layout/Card.swift

@@ -0,0 +1,50 @@
+import SwiftUI
+
+/// Rounded surface laid out on the kit grid (8pt gutter), inset by the screen margin.
+/// Mirrors `vn.momo.kits.layout.Card`.
+public struct CardView<Content: View>: View {
+    @Environment(\.appTheme) private var theme
+
+    // MARK: Lifecycle
+
+    public init(
+        useShadow: Bool = false,
+        backgroundImage: String? = nil,
+        backgroundColor: Color? = nil,
+        contentPadding: EdgeInsets = EdgeInsets(top: Spacing.M, leading: Spacing.M, bottom: Spacing.M, trailing: Spacing.M),
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.useShadow = useShadow
+        self.backgroundImage = backgroundImage
+        self.backgroundColor = backgroundColor
+        self.contentPadding = contentPadding
+        self.content = content
+    }
+
+    // MARK: Public
+
+    public var body: some View {
+        GridFlow(gutter: Spacing.S, content: content)
+            .padding(contentPadding)
+            .background(background)
+            .background(backgroundColor ?? theme.colors.background.surface)
+            .clipShape(RoundedRectangle(cornerRadius: Radius.M))
+            // Approximates Compose `shadow(6.dp)` elevation.
+            .shadow(color: Color.black.opacity(useShadow ? 0.12 : 0), radius: useShadow ? 6 : 0, x: 0, y: useShadow ? 3 : 0)
+            .padding(.horizontal, Spacing.M)
+    }
+
+    // MARK: Private
+
+    private let useShadow: Bool
+    private let backgroundImage: String?
+    private let backgroundColor: Color?
+    private let contentPadding: EdgeInsets
+    private let content: () -> Content
+
+    @ViewBuilder private var background: some View {
+        if let backgroundImage {
+            ImageView(backgroundImage, contentMode: .fill).clipped()
+        }
+    }
+}

package/ios/Layout/GridContext.swift

@@ -1,20 +1,31 @@
 import SwiftUI
 
-/// Grid metrics published by a layout container (`SectionView`) so span-based children
+/// Grid metrics published by a layout container (`SectionView`, `CardView`) so span-based children
 /// can size themselves. Mirrors `vn.momo.kits.layout.GridContext`.
 public struct GridContext: Equatable {
     public let numberOfColumns: Int
     public let gutter: CGFloat
     public let sizePerSpan: CGFloat
+    /// Pixels per point; span sizes are floored onto the pixel grid when it is set.
+    public let displayScale: CGFloat
 
-    public init(numberOfColumns: Int = 12, gutter: CGFloat = Spacing.M, sizePerSpan: CGFloat = 0) {
+    public init(
+        numberOfColumns: Int = 12,
+        gutter: CGFloat = Spacing.M,
+        sizePerSpan: CGFloat = 0,
+        displayScale: CGFloat = 0
+    ) {
         self.numberOfColumns = numberOfColumns
         self.gutter = gutter
         self.sizePerSpan = sizePerSpan
+        self.displayScale = displayScale
     }
 
     public func sizeForSpan(_ span: Int) -> CGFloat {
-        sizePerSpan * CGFloat(span) + gutter * CGFloat(span - 1)
+        let size = sizePerSpan * CGFloat(span) + gutter * CGFloat(span - 1)
+        guard displayScale > 0 else { return size }
+        // Compose floors in pixels so a full row of spans never overflows by a sub-pixel.
+        return floor(size * displayScale) / displayScale
     }
 }
 
@@ -28,3 +39,112 @@ public extension EnvironmentValues {
         set { self[GridContextKey.self] = newValue }
     }
 }
+
+/// Measures the width it is given, publishes the grid for it and wraps children in a flow row.
+/// Shared body of `SectionView` and `CardView` (Compose `gridColumns()` + `gridContext()` + `FlowRow`).
+struct GridFlow<Content: View>: View {
+    let gutter: CGFloat
+    let content: () -> Content
+
+    @Environment(\.screenLayout) private var screenLayout
+    @Environment(\.displayScale) private var displayScale
+    /// The Compose `BoxWithConstraints` width.
+    @State private var availableWidth: CGFloat = 0
+
+    var body: some View {
+        flow
+            .environment(\.gridContext, grid)
+            .frame(maxWidth: .infinity, alignment: .topLeading)
+            .background(widthReader)
+    }
+
+    private var grid: GridContext {
+        let columns = screenLayout.contentWidth > 600 ? 24 : 12
+        let column = (availableWidth - gutter * CGFloat(columns - 1)) / CGFloat(columns)
+        return GridContext(
+            numberOfColumns: columns,
+            gutter: gutter,
+            sizePerSpan: max(0, column),
+            displayScale: displayScale
+        )
+    }
+
+    @ViewBuilder private var flow: some View {
+        if #available(iOS 16.0, *) {
+            FlowRowLayout(gutter: gutter) { content() }
+        } else {
+            // No `Layout` protocol before iOS 16: children stack instead of wrapping.
+            // Full-width items — the common case — look identical.
+            VStack(alignment: .leading, spacing: gutter) { content() }
+        }
+    }
+
+    private var widthReader: some View {
+        GeometryReader { proxy in
+            Color.clear.preference(key: GridWidthKey.self, value: proxy.size.width)
+        }
+        .onPreferenceChange(GridWidthKey.self) { availableWidth = $0 }
+    }
+}
+
+private struct GridWidthKey: PreferenceKey {
+    static var defaultValue: CGFloat = 0
+
+    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
+        value = max(value, nextValue())
+    }
+}
+
+/// Wrapping row with equal horizontal/vertical spacing — the Compose `FlowRow` equivalent.
+@available(iOS 16.0, *)
+private struct FlowRowLayout: Layout {
+    struct Row {
+        var items: [(index: Int, size: CGSize)] = []
+        var width: CGFloat = 0
+        var height: CGFloat = 0
+    }
+
+    let gutter: CGFloat
+
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout Void) -> CGSize {
+        let maxWidth = proposal.width ?? .infinity
+        let rows = rows(for: subviews, maxWidth: maxWidth)
+        let height = rows.reduce(0) { $0 + $1.height } + gutter * CGFloat(max(0, rows.count - 1))
+        return CGSize(width: proposal.width ?? rows.map(\.width).max() ?? 0, height: height)
+    }
+
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout Void) {
+        var y = bounds.minY
+        for row in rows(for: subviews, maxWidth: bounds.width) {
+            var x = bounds.minX
+            for item in row.items {
+                subviews[item.index].place(
+                    at: CGPoint(x: x, y: y),
+                    anchor: .topLeading,
+                    proposal: ProposedViewSize(item.size)
+                )
+                x += item.size.width + gutter
+            }
+            y += row.height + gutter
+        }
+    }
+
+    private func rows(for subviews: Subviews, maxWidth: CGFloat) -> [Row] {
+        var rows: [Row] = []
+        var current = Row()
+        for index in subviews.indices {
+            let size = subviews[index].sizeThatFits(ProposedViewSize(width: maxWidth, height: nil))
+            let widthIfAppended = current.items.isEmpty ? size.width : current.width + gutter + size.width
+            // Sub-point tolerance: spans are computed to land exactly on `maxWidth`.
+            if !current.items.isEmpty, widthIfAppended > maxWidth + 0.5 {
+                rows.append(current)
+                current = Row()
+            }
+            current.width = current.items.isEmpty ? size.width : current.width + gutter + size.width
+            current.height = max(current.height, size.height)
+            current.items.append((index, size))
+        }
+        if !current.items.isEmpty { rows.append(current) }
+        return rows
+    }
+}

package/ios/Layout/Item.swift

@@ -1,12 +1,13 @@
 import SwiftUI
 
-/// Span-sized cell inside a `SectionView`. Reads the grid published by its container;
+/// Span-sized cell inside a `SectionView` / `CardView`. Reads the grid published by its container;
 /// without one it just wraps its content. Mirrors `vn.momo.kits.layout.Item`.
 public struct ItemView<Content: View>: View {
     // MARK: Lifecycle
 
+    /// `widthSpan` nil spans the full row, whatever the container's column count.
     public init(
-        widthSpan: Int = 12,
+        widthSpan: Int? = nil,
         heightSpan: Int = 0,
         @ViewBuilder content: @escaping () -> Content
     ) {
@@ -26,14 +27,14 @@ public struct ItemView<Content: View>: View {
 
     // MARK: Private
 
-    private let widthSpan: Int
+    private let widthSpan: Int?
     private let heightSpan: Int
     private let content: () -> Content
 
     @Environment(\.gridContext) private var grid
 
     private var width: CGFloat? {
-        grid.map { $0.sizeForSpan(widthSpan) }
+        grid.map { $0.sizeForSpan(widthSpan ?? $0.numberOfColumns) }
     }
 
     private var height: CGFloat? {

package/ios/Layout/Section.swift

@@ -1,8 +1,8 @@
 import SwiftUI
 
-/// 12-column section container: horizontal margin, optional background image, and a
-/// wrapping row of children that read their span size from `\.gridContext`.
-/// Mirrors `vn.momo.kits.layout.Section`.
+/// Grid section container (12 columns, 24 when the content is wider than 600pt): horizontal
+/// margin, optional background image, and a wrapping row of children that read their span
+/// size from `\.gridContext`. Mirrors `vn.momo.kits.layout.Section`.
 public struct SectionView<Content: View>: View {
     // MARK: Lifecycle
 
@@ -19,116 +19,20 @@ public struct SectionView<Content: View>: View {
     // MARK: Public
 
     public var body: some View {
-        flow
-            .environment(\.gridContext, grid)
-            .frame(maxWidth: .infinity, alignment: .topLeading)
-            .background(widthReader)
+        GridFlow(gutter: Spacing.M, content: content)
             .background(background)
             .padding(.horizontal, useMargin ? Spacing.M : 0)
     }
 
     // MARK: Private
 
-    private static var columns: Int { 12 }
-    private static var gutter: CGFloat { Spacing.M }
-
     private let useMargin: Bool
     private let backgroundImage: String?
     private let content: () -> Content
 
-    /// Width available *inside* the horizontal margin — the Compose `BoxWithConstraints` equivalent.
-    @State private var availableWidth: CGFloat = 0
-
-    private var grid: GridContext {
-        let columns = CGFloat(Self.columns)
-        // The trailing `- 1 / columns` mirrors Compose: it absorbs rounding so 12 spans
-        // plus their gutters never overflow the row by a sub-point.
-        let sizePerSpan = (availableWidth - Self.gutter * (columns - 1)) / columns - 1 / columns
-        return GridContext(numberOfColumns: Self.columns, gutter: Self.gutter, sizePerSpan: max(0, sizePerSpan))
-    }
-
-    @ViewBuilder private var flow: some View {
-        if #available(iOS 16.0, *) {
-            FlowRowLayout(gutter: Self.gutter) { content() }
-        } else {
-            // No `Layout` protocol before iOS 16: children stack instead of wrapping.
-            // Full-width (span 12) items — the common case — look identical.
-            VStack(alignment: .leading, spacing: Self.gutter) { content() }
-        }
-    }
-
     @ViewBuilder private var background: some View {
         if let backgroundImage {
             ImageView(backgroundImage, contentMode: .fill).clipped()
         }
     }
-
-    private var widthReader: some View {
-        GeometryReader { proxy in
-            Color.clear.preference(key: SectionWidthKey.self, value: proxy.size.width)
-        }
-        .onPreferenceChange(SectionWidthKey.self) { availableWidth = $0 }
-    }
-}
-
-private struct SectionWidthKey: PreferenceKey {
-    static var defaultValue: CGFloat = 0
-
-    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
-        value = max(value, nextValue())
-    }
-}
-
-/// Wrapping row with equal horizontal/vertical spacing — the Compose `FlowRow` equivalent.
-@available(iOS 16.0, *)
-private struct FlowRowLayout: Layout {
-    struct Row {
-        var items: [(index: Int, size: CGSize)] = []
-        var width: CGFloat = 0
-        var height: CGFloat = 0
-    }
-
-    let gutter: CGFloat
-
-    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout Void) -> CGSize {
-        let maxWidth = proposal.width ?? .infinity
-        let rows = rows(for: subviews, maxWidth: maxWidth)
-        let height = rows.reduce(0) { $0 + $1.height } + gutter * CGFloat(max(0, rows.count - 1))
-        return CGSize(width: proposal.width ?? rows.map(\.width).max() ?? 0, height: height)
-    }
-
-    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout Void) {
-        var y = bounds.minY
-        for row in rows(for: subviews, maxWidth: bounds.width) {
-            var x = bounds.minX
-            for item in row.items {
-                subviews[item.index].place(
-                    at: CGPoint(x: x, y: y),
-                    anchor: .topLeading,
-                    proposal: ProposedViewSize(item.size)
-                )
-                x += item.size.width + gutter
-            }
-            y += row.height + gutter
-        }
-    }
-
-    private func rows(for subviews: Subviews, maxWidth: CGFloat) -> [Row] {
-        var rows: [Row] = []
-        var current = Row()
-        for index in subviews.indices {
-            let size = subviews[index].sizeThatFits(ProposedViewSize(width: maxWidth, height: nil))
-            let widthIfAppended = current.items.isEmpty ? size.width : current.width + gutter + size.width
-            // Sub-point tolerance: spans are computed to land exactly on `maxWidth`.
-            if !current.items.isEmpty, widthIfAppended > maxWidth + 0.5 {
-                rows.append(current)
-                current = Row()
-            }
-            current.width = current.items.isEmpty ? size.width : current.width + gutter + size.width
-            current.height = max(current.height, size.height)
-            current.items.append((index, size))
-        }
-        if !current.items.isEmpty { rows.append(current) }
-        return rows
-    }
 }

package/ios/Loader/Loader.swift

@@ -12,8 +12,7 @@ public enum LoaderType {
 /// Mirrors Compose `Loader(type:, tintColor:, modifier:)` which delegates to
 /// `DotLoader` / `SpinnerLoader`. Both variants render Lottie animations
 /// (`files/dot_loading` and `files/lottie_circle_loader`) and optionally tint
-/// the fill/stroke. The tint is reproduced here by masking a solid color rect
-/// with the (monochrome) Lottie animation.
+/// the fill/stroke through a Lottie color value provider.
 public struct Loader: View {
     private let type: LoaderType
     private let tintColor: Color?
@@ -97,17 +96,14 @@ public struct ProgressBar: View {
     }
 }
 
-/// Renders a looping Lottie animation, optionally recolored via a mask.
+// Tinted inside Lottie, as Compose does: SwiftUI masks/color effects over a UIKit-backed view aren't reliable.
 private struct TintedLottie: View {
     let name: String
     let tintColor: Color?
 
     var body: some View {
-        if let tintColor = tintColor {
-            tintColor
-                .mask(LottieView(name: name, loopMode: .loop))
-        } else {
-            LottieView(name: name, loopMode: .loop)
-        }
+        LottieView(name: name, loopMode: .loop, tintColor: tintColor.map { UIColor($0) })
+            // The tint is applied once in makeUIView; a new tint needs a new view.
+            .id(tintColor)
     }
 }

package/ios/Lottie/LottieView.swift

@@ -15,6 +15,8 @@ struct LottieView: UIViewRepresentable {
   var loopMode: LottieLoopMode = .playOnce
   var contentMode : UIView.ContentMode  = .scaleAspectFit
   var onDone: (() -> Void)?
+  // Recolors every fill and stroke, as Compose's iOS LottieAnimation does; nil keeps the file's colors.
+  var tintColor: UIColor?
 
   // Add static cache for animations
   private static var animationCache = NSCache<NSString, LottieAnimation>()
@@ -64,6 +66,12 @@ struct LottieView: UIViewRepresentable {
   private func setupAnimationView(_ animationView: LottieAnimationView, _ containerView: UIView) {
     animationView.contentMode = contentMode
     animationView.loopMode = loopMode
+    if let tintColor {
+      animationView.setValueProvider(
+        ColorValueProvider(tintColor.lottieColorValue),
+        keypath: AnimationKeypath(keypath: "**.Color")
+      )
+    }
     animationView.backgroundBehavior = loopMode == .loop ? .pauseAndRestore : .pause
 
     // Optimize rendering
@@ -73,6 +81,8 @@ struct LottieView: UIViewRepresentable {
     containerView.addSubview(animationView)
 
     NSLayoutConstraint.activate([
+      animationView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor),
+      animationView.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
       animationView.widthAnchor.constraint(equalTo: containerView.widthAnchor),
       animationView.heightAnchor.constraint(equalTo: containerView.heightAnchor)
     ])