react-native-platform-components 0.5.3 → 0.5.4

package/README.md

@@ -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'}}
     />
   );
 }

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
@@ -184,19 +185,35 @@ 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([
+        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()
         }
     }

package/ios/PCSelectionMenu.mm

@@ -9,6 +9,7 @@
 #import <react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h>
 #import <react/renderer/components/PlatformComponentsViewSpec/EventEmitters.h>
 #import <react/renderer/components/PlatformComponentsViewSpec/Props.h>
+#import <react/renderer/core/LayoutPrimitives.h>
 
 #if __has_include(<PlatformComponents/PlatformComponents-Swift.h>)
 #import <PlatformComponents/PlatformComponents-Swift.h>
@@ -17,6 +18,8 @@
 #endif
 
 #import "PCSelectionMenuComponentDescriptors-custom.h"
+#import "PCSelectionMenuShadowNode-custom.h"
+#import "PCSelectionMenuState-custom.h"
 
 using namespace facebook::react;
 
@@ -33,8 +36,15 @@ static inline bool OptionsEqual(
 }
 } // namespace
 
+@interface PCSelectionMenu ()
+
+- (void)updateMeasurements;
+
+@end
+
 @implementation PCSelectionMenu {
   PCSelectionMenuView *_view;
+  MeasuringPCSelectionMenuShadowNode::ConcreteState::Shared _state;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider {
@@ -167,6 +177,38 @@ static inline bool OptionsEqual(
   }
 
   [super updateProps:props oldProps:oldProps];
+
+  // Update measurements when props change that affect layout
+  [self updateMeasurements];
+}
+
+#pragma mark - State (Measuring)
+
+- (void)updateState:(const State::Shared &)state
+           oldState:(const State::Shared &)oldState {
+  _state = std::static_pointer_cast<
+      const MeasuringPCSelectionMenuShadowNode::ConcreteState>(state);
+
+  if (oldState == nullptr) {
+    // First time: compute initial size.
+    [self updateMeasurements];
+  }
+
+  [super updateState:state oldState:oldState];
+}
+
+- (void)updateMeasurements {
+  if (_state == nullptr)
+    return;
+
+  // Use the real width Yoga gave us
+  const CGFloat w = self.bounds.size.width > 1 ? self.bounds.size.width : 320;
+
+  CGSize size = [_view sizeForLayoutWithConstrainedTo:CGSizeMake(w, 0)];
+
+  PCSelectionMenuStateFrameSize next;
+  next.frameSize = {(Float)size.width, (Float)size.height};
+  _state->updateState(std::move(next));
 }
 
 @end

package/ios/PCSelectionMenu.swift

@@ -370,6 +370,23 @@ public final class PCSelectionMenuView: UIControl {
         )
         return CGSize(width: UIView.noIntrinsicMetric, height: h)
     }
+
+    /// Called by the measuring pipeline to get the size for Yoga layout.
+    /// Headless mode returns zero so Yoga reserves nothing.
+    @objc public func sizeForLayout(withConstrainedTo constrainedSize: CGSize) -> CGSize {
+        guard anchorMode == "inline" else { return .zero }
+
+        guard let host = hostingController else {
+            return CGSize(width: constrainedSize.width, height: PCConstants.minTouchTargetHeight)
+        }
+
+        host.view.setNeedsLayout()
+        host.view.layoutIfNeeded()
+
+        let w = constrainedSize.width > 1 ? constrainedSize.width : PCConstants.fallbackWidth
+        let fitted = host.sizeThatFits(in: CGSize(width: w, height: .greatestFiniteMagnitude))
+        return CGSize(width: constrainedSize.width, height: max(PCConstants.minTouchTargetHeight, fitted.height))
+    }
 }
 
 // MARK: - Glass Menu Cell