react-native-platform-components 0.4.1 → 0.5.1

package/README.md

@@ -1,20 +1,48 @@
 # react-native-platform-components
 
-> 🚧 In development — not ready for public use.
-
-High-quality **native UI components for React Native**, implemented with platform-first APIs and exposed through clean, typed JavaScript interfaces.
-
-This library focuses on **true native behavior**, not JavaScript re-implementations — providing:
-
-- **SelectionMenu** – native selection menus (Material on Android, system menus on iOS)
-- **DatePicker** – native date & time pickers with modal and embedded presentations
-
-The goal is to provide components that:
-
-- Feel **100% native** on each platform
-- Support modern platform design systems (Material 3 on Android, system pickers on iOS)
-- Offer **headless** and **inline** modes for maximum layout control
-- Integrate cleanly with **React Native Codegen / Fabric**
+[![npm version](https://img.shields.io/npm/v/react-native-platform-components.svg)](https://www.npmjs.com/package/react-native-platform-components)
+[![npm downloads](https://img.shields.io/npm/dm/react-native-platform-components.svg)](https://www.npmjs.com/package/react-native-platform-components)
+
+<table>
+  <tr>
+    <td valign="top">
+      <table>
+        <tr>
+          <td align="center"><strong>iOS DatePicker</strong></td>
+          <td align="center"><strong>Android DatePicker</strong></td>
+        </tr>
+        <tr>
+          <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-datepicker.gif" height="350" /></td>
+          <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-datepicker.gif" height="350" /></td>
+        </tr>
+        <tr>
+          <td align="center"><strong>iOS SelectionMenu</strong></td>
+          <td align="center"><strong>Android SelectionMenu</strong></td>
+        </tr>
+        <tr>
+          <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-selectionmenu.gif" height="350" /></td>
+          <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-selectionmenu.gif" height="350" /></td>
+        </tr>
+      </table>
+    </td>
+    <td valign="top">
+      <blockquote>🚧 In development — not ready for public use.</blockquote>
+      <p>High-quality <strong>native UI components for React Native</strong>, implemented with platform-first APIs and exposed through clean, typed JavaScript interfaces.</p>
+      <p>This library focuses on <strong>true native behavior</strong>, not JavaScript re-implementations — providing:</p>
+      <ul>
+        <li><strong>SelectionMenu</strong> – native selection menus (Material on Android, system menus on iOS)</li>
+        <li><strong>DatePicker</strong> – native date & time pickers with modal and embedded presentations</li>
+      </ul>
+      <p>The goal is to provide components that:</p>
+      <ul>
+        <li>Feel <strong>100% native</strong> on each platform</li>
+        <li>Support modern platform design systems (Material 3 on Android, system pickers on iOS)</li>
+        <li>Offer <strong>headless</strong> and <strong>inline</strong> modes for maximum layout control</li>
+        <li>Integrate cleanly with <strong>React Native Codegen / Fabric</strong></li>
+      </ul>
+    </td>
+  </tr>
+</table>
 
 ---
 
@@ -183,6 +211,8 @@ Native selection menu with **inline** and **headless** modes.
 - **Headless mode** (default): Menu visibility controlled by `visible` prop. Use for custom trigger UI.
 - **Inline mode** (`inlineMode={true}`): Native picker UI rendered inline. Menu managed internally.
 
+> **Note:** On iOS, headless mode uses a custom popover to enable programmatic presentation. For the full native menu experience (system animations, scroll physics), use inline mode. This is an intentional trade-off: headless gives you control over the trigger UI, inline gives you the complete system menu behavior.
+
 ---
 
 ## DatePicker
@@ -218,7 +248,7 @@ Native date & time picker using **platform system pickers**.
 | Prop | Type | Description |
 |------|------|-------------|
 | `firstDayOfWeek` | `number` | First day of week (1-7, Sunday=1) |
-| `material` | `'system' \| 'm3'` | Material Design style |
+| `material` | `'system' \| 'm3'` | Material Design style (modal only; embedded always uses system picker) |
 | `dialogTitle` | `string` | Custom dialog title |
 | `positiveButtonTitle` | `string` | Custom confirm button text |
 | `negativeButtonTitle` | `string` | Custom cancel button text |
@@ -235,6 +265,17 @@ Native date & time picker using **platform system pickers**.
 
 ---
 
+## Theming
+
+This library does not expose theming props. Components inherit their appearance from your app's native platform theme.
+
+- **iOS**: Components follow system appearance (light/dark mode) and use system-defined styles (e.g., `UIBlurEffect` for menu backgrounds). These are not customizable per-component.
+- **Android**: Components respect your app's Material Theme. Customize via your `styles.xml` or Material 3 theme configuration.
+
+This is intentional. The goal is native fidelity, not pixel-level customization. If you need custom styling beyond what the platform theme provides, this library may not be the right fit.
+
+---
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

package/android/src/main/java/com/platformcomponents/PCDatePickerView.kt

@@ -136,14 +136,16 @@ class PCDatePickerView(context: Context) : FrameLayout(context) {
     minDateMs = value
     // clamp if needed
     dateMs = clamp(dateMs ?: System.currentTimeMillis())
-    syncInlineFromState()
+    // Rebuild inline picker to apply new min date (avoids CalendarView bugs)
+    if (isInline()) rebuildUI() else syncInlineFromState()
   }
 
   fun applyMaxDateMs(value: Long?) {
     maxDateMs = value
     // clamp if needed
     dateMs = clamp(dateMs ?: System.currentTimeMillis())
-    syncInlineFromState()
+    // Rebuild inline picker to apply new max date (avoids CalendarView bugs)
+    if (isInline()) rebuildUI() else syncInlineFromState()
   }
 
   /**
@@ -205,8 +207,11 @@ class PCDatePickerView(context: Context) : FrameLayout(context) {
           ViewGroup.LayoutParams.WRAP_CONTENT,
           ViewGroup.LayoutParams.WRAP_CONTENT
         )
-        calendarViewShown = true
-        spinnersShown = false
+        // Use spinner mode to avoid CalendarView rendering bugs when scrolling months
+        calendarViewShown = false
+        spinnersShown = true
+        minDateMs?.let { minDate = it }
+        maxDateMs?.let { maxDate = it }
       }
       container.addView(dp)
       inlineDatePicker = dp
@@ -239,7 +244,14 @@ class PCDatePickerView(context: Context) : FrameLayout(context) {
     inlineContainer = container
 
     syncInlineFromState()
-    requestLayout()
+
+    // Force layout refresh - post to ensure React Native's layout system picks it up
+    post {
+      requestLayout()
+      invalidate()
+      // Also request layout from parent to notify React Native
+      (parent as? ViewGroup)?.requestLayout()
+    }
   }
 
   private fun syncInlineFromState() {
@@ -253,10 +265,8 @@ class PCDatePickerView(context: Context) : FrameLayout(context) {
     suppressInlineCallbacks = true
     try {
       inlineDatePicker?.let { dp ->
-        // Apply min/max bounds on the widget itself where possible
-        minDateMs?.let { dp.minDate = it }
-        maxDateMs?.let { dp.maxDate = it }
-
+        // Note: min/max dates are set during picker creation in rebuildUI()
+        // to avoid CalendarView rendering bugs from repeated updates
         val y = cal.get(Calendar.YEAR)
         val m = cal.get(Calendar.MONTH)
         val d = cal.get(Calendar.DAY_OF_MONTH)
@@ -319,20 +329,28 @@ class PCDatePickerView(context: Context) : FrameLayout(context) {
 
   private fun presentIfNeeded() {
     if (showingModal) return
-    val act = findFragmentActivity() ?: run {
-      Log.w(TAG, "presentIfNeeded: no FragmentActivity found")
-      onCancel?.invoke()
-      showingModal = false
-      return
-    }
-
-    Log.d(TAG, "presentIfNeeded mode=$mode material=$androidMaterialMode")
     showingModal = true
 
-    when (mode) {
-      "time" -> presentTime(act)
-      "dateAndTime" -> presentDateThenTime(act)
-      else -> presentDate(act)
+    // Defer presentation to the next frame to ensure all props from the current
+    // React Native batch are applied first. This guarantees dateMs reflects the
+    // latest value from React Native before we create the dialog.
+    post {
+      if (!showingModal) return@post
+
+      val act = findFragmentActivity() ?: run {
+        Log.w(TAG, "presentIfNeeded: no FragmentActivity found")
+        onCancel?.invoke()
+        showingModal = false
+        return@post
+      }
+
+      Log.d(TAG, "presentIfNeeded mode=$mode material=$androidMaterialMode")
+
+      when (mode) {
+        "time" -> presentTime(act)
+        "dateAndTime" -> presentDateThenTime(act)
+        else -> presentDate(act)
+      }
     }
   }
 

package/android/src/main/java/com/platformcomponents/PCDatePickerViewManager.kt

@@ -60,17 +60,19 @@ class PCDatePickerViewManager :
     view.applyTimeZoneName(value)
   }
 
-  // WithDefault<double,-1> comes through as primitive Double
+  // Sentinel is MIN_SAFE_INTEGER to allow negative timestamps for pre-1970 dates
+  private val noDateSentinel = -9007199254740991.0
+
   override fun setDateMs(view: PCDatePickerView, value: Double) {
-    view.applyDateMs(if (value >= 0.0) value.toLong() else null)
+    view.applyDateMs(if (value > noDateSentinel) value.toLong() else null)
   }
 
   override fun setMinDateMs(view: PCDatePickerView, value: Double) {
-    view.applyMinDateMs(if (value >= 0.0) value.toLong() else null)
+    view.applyMinDateMs(if (value > noDateSentinel) value.toLong() else null)
   }
 
   override fun setMaxDateMs(view: PCDatePickerView, value: Double) {
-    view.applyMaxDateMs(if (value >= 0.0) value.toLong() else null)
+    view.applyMaxDateMs(if (value > noDateSentinel) value.toLong() else null)
   }
 
   // --- platform objects ---

package/android/src/main/java/com/platformcomponents/PCSelectionMenuView.kt

@@ -51,6 +51,7 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context) {
   private var headlessMenuShowing = false
   private var headlessDismissProgrammatic = false
   private var headlessDismissAfterSelect = false
+  private var headlessOpenToken = 0
 
   init {
     minimumHeight = 0
@@ -129,6 +130,13 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context) {
     if (anchorMode == newMode) return
     anchorMode = newMode
     Log.d(TAG, "applyAnchorMode anchorMode=$anchorMode")
+    if (anchorMode != "headless") {
+      headlessOpenToken += 1
+      if (headlessMenuShowing) {
+        headlessDismissProgrammatic = true
+        headlessMenu?.dismiss()
+      }
+    }
     rebuildUI()
   }
 
@@ -138,11 +146,13 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context) {
       else -> "closed"
     }
     Log.d(TAG, "applyVisible visible=$visible anchorMode=$anchorMode")
+    headlessOpenToken += 1
+    val token = headlessOpenToken
 
     if (anchorMode != "headless") return
 
     if (visible == "open") {
-      presentHeadlessIfNeeded()
+      presentHeadlessIfNeeded(token)
     } else {
       Log.d(TAG, "applyVisible close -> dismiss")
       if (headlessMenuShowing) {
@@ -162,6 +172,10 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context) {
   // ---- UI building ----
 
   private fun rebuildUI() {
+    if (headlessMenuShowing) {
+      headlessDismissProgrammatic = true
+      headlessMenu?.dismiss()
+    }
     inlineText?.dismissDropDown()
     detachInlineDropdownOverlay()
     inlineDropdownOverlay = null
@@ -465,7 +479,7 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context) {
 
   // ---- Headless open ----
 
-  private fun presentHeadlessIfNeeded() {
+  private fun presentHeadlessIfNeeded(token: Int) {
     val popup = headlessMenu ?: return
     if (interactivity != "enabled") {
       Log.d(TAG, "presentHeadlessIfNeeded interactivity=$interactivity -> requestClose")
@@ -473,6 +487,18 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context) {
       return
     }
     post {
+      if (token != headlessOpenToken) {
+        Log.d(TAG, "presentHeadlessIfNeeded stale token -> skip")
+        return@post
+      }
+      if (anchorMode != "headless" || visible != "open") {
+        Log.d(TAG, "presentHeadlessIfNeeded no longer open -> skip")
+        return@post
+      }
+      if (interactivity != "enabled") {
+        Log.d(TAG, "presentHeadlessIfNeeded disabled -> skip")
+        return@post
+      }
       if (!isAttachedToWindow) {
         Log.d(TAG, "presentHeadlessIfNeeded not attached -> requestClose")
         onRequestClose?.invoke()

package/ios/PCConstants.swift

@@ -16,8 +16,15 @@ enum PCConstants {
     /// Maximum popover height before scrolling
     static let popoverMaxHeight: CGFloat = 400
 
-    /// Row height in selection menu popover
-    static let popoverRowHeight: CGFloat = 44
+    /// Minimum row height in selection menu popover (used as baseline)
+    static let popoverRowHeightMin: CGFloat = 44
+
+    /// Dynamic row height that respects user's preferred content size
+    static var popoverRowHeight: CGFloat {
+        let bodyFont = UIFont.preferredFont(forTextStyle: .body)
+        // Row height = font line height + vertical padding (16pt total)
+        return max(popoverRowHeightMin, ceil(bodyFont.lineHeight) + 16)
+    }
 
     /// Vertical padding in selection menu popover (top + bottom)
     static let popoverVerticalPadding: CGFloat = 16

package/ios/PCDatePicker.mm

@@ -117,20 +117,21 @@ using namespace facebook::react;
     _datePickerView.open = newOpen;
   }
 
-  // dateMs (sentinel -1)
+  // dateMs (sentinel is MIN_SAFE_INTEGER to allow negative timestamps for pre-1970 dates)
+  static const double kNoDateSentinel = -9007199254740991.0;
   if (oldViewProps.dateMs != newViewProps.dateMs) {
     _datePickerView.dateMs =
-        (newViewProps.dateMs >= 0) ? @(newViewProps.dateMs) : nil;
+        (newViewProps.dateMs > kNoDateSentinel) ? @(newViewProps.dateMs) : nil;
   }
 
-  // min/max (sentinel -1)
+  // min/max (same sentinel)
   if (oldViewProps.minDateMs != newViewProps.minDateMs) {
     _datePickerView.minDateMs =
-        (newViewProps.minDateMs >= 0) ? @(newViewProps.minDateMs) : nil;
+        (newViewProps.minDateMs > kNoDateSentinel) ? @(newViewProps.minDateMs) : nil;
   }
   if (oldViewProps.maxDateMs != newViewProps.maxDateMs) {
     _datePickerView.maxDateMs =
-        (newViewProps.maxDateMs >= 0) ? @(newViewProps.maxDateMs) : nil;
+        (newViewProps.maxDateMs > kNoDateSentinel) ? @(newViewProps.maxDateMs) : nil;
   }
 
   // locale

package/ios/PCDatePickerView.swift

@@ -1,5 +1,5 @@
-import os.log
 import UIKit
+import os.log
 
 private let logger = Logger(subsystem: "com.platformcomponents", category: "DatePicker")
 
@@ -134,7 +134,9 @@ public final class PCDatePickerView: UIControl,
         picker.setNeedsLayout()
         picker.layoutIfNeeded()
         let fitted = picker.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
-        return CGSize(width: UIView.noIntrinsicMetric, height: max(PCConstants.minTouchTargetHeight, fitted.height))
+        return CGSize(
+            width: UIView.noIntrinsicMetric,
+            height: max(PCConstants.minTouchTargetHeight, fitted.height))
     }
 
     /// ✅ Called by your measuring pipeline.
@@ -153,7 +155,9 @@ public final class PCDatePickerView: UIControl,
             withHorizontalFittingPriority: .required,
             verticalFittingPriority: .fittingSizeLevel
         )
-        return CGSize(width: constrainedSize.width, height: max(PCConstants.minTouchTargetHeight, fitted.height))
+        return CGSize(
+            width: constrainedSize.width,
+            height: max(PCConstants.minTouchTargetHeight, fitted.height))
     }
 
     /// Separate sizing for popover content.
@@ -213,12 +217,16 @@ public final class PCDatePickerView: UIControl,
         }
         logger.debug("presentIfNeeded: presenting modal picker")
 
-        // Prevent “settle” events right as we present.
-        suppressNextChangesBriefly()
-
         // Ensure picker is not inline.
         detachInlinePickerIfNeeded()
 
+        // Sync the picker's date to the current prop value before presenting.
+        // This ensures React Native's date is always respected as the source of truth.
+        applyDateMs(animated: false)
+
+        // Prevent "settle" events right as we present.
+        suppressNextChangesBriefly()
+
         let vc = UIViewController()
         vc.view.backgroundColor = .clear
         vc.view.isOpaque = false
@@ -226,8 +234,14 @@ public final class PCDatePickerView: UIControl,
         picker.translatesAutoresizingMaskIntoConstraints = false
         vc.view.addSubview(picker)
 
+        // Position picker at top-leading (constraints required to avoid freeze with inline style)
+        NSLayoutConstraint.activate([
+            picker.topAnchor.constraint(equalTo: vc.view.topAnchor),
+            picker.leadingAnchor.constraint(equalTo: vc.view.leadingAnchor),
+        ])
+
         let size = popoverContentSize()
-        vc.preferredContentSize = size 
+        vc.preferredContentSize = size
 
         // ✅ Anchored popover-style (not a full sheet)
         vc.modalPresentationStyle = .popover
@@ -236,7 +250,15 @@ public final class PCDatePickerView: UIControl,
         if let pop = vc.popoverPresentationController {
             pop.delegate = self
             pop.sourceView = self
-            pop.sourceRect = bounds
+            // Use a minimum height for sourceRect to help popover positioning
+            // (modal presentation views have zero intrinsic height)
+            let sourceRect = CGRect(
+                x: bounds.minX,
+                y: bounds.minY,
+                width: max(bounds.width, 44),
+                height: max(bounds.height, 44)
+            )
+            pop.sourceRect = sourceRect
             pop.permittedArrowDirections = [.up, .down]
         }
 
@@ -288,9 +310,14 @@ public final class PCDatePickerView: UIControl,
     // MARK: - Apply props (avoid firing valueChanged)
 
     private func applyDateMs(animated: Bool) {
-        guard let ms = dateMs?.doubleValue else { return }
         suppressNextChangesBriefly()
-        picker.setDate(Date(timeIntervalSince1970: ms / 1000.0), animated: animated)
+        if let ms = dateMs?.doubleValue {
+            picker.setDate(Date(timeIntervalSince1970: ms / 1000.0), animated: animated)
+        } else {
+            // When no date is provided, default to now to avoid layout issues
+            // (especially with inline style in modal presentation)
+            picker.setDate(Date(), animated: animated)
+        }
     }
 
     private func applyMinMax() {

package/ios/PCSelectionMenu.swift

@@ -41,6 +41,7 @@ private struct PCSelectionMenuInlinePickerView: View {
         } label: {
             HStack(spacing: 8) {
                 Text(model.displayTitle)
+                    .font(.body)
                     .lineLimit(1)
                     .truncationMode(.tail)
 
@@ -97,6 +98,8 @@ public final class PCSelectionMenuView: UIControl {
     private let model = PCSelectionMenuModel()
     private var hostingController: UIHostingController<AnyView>?
     private var headlessMenuView: UIView?
+    private var headlessMenuVC: UIViewController?
+    private var headlessPresentationToken: Int = 0
 
     private var parsedOptions: [PCSelectionMenuOption] {
         options.compactMap { any in
@@ -131,12 +134,16 @@ public final class PCSelectionMenuView: UIControl {
         alpha = disabled ? 0.5 : 1.0
         isUserInteractionEnabled = !disabled
         accessibilityTraits = disabled ? [.notEnabled] : [.button]
+        if disabled {
+            dismissHeadlessIfNeeded()
+        }
     }
 
     // MARK: - Inline vs headless
 
     private func updateAnchorMode() {
         if anchorMode == "inline" {
+            dismissHeadlessIfNeeded()
             uninstallHeadlessIfNeeded()
             installInlineIfNeeded()
             sync()
@@ -247,15 +254,22 @@ public final class PCSelectionMenuView: UIControl {
 
     private func updatePresentation() {
         guard anchorMode != "inline" else { return }
-        guard interactivity != "disabled" else { return }
+        headlessPresentationToken += 1
 
-        if visible == "open" {
-            presentHeadlessMenuIfNeeded()
+        if visible == "open" && interactivity != "disabled" {
+            presentHeadlessMenuIfNeeded(token: headlessPresentationToken)
+        } else {
+            dismissHeadlessIfNeeded()
         }
-        // Note: dismissal is handled by the menu itself calling onRequestClose
     }
 
-    private func presentHeadlessMenuIfNeeded() {
+    private func dismissHeadlessIfNeeded() {
+        guard let vc = headlessMenuVC else { return }
+        headlessMenuVC = nil
+        vc.dismiss(animated: true)
+    }
+
+    private func presentHeadlessMenuIfNeeded(token: Int) {
         guard headlessMenuView != nil else { return }
         guard let vc = nearestViewController() else { return }
 
@@ -263,7 +277,15 @@ public final class PCSelectionMenuView: UIControl {
         guard !opts.isEmpty else { return }
 
         logger.debug("presentHeadlessMenuIfNeeded: scheduling presentation with \(opts.count) options")
-        DispatchQueue.main.asyncAfter(deadline: .now() + PCConstants.headlessPresentationDelay) {
+        DispatchQueue.main.asyncAfter(deadline: .now() + PCConstants.headlessPresentationDelay) { [weak self] in
+            guard let self else { return }
+            guard self.headlessPresentationToken == token else { return }
+            guard self.visible == "open" else { return }
+            guard self.anchorMode != "inline" else { return }
+            guard self.interactivity != "disabled" else { return }
+            guard self.headlessMenuVC == nil else { return }
+            guard self.window != nil else { return }
+
             let menuVC = PCMenuViewController(
                 options: opts,
                 onSelect: { [weak self] idx in
@@ -276,26 +298,50 @@ public final class PCSelectionMenuView: UIControl {
                 onCancel: { [weak self] in
                     logger.debug("headless menu cancelled")
                     self?.onRequestClose?()
+                },
+                onDismiss: { [weak self] in
+                    self?.headlessMenuVC = nil
                 }
             )
 
-            menuVC.modalPresentationStyle = .popover
+            // Calculate menu position relative to source view
+            let sourceFrame = self.convert(self.bounds, to: vc.view)
+            let screenBounds = vc.view.bounds
             let popoverHeight = min(
                 CGFloat(opts.count) * PCConstants.popoverRowHeight + PCConstants.popoverVerticalPadding,
                 PCConstants.popoverMaxHeight
             )
-            menuVC.preferredContentSize = CGSize(
+            let spacing: CGFloat = 8
+
+            // Check if menu fits below the source view
+            let rowHeight = PCConstants.popoverRowHeight
+            let wouldExtendBeyondBottom = sourceFrame.maxY + spacing + popoverHeight > screenBounds.maxY - 20
+
+            let menuY: CGFloat
+            if wouldExtendBeyondBottom {
+                // Position above the source view (no overlap offset)
+                menuY = sourceFrame.minY - spacing - popoverHeight
+            } else {
+                // Position below, but shift up by one row to overlap trigger (like system menu)
+                menuY = sourceFrame.maxY + spacing - rowHeight
+            }
+
+            // Center horizontally, but keep within screen bounds
+            var menuX = sourceFrame.midX - PCConstants.popoverWidth / 2
+            menuX = max(16, min(menuX, screenBounds.maxX - PCConstants.popoverWidth - 16))
+
+            let menuFrame = CGRect(
+                x: menuX,
+                y: menuY,
                 width: PCConstants.popoverWidth,
                 height: popoverHeight
             )
 
-            if let popover = menuVC.popoverPresentationController {
-                popover.sourceView = self
-                popover.sourceRect = self.bounds
-                popover.permittedArrowDirections = []  // Remove arrow to match inline
-                popover.delegate = menuVC
-            }
+            menuVC.modalPresentationStyle = .overCurrentContext
+            menuVC.modalTransitionStyle = .crossDissolve
+            menuVC.menuFrame = menuFrame
 
+            self.headlessMenuVC = menuVC
             vc.present(menuVC, animated: true)
         }
     }
@@ -326,18 +372,52 @@ public final class PCSelectionMenuView: UIControl {
     }
 }
 
+// MARK: - Glass Menu Cell
+
+private class PCGlassMenuCell: UITableViewCell {
+    static let reuseIdentifier = "PCGlassMenuCell"
+
+    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
+        super.init(style: style, reuseIdentifier: reuseIdentifier)
+        setupCell()
+    }
+
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        setupCell()
+    }
+
+    private func setupCell() {
+        backgroundColor = .clear
+        contentView.backgroundColor = .clear
+        selectionStyle = .none
+        textLabel?.font = .preferredFont(forTextStyle: .body)
+        textLabel?.adjustsFontForContentSizeCategory = true
+    }
+}
+
 // MARK: - Custom Menu View Controller (matches SwiftUI Menu appearance)
 
-private class PCMenuViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, UIPopoverPresentationControllerDelegate {
+private class PCMenuViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
     private let options: [PCSelectionMenuOption]
     private let onSelect: (Int) -> Void
     private let onCancel: () -> Void
+    private let onDismiss: () -> Void
     private var tableView: UITableView!
+    private var menuContainer: UIView!
+
+    var menuFrame: CGRect = .zero
 
-    init(options: [PCSelectionMenuOption], onSelect: @escaping (Int) -> Void, onCancel: @escaping () -> Void) {
+    init(
+        options: [PCSelectionMenuOption],
+        onSelect: @escaping (Int) -> Void,
+        onCancel: @escaping () -> Void,
+        onDismiss: @escaping () -> Void
+    ) {
         self.options = options
         self.onSelect = onSelect
         self.onCancel = onCancel
+        self.onDismiss = onDismiss
         super.init(nibName: nil, bundle: nil)
     }
 
@@ -348,37 +428,61 @@ private class PCMenuViewController: UIViewController, UITableViewDelegate, UITab
     override func viewDidLoad() {
         super.viewDidLoad()
 
-        // Add blur effect (liquid glass)
-        let blurEffect = UIBlurEffect(style: .systemMaterial)
-        let blurView = UIVisualEffectView(effect: blurEffect)
-        blurView.translatesAutoresizingMaskIntoConstraints = false
-        view.addSubview(blurView)
+        view.backgroundColor = .clear
+
+        // Tap outside to dismiss
+        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleBackgroundTap))
+        tapGesture.cancelsTouchesInView = false
+        view.addGestureRecognizer(tapGesture)
+
+        // Menu container positioned at menuFrame
+        menuContainer = UIView(frame: menuFrame)
+        menuContainer.backgroundColor = .clear
+        menuContainer.layer.cornerRadius = 12
+        menuContainer.clipsToBounds = true
+        view.addSubview(menuContainer)
+
+        // Use liquid glass on iOS 26+, fall back to system material blur on older versions
+        let effectView: UIVisualEffectView
+        if #available(iOS 26, *) {
+            var glassEffect = UIGlassEffect()
+            glassEffect.isInteractive = true
+            effectView = UIVisualEffectView(effect: glassEffect)
+        } else {
+            let blurEffect = UIBlurEffect(style: .systemMaterial)
+            effectView = UIVisualEffectView(effect: blurEffect)
+        }
+        effectView.frame = menuContainer.bounds
+        effectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        menuContainer.addSubview(effectView)
 
-        tableView = UITableView(frame: .zero, style: .plain)
+        tableView = UITableView(frame: menuContainer.bounds, style: .plain)
         tableView.delegate = self
         tableView.dataSource = self
-        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
+        tableView.register(PCGlassMenuCell.self, forCellReuseIdentifier: PCGlassMenuCell.reuseIdentifier)
         tableView.backgroundColor = .clear
         tableView.separatorStyle = .none
         tableView.isScrollEnabled = true
         tableView.rowHeight = PCConstants.popoverRowHeight
+        tableView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
         let verticalPad = PCConstants.popoverVerticalPadding / 2
         tableView.contentInset = UIEdgeInsets(top: verticalPad, left: 0, bottom: verticalPad, right: 0)
-        tableView.translatesAutoresizingMaskIntoConstraints = false
 
-        blurView.contentView.addSubview(tableView)
+        effectView.contentView.addSubview(tableView)
+    }
 
-        NSLayoutConstraint.activate([
-            blurView.topAnchor.constraint(equalTo: view.topAnchor),
-            blurView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
-            blurView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
-            blurView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
-
-            tableView.topAnchor.constraint(equalTo: blurView.contentView.topAnchor),
-            tableView.bottomAnchor.constraint(equalTo: blurView.contentView.bottomAnchor),
-            tableView.leadingAnchor.constraint(equalTo: blurView.contentView.leadingAnchor),
-            tableView.trailingAnchor.constraint(equalTo: blurView.contentView.trailingAnchor),
-        ])
+    override func viewDidDisappear(_ animated: Bool) {
+        super.viewDidDisappear(animated)
+        onDismiss()
+    }
+
+    @objc private func handleBackgroundTap(_ gesture: UITapGestureRecognizer) {
+        let location = gesture.location(in: view)
+        if !menuContainer.frame.contains(location) {
+            dismiss(animated: true) { [weak self] in
+                self?.onCancel()
+            }
+        }
     }
 
     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
@@ -386,11 +490,8 @@ private class PCMenuViewController: UIViewController, UITableViewDelegate, UITab
     }
 
     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
-        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
+        let cell = tableView.dequeueReusableCell(withIdentifier: PCGlassMenuCell.reuseIdentifier, for: indexPath)
         cell.textLabel?.text = options[indexPath.row].label
-        cell.textLabel?.font = .systemFont(ofSize: 17)
-        cell.backgroundColor = .clear
-        cell.selectionStyle = .default
         return cell
     }
 
@@ -400,13 +501,4 @@ private class PCMenuViewController: UIViewController, UITableViewDelegate, UITab
             self?.onSelect(indexPath.row)
         }
     }
-
-    func presentationControllerDidDismiss(_ presentationController: UIPresentationController) {
-        onCancel()
-    }
-
-    func adaptivePresentationStyle(for controller: UIPresentationController) -> UIModalPresentationStyle {
-        return .none
-    }
 }
-

package/lib/module/DatePicker.js

@@ -1,12 +1,17 @@
 "use strict";
 
 // DatePicker.tsx
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { StyleSheet } from 'react-native';
 import NativeDatePicker from './DatePickerNativeComponent';
 import { jsx as _jsx } from "react/jsx-runtime";
-function dateToMsOrMinusOne(d) {
-  return d ? d.getTime() : -1;
+// Sentinel value for "no date". Using MIN_SAFE_INTEGER ensures we don't
+// conflict with valid negative timestamps (dates before 1970).
+const NO_DATE_SENTINEL = Number.MIN_SAFE_INTEGER;
+function dateToMsOrSentinel(d) {
+  if (!d) return NO_DATE_SENTINEL;
+  const ms = d.getTime();
+  return Number.isFinite(ms) ? ms : NO_DATE_SENTINEL;
 }
 function normalizeVisible(presentation, visible) {
   // Only meaningful in modal presentation. Keep undefined for inline to avoid noise.
@@ -30,13 +35,13 @@ export function DatePicker(props) {
     android,
     testID
   } = props;
+  const isModal = presentation === 'modal';
   const handleConfirm = useCallback(e => {
     onConfirm?.(new Date(e.nativeEvent.timestampMs));
   }, [onConfirm]);
   const handleClosed = useCallback(() => {
     onClosed?.();
   }, [onClosed]);
-  const styles = useMemo(() => createStyles(), []);
   const nativeProps = {
     style: [styles.picker, style],
     mode,
@@ -44,11 +49,11 @@ export function DatePicker(props) {
     timeZoneName,
     presentation,
     visible: normalizeVisible(presentation, visible),
-    dateMs: dateToMsOrMinusOne(date),
-    minDateMs: dateToMsOrMinusOne(minDate ?? null),
-    maxDateMs: dateToMsOrMinusOne(maxDate ?? null),
+    dateMs: dateToMsOrSentinel(date),
+    minDateMs: dateToMsOrSentinel(minDate),
+    maxDateMs: dateToMsOrSentinel(maxDate),
     onConfirm: onConfirm ? handleConfirm : undefined,
-    onClosed: onClosed ? handleClosed : undefined,
+    onClosed: isModal && onClosed ? handleClosed : undefined,
     ios: ios ? {
       preferredStyle: ios.preferredStyle,
       countDownDurationSeconds: ios.countDownDurationSeconds,
@@ -68,9 +73,7 @@ export function DatePicker(props) {
     ...nativeProps
   });
 }
-function createStyles() {
-  return StyleSheet.create({
-    picker: {}
-  });
-}
+const styles = StyleSheet.create({
+  picker: {}
+});
 //# sourceMappingURL=DatePicker.js.map

package/lib/module/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","StyleSheet","NativeDatePicker","jsx","_jsx","dateToMsOrMinusOne","d","getTime","normalizeVisible","presentation","visible","undefined","DatePicker","props","style","date","minDate","maxDate","locale","timeZoneName","mode","onConfirm","onClosed","ios","android","testID","handleConfirm","e","Date","nativeEvent","timestampMs","handleClosed","styles","createStyles","nativeProps","picker","dateMs","minDateMs","maxDateMs","preferredStyle","countDownDurationSeconds","minuteInterval","roundsToMinuteInterval","firstDayOfWeek","material","dialogTitle","positiveButtonTitle","negativeButtonTitle","create"],"sourceRoot":"../../src","sources":["DatePicker.tsx"],"mappings":";;AAAA;AACA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAEnD,SAASC,UAAU,QAAQ,cAAc;AAEzC,OAAOC,gBAAgB,MAShB,6BAA6B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AA+CrC,SAASC,kBAAkBA,CAACC,CAA0B,EAAU;EAC9D,OAAOA,CAAC,GAAGA,CAAC,CAACC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC;AAC7B;AAEA,SAASC,gBAAgBA,CACvBC,YAA+D,EAC/DC,OAA4B,EACP;EACrB;EACA,IAAID,YAAY,KAAK,OAAO,EAAE,OAAOE,SAAS;EAC9C,OAAOD,OAAO,GAAG,MAAM,GAAG,QAAQ;AACpC;AAEA,OAAO,SAASE,UAAUA,CAACC,KAAsB,EAAsB;EACrE,MAAM;IACJC,KAAK;IACLC,IAAI;IACJC,OAAO;IACPC,OAAO;IACPC,MAAM;IACNC,YAAY;IACZC,IAAI;IACJX,YAAY,GAAG,OAAO;IACtBC,OAAO;IACPW,SAAS;IACTC,QAAQ;IACRC,GAAG;IACHC,OAAO;IACPC;EACF,CAAC,GAAGZ,KAAK;EAET,MAAMa,aAAa,GAAG3B,WAAW,CAC9B4B,CAAwC,IAAK;IAC5CN,SAAS,GAAG,IAAIO,IAAI,CAACD,CAAC,CAACE,WAAW,CAACC,WAAW,CAAC,CAAC;EAClD,CAAC,EACD,CAACT,SAAS,CACZ,CAAC;EAED,MAAMU,YAAY,GAAGhC,WAAW,CAAC,MAAM;IACrCuB,QAAQ,GAAG,CAAC;EACd,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,MAAMU,MAAM,GAAGhC,OAAO,CAAC,MAAMiC,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC;EAEhD,MAAMC,WAAkC,GAAG;IACzCpB,KAAK,EAAE,CAACkB,MAAM,CAACG,MAAM,EAAErB,KAAK,CAAQ;IAEpCM,IAAI;IACJF,MAAM;IACNC,YAAY;IAEZV,YAAY;IACZC,OAAO,EAAEF,gBAAgB,CAACC,YAAY,EAAEC,OAAO,CAAQ;IAEvD0B,MAAM,EAAE/B,kBAAkB,CAACU,IAAI,CAAQ;IACvCsB,SAAS,EAAEhC,kBAAkB,CAACW,OAAO,IAAI,IAAI,CAAQ;IACrDsB,SAAS,EAAEjC,kBAAkB,CAACY,OAAO,IAAI,IAAI,CAAQ;IAErDI,SAAS,EAAEA,SAAS,GAAGK,aAAa,GAAGf,SAAS;IAChDW,QAAQ,EAAEA,QAAQ,GAAGS,YAAY,GAAGpB,SAAS;IAE7CY,GAAG,EAAEA,GAAG,GACJ;MACEgB,cAAc,EAAEhB,GAAG,CAACgB,cAAc;MAClCC,wBAAwB,EAAEjB,GAAG,CAACiB,wBAAwB;MACtDC,cAAc,EAAElB,GAAG,CAACkB,cAAc;MAClCC,sBAAsB,EAAEnB,GAAG,CAACmB;IAC9B,CAAC,GACD/B,SAAS;IAEba,OAAO,EAAEA,OAAO,GACZ;MACEmB,cAAc,EAAEnB,OAAO,CAACmB,cAAc;MACtCC,QAAQ,EAAEpB,OAAO,CAACoB,QAAe;MACjCC,WAAW,EAAErB,OAAO,CAACqB,WAAW;MAChCC,mBAAmB,EAAEtB,OAAO,CAACsB,mBAAmB;MAChDC,mBAAmB,EAAEvB,OAAO,CAACuB;IAC/B,CAAC,GACDpC;EACN,CAAC;EAED,oBAAOP,IAAA,CAACF,gBAAgB;IAACuB,MAAM,EAAEA,MAAO;IAAA,GAAKS;EAAW,CAAG,CAAC;AAC9D;AAEA,SAASD,YAAYA,CAAA,EAAG;EACtB,OAAOhC,UAAU,CAAC+C,MAAM,CAAC;IACvBb,MAAM,EAAE,CAAC;EACX,CAAC,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["React","useCallback","StyleSheet","NativeDatePicker","jsx","_jsx","NO_DATE_SENTINEL","Number","MIN_SAFE_INTEGER","dateToMsOrSentinel","d","ms","getTime","isFinite","normalizeVisible","presentation","visible","undefined","DatePicker","props","style","date","minDate","maxDate","locale","timeZoneName","mode","onConfirm","onClosed","ios","android","testID","isModal","handleConfirm","e","Date","nativeEvent","timestampMs","handleClosed","nativeProps","styles","picker","dateMs","minDateMs","maxDateMs","preferredStyle","countDownDurationSeconds","minuteInterval","roundsToMinuteInterval","firstDayOfWeek","material","dialogTitle","positiveButtonTitle","negativeButtonTitle","create"],"sourceRoot":"../../src","sources":["DatePicker.tsx"],"mappings":";;AAAA;AACA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAE1C,SAASC,UAAU,QAAQ,cAAc;AAEzC,OAAOC,gBAAgB,MAShB,6BAA6B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AA+CrC;AACA;AACA,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,gBAAgB;AAEhD,SAASC,kBAAkBA,CAACC,CAA0B,EAAU;EAC9D,IAAI,CAACA,CAAC,EAAE,OAAOJ,gBAAgB;EAC/B,MAAMK,EAAE,GAAGD,CAAC,CAACE,OAAO,CAAC,CAAC;EACtB,OAAOL,MAAM,CAACM,QAAQ,CAACF,EAAE,CAAC,GAAGA,EAAE,GAAGL,gBAAgB;AACpD;AAEA,SAASQ,gBAAgBA,CACvBC,YAA+D,EAC/DC,OAA4B,EACP;EACrB;EACA,IAAID,YAAY,KAAK,OAAO,EAAE,OAAOE,SAAS;EAC9C,OAAOD,OAAO,GAAG,MAAM,GAAG,QAAQ;AACpC;AAEA,OAAO,SAASE,UAAUA,CAACC,KAAsB,EAAsB;EACrE,MAAM;IACJC,KAAK;IACLC,IAAI;IACJC,OAAO;IACPC,OAAO;IACPC,MAAM;IACNC,YAAY;IACZC,IAAI;IACJX,YAAY,GAAG,OAAO;IACtBC,OAAO;IACPW,SAAS;IACTC,QAAQ;IACRC,GAAG;IACHC,OAAO;IACPC;EACF,CAAC,GAAGZ,KAAK;EAET,MAAMa,OAAO,GAAGjB,YAAY,KAAK,OAAO;EAExC,MAAMkB,aAAa,GAAGhC,WAAW,CAC9BiC,CAAwC,IAAK;IAC5CP,SAAS,GAAG,IAAIQ,IAAI,CAACD,CAAC,CAACE,WAAW,CAACC,WAAW,CAAC,CAAC;EAClD,CAAC,EACD,CAACV,SAAS,CACZ,CAAC;EAED,MAAMW,YAAY,GAAGrC,WAAW,CAAC,MAAM;IACrC2B,QAAQ,GAAG,CAAC;EACd,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,MAAMW,WAAkC,GAAG;IACzCnB,KAAK,EAAE,CAACoB,MAAM,CAACC,MAAM,EAAErB,KAAK,CAAC;IAE7BM,IAAI;IACJF,MAAM;IACNC,YAAY;IAEZV,YAAY;IACZC,OAAO,EAAEF,gBAAgB,CAACC,YAAY,EAAEC,OAAO,CAAC;IAEhD0B,MAAM,EAAEjC,kBAAkB,CAACY,IAAI,CAAC;IAChCsB,SAAS,EAAElC,kBAAkB,CAACa,OAAO,CAAC;IACtCsB,SAAS,EAAEnC,kBAAkB,CAACc,OAAO,CAAC;IAEtCI,SAAS,EAAEA,SAAS,GAAGM,aAAa,GAAGhB,SAAS;IAChDW,QAAQ,EAAEI,OAAO,IAAIJ,QAAQ,GAAGU,YAAY,GAAGrB,SAAS;IAExDY,GAAG,EAAEA,GAAG,GACJ;MACEgB,cAAc,EAAEhB,GAAG,CAACgB,cAAc;MAClCC,wBAAwB,EAAEjB,GAAG,CAACiB,wBAAwB;MACtDC,cAAc,EAAElB,GAAG,CAACkB,cAAc;MAClCC,sBAAsB,EAAEnB,GAAG,CAACmB;IAC9B,CAAC,GACD/B,SAAS;IAEba,OAAO,EAAEA,OAAO,GACZ;MACEmB,cAAc,EAAEnB,OAAO,CAACmB,cAAc;MACtCC,QAAQ,EAAEpB,OAAO,CAACoB,QAAQ;MAC1BC,WAAW,EAAErB,OAAO,CAACqB,WAAW;MAChCC,mBAAmB,EAAEtB,OAAO,CAACsB,mBAAmB;MAChDC,mBAAmB,EAAEvB,OAAO,CAACuB;IAC/B,CAAC,GACDpC;EACN,CAAC;EAED,oBAAOZ,IAAA,CAACF,gBAAgB;IAAC4B,MAAM,EAAEA,MAAO;IAAA,GAAKQ;EAAW,CAAG,CAAC;AAC9D;AAEA,MAAMC,MAAM,GAAGtC,UAAU,CAACoD,MAAM,CAAC;EAC/Bb,MAAM,EAAE,CAAC;AACX,CAAC,CAAC","ignoreList":[]}

package/lib/module/DatePickerNativeComponent.ts

@@ -35,14 +35,15 @@ export type MacOSProps = Readonly<{}>;
 
 /**
  * Sentinel convention:
- * - `-1` means "no value / unbounded / unset".
+ * - `Number.MIN_SAFE_INTEGER` means "no value / unbounded / unset".
+ *   (Allows negative timestamps for pre-1970 dates.)
  */
 export type CommonProps = {
   mode?: string; // DatePickerMode
 
-  dateMs?: CodegenTypes.WithDefault<TimestampMs, -1>;
-  minDateMs?: CodegenTypes.WithDefault<TimestampMs, -1>;
-  maxDateMs?: CodegenTypes.WithDefault<TimestampMs, -1>;
+  dateMs?: CodegenTypes.WithDefault<TimestampMs, -9007199254740991>;
+  minDateMs?: CodegenTypes.WithDefault<TimestampMs, -9007199254740991>;
+  maxDateMs?: CodegenTypes.WithDefault<TimestampMs, -9007199254740991>;
 
   locale?: string;
   timeZoneName?: string;

package/lib/typescript/src/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAwB,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/E,OAAyB,EAGvB,KAAK,QAAQ,IAAI,cAAc,EAC/B,KAAK,YAAY,IAAI,kBAAkB,EACvC,KAAK,sBAAsB,EAC3B,KAAK,cAAc,EACnB,KAAK,yBAAyB,EAC9B,KAAK,kBAAkB,EACxB,MAAM,6BAA6B,CAAC;AAErC,OAAO,KAAK,EAAE,mBAAmB,EAAW,MAAM,eAAe,CAAC;AAElE,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B,2DAA2D;IAC3D,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAElB,mDAAmD;IACnD,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,YAAY,CAAC,EAAE,sBAAsB,CAAC;IAEtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,GAAG,CAAC,EAAE;QACJ,cAAc,CAAC,EAAE,kBAAkB,CAAC;QACpC,wBAAwB,CAAC,EAAE,cAAc,CAAC,0BAA0B,CAAC,CAAC;QACtE,cAAc,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;QAClD,sBAAsB,CAAC,EAAE,yBAAyB,CAAC;KACpD,CAAC;IAEF,OAAO,CAAC,EAAE;QACR,cAAc,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;QACtD,QAAQ,CAAC,EAAE,mBAAmB,CAAC;QAC/B,WAAW,CAAC,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;QAChD,mBAAmB,CAAC,EAAE,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;QAChE,mBAAmB,CAAC,EAAE,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;KACjE,CAAC;CACH,CAAC;AAeF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAqErE"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAwB,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/E,OAAyB,EAGvB,KAAK,QAAQ,IAAI,cAAc,EAC/B,KAAK,YAAY,IAAI,kBAAkB,EACvC,KAAK,sBAAsB,EAC3B,KAAK,cAAc,EACnB,KAAK,yBAAyB,EAC9B,KAAK,kBAAkB,EACxB,MAAM,6BAA6B,CAAC;AAErC,OAAO,KAAK,EAAE,mBAAmB,EAAW,MAAM,eAAe,CAAC;AAElE,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B,2DAA2D;IAC3D,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAElB,mDAAmD;IACnD,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,YAAY,CAAC,EAAE,sBAAsB,CAAC;IAEtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,GAAG,CAAC,EAAE;QACJ,cAAc,CAAC,EAAE,kBAAkB,CAAC;QACpC,wBAAwB,CAAC,EAAE,cAAc,CAAC,0BAA0B,CAAC,CAAC;QACtE,cAAc,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;QAClD,sBAAsB,CAAC,EAAE,yBAAyB,CAAC;KACpD,CAAC;IAEF,OAAO,CAAC,EAAE;QACR,cAAc,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;QACtD,QAAQ,CAAC,EAAE,mBAAmB,CAAC;QAC/B,WAAW,CAAC,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;QAChD,mBAAmB,CAAC,EAAE,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;QAChE,mBAAmB,CAAC,EAAE,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;KACjE,CAAC;CACH,CAAC;AAqBF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAqErE"}

package/lib/typescript/src/DatePickerNativeComponent.d.ts

@@ -25,13 +25,14 @@ export type WindowsProps = Readonly<{}>;
 export type MacOSProps = Readonly<{}>;
 /**
  * Sentinel convention:
- * - `-1` means "no value / unbounded / unset".
+ * - `Number.MIN_SAFE_INTEGER` means "no value / unbounded / unset".
+ *   (Allows negative timestamps for pre-1970 dates.)
  */
 export type CommonProps = {
     mode?: string;
-    dateMs?: CodegenTypes.WithDefault<TimestampMs, -1>;
-    minDateMs?: CodegenTypes.WithDefault<TimestampMs, -1>;
-    maxDateMs?: CodegenTypes.WithDefault<TimestampMs, -1>;
+    dateMs?: CodegenTypes.WithDefault<TimestampMs, -9007199254740991>;
+    minDateMs?: CodegenTypes.WithDefault<TimestampMs, -9007199254740991>;
+    maxDateMs?: CodegenTypes.WithDefault<TimestampMs, -9007199254740991>;
     locale?: string;
     timeZoneName?: string;
     /**

package/lib/typescript/src/DatePickerNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/DatePickerNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG5D,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,MAAM,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,EAAE,YAAY,CAAC,MAAM,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAChF,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,UAAU,CAAC;AAE1D,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC/E,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAExE,MAAM,MAAM,QAAQ,GAAG;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wBAAwB,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC;IAC/C,cAAc,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,cAAc,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACpC,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAEtC;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,MAAM,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;IAEtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,WAAW;IACzD,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,SAAS,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC;IAC/D,QAAQ,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;CAC5D;;AAED,wBAAmE"}
+{"version":3,"file":"DatePickerNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/DatePickerNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG5D,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,MAAM,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,EAAE,YAAY,CAAC,MAAM,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAChF,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,UAAU,CAAC;AAE1D,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC/E,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAExE,MAAM,MAAM,QAAQ,GAAG;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wBAAwB,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC;IAC/C,cAAc,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,cAAc,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACpC,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAEtC;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,MAAM,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,gBAAgB,CAAC,CAAC;IAClE,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,gBAAgB,CAAC,CAAC;IACrE,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,gBAAgB,CAAC,CAAC;IAErE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,WAAW;IACzD,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,SAAS,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC;IAC/D,QAAQ,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;CAC5D;;AAED,wBAAmE"}

package/lib/typescript/src/SelectionMenu.d.ts

@@ -36,7 +36,7 @@ export interface SelectionMenuProps extends ViewProps {
      */
     ios?: {};
     android?: {
-        /** Material preference ("auto" | "m2" | "m3"). */
+        /** Material preference ('system' | 'm3'). */
         material?: AndroidMaterialMode;
     };
     /** Test identifier */

package/lib/typescript/src/SelectionMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionMenu.d.ts","sourceRoot":"","sources":["../../../src/SelectionMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,OAA4B,EAC1B,KAAK,mBAAmB,EAEzB,MAAM,gCAAgC,CAAC;AAExC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEzD,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,OAAO,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAExC;;;OAGG;IACH,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAExB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhE;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,GAAG,CAAC,EAAE,EAAE,CAAC;IAET,OAAO,CAAC,EAAE;QACR,kDAAkD;QAClD,QAAQ,CAAC,EAAE,mBAAmB,CAAC;KAChC,CAAC;IAEF,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAeD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAkE3E"}
+{"version":3,"file":"SelectionMenu.d.ts","sourceRoot":"","sources":["../../../src/SelectionMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,OAA4B,EAC1B,KAAK,mBAAmB,EAEzB,MAAM,gCAAgC,CAAC;AAExC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEzD,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,OAAO,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAExC;;;OAGG;IACH,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAExB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhE;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,GAAG,CAAC,EAAE,EAAE,CAAC;IAET,OAAO,CAAC,EAAE;QACR,6CAA6C;QAC7C,QAAQ,CAAC,EAAE,mBAAmB,CAAC;KAChC,CAAC;IAEF,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAeD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAkE3E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-platform-components",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "A cross-platform toolkit of native UI components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/shared/PCSelectionMenuShadowNode-custom.cpp

@@ -1,5 +1,5 @@
 #include <react/renderer/core/LayoutConstraints.h>
-#include "PCSelectionMenuShadowNode-Custom.h"
+#include "PCSelectionMenuShadowNode-custom.h"
 
 #include <algorithm>
 

package/src/DatePicker.tsx

@@ -1,5 +1,5 @@
 // DatePicker.tsx
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native';
 
@@ -59,8 +59,14 @@ export type DatePickerProps = {
   };
 };
 
-function dateToMsOrMinusOne(d: Date | null | undefined): number {
-  return d ? d.getTime() : -1;
+// Sentinel value for "no date". Using MIN_SAFE_INTEGER ensures we don't
+// conflict with valid negative timestamps (dates before 1970).
+const NO_DATE_SENTINEL = Number.MIN_SAFE_INTEGER;
+
+function dateToMsOrSentinel(d: Date | null | undefined): number {
+  if (!d) return NO_DATE_SENTINEL;
+  const ms = d.getTime();
+  return Number.isFinite(ms) ? ms : NO_DATE_SENTINEL;
 }
 
 function normalizeVisible(
@@ -90,6 +96,8 @@ export function DatePicker(props: DatePickerProps): React.ReactElement {
     testID,
   } = props;
 
+  const isModal = presentation === 'modal';
+
   const handleConfirm = useCallback(
     (e: NativeSyntheticEvent<DateChangeEvent>) => {
       onConfirm?.(new Date(e.nativeEvent.timestampMs));
@@ -101,24 +109,22 @@ export function DatePicker(props: DatePickerProps): React.ReactElement {
     onClosed?.();
   }, [onClosed]);
 
-  const styles = useMemo(() => createStyles(), []);
-
   const nativeProps: NativeDatePickerProps = {
-    style: [styles.picker, style] as any,
+    style: [styles.picker, style],
 
     mode,
     locale,
     timeZoneName,
 
     presentation,
-    visible: normalizeVisible(presentation, visible) as any,
+    visible: normalizeVisible(presentation, visible),
 
-    dateMs: dateToMsOrMinusOne(date) as any,
-    minDateMs: dateToMsOrMinusOne(minDate ?? null) as any,
-    maxDateMs: dateToMsOrMinusOne(maxDate ?? null) as any,
+    dateMs: dateToMsOrSentinel(date),
+    minDateMs: dateToMsOrSentinel(minDate),
+    maxDateMs: dateToMsOrSentinel(maxDate),
 
     onConfirm: onConfirm ? handleConfirm : undefined,
-    onClosed: onClosed ? handleClosed : undefined,
+    onClosed: isModal && onClosed ? handleClosed : undefined,
 
     ios: ios
       ? {
@@ -132,7 +138,7 @@ export function DatePicker(props: DatePickerProps): React.ReactElement {
     android: android
       ? {
           firstDayOfWeek: android.firstDayOfWeek,
-          material: android.material as any,
+          material: android.material,
           dialogTitle: android.dialogTitle,
           positiveButtonTitle: android.positiveButtonTitle,
           negativeButtonTitle: android.negativeButtonTitle,
@@ -143,8 +149,6 @@ export function DatePicker(props: DatePickerProps): React.ReactElement {
   return <NativeDatePicker testID={testID} {...nativeProps} />;
 }
 
-function createStyles() {
-  return StyleSheet.create({
-    picker: {},
-  });
-}
+const styles = StyleSheet.create({
+  picker: {},
+});

package/src/DatePickerNativeComponent.ts

@@ -35,14 +35,15 @@ export type MacOSProps = Readonly<{}>;
 
 /**
  * Sentinel convention:
- * - `-1` means "no value / unbounded / unset".
+ * - `Number.MIN_SAFE_INTEGER` means "no value / unbounded / unset".
+ *   (Allows negative timestamps for pre-1970 dates.)
  */
 export type CommonProps = {
   mode?: string; // DatePickerMode
 
-  dateMs?: CodegenTypes.WithDefault<TimestampMs, -1>;
-  minDateMs?: CodegenTypes.WithDefault<TimestampMs, -1>;
-  maxDateMs?: CodegenTypes.WithDefault<TimestampMs, -1>;
+  dateMs?: CodegenTypes.WithDefault<TimestampMs, -9007199254740991>;
+  minDateMs?: CodegenTypes.WithDefault<TimestampMs, -9007199254740991>;
+  maxDateMs?: CodegenTypes.WithDefault<TimestampMs, -9007199254740991>;
 
   locale?: string;
   timeZoneName?: string;

package/src/SelectionMenu.tsx

@@ -51,7 +51,7 @@ export interface SelectionMenuProps extends ViewProps {
   ios?: {};
 
   android?: {
-    /** Material preference ("auto" | "m2" | "m3"). */
+    /** Material preference ('system' | 'm3'). */
     material?: AndroidMaterialMode;
   };