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

package/ios/TabView/TabView.swift

@@ -328,8 +328,13 @@ private struct ScrollableTabBar: View {
                 Rectangle()
                     .stroke(theme.colors.border.default, lineWidth: 0.5)
             )
+            // Compose scrolls the selected tab to the leading edge, initial page included.
             .onChange(of: selectedIndex) { index in
-                withAnimation { proxy.scrollTo(index, anchor: .center) }
+                withAnimation { proxy.scrollTo(index, anchor: .leading) }
+            }
+            .onAppear {
+                guard selectedIndex > 0 else { return }
+                DispatchQueue.main.async { proxy.scrollTo(selectedIndex, anchor: .leading) }
             }
         }
     }
@@ -346,6 +351,11 @@ private struct TabFramePreferenceKey: PreferenceKey {
 // Card tab bar
 // ---------------------------------------------------------------------------
 
+private let cardTabHeight: CGFloat = 40
+private let cardTabActiveHeight: CGFloat = 44
+
+/// Two layers, as in Compose / react-kits: a flat strip where every tab looks unselected,
+/// and one raised card for the active tab, 4pt taller and joined to the strip by curved ears.
 private struct CardTabBar: View {
     @Environment(\.appTheme) private var theme
 
@@ -357,47 +367,116 @@ private struct CardTabBar: View {
     let onPress: (Int) -> Void
 
     var body: some View {
-        HStack(alignment: .bottom, spacing: 0) {
-            ForEach(tabs.indices, id: \.self) { index in
-                let tab = tabs[index]
-                let isActive = selectedIndex == index
-                let iconColor = isActive ? selectedColor : unselectedColor
-
-                SwiftUI.Button(action: { onPress(index) }) {
-                    cardItem(tab: tab, isActive: isActive, iconColor: iconColor)
-                        .frame(maxWidth: .infinity)
-                        .frame(height: isActive ? 44 : 40)
-                        .background(isActive ? theme.colors.background.surface : theme.colors.background.tonal)
-                        .clipShape(UnstyledRoundedRectangle(topLeft: Radius.M, topRight: Radius.M))
-                        .contentShape(Rectangle())
+        GeometryReader { geo in
+            let itemWidth = geo.size.width / CGFloat(Swift.max(tabs.count, 1))
+
+            ZStack(alignment: .bottomLeading) {
+                HStack(spacing: 0) {
+                    ForEach(tabs.indices, id: \.self) { index in
+                        SwiftUI.Button(action: { onPress(index) }) {
+                            cardItem(tab: tabs[index], isActive: false)
+                                .padding(.horizontal, Spacing.S)
+                                .frame(width: itemWidth, height: cardTabHeight)
+                                .background(Colors.black02)
+                                .clipShape(UnstyledRoundedRectangle(topLeft: Radius.M, topRight: Radius.M))
+                                .contentShape(Rectangle())
+                        }
+                        .buttonStyle(ActiveOpacityButtonStyle())
+                    }
+                }
+
+                if let active = tabs[safe: selectedIndex] {
+                    activeCard(active, itemWidth: itemWidth)
                 }
-                .buttonStyle(ActiveOpacityButtonStyle())
             }
+            .frame(width: geo.size.width, height: cardTabActiveHeight, alignment: .bottomLeading)
         }
-        .frame(maxWidth: .infinity)
-        .padding(.top, Spacing.XS)
+        // The raised card overflows the strip into the top `Spacing.XS` margin.
+        .frame(height: cardTabActiveHeight)
+    }
+
+    private func activeCard(_ tab: TabViewItem, itemWidth: CGFloat) -> some View {
+        let surface = theme.colors.background.surface
+        let pathWidth: CGFloat = tabs.count > 2 ? 22 : 28
+        let isFirst = selectedIndex == 0
+        let isLast = selectedIndex == tabs.count - 1
+
+        return HStack(alignment: .bottom, spacing: 0) {
+            // Each ear is nudged 8pt under the card so the join has no seam.
+            if !isFirst { cardEar(mirrored: true, width: pathWidth, color: surface).offset(x: 8) }
+            SwiftUI.Button(action: { onPress(selectedIndex) }) {
+                cardItem(tab: tab, isActive: true)
+                    .padding(.horizontal, tabs.count == 3 ? Spacing.S : Spacing.M)
+                    .frame(width: itemWidth, height: cardTabActiveHeight)
+                    .background(surface)
+                    .clipShape(UnstyledRoundedRectangle(topLeft: Radius.M, topRight: Radius.M))
+                    .contentShape(Rectangle())
+            }
+            .buttonStyle(ActiveOpacityButtonStyle())
+            if !isLast { cardEar(mirrored: false, width: pathWidth, color: surface).offset(x: -8) }
+        }
+        .offset(x: itemWidth * CGFloat(selectedIndex) - (isFirst ? 0 : pathWidth))
+    }
+
+    private func cardEar(mirrored: Bool, width: CGFloat, color: Color) -> some View {
+        CardTabEarShape(mirrored: mirrored)
+            .fill(color)
+            .frame(width: width, height: cardTabActiveHeight)
+            .clipped()
+            .allowsHitTesting(false)
     }
 
     @ViewBuilder
-    private func cardItem(tab: TabViewItem, isActive: Bool, iconColor: Color) -> some View {
+    private func cardItem(tab: TabViewItem, isActive: Bool) -> some View {
+        let color = isActive ? selectedColor : unselectedColor
         HStack(spacing: 0) {
             if let renderIcon = tab.renderIcon {
                 renderIcon(isActive)
                 Spacer().frame(width: Spacing.XS)
             } else if let icon = tab.icon {
-                Icon(source: icon, size: 18, color: iconColor)
+                Icon(source: icon, size: 18, color: color)
                 Spacer().frame(width: Spacing.XS)
             }
             MomoText(
                 tab.title,
                 typography: isActive ? .headerSSemibold : .bodyDefaultRegular,
-                color: isActive ? selectedColor : unselectedColor
+                color: color
             )
             .lineLimit(1)
 
             tabBadge(tab)
         }
-        .padding(.horizontal, Spacing.S)
+    }
+}
+
+/// react-kits' 28x44 ear path, in points; not scaled to the frame, which clips it at a 22pt width.
+private struct CardTabEarShape: Shape {
+    let mirrored: Bool
+
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+        path.move(to: CGPoint(x: 0, y: 0))
+        path.addLine(to: CGPoint(x: 0.60765, y: 0))
+        path.addCurve(
+            to: CGPoint(x: 12.4602, y: 10.0244),
+            control1: CGPoint(x: 6.47582, y: 0),
+            control2: CGPoint(x: 11.4819, y: 4.23831)
+        )
+        path.addCurve(
+            to: CGPoint(x: 16.6925, y: 34),
+            control1: CGPoint(x: 13.9248, y: 18.6872),
+            control2: CGPoint(x: 15.9294, y: 30.37)
+        )
+        path.addCurve(
+            to: CGPoint(x: 27.9996, y: 44),
+            control1: CGPoint(x: 17.9536, y: 40),
+            control2: CGPoint(x: 22.259, y: 44)
+        )
+        path.addLine(to: CGPoint(x: 0, y: 44))
+        path.closeSubpath()
+        return mirrored
+            ? path.applying(CGAffineTransform(a: -1, b: 0, c: 0, d: 1, tx: rect.width, ty: 0))
+            : path
     }
 }
 
@@ -426,6 +505,8 @@ private struct TabItemView: View {
                     rowBody
                 }
             }
+            // Equal-width bars hit-test the whole cell, like Compose's weighted clickable.
+            .frame(maxWidth: scrollable ? nil : .infinity)
             .contentShape(Rectangle())
         }
         .buttonStyle(ActiveOpacityButtonStyle())

package/ios/Tag/Tag.swift

@@ -45,26 +45,37 @@ public struct Tag: View {
         }
     }
 
+    // RN only accepts the `_03` palette as a custom tag color.
+    private static let customColors: [Color] = [
+        Colors.black03, Colors.pink03, Colors.violet03, Colors.indigo03,
+        Colors.blue03, Colors.mint03, Colors.green03, Colors.lime03,
+        Colors.yellow03, Colors.gold03, Colors.orange03, Colors.red03
+    ]
+
     private let label: String
     private let icon: String?
     private let color: TagColor
     private let size: TagSize
+    private let customColor: Color?
 
     public init(
         label: String = "Label",
         icon: String? = nil,
         color: TagColor = .default,
-        size: TagSize = .large
+        size: TagSize = .large,
+        customColor: Color? = nil
     ) {
         self.label = label
         self.icon = icon
         self.color = color
         self.size = size
+        self.customColor = customColor
     }
 
     public var body: some View {
-        let tagColor = color.backgroundColor
-        let labelColor = color.textColor
+        let custom = customColor.flatMap { Self.customColors.contains($0) ? $0 : nil }
+        let tagColor = custom ?? color.backgroundColor
+        let labelColor = custom != nil ? Colors.black01 : color.textColor
 
         HStack(spacing: 0) {
             if let icon {
@@ -75,7 +86,7 @@ public struct Tag: View {
         .frame(height: fontScale(size.height))
         .padding(.horizontal, Spacing.S)
         .background(
-            RoundedRectangle(cornerRadius: Radius.S, style: .continuous)
+            RoundedRectangle(cornerRadius: Radius.S)
                 .fill(tagColor)
         )
     }

package/ios/Template/Logo/Logo.swift

@@ -57,7 +57,8 @@ private extension View {
     func containerBackground (_ type: String, _ useBackground: Bool, _ backgroundColor: Color) -> some View {
         Group {
             if (useBackground && type != "icon") {
-                self.background(backgroundColor)
+                // Same shape as the border, or the square corners (and the shadow) show around it.
+                self.background(RoundedRectangle(cornerRadius: 8).fill(backgroundColor))
             } else {
                 self
             }

package/ios/Template/TrustBanner/TrustBanner.swift

@@ -70,7 +70,7 @@ let defaultBanner = TrustBannerData(
         "vi": "Tìm hiểu thêm",
         "en": "Learn more"
     ],
-    pciImage: "https://static.momocdn.net/app/img/kits/trustBanner/pci.png",
+    pciImage: "https://static.momocdn.net/app/img/kits/trustBanner/pci_dss.png",
     momoImage: "https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png",
     sslImage: "https://static.momocdn.net/app/img/kits/trustBanner/ssl.png",
     icons: [
@@ -87,9 +87,20 @@ public struct TrustBanner: View {
     @Environment(\.localize) private var localize
 
     var onPress: ((String)->Void)?
+    private let serviceName: String
+    private let screenName: String
+    private let trackEvent: ((String, [String: String]) -> Void)?
 
-    public init(onPress: ((String)->Void)?) {
+    public init(
+        onPress: ((String)->Void)?,
+        serviceName: String = "",
+        screenName: String = "",
+        trackEvent: ((String, [String: String]) -> Void)? = nil
+    ) {
         self.onPress = onPress
+        self.serviceName = serviceName
+        self.screenName = screenName
+        self.trackEvent = trackEvent
     }
 
     private var banner: TrustBannerData {
@@ -97,46 +108,50 @@ public struct TrustBanner: View {
     }
 
     func onPressSecurity() {
+        trackEvent?("service_component_clicked", [
+            "service_name": serviceName,
+            "screen_name": screenName,
+            "component_name": "logo_trust",
+            "url_config": banner.urlConfig
+        ])
         onPress?(banner.urlConfig)
     }
 
-
     public var body: some View {
-        HStack(alignment: .center, spacing: 8) {
+        HStack(alignment: .top, spacing: 10) {
             if let momoImage = banner.momoImage {
                 WebImage(url: URL(string: momoImage))
                     .resizable()
                     .scaledToFit()
                     .frame(width: 64, height: 64)
             }
-            VStack(alignment: .leading){
-                Text(localize.translateData(banner.content))
-                    .foregroundColor(Color(hex: "484848"))
-                    .lineLimit(2)
-                    .font(.system(size: 13, weight: Font.Weight.regular))
-                    .ignoreBoldTextSetting()
-                    .lineSpacing(3)
-                    .padding(.bottom, 8)
-                HStack {
+            VStack(alignment: .leading, spacing: 0) {
+                MomoText(
+                    localize.translateData(banner.content),
+                    typography: .descriptionDefaultRegular,
+                    color: Color(hex: "484848"),
+                    maxLines: 2
+                )
+                .padding(.bottom, 8)
+                HStack(alignment: .top, spacing: 0) {
                     HStack(spacing: 0) {
-                        Text(localize.translateData(banner.subContent))
-                            .foregroundColor(Colors.pink03)
-                            .font(.system(size: 13, weight: .bold))
-                            .ignoreBoldTextSetting()
-                            .padding(.trailing, 4)
-                        
+                        MomoText(
+                            localize.translateData(banner.subContent),
+                            typography: .actionXsBold,
+                            color: Colors.pink03,
+                            maxLines: 2
+                        )
                         Icon(source: "arrow_chevron_right_small", color: Colors.pink03)
-                    }.onTapGesture {
-                        onPressSecurity()
                     }
-                    
-                    Spacer()
-                    HStack{
+
+                    Spacer(minLength: 0)
+                    HStack(spacing: 0) {
                         if let pciImage = banner.pciImage {
                             WebImage(url: URL(string: pciImage))
                                 .resizable()
                                 .scaledToFit()
-                                .frame(width: 24, height: 20)
+                                .frame(width: 27, height: 20)
+                                .padding(.trailing, 4)
                         }
                         if let sslImage = banner.sslImage {
                             WebImage(url: URL(string: sslImage))
@@ -146,13 +161,12 @@ public struct TrustBanner: View {
                         }
                     }
                 }
-                
             }
-            
         }
         .padding(.all, 12)
         .background(Color(hex: "F2F8FF"))
         .cornerRadius(12)
+        .contentShape(Rectangle())
         .onTapGesture {
             onPressSecurity()
         }

package/ios/Title/Title.swift

@@ -28,7 +28,6 @@ public enum TitleButtonSize {
 
 public struct Title: View {
     @Environment(\.appTheme) private var theme
-    @Environment(\.momoFontScale) private var fontScale
 
     private let title: String
     private let type: TitleType
@@ -116,15 +115,9 @@ public struct Title: View {
         }
     }
 
-    private var titleFontWeight: Font.Weight {
-        switch type {
-        case .card: return .regular
-        case .section: return .bold
-        }
-    }
-
     private var titleMaxLines: Int {
-        (showTrailingAction || badgeLabel != nil) ? 1 : 2
+        if textOnly { return Int.max }
+        return (showTrailingAction || badgeLabel != nil) ? 1 : 2
     }
 
     private var iconVerticalAlignment: VerticalAlignment {
@@ -151,14 +144,10 @@ public struct Title: View {
         }
     }
 
+    // Every Title variant is bold in the theme font; `headerDefaultBold` only supplies the weight.
     private var titleText: some View {
-        SwiftUI.Text(title)
-            .font(.system(size: fontScale(titleFontSize), weight: titleFontWeight))
-            .ignoreBoldTextSetting()
-            .foregroundColor(theme.colors.text.default)
-            .lineSpacing(fontScale(titleLineHeight) - fontScale(titleFontSize))
-            .lineLimit(titleMaxLines)
-            .truncationMode(.tail)
+        MomoText(title, typography: .headerDefaultBold, maxLines: titleMaxLines)
+            .fontSize(titleFontSize, lineHeight: titleLineHeight)
     }
 
     private var fullLayout: some View {
@@ -237,7 +226,7 @@ public struct Title: View {
             }
         }
         .frame(maxWidth: .infinity, alignment: .leading)
-        .padding(8)
+        .padding(.top, type == .section ? Spacing.S : 0)
     }
 }
 

package/ios/Tooltip/Tooltip.swift

@@ -3,7 +3,7 @@ import SwiftUI
 // MARK: - Types
 
 /// Tooltip placement relative to the anchor element.
-public enum TooltipPlacement {
+public enum TooltipPlacement: Sendable {
     case top
     case bottom
     case left
@@ -78,24 +78,37 @@ struct TooltipArrowShape: Shape {
     func path(in rect: CGRect) -> Path {
         let w = rect.width
         let h = rect.height
-        var path = Path()
+        let points: [CGPoint]
         switch placement {
         case .top:
-            path.move(to: CGPoint(x: 0, y: 0))
-            path.addLine(to: CGPoint(x: w, y: 0))
-            path.addLine(to: CGPoint(x: w / 2, y: h))
+            points = [CGPoint(x: 0, y: 0), CGPoint(x: w, y: 0), CGPoint(x: w / 2, y: h)]
         case .bottom:
-            path.move(to: CGPoint(x: 0, y: h))
-            path.addLine(to: CGPoint(x: w, y: h))
-            path.addLine(to: CGPoint(x: w / 2, y: 0))
+            points = [CGPoint(x: 0, y: h), CGPoint(x: w, y: h), CGPoint(x: w / 2, y: 0)]
         case .left:
-            path.move(to: CGPoint(x: 0, y: 0))
-            path.addLine(to: CGPoint(x: 0, y: h))
-            path.addLine(to: CGPoint(x: w, y: h / 2))
+            points = [CGPoint(x: 0, y: 0), CGPoint(x: 0, y: h), CGPoint(x: w, y: h / 2)]
         case .right:
-            path.move(to: CGPoint(x: w, y: 0))
-            path.addLine(to: CGPoint(x: w, y: h))
-            path.addLine(to: CGPoint(x: 0, y: h / 2))
+            points = [CGPoint(x: w, y: 0), CGPoint(x: w, y: h), CGPoint(x: 0, y: h / 2)]
+        }
+        // rounded like Compose's cornerPathEffect: each corner is cut `radius` along both edges
+        let radius = TooltipConst.arrowCornerRadius
+        func toward(_ from: CGPoint, _ to: CGPoint) -> CGPoint {
+            let dx = to.x - from.x
+            let dy = to.y - from.y
+            let length = (dx * dx + dy * dy).squareRoot()
+            guard length > 0 else { return from }
+            let distance = min(radius, length / 2)
+            return CGPoint(x: from.x + dx / length * distance, y: from.y + dy / length * distance)
+        }
+        var path = Path()
+        for index in 0..<points.count {
+            let corner = points[index]
+            let start = toward(corner, points[(index + points.count - 1) % points.count])
+            if index == 0 {
+                path.move(to: start)
+            } else {
+                path.addLine(to: start)
+            }
+            path.addQuadCurve(to: toward(corner, points[(index + 1) % points.count]), control: corner)
         }
         path.closeSubpath()
         return path
@@ -209,6 +222,8 @@ private struct TooltipPositionModifier: ViewModifier {
                 }
             )
             .offset(x: originX, y: originY)
+            // the first pass has no size yet and would flash at the wrong spot
+            .opacity(popupSize == .zero ? 0 : 1)
     }
 
     private var originX: CGFloat {

package/ios/Typography/Text.swift

@@ -99,28 +99,47 @@ public extension TypographyStyle {
     }
 }
 
-private func momoFontName(family: String, weight: Font.Weight) -> String? {
-    // Ngoai whitelist thi tra nil de momoFont() roi ve .system(...), dung nhu truoc DS-791.
-    guard KitDesignSystem.shared.isWhiteList else { return nil }
+private enum MomoFontFace {
+    case system
+    case named(String)
+}
+
+/// Port of Compose `getFontFamily`; SF Pro Text is the iOS system font, so the legacy family is `.system`.
+private func momoFontFace(family: String, weight: Font.Weight) -> MomoFontFace? {
+    let isNewFamily = family == "MomoTrustSans" || family == headerFontFamily
+    // Outside the whitelist the new DS families drop to the legacy font, as before DS-791.
+    if family == "SFProText" || (isNewFamily && !KitDesignSystem.shared.isWhiteList) { return .system }
+    // single-file families (Compose maps every weight to the same .otf)
+    if family == headerFontFamily || family == "MoMoSignature" { return .named(family) }
     guard family == "MomoTrustSans" else { return nil }
     switch weight {
-    case .ultraLight, .thin: return "MomoTrustSans-ExtraLight"
-    case .light: return "MomoTrustSans-Light"
-    case .regular: return "MomoTrustSans-Regular"
-    case .medium: return "MomoTrustSans-Medium"
-    case .semibold: return "MomoTrustSans-SemiBold"
-    case .bold: return "MomoTrustSans-Bold"
-    case .heavy, .black: return "MomoTrustSans-ExtraBold"
-    default: return "MomoTrustSans-Regular"
+    case .ultraLight, .thin: return .named("MomoTrustSans-ExtraLight")
+    case .light: return .named("MomoTrustSans-Light")
+    case .regular: return .named("MomoTrustSans-Regular")
+    case .medium: return .named("MomoTrustSans-Medium")
+    case .semibold: return .named("MomoTrustSans-SemiBold")
+    case .bold: return .named("MomoTrustSans-Bold")
+    case .heavy, .black: return .named("MomoTrustSans-ExtraBold")
+    default: return .named("MomoTrustSans-Regular")
     }
 }
 
-private func momoFont(size: CGFloat, weight: Font.Weight, family: String) -> Font {
-    guard let name = momoFontName(family: family, weight: weight),
-          UIFont(name: name, size: size) != nil else {
+/// Header title family (Compose `HEADER_FONT_FAMILY`), whitelist only like the default font.
+let headerFontFamily = "MoMoTrustDisplay"
+
+private func momoFont(size: CGFloat, weight: Font.Weight, family: String, fallbackFamily: String? = nil) -> Font {
+    switch momoFontFace(family: family, weight: weight) {
+    case .system:
+        return .system(size: size, weight: weight)
+    case .named(let name) where UIFont(name: name, size: size) != nil:
+        return .custom(name, fixedSize: size)
+    default:
+        // Compose falls back to the default font file when a family is missing
+        if let fallbackFamily, fallbackFamily != family {
+            return momoFont(size: size, weight: weight, family: fallbackFamily)
+        }
         return .system(size: size, weight: weight)
     }
-    return .custom(name, fixedSize: size)
 }
 
 public struct MomoText: View {
@@ -139,7 +158,12 @@ public struct MomoText: View {
     private let letterSpacing: CGFloat?
     private let softWrap: Bool
     private let accessibilityId: String?
+    private let fontFamily: String?
     private var highlightText: [String] = []
+    private var sizeOverride: (fontSize: CGFloat, lineHeight: CGFloat)?
+
+    private var fontSize: CGFloat { sizeOverride?.fontSize ?? typography.fontSize }
+    private var lineHeight: CGFloat { sizeOverride?.lineHeight ?? typography.lineHeight }
 
     public init(
         _ content: String,
@@ -153,7 +177,8 @@ public struct MomoText: View {
         underline: Bool = false,
         letterSpacing: CGFloat? = nil,
         softWrap: Bool = true,
-        accessibilityId: String? = nil
+        accessibilityId: String? = nil,
+        fontFamily: String? = nil
     ) {
         self.content = content
         self.typography = typography
@@ -175,6 +200,7 @@ public struct MomoText: View {
         self.letterSpacing = letterSpacing
         self.softWrap = softWrap
         self.accessibilityId = accessibilityId
+        self.fontFamily = fontFamily
     }
 
     init(_ content: String, typography: TypographyStyle, highlightText: [String]) {
@@ -182,11 +208,27 @@ public struct MomoText: View {
         self.highlightText = highlightText
     }
 
+    /// Compose's `style.copy(fontSize, lineHeight)`; the weight still comes from `typography`.
+    func fontSize(_ fontSize: CGFloat, lineHeight: CGFloat) -> MomoText {
+        var text = self
+        text.sizeOverride = (fontSize, lineHeight)
+        return text
+    }
+
+    private var font: Font {
+        momoFont(
+            size: fontScale(fontSize),
+            weight: typography.fontWeight,
+            family: fontFamily ?? theme.font,
+            fallbackFamily: theme.font
+        )
+    }
+
     // Whole-word matches of `highlightText` render semibold; the longest keyword wins (RN parity).
     private var baseText: SwiftUI.Text {
         let keywords = highlightText.filter { !$0.isEmpty }.sorted { $0.count > $1.count }
         guard !keywords.isEmpty else { return SwiftUI.Text(content) }
-        let highlightFont = momoFont(size: fontScale(typography.fontSize), weight: TypographyStyle.headerXsSemibold.fontWeight, family: theme.font)
+        let highlightFont = momoFont(size: fontScale(fontSize), weight: TypographyStyle.headerXsSemibold.fontWeight, family: fontFamily ?? theme.font, fallbackFamily: theme.font)
         func isWordChar(_ character: Character?) -> Bool {
             guard let character else { return false }
             return character.isLetter || character.isNumber || character == "_"
@@ -223,7 +265,7 @@ public struct MomoText: View {
         let isStrikethrough = strikethrough || typography.isStrikethrough
 
         var text = baseText
-            .font(momoFont(size: fontScale(typography.fontSize), weight: typography.fontWeight, family: theme.font))
+            .font(font)
             .foregroundColor(textColor)
             .strikethrough(isStrikethrough, color: textColor)
             .underline(underline, color: textColor)
@@ -234,7 +276,7 @@ public struct MomoText: View {
 
         return text
             .multilineTextAlignment(textAlign)
-            .lineSpacing(fontScale(typography.lineHeight) - fontScale(typography.fontSize))
+            .lineSpacing(fontScale(lineHeight) - fontScale(fontSize))
             .modifier(LineLimitModifier(range: lineLimitRange))
             .truncationMode(truncationMode)
             .fixedSize(horizontal: !softWrap, vertical: false)

package/ios/Uploader/Uploader.swift

@@ -80,7 +80,9 @@ public struct Uploader: View {
 
             ScrollView(.horizontal, showsIndicators: false) {
                 HStack(alignment: .top, spacing: Spacing.S) {
-                    ForEach(Array(images.enumerated()), id: \.element.id) { index, image in
+                    // Positional like Compose: `UploadImage.id` is a fresh UUID per init, so hosts that
+                    // rebuild the array each render would otherwise re-create (and reload) every thumbnail.
+                    ForEach(Array(images.enumerated()), id: \.offset) { index, image in
                         UploaderImageItem(
                             image: image,
                             width: width,

package/ios/native-kits.podspec

@@ -37,6 +37,7 @@ Pod::Spec.new do |s|
     "Layout/**/*.{swift,m,h}",
     "Loader/**/*.{swift,m,h}",
     "Lottie/**/*.{swift,m,h}",
+    "Navigation/**/*.{swift,m,h}",
     "OTPKeyboard/**/*.{swift,m,h}",
     "Pagination/**/*.{swift,m,h}",
     "Popup/**/*.{swift,m,h}",