react-native-platform-components 0.5.0 → 0.5.1

package/README.md

@@ -5,39 +5,45 @@
 
 <table>
   <tr>
-    <td align="center"><strong>iOS DatePicker</strong></td>
-    <td align="center"><strong>Android DatePicker</strong></td>
-  </tr>
-  <tr>
-    <td><video src="https://github.com/user-attachments/assets/a9fb6237-6078-496b-8a58-1f2fae4f1af5" height="400"></video></td>
-    <td><video src="https://github.com/user-attachments/assets/70e42d98-7ea6-40fe-90c5-c1efc2227f25" height="400"></video></td>
-  </tr>
-  <tr>
-    <td align="center"><strong>iOS SelectionMenu</strong></td>
-    <td align="center"><strong>Android SelectionMenu</strong></td>
-  </tr>
-  <tr>
-    <td><video src="https://github.com/user-attachments/assets/f1af8e91-4e98-4dbe-a2a6-57f91770678e" height="400"></video></td>
-    <td><video src="https://github.com/user-attachments/assets/dc61da04-45e5-43c3-b766-6048367775bb" height="400"></video></td>
+    <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>
 
-> 🚧 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**
-
 ---
 
 ## Installation

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/PCSelectionMenu.swift

@@ -98,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
@@ -132,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()
@@ -248,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 }
 
@@ -264,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
@@ -277,6 +298,9 @@ public final class PCSelectionMenuView: UIControl {
                 onCancel: { [weak self] in
                     logger.debug("headless menu cancelled")
                     self?.onRequestClose?()
+                },
+                onDismiss: { [weak self] in
+                    self?.headlessMenuVC = nil
                 }
             )
 
@@ -317,6 +341,7 @@ public final class PCSelectionMenuView: UIControl {
             menuVC.modalTransitionStyle = .crossDissolve
             menuVC.menuFrame = menuFrame
 
+            self.headlessMenuVC = menuVC
             vc.present(menuVC, animated: true)
         }
     }
@@ -377,15 +402,22 @@ private class PCMenuViewController: UIViewController, UITableViewDelegate, UITab
     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)
     }
 
@@ -439,6 +471,11 @@ private class PCMenuViewController: UIViewController, UITableViewDelegate, UITab
         effectView.contentView.addSubview(tableView)
     }
 
+    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) {
@@ -465,4 +502,3 @@ private class PCMenuViewController: UIViewController, UITableViewDelegate, UITab
         }
     }
 }
-

package/lib/module/DatePicker.js

@@ -1,7 +1,7 @@
 "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";
@@ -9,7 +9,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // conflict with valid negative timestamps (dates before 1970).
 const NO_DATE_SENTINEL = Number.MIN_SAFE_INTEGER;
 function dateToMsOrSentinel(d) {
-  return d ? d.getTime() : NO_DATE_SENTINEL;
+  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.
@@ -33,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,
@@ -48,10 +50,10 @@ export function DatePicker(props) {
     presentation,
     visible: normalizeVisible(presentation, visible),
     dateMs: dateToMsOrSentinel(date),
-    minDateMs: dateToMsOrSentinel(minDate ?? null),
-    maxDateMs: dateToMsOrSentinel(maxDate ?? null),
+    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,
@@ -71,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","NO_DATE_SENTINEL","Number","MIN_SAFE_INTEGER","dateToMsOrSentinel","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":"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","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;AAmBF,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-platform-components",
-  "version": "0.5.0",
+  "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';
 
@@ -64,7 +64,9 @@ export type DatePickerProps = {
 const NO_DATE_SENTINEL = Number.MIN_SAFE_INTEGER;
 
 function dateToMsOrSentinel(d: Date | null | undefined): number {
-  return d ? d.getTime() : NO_DATE_SENTINEL;
+  if (!d) return NO_DATE_SENTINEL;
+  const ms = d.getTime();
+  return Number.isFinite(ms) ? ms : NO_DATE_SENTINEL;
 }
 
 function normalizeVisible(
@@ -94,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));
@@ -105,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: dateToMsOrSentinel(date) as any,
-    minDateMs: dateToMsOrSentinel(minDate ?? null) as any,
-    maxDateMs: dateToMsOrSentinel(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
       ? {
@@ -136,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,
@@ -147,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;