react-native-platform-components 0.8.10 → 0.9.0

package/ios/PCSegmentedControl.swift

@@ -6,16 +6,63 @@ struct PCSegmentedControlSegment {
     let label: String
     let value: String
     let disabled: Bool
-    let icon: String
+    /// "", "sfSymbol", "drawable" (ignored on iOS) or "image"
+    let iconType: String
+    let iconName: String
+    let iconUri: String
+    let iconScale: CGFloat
+    let iconTinted: Bool
+    let badge: String
+    let accessibilityLabel: String
+
+    var hasIcon: Bool { iconType == "sfSymbol" || iconType == "image" }
+
+    /// What VoiceOver announces for the segment, badge included.
+    var spokenLabel: String {
+        let base = accessibilityLabel.isEmpty ? label : accessibilityLabel
+        return badge.isEmpty ? base : "\(base), \(badge)"
+    }
+}
+
+/// A capsule badge drawn over a segment's top-right corner.
+private final class PCBadgeLabel: UILabel {
+    static let height: CGFloat = 16
+    static let horizontalPadding: CGFloat = 5
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        font = .systemFont(ofSize: 11, weight: .semibold)
+        textAlignment = .center
+        layer.cornerRadius = Self.height / 2
+        clipsToBounds = true
+        isUserInteractionEnabled = false
+        // The segment announces the badge; don't expose it twice
+        isAccessibilityElement = false
+    }
+
+    required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
+
+    override var intrinsicContentSize: CGSize {
+        let base = super.intrinsicContentSize
+        return CGSize(
+            width: max(Self.height, base.width + Self.horizontalPadding * 2),
+            height: Self.height
+        )
+    }
 }
 
 @objcMembers
 public final class PCSegmentedControlView: UIControl {
     // MARK: - Props (set from ObjC++)
 
-    /// ObjC++ sets this as an array of dictionaries: [{label, value, disabled, icon}]
+    /// ObjC++ sets this as an array of dictionaries; see `rebuildControl` for keys.
     public var segments: [Any] = [] { didSet { rebuildControl() } }
 
+    /// "auto" | "labeled" | "unlabeled"
+    public var labelVisibility: String = "auto" {
+        didSet { if oldValue != labelVisibility { rebuildControl() } }
+    }
+
     /// Controlled selection by value. "" = no selection.
     public var selectedValue: String = "" { didSet { updateSelection() } }
 
@@ -30,18 +77,50 @@ public final class PCSegmentedControlView: UIControl {
         didSet { control.apportionsSegmentWidthsByContent = apportionsSegmentWidthsByContent }
     }
 
-    /// iOS-specific: selected segment tint color (hex string)
-    public var selectedSegmentTintColor: String? { didSet { updateTintColor() } }
+    /// Background of the selected segment
+    public var selectedSegmentColor: UIColor? {
+        didSet { control.selectedSegmentTintColor = selectedSegmentColor }
+    }
+
+    /// Text / icon color of the selected segment
+    public var activeTintColor: UIColor? { didSet { updateTitleAttributes() } }
+
+    /// Text / icon color of unselected segments
+    public var inactiveTintColor: UIColor? { didSet { updateTitleAttributes() } }
+
+    /// Label font; nil keeps the system font
+    public var labelFont: UIFont? {
+        didSet {
+            updateTitleAttributes()
+            invalidateIntrinsicContentSize()
+        }
+    }
+
+    /// Badge background; nil = system red
+    public var badgeBackgroundColor: UIColor? { didSet { updateBadgeColors() } }
+
+    /// Badge text color; nil = white
+    public var badgeTextColor: UIColor? { didSet { updateBadgeColors() } }
 
     // MARK: - Events back to ObjC++
 
     public var onSelect: ((Int, String) -> Void)?  // (index, value)
 
+    /// Called when content changed after layout (an icon finished loading),
+    /// so the Fabric measurement can be refreshed.
+    public var onNeedsRemeasure: (() -> Void)?
+
     // MARK: - Internal
 
     private let control = UISegmentedControl()
     private var parsedSegments: [PCSegmentedControlSegment] = []
 
+    /// Bumped on every rebuild so late image loads can't touch a stale control.
+    private var rebuildGeneration = 0
+
+    /// Badge label per segment index (only segments with a badge have one).
+    private var badgeLabels: [Int: PCBadgeLabel] = [:]
+
     // MARK: - Init
 
     public override init(frame: CGRect) {
@@ -55,6 +134,9 @@ public final class PCSegmentedControlView: UIControl {
     }
 
     private func setup() {
+        // Badges overhang the top edge slightly
+        clipsToBounds = false
+
         control.translatesAutoresizingMaskIntoConstraints = false
         addSubview(control)
 
@@ -82,25 +164,28 @@ public final class PCSegmentedControlView: UIControl {
     private func rebuildControl() {
         parsedSegments = segments.compactMap { any in
             guard let dict = any as? [String: Any] else { return nil }
-            let label = (dict["label"] as? String) ?? ""
-            let value = (dict["value"] as? String) ?? ""
-            let disabled = (dict["disabled"] as? String) == "disabled"
-            let icon = (dict["icon"] as? String) ?? ""
+            let scale = (dict["iconScale"] as? NSNumber).map { CGFloat(truncating: $0) } ?? 1
             return PCSegmentedControlSegment(
-                label: label,
-                value: value,
-                disabled: disabled,
-                icon: icon
+                label: (dict["label"] as? String) ?? "",
+                value: (dict["value"] as? String) ?? "",
+                disabled: (dict["disabled"] as? String) == "disabled",
+                iconType: (dict["iconType"] as? String) ?? "",
+                iconName: (dict["iconName"] as? String) ?? "",
+                iconUri: (dict["iconUri"] as? String) ?? "",
+                iconScale: scale > 0 ? scale : 1,
+                iconTinted: (dict["iconTinted"] as? String) != "false",
+                badge: (dict["badge"] as? String) ?? "",
+                accessibilityLabel: (dict["accessibilityLabel"] as? String) ?? ""
             )
         }
 
+        rebuildGeneration += 1
+        let generation = rebuildGeneration
         control.removeAllSegments()
 
         for (index, segment) in parsedSegments.enumerated() {
-            // Try to use SF Symbol icon if available
-            if !segment.icon.isEmpty,
-               let sfImage = UIImage(systemName: segment.icon) {
-                control.insertSegment(with: sfImage, at: index, animated: false)
+            if let image = iconImage(for: segment, generation: generation) {
+                control.insertSegment(with: image, at: index, animated: false)
             } else {
                 control.insertSegment(withTitle: segment.label, at: index, animated: false)
             }
@@ -109,10 +194,122 @@ public final class PCSegmentedControlView: UIControl {
             control.setEnabled(!segment.disabled, forSegmentAt: index)
         }
 
+        rebuildBadges()
         updateSelection()
         invalidateIntrinsicContentSize()
     }
 
+    // MARK: - Badges
+
+    private func rebuildBadges() {
+        badgeLabels.values.forEach { $0.removeFromSuperview() }
+        badgeLabels = [:]
+
+        for (index, segment) in parsedSegments.enumerated() where !segment.badge.isEmpty {
+            let label = PCBadgeLabel()
+            label.text = segment.badge
+            addSubview(label)
+            badgeLabels[index] = label
+        }
+
+        updateBadgeColors()
+        setNeedsLayout()
+    }
+
+    private func updateBadgeColors() {
+        for label in badgeLabels.values {
+            label.backgroundColor = badgeBackgroundColor ?? .systemRed
+            label.textColor = badgeTextColor ?? .white
+        }
+    }
+
+    /// Frames of the individual segments in the control's coordinate space.
+    /// UISegmentedControl lays each segment out as its own subview, so their
+    /// frames honor proportional widths; if the hierarchy ever looks different
+    /// fall back to equal division.
+    private func segmentFrames() -> [CGRect] {
+        let count = control.numberOfSegments
+        guard count > 0 else { return [] }
+
+        let segmentViews = control.subviews
+            .filter { NSStringFromClass(type(of: $0)) == "UISegment" }
+            .sorted { $0.frame.minX < $1.frame.minX }
+        if segmentViews.count == count {
+            return segmentViews.map { $0.frame }
+        }
+
+        let width = control.bounds.width / CGFloat(count)
+        return (0..<count).map {
+            CGRect(x: CGFloat($0) * width, y: 0, width: width, height: control.bounds.height)
+        }
+    }
+
+    private func layoutBadges() {
+        guard !badgeLabels.isEmpty else { return }
+        control.layoutIfNeeded()
+        let frames = segmentFrames()
+
+        for (index, label) in badgeLabels {
+            guard index < frames.count else {
+                label.isHidden = true
+                continue
+            }
+            label.isHidden = false
+            let segment = convert(frames[index], from: control)
+            let size = label.intrinsicContentSize
+            label.frame = CGRect(
+                x: segment.maxX - size.width - 2,
+                y: segment.minY - size.height / 4,
+                width: size.width,
+                height: size.height
+            )
+        }
+    }
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        layoutBadges()
+    }
+
+    /// Resolves the image shown for a segment, or nil when the segment shows
+    /// its title. UISegmentedControl shows either a title or an image, so
+    /// "labeled" always wins and "auto" / "unlabeled" prefer the icon.
+    ///
+    /// Images that are still loading return nil; the segment starts with its
+    /// title and switches to the image once it arrives.
+    private func iconImage(for segment: PCSegmentedControlSegment, generation: Int) -> UIImage? {
+        guard segment.hasIcon, labelVisibility != "labeled" else { return nil }
+
+        switch segment.iconType {
+        case "sfSymbol":
+            return UIImage(systemName: segment.iconName).map { decorate($0, for: segment) }
+
+        case "image":
+            let cached = PCImageLoader.shared.image(uri: segment.iconUri, scale: segment.iconScale) { [weak self] image in
+                guard let self, let image,
+                      self.rebuildGeneration == generation,
+                      let index = self.parsedSegments.firstIndex(where: { $0.value == segment.value }),
+                      index < self.control.numberOfSegments else { return }
+                self.control.setImage(self.decorate(image, for: segment), forSegmentAt: index)
+                self.invalidateIntrinsicContentSize()
+                self.onNeedsRemeasure?()
+            }
+            return cached.map { decorate($0, for: segment) }
+
+        default:
+            return nil
+        }
+    }
+
+    /// Applies the rendering mode and the VoiceOver label. Rendering-mode
+    /// variants are fresh instances, so the label never leaks onto shared
+    /// system images.
+    private func decorate(_ image: UIImage, for segment: PCSegmentedControlSegment) -> UIImage {
+        let rendered = image.withRenderingMode(segment.iconTinted ? .alwaysTemplate : .alwaysOriginal)
+        rendered.accessibilityLabel = segment.spokenLabel
+        return rendered
+    }
+
     private func updateSelection() {
         if selectedValue.isEmpty {
             control.selectedSegmentIndex = UISegmentedControl.noSegment
@@ -129,12 +326,25 @@ public final class PCSegmentedControlView: UIControl {
         alpha = enabled ? 1.0 : 0.5
     }
 
-    private func updateTintColor() {
-        if let colorString = selectedSegmentTintColor, !colorString.isEmpty {
-            control.selectedSegmentTintColor = UIColor(hex: colorString)
-        } else {
-            control.selectedSegmentTintColor = nil
+    /// UISegmentedControl draws template images with the same foreground
+    /// color as the title for that state, so these attributes style icons too.
+    private func updateTitleAttributes() {
+        var normal: [NSAttributedString.Key: Any] = [:]
+        var selected: [NSAttributedString.Key: Any] = [:]
+
+        if let labelFont {
+            normal[.font] = labelFont
+            selected[.font] = labelFont
         }
+        if let inactiveTintColor {
+            normal[.foregroundColor] = inactiveTintColor
+        }
+        if let activeTintColor {
+            selected[.foregroundColor] = activeTintColor
+        }
+
+        control.setTitleTextAttributes(normal.isEmpty ? nil : normal, for: .normal)
+        control.setTitleTextAttributes(selected.isEmpty ? nil : selected, for: .selected)
     }
 
     // MARK: - Sizing
@@ -167,290 +377,3 @@ public final class PCSegmentedControlView: UIControl {
         )
     }
 }
-
-// MARK: - UIColor parsing extension
-
-private extension UIColor {
-    /// Parses color strings in React Native compatible formats:
-    /// - Hex: #RGB, #RRGGBB, #RRGGBBAA
-    /// - RGB: rgb(r, g, b) where r, g, b are 0-255
-    /// - RGBA: rgba(r, g, b, a) where r, g, b are 0-255 and a is 0-1
-    /// - HSL: hsl(h, s%, l%) where h is 0-360, s and l are 0-100
-    /// - HSLA: hsla(h, s%, l%, a) where h is 0-360, s and l are 0-100, a is 0-1
-    /// - Named colors: red, blue, transparent, etc. (CSS named colors)
-    convenience init?(hex: String) {
-        let trimmed = hex.trimmingCharacters(in: .whitespacesAndNewlines).lowercased()
-
-        // Try named colors first
-        if let namedColor = UIColor.namedColors[trimmed] {
-            self.init(red: namedColor.r, green: namedColor.g, blue: namedColor.b, alpha: namedColor.a)
-            return
-        }
-
-        // Try rgba format: rgba(r, g, b, a)
-        if trimmed.hasPrefix("rgba(") && trimmed.hasSuffix(")") {
-            let inner = String(trimmed.dropFirst(5).dropLast(1))
-            let components = inner.split(separator: ",").map { $0.trimmingCharacters(in: .whitespaces) }
-            guard components.count == 4,
-                  let r = Double(components[0]),
-                  let g = Double(components[1]),
-                  let b = Double(components[2]),
-                  let a = Double(components[3]) else { return nil }
-            self.init(
-                red: CGFloat(r) / 255.0,
-                green: CGFloat(g) / 255.0,
-                blue: CGFloat(b) / 255.0,
-                alpha: CGFloat(a)
-            )
-            return
-        }
-
-        // Try rgb format: rgb(r, g, b)
-        if trimmed.hasPrefix("rgb(") && trimmed.hasSuffix(")") {
-            let inner = String(trimmed.dropFirst(4).dropLast(1))
-            let components = inner.split(separator: ",").map { $0.trimmingCharacters(in: .whitespaces) }
-            guard components.count == 3,
-                  let r = Double(components[0]),
-                  let g = Double(components[1]),
-                  let b = Double(components[2]) else { return nil }
-            self.init(
-                red: CGFloat(r) / 255.0,
-                green: CGFloat(g) / 255.0,
-                blue: CGFloat(b) / 255.0,
-                alpha: 1.0
-            )
-            return
-        }
-
-        // Try hsla format: hsla(h, s%, l%, a)
-        if trimmed.hasPrefix("hsla(") && trimmed.hasSuffix(")") {
-            let inner = String(trimmed.dropFirst(5).dropLast(1))
-            let components = inner.split(separator: ",").map { $0.trimmingCharacters(in: .whitespaces).replacingOccurrences(of: "%", with: "") }
-            guard components.count == 4,
-                  let h = Double(components[0]),
-                  let s = Double(components[1]),
-                  let l = Double(components[2]),
-                  let a = Double(components[3]) else { return nil }
-            let rgb = UIColor.hslToRgb(h: h / 360.0, s: s / 100.0, l: l / 100.0)
-            self.init(red: rgb.r, green: rgb.g, blue: rgb.b, alpha: CGFloat(a))
-            return
-        }
-
-        // Try hsl format: hsl(h, s%, l%)
-        if trimmed.hasPrefix("hsl(") && trimmed.hasSuffix(")") {
-            let inner = String(trimmed.dropFirst(4).dropLast(1))
-            let components = inner.split(separator: ",").map { $0.trimmingCharacters(in: .whitespaces).replacingOccurrences(of: "%", with: "") }
-            guard components.count == 3,
-                  let h = Double(components[0]),
-                  let s = Double(components[1]),
-                  let l = Double(components[2]) else { return nil }
-            let rgb = UIColor.hslToRgb(h: h / 360.0, s: s / 100.0, l: l / 100.0)
-            self.init(red: rgb.r, green: rgb.g, blue: rgb.b, alpha: 1.0)
-            return
-        }
-
-        // Fall back to hex parsing
-        var hexSanitized = trimmed.replacingOccurrences(of: "#", with: "")
-
-        var rgb: UInt64 = 0
-        guard Scanner(string: hexSanitized).scanHexInt64(&rgb) else { return nil }
-
-        let length = hexSanitized.count
-        if length == 6 {
-            self.init(
-                red: CGFloat((rgb & 0xFF0000) >> 16) / 255.0,
-                green: CGFloat((rgb & 0x00FF00) >> 8) / 255.0,
-                blue: CGFloat(rgb & 0x0000FF) / 255.0,
-                alpha: 1.0
-            )
-        } else if length == 8 {
-            self.init(
-                red: CGFloat((rgb & 0xFF000000) >> 24) / 255.0,
-                green: CGFloat((rgb & 0x00FF0000) >> 16) / 255.0,
-                blue: CGFloat((rgb & 0x0000FF00) >> 8) / 255.0,
-                alpha: CGFloat(rgb & 0x000000FF) / 255.0
-            )
-        } else {
-            return nil
-        }
-    }
-
-    // HSL to RGB conversion
-    private static func hslToRgb(h: Double, s: Double, l: Double) -> (r: CGFloat, g: CGFloat, b: CGFloat) {
-        if s == 0 {
-            return (CGFloat(l), CGFloat(l), CGFloat(l))
-        }
-
-        let q = l < 0.5 ? l * (1 + s) : l + s - l * s
-        let p = 2 * l - q
-
-        func hueToRgb(_ p: Double, _ q: Double, _ t: Double) -> Double {
-            var t = t
-            if t < 0 { t += 1 }
-            if t > 1 { t -= 1 }
-            if t < 1/6 { return p + (q - p) * 6 * t }
-            if t < 1/2 { return q }
-            if t < 2/3 { return p + (q - p) * (2/3 - t) * 6 }
-            return p
-        }
-
-        return (
-            CGFloat(hueToRgb(p, q, h + 1/3)),
-            CGFloat(hueToRgb(p, q, h)),
-            CGFloat(hueToRgb(p, q, h - 1/3))
-        )
-    }
-
-    // CSS named colors (React Native compatible)
-    private static let namedColors: [String: (r: CGFloat, g: CGFloat, b: CGFloat, a: CGFloat)] = [
-        "transparent": (0, 0, 0, 0),
-        "aliceblue": (240/255, 248/255, 255/255, 1),
-        "antiquewhite": (250/255, 235/255, 215/255, 1),
-        "aqua": (0, 255/255, 255/255, 1),
-        "aquamarine": (127/255, 255/255, 212/255, 1),
-        "azure": (240/255, 255/255, 255/255, 1),
-        "beige": (245/255, 245/255, 220/255, 1),
-        "bisque": (255/255, 228/255, 196/255, 1),
-        "black": (0, 0, 0, 1),
-        "blanchedalmond": (255/255, 235/255, 205/255, 1),
-        "blue": (0, 0, 255/255, 1),
-        "blueviolet": (138/255, 43/255, 226/255, 1),
-        "brown": (165/255, 42/255, 42/255, 1),
-        "burlywood": (222/255, 184/255, 135/255, 1),
-        "cadetblue": (95/255, 158/255, 160/255, 1),
-        "chartreuse": (127/255, 255/255, 0, 1),
-        "chocolate": (210/255, 105/255, 30/255, 1),
-        "coral": (255/255, 127/255, 80/255, 1),
-        "cornflowerblue": (100/255, 149/255, 237/255, 1),
-        "cornsilk": (255/255, 248/255, 220/255, 1),
-        "crimson": (220/255, 20/255, 60/255, 1),
-        "cyan": (0, 255/255, 255/255, 1),
-        "darkblue": (0, 0, 139/255, 1),
-        "darkcyan": (0, 139/255, 139/255, 1),
-        "darkgoldenrod": (184/255, 134/255, 11/255, 1),
-        "darkgray": (169/255, 169/255, 169/255, 1),
-        "darkgreen": (0, 100/255, 0, 1),
-        "darkgrey": (169/255, 169/255, 169/255, 1),
-        "darkkhaki": (189/255, 183/255, 107/255, 1),
-        "darkmagenta": (139/255, 0, 139/255, 1),
-        "darkolivegreen": (85/255, 107/255, 47/255, 1),
-        "darkorange": (255/255, 140/255, 0, 1),
-        "darkorchid": (153/255, 50/255, 204/255, 1),
-        "darkred": (139/255, 0, 0, 1),
-        "darksalmon": (233/255, 150/255, 122/255, 1),
-        "darkseagreen": (143/255, 188/255, 143/255, 1),
-        "darkslateblue": (72/255, 61/255, 139/255, 1),
-        "darkslategray": (47/255, 79/255, 79/255, 1),
-        "darkslategrey": (47/255, 79/255, 79/255, 1),
-        "darkturquoise": (0, 206/255, 209/255, 1),
-        "darkviolet": (148/255, 0, 211/255, 1),
-        "deeppink": (255/255, 20/255, 147/255, 1),
-        "deepskyblue": (0, 191/255, 255/255, 1),
-        "dimgray": (105/255, 105/255, 105/255, 1),
-        "dimgrey": (105/255, 105/255, 105/255, 1),
-        "dodgerblue": (30/255, 144/255, 255/255, 1),
-        "firebrick": (178/255, 34/255, 34/255, 1),
-        "floralwhite": (255/255, 250/255, 240/255, 1),
-        "forestgreen": (34/255, 139/255, 34/255, 1),
-        "fuchsia": (255/255, 0, 255/255, 1),
-        "gainsboro": (220/255, 220/255, 220/255, 1),
-        "ghostwhite": (248/255, 248/255, 255/255, 1),
-        "gold": (255/255, 215/255, 0, 1),
-        "goldenrod": (218/255, 165/255, 32/255, 1),
-        "gray": (128/255, 128/255, 128/255, 1),
-        "green": (0, 128/255, 0, 1),
-        "greenyellow": (173/255, 255/255, 47/255, 1),
-        "grey": (128/255, 128/255, 128/255, 1),
-        "honeydew": (240/255, 255/255, 240/255, 1),
-        "hotpink": (255/255, 105/255, 180/255, 1),
-        "indianred": (205/255, 92/255, 92/255, 1),
-        "indigo": (75/255, 0, 130/255, 1),
-        "ivory": (255/255, 255/255, 240/255, 1),
-        "khaki": (240/255, 230/255, 140/255, 1),
-        "lavender": (230/255, 230/255, 250/255, 1),
-        "lavenderblush": (255/255, 240/255, 245/255, 1),
-        "lawngreen": (124/255, 252/255, 0, 1),
-        "lemonchiffon": (255/255, 250/255, 205/255, 1),
-        "lightblue": (173/255, 216/255, 230/255, 1),
-        "lightcoral": (240/255, 128/255, 128/255, 1),
-        "lightcyan": (224/255, 255/255, 255/255, 1),
-        "lightgoldenrodyellow": (250/255, 250/255, 210/255, 1),
-        "lightgray": (211/255, 211/255, 211/255, 1),
-        "lightgreen": (144/255, 238/255, 144/255, 1),
-        "lightgrey": (211/255, 211/255, 211/255, 1),
-        "lightpink": (255/255, 182/255, 193/255, 1),
-        "lightsalmon": (255/255, 160/255, 122/255, 1),
-        "lightseagreen": (32/255, 178/255, 170/255, 1),
-        "lightskyblue": (135/255, 206/255, 250/255, 1),
-        "lightslategray": (119/255, 136/255, 153/255, 1),
-        "lightslategrey": (119/255, 136/255, 153/255, 1),
-        "lightsteelblue": (176/255, 196/255, 222/255, 1),
-        "lightyellow": (255/255, 255/255, 224/255, 1),
-        "lime": (0, 255/255, 0, 1),
-        "limegreen": (50/255, 205/255, 50/255, 1),
-        "linen": (250/255, 240/255, 230/255, 1),
-        "magenta": (255/255, 0, 255/255, 1),
-        "maroon": (128/255, 0, 0, 1),
-        "mediumaquamarine": (102/255, 205/255, 170/255, 1),
-        "mediumblue": (0, 0, 205/255, 1),
-        "mediumorchid": (186/255, 85/255, 211/255, 1),
-        "mediumpurple": (147/255, 112/255, 219/255, 1),
-        "mediumseagreen": (60/255, 179/255, 113/255, 1),
-        "mediumslateblue": (123/255, 104/255, 238/255, 1),
-        "mediumspringgreen": (0, 250/255, 154/255, 1),
-        "mediumturquoise": (72/255, 209/255, 204/255, 1),
-        "mediumvioletred": (199/255, 21/255, 133/255, 1),
-        "midnightblue": (25/255, 25/255, 112/255, 1),
-        "mintcream": (245/255, 255/255, 250/255, 1),
-        "mistyrose": (255/255, 228/255, 225/255, 1),
-        "moccasin": (255/255, 228/255, 181/255, 1),
-        "navajowhite": (255/255, 222/255, 173/255, 1),
-        "navy": (0, 0, 128/255, 1),
-        "oldlace": (253/255, 245/255, 230/255, 1),
-        "olive": (128/255, 128/255, 0, 1),
-        "olivedrab": (107/255, 142/255, 35/255, 1),
-        "orange": (255/255, 165/255, 0, 1),
-        "orangered": (255/255, 69/255, 0, 1),
-        "orchid": (218/255, 112/255, 214/255, 1),
-        "palegoldenrod": (238/255, 232/255, 170/255, 1),
-        "palegreen": (152/255, 251/255, 152/255, 1),
-        "paleturquoise": (175/255, 238/255, 238/255, 1),
-        "palevioletred": (219/255, 112/255, 147/255, 1),
-        "papayawhip": (255/255, 239/255, 213/255, 1),
-        "peachpuff": (255/255, 218/255, 185/255, 1),
-        "peru": (205/255, 133/255, 63/255, 1),
-        "pink": (255/255, 192/255, 203/255, 1),
-        "plum": (221/255, 160/255, 221/255, 1),
-        "powderblue": (176/255, 224/255, 230/255, 1),
-        "purple": (128/255, 0, 128/255, 1),
-        "rebeccapurple": (102/255, 51/255, 153/255, 1),
-        "red": (255/255, 0, 0, 1),
-        "rosybrown": (188/255, 143/255, 143/255, 1),
-        "royalblue": (65/255, 105/255, 225/255, 1),
-        "saddlebrown": (139/255, 69/255, 19/255, 1),
-        "salmon": (250/255, 128/255, 114/255, 1),
-        "sandybrown": (244/255, 164/255, 96/255, 1),
-        "seagreen": (46/255, 139/255, 87/255, 1),
-        "seashell": (255/255, 245/255, 238/255, 1),
-        "sienna": (160/255, 82/255, 45/255, 1),
-        "silver": (192/255, 192/255, 192/255, 1),
-        "skyblue": (135/255, 206/255, 235/255, 1),
-        "slateblue": (106/255, 90/255, 205/255, 1),
-        "slategray": (112/255, 128/255, 144/255, 1),
-        "slategrey": (112/255, 128/255, 144/255, 1),
-        "snow": (255/255, 250/255, 250/255, 1),
-        "springgreen": (0, 255/255, 127/255, 1),
-        "steelblue": (70/255, 130/255, 180/255, 1),
-        "tan": (210/255, 180/255, 140/255, 1),
-        "teal": (0, 128/255, 128/255, 1),
-        "thistle": (216/255, 191/255, 216/255, 1),
-        "tomato": (255/255, 99/255, 71/255, 1),
-        "turquoise": (64/255, 224/255, 208/255, 1),
-        "violet": (238/255, 130/255, 238/255, 1),
-        "wheat": (245/255, 222/255, 179/255, 1),
-        "white": (255/255, 255/255, 255/255, 1),
-        "whitesmoke": (245/255, 245/255, 245/255, 1),
-        "yellow": (255/255, 255/255, 0, 1),
-        "yellowgreen": (154/255, 205/255, 50/255, 1)
-    ]
-}

package/lib/commonjs/DatePickerNativeComponent.ts

@@ -1,5 +1,5 @@
 // DatePickerNativeComponent.ts
-import type { CodegenTypes, ViewProps } from 'react-native';
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
 import { codegenNativeComponent } from 'react-native';
 
 export type TimestampMs = CodegenTypes.Double;
@@ -69,4 +69,6 @@ export interface NativeProps extends ViewProps, CommonProps {
   onClosed?: CodegenTypes.BubblingEventHandler<Readonly<{}>>;
 }
 
-export default codegenNativeComponent<NativeProps>('PCDatePicker');
+export default codegenNativeComponent<NativeProps>(
+  'PCDatePicker'
+) as HostComponent<NativeProps>;