react-native-platform-components 0.5.3 → 0.5.5

package/README.md

@@ -125,7 +125,7 @@ export function Example() {
     <SelectionMenu
       options={options}
       selected={value}
-      inlineMode
+      presentation="embedded"
       placeholder="Select fruit"
       onSelect={(data) => setValue(data)}
       android={{ material: 'm3' }}
@@ -153,11 +153,14 @@ export function Example() {
         date={date}
         visible={visible}
         presentation="modal"
+        mode="date"
         onConfirm={(d) => {
           setDate(d);
           setVisible(false);
         }}
         onClosed={() => setVisible(false)}
+        ios={{preferredStyle: 'inline'}}
+        android={{material: 'system'}}
       />
     </>
   );
@@ -176,8 +179,10 @@ export function Example() {
     <DatePicker
       date={date}
       presentation="embedded"
-      mode="dateAndTime"
+      mode="date"
       onConfirm={(d) => setDate(d)}
+      ios={{preferredStyle: 'inline'}}
+      android={{material: 'system'}}
     />
   );
 }
@@ -189,7 +194,7 @@ export function Example() {
 
 ## SelectionMenu
 
-Native selection menu with **inline** and **headless** modes.
+Native selection menu with **modal** and **embedded** modes.
 
 ### Props
 
@@ -199,18 +204,18 @@ Native selection menu with **inline** and **headless** modes.
 | `selected` | `string \| null` | Currently selected option's `data` value |
 | `disabled` | `boolean` | Disables the menu |
 | `placeholder` | `string` | Placeholder text when no selection |
-| `inlineMode` | `boolean` | If true, renders native inline picker UI |
-| `visible` | `boolean` | Controls headless mode menu visibility |
+| `presentation` | `'modal' \| 'embedded'` | Presentation mode (default: `'modal'`) |
+| `visible` | `boolean` | Controls modal mode menu visibility |
 | `onSelect` | `(data, label, index) => void` | Called when user selects an option |
 | `onRequestClose` | `() => void` | Called when menu is dismissed without selection |
 | `android.material` | `'system' \| 'm3'` | Material Design style preference |
 
 ### 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.
+- **Modal mode** (default): Menu visibility controlled by `visible` prop. Use for custom trigger UI.
+- **Embedded mode** (`presentation="embedded"`): 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.
+> **Note:** On iOS, modal mode uses a custom popover to enable programmatic presentation. For the full native menu experience (system animations, scroll physics), use embedded mode. This is an intentional trade-off: modal gives you control over the trigger UI, embedded gives you the complete system menu behavior.
 
 ---
 

package/android/build.gradle

@@ -27,16 +27,18 @@ def getExtOrIntegerDefault(name) {
 
 android {
   namespace "com.platformcomponents"
-
+  ndkVersion rootProject.ext.has("ndkVersion") ? rootProject.ext.get("ndkVersion") : "26.1.10909125"
   compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
 
   defaultConfig {
     minSdkVersion getExtOrIntegerDefault("minSdkVersion")
     targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+
   }
 
   buildFeatures {
     buildConfig true
+    prefab true
   }
 
   buildTypes {

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

@@ -10,6 +10,9 @@ object PCConstants {
     /** Minimum touch target height in dp (Material Design 3 recommends 48dp, we use 56dp for text fields) */
     const val MIN_TOUCH_TARGET_HEIGHT_DP = 56f
 
+    /** Minimum height for M3 TextInputLayout with floating label (needs extra space for hint + text) */
+    const val MIN_M3_TEXT_INPUT_HEIGHT_DP = 72f
+
     // MARK: - Fallback Dimensions
 
     /** Fallback width in dp when constraint width is unavailable */

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

@@ -9,13 +9,18 @@ import android.util.Log
 import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
+import android.view.ViewTreeObserver
 import android.widget.DatePicker
 import android.widget.FrameLayout
 import android.widget.LinearLayout
 import android.widget.TimePicker
 import androidx.appcompat.app.AlertDialog
 import androidx.fragment.app.FragmentActivity
+import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.views.scroll.ReactScrollViewHelper
 import com.google.android.material.datepicker.CalendarConstraints
 import com.google.android.material.datepicker.MaterialDatePicker
 import com.google.android.material.timepicker.MaterialTimePicker
@@ -26,12 +31,18 @@ import java.util.TimeZone
 import kotlin.math.max
 import kotlin.math.min
 
-class PCDatePickerView(context: Context) : FrameLayout(context) {
+class PCDatePickerView(context: Context) : FrameLayout(context), ReactScrollViewHelper.HasStateWrapper {
 
   companion object {
     private const val TAG = "PCDatePicker"
   }
 
+  // --- State Wrapper for Fabric state updates ---
+  override var stateWrapper: StateWrapper? = null
+
+  private var lastReportedWidth: Float = 0f
+  private var lastReportedHeight: Float = 0f
+
   // --- Public props (set by manager) ---
   private var mode: String = "date" // "date" | "time" | "dateAndTime"
   private var presentation: String = "modal" // "inline" | "modal" | "popover" | "sheet" | "auto" (we treat non-inline as modal-ish)
@@ -76,6 +87,46 @@ class PCDatePickerView(context: Context) : FrameLayout(context) {
     super.onMeasure(widthMeasureSpec, heightMeasureSpec)
   }
 
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    super.onLayout(changed, left, top, right, bottom)
+    if (isInline()) {
+      updateFrameSizeState()
+    }
+  }
+
+  /**
+   * Update Fabric state with the measured frame size.
+   * This allows the shadow node to use actual measured dimensions for Yoga layout.
+   */
+  private fun updateFrameSizeState() {
+    val wrapper = stateWrapper ?: return
+
+    // Measure the inline container's preferred height
+    inlineContainer?.let { container ->
+      container.measure(
+        MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+        MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
+      )
+
+      val widthDp = PixelUtil.toDIPFromPixel(width.toFloat())
+      val heightDp = PixelUtil.toDIPFromPixel(container.measuredHeight.toFloat())
+
+      // Only update state if the size actually changed (avoid infinite loops)
+      if (widthDp != lastReportedWidth || heightDp != lastReportedHeight) {
+        lastReportedWidth = widthDp
+        lastReportedHeight = heightDp
+
+        Log.d(TAG, "updateFrameSizeState: width=$widthDp, height=$heightDp")
+
+        val stateData = WritableNativeMap().apply {
+          putDouble("width", widthDp.toDouble())
+          putDouble("height", heightDp.toDouble())
+        }
+        wrapper.updateState(stateData)
+      }
+    }
+  }
+
   // -----------------------------
   // Manager-facing apply* methods
   // -----------------------------
@@ -198,6 +249,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context) {
         ViewGroup.LayoutParams.WRAP_CONTENT
       )
       orientation = LinearLayout.VERTICAL
+      gravity = Gravity.CENTER_HORIZONTAL
     }
 
     // date and/or time

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

@@ -1,7 +1,9 @@
 package com.platformcomponents
 
+import com.facebook.react.uimanager.ReactStylesDiffMap
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.UIManagerHelper
@@ -25,6 +27,18 @@ class PCDatePickerViewManager :
     return PCDatePickerView(reactContext)
   }
 
+  /**
+   * Pass the StateWrapper to the view so it can update Fabric state with measured dimensions.
+   */
+  override fun updateState(
+    view: PCDatePickerView,
+    props: ReactStylesDiffMap,
+    stateWrapper: StateWrapper
+  ): Any? {
+    view.stateWrapper = stateWrapper
+    return null
+  }
+
   override fun addEventEmitters(reactContext: ThemedReactContext, view: PCDatePickerView) {
     val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, view.id)
 

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

@@ -5,16 +5,21 @@ import android.text.InputType
 import android.util.Log
 import android.view.View
 import android.view.ViewGroup
+import android.view.ViewTreeObserver
 import android.widget.AdapterView
 import android.widget.ArrayAdapter
 import android.widget.FrameLayout
 import android.widget.LinearLayout
 import android.widget.Spinner
 import androidx.appcompat.widget.PopupMenu
+import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.views.scroll.ReactScrollViewHelper
 import com.google.android.material.textfield.MaterialAutoCompleteTextView
 import com.google.android.material.textfield.TextInputLayout
 
-class PCSelectionMenuView(context: Context) : FrameLayout(context) {
+class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollViewHelper.HasStateWrapper {
 
   data class Option(val label: String, val data: String)
 
@@ -22,6 +27,12 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context) {
     private const val TAG = "PCSelectionMenu"
   }
 
+  // --- State Wrapper for Fabric state updates ---
+  override var stateWrapper: StateWrapper? = null
+
+  private var lastReportedWidth: Float = 0f
+  private var lastReportedHeight: Float = 0f
+
   // --- Props ---
   var options: List<Option> = emptyList()
   var selectedData: String = "" // sentinel for none
@@ -56,12 +67,14 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context) {
   init {
     minimumHeight = 0
     minimumWidth = 0
+    // Allow content to draw outside bounds if Yoga assigns less space than needed
+    clipChildren = false
+    clipToPadding = false
     rebuildUI()
   }
 
-  private val minInlineHeightPx: Int by lazy {
-    (PCConstants.MIN_TOUCH_TARGET_HEIGHT_DP * resources.displayMetrics.density).toInt()
-  }
+  // Track if we've requested a layout update after first measure
+  private var hasRequestedLayoutUpdate = false
 
   // Headless needs a non-zero anchor rect for dropdown
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
@@ -71,12 +84,121 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context) {
       return
     }
 
-    // Inline: measure children, but never allow a collapsed height
-    super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+    // Inline mode: Always measure children with UNSPECIFIED height to get intrinsic size.
+    // This ensures TextInputLayout/Spinner can report their true desired height
+    // regardless of what constraints React Native passed.
+    val unconstrainedHeightSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
+    super.onMeasure(widthMeasureSpec, unconstrainedHeightSpec)
+
+    // Get intrinsic height from children, enforce minimum (which varies by mode)
+    // minimumHeight is set in buildInline() based on the material mode
+    val intrinsicHeight = measuredHeight.coerceAtLeast(minimumHeight)
+
+    // For inline mode, always use intrinsic height to prevent clipping.
+    // React Native's Yoga doesn't know our content size, so it may pass
+    // constraints that would clip the content. We prioritize showing the
+    // full control over strictly respecting layout constraints.
+    setMeasuredDimension(measuredWidth, intrinsicHeight)
+  }
 
-    val measuredH = measuredHeight
-    if (measuredH < minInlineHeightPx) {
-      setMeasuredDimension(measuredWidth, minInlineHeightPx)
+  // Override requestLayout to handle React Native's layout timing.
+  // This ensures that after children are added/measured, we trigger
+  // a re-layout that React Native's Yoga can pick up.
+  override fun requestLayout() {
+    super.requestLayout()
+    // Post a measure/layout pass to ensure the view is properly sized
+    // after React Native's initial layout pass
+    if (!hasRequestedLayoutUpdate && anchorMode == "inline") {
+      hasRequestedLayoutUpdate = true
+      post(measureAndLayout)
+    }
+  }
+
+  private val measureAndLayout = Runnable {
+    if (!isAttachedToWindow || anchorMode != "inline") return@Runnable
+
+    // Re-measure to get correct intrinsic height
+    measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
+    )
+    // Force layout with measured height - this overrides Yoga's assigned bounds
+    // to ensure the component isn't clipped
+    layout(left, top, right, top + measuredHeight)
+  }
+
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    if (anchorMode != "inline") {
+      super.onLayout(changed, left, top, right, bottom)
+      return
+    }
+
+    // For inline mode, we may need to override Yoga's assigned height.
+    // First, measure ourselves to get intrinsic height.
+    val widthSpec = MeasureSpec.makeMeasureSpec(right - left, MeasureSpec.EXACTLY)
+    val heightSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
+    measure(widthSpec, heightSpec)
+
+    val intrinsicHeight = measuredHeight
+    val assignedHeight = bottom - top
+
+    // If Yoga gave us less height than we need, resize
+    val actualBottom = if (assignedHeight < intrinsicHeight) {
+      top + intrinsicHeight
+    } else {
+      bottom
+    }
+
+    // Layout children with the correct bounds
+    super.onLayout(changed, left, top, right, actualBottom)
+
+    // Update Fabric state with measured dimensions
+    updateFrameSizeState()
+
+    // If we resized, update our own bounds
+    if (actualBottom != bottom) {
+      // Use setFrame to update our bounds without triggering another layout pass
+      post {
+        if (isAttachedToWindow && anchorMode == "inline") {
+          layout(left, top, right, actualBottom)
+        }
+      }
+    }
+  }
+
+  /**
+   * Update Fabric state with the measured frame size.
+   * This allows the shadow node to use actual measured dimensions for Yoga layout.
+   */
+  private fun updateFrameSizeState() {
+    if (anchorMode != "inline") return
+    val wrapper = stateWrapper ?: return
+
+    // Get the actual inline widget
+    val inlineWidget: View? = inlineLayout ?: inlineSpinner
+    if (inlineWidget == null) return
+
+    // Measure the widget with exact width and unspecified height
+    val widthSpec = MeasureSpec.makeMeasureSpec(width.coerceAtLeast(1), MeasureSpec.EXACTLY)
+    val heightSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
+    inlineWidget.measure(widthSpec, heightSpec)
+
+    val widthDp = PixelUtil.toDIPFromPixel(width.toFloat())
+    val rawHeightPx = inlineWidget.measuredHeight
+    val rawHeightDp = PixelUtil.toDIPFromPixel(rawHeightPx.toFloat())
+
+    Log.d(TAG, "updateFrameSizeState: widget=${inlineWidget.javaClass.simpleName}, rawHeightPx=$rawHeightPx, rawHeightDp=$rawHeightDp, minimumHeight=$minimumHeight, density=${resources.displayMetrics.density}")
+
+    // Only update if changed
+    if (widthDp != lastReportedWidth || rawHeightDp != lastReportedHeight) {
+      lastReportedWidth = widthDp
+      lastReportedHeight = rawHeightDp
+
+      val stateData = WritableNativeMap().apply {
+        putDouble("width", widthDp.toDouble())
+        putDouble("height", rawHeightDp.toDouble())
+      }
+      wrapper.updateState(stateData)
     }
   }
 
@@ -188,6 +310,7 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context) {
     headlessMenuShowing = false
     headlessDismissProgrammatic = false
     headlessDismissAfterSelect = false
+    hasRequestedLayoutUpdate = false
 
     // Headless should be invisible but anchorable.
     alpha = if (anchorMode == "headless") 0.01f else 1f
@@ -208,6 +331,14 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context) {
   private fun buildInline() {
     val mode = parseMaterial(androidMaterial)
 
+    // Set minimum height based on mode - M3 TextInputLayout needs more space for floating label
+    val minHeightDp = if (mode == MaterialMode.M3) {
+      PCConstants.MIN_M3_TEXT_INPUT_HEIGHT_DP
+    } else {
+      PCConstants.MIN_TOUCH_TARGET_HEIGHT_DP
+    }
+    minimumHeight = (minHeightDp * resources.displayMetrics.density).toInt()
+
     if (mode == MaterialMode.M3) {
       // M3 exposed dropdown menu - the standard Material 3 way
       val til = TextInputLayout(context).apply {
@@ -536,7 +667,7 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context) {
     menu.clear()
     val selectedIdx = options.indexOfFirst { it.data == selectedData }
     options.forEachIndexed { index, opt ->
-      val label = if (index == selectedIdx) "✓  ${opt.label}" else "    ${opt.label}"
+      val label = if (index == selectedIdx) "✓ ${opt.label}" else opt.label
       menu.add(0, index, index, label)
     }
   }
@@ -551,6 +682,34 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context) {
     }
   }
 
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    // When attached, trigger a measure/layout pass to ensure correct sizing
+    if (anchorMode == "inline") {
+      // Use ViewTreeObserver to wait until after the first layout pass
+      viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
+        override fun onGlobalLayout() {
+          viewTreeObserver.removeOnGlobalLayoutListener(this)
+
+          if (!isAttachedToWindow || anchorMode != "inline") return
+
+          // Measure to get intrinsic height
+          measure(
+            MeasureSpec.makeMeasureSpec(width.coerceAtLeast(1), MeasureSpec.EXACTLY),
+            MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
+          )
+
+          val intrinsicHeight = measuredHeight.coerceAtLeast(minimumHeight)
+
+          // If current height is too small, force layout with correct height
+          if (height < intrinsicHeight) {
+            layout(left, top, right, top + intrinsicHeight)
+          }
+        }
+      })
+    }
+  }
+
   override fun onDetachedFromWindow() {
     detachInlineDropdownOverlay()
     super.onDetachedFromWindow()

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

@@ -3,7 +3,9 @@ package com.platformcomponents
 import android.util.Log
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.ReactStylesDiffMap
 import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.UIManagerHelper
@@ -31,6 +33,18 @@ class PCSelectionMenuViewManager :
     return PCSelectionMenuView(reactContext)
   }
 
+  /**
+   * Pass the StateWrapper to the view so it can update Fabric state with measured dimensions.
+   */
+  override fun updateState(
+    view: PCSelectionMenuView,
+    props: ReactStylesDiffMap,
+    stateWrapper: StateWrapper
+  ): Any? {
+    view.stateWrapper = stateWrapper
+    return null
+  }
+
   override fun addEventEmitters(reactContext: ThemedReactContext, view: PCSelectionMenuView) {
     val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, view.id)
 

package/android/src/main/jni/CMakeLists.txt

@@ -0,0 +1,47 @@
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+#
+# Custom CMakeLists.txt that extends the codegen with custom shadow node code
+
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE on)
+
+# Get the codegen-generated sources
+set(PC_CODEGEN_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../build/generated/source/codegen/jni")
+
+# Codegen sources
+file(GLOB react_codegen_SRCS CONFIGURE_DEPENDS
+    ${PC_CODEGEN_DIR}/*.cpp
+    ${PC_CODEGEN_DIR}/react/renderer/components/PlatformComponentsViewSpec/*.cpp
+)
+
+# Custom shadow node sources
+file(GLOB_RECURSE LIB_CUSTOM_SRCS CONFIGURE_DEPENDS
+    ${CMAKE_CURRENT_SOURCE_DIR}/../../../../shared/*.cpp
+)
+
+add_library(
+    react_codegen_PlatformComponentsViewSpec
+    OBJECT
+    ${react_codegen_SRCS}
+    ${LIB_CUSTOM_SRCS}
+)
+
+# IMPORTANT: Put shared directory FIRST so our custom headers shadow the codegen ones
+target_include_directories(react_codegen_PlatformComponentsViewSpec
+    PUBLIC
+        ${CMAKE_CURRENT_SOURCE_DIR}/../../../../shared
+        ${PC_CODEGEN_DIR}
+        ${PC_CODEGEN_DIR}/react/renderer/components/PlatformComponentsViewSpec
+)
+
+target_link_libraries(
+    react_codegen_PlatformComponentsViewSpec
+    fbjni
+    jsi
+    reactnative
+)
+
+target_compile_reactnative_options(react_codegen_PlatformComponentsViewSpec PRIVATE)

package/android/src/main/jni/OnLoad.cpp

@@ -0,0 +1,33 @@
+#include <fbjni/fbjni.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+#include <react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h>
+
+#include "PCSelectionMenuShadowNode-custom.h"
+#include "PCSelectionMenuComponentDescriptors-custom.h"
+
+namespace facebook::react {
+
+// Define the component name (must match the codegen-generated one)
+// Note: This is declared extern in multiple places, we define it once here
+const char PCSelectionMenuComponentName[] = "PCSelectionMenu";
+
+} // namespace facebook::react
+
+// Export our custom component descriptor registration
+// This function should be called by the app instead of the codegen-generated one
+extern "C" void PlatformComponents_registerCustomComponentDescriptors(
+    std::shared_ptr<const facebook::react::ComponentDescriptorProviderRegistry> registry) {
+  using namespace facebook::react;
+
+  // Register SelectionMenu with our custom measuring shadow node
+  registry->add(concreteComponentDescriptorProvider<MeasuringPCSelectionMenuComponentDescriptor>());
+
+  // DatePicker uses the default generated descriptor
+  registry->add(concreteComponentDescriptorProvider<PCDatePickerComponentDescriptor>());
+}
+
+JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM* vm, void*) {
+  return facebook::jni::initialize(vm, [] {
+    // Library loaded
+  });
+}

package/ios/PCDatePickerView.swift

@@ -11,6 +11,7 @@ public final class PCDatePickerView: UIControl,
     // MARK: - UI
     private let picker = UIDatePicker()
     private var modalVC: UIViewController?
+    private var inlineConstraints: [NSLayoutConstraint] = []
 
     // Suppress “programmatic” valueChanged events (apply props / initial present settle).
     private var suppressChangeEvents = false
@@ -119,6 +120,41 @@ public final class PCDatePickerView: UIControl,
 
     // MARK: - Layout / Sizing
 
+    private var lastLayoutBounds: CGRect = .zero
+    private var needsStyleReset = false
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+
+        // For embedded presentation, manually center the picker after Auto Layout
+        // This ensures consistent centering regardless of UIDatePicker's internal state
+        if presentation == "embedded" && picker.superview === self && bounds.width > 0 {
+            let widthChanged = abs(bounds.width - lastLayoutBounds.width) > 1
+            if needsStyleReset || widthChanged {
+                if #available(iOS 13.4, *) {
+                    let currentStyle = picker.preferredDatePickerStyle
+                    picker.preferredDatePickerStyle = .automatic
+                    picker.preferredDatePickerStyle = currentStyle
+                }
+                picker.sizeToFit()
+                needsStyleReset = false
+            }
+            lastLayoutBounds = bounds
+
+            // After constraints do their thing, manually adjust picker position to center it
+            let pickerSize = picker.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
+            let xOffset = (bounds.width - pickerSize.width) / 2
+            if xOffset > 0 {
+                picker.frame = CGRect(
+                    x: xOffset,
+                    y: 0,
+                    width: pickerSize.width,
+                    height: bounds.height
+                )
+            }
+        }
+    }
+
     private func invalidateSize() {
         invalidateIntrinsicContentSize()
         setNeedsLayout()
@@ -184,19 +220,39 @@ public final class PCDatePickerView: UIControl,
     private func attachInlinePickerIfNeeded() {
         guard picker.superview !== self else { return }
 
+        // Deactivate any previous inline constraints
+        NSLayoutConstraint.deactivate(inlineConstraints)
+        inlineConstraints.removeAll()
+
         picker.removeFromSuperview()
         addSubview(picker)
 
-        NSLayoutConstraint.activate([
+        // Mark that we need a style reset on next layout pass
+        // This ensures centering is recalculated after Yoga provides correct bounds
+        needsStyleReset = true
+
+        inlineConstraints = [
             picker.topAnchor.constraint(equalTo: topAnchor),
             picker.bottomAnchor.constraint(equalTo: bottomAnchor),
             picker.leadingAnchor.constraint(equalTo: leadingAnchor),
             picker.trailingAnchor.constraint(equalTo: trailingAnchor),
-        ])
+        ]
+        NSLayoutConstraint.activate(inlineConstraints)
+
+        // Force picker to recalculate its internal layout after being moved between view hierarchies.
+        // Re-applying the style resets internal layout state that can become stale after modal use.
+        if #available(iOS 13.4, *) {
+            let currentStyle = picker.preferredDatePickerStyle
+            picker.preferredDatePickerStyle = .automatic
+            picker.preferredDatePickerStyle = currentStyle
+        }
+        picker.sizeToFit()
     }
 
     private func detachInlinePickerIfNeeded() {
         if picker.superview === self {
+            NSLayoutConstraint.deactivate(inlineConstraints)
+            inlineConstraints.removeAll()
             picker.removeFromSuperview()
         }
     }