react-native-platform-components 0.5.3 → 0.5.5

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

package/lib/module/SelectionMenu.js

@@ -2,15 +2,14 @@
 
 // SelectionMenu.tsx
 import React, { useCallback, useMemo } from 'react';
-import { Platform, StyleSheet } from 'react-native';
 import NativeSelectionMenu from './SelectionMenuNativeComponent';
 import { jsx as _jsx } from "react/jsx-runtime";
 function normalizeSelectedData(selected) {
   return selected ?? '';
 }
-function normalizeNativeVisible(inlineMode, visible) {
-  // Inline mode ignores visible; keep it undefined so native isn't spammed.
-  if (inlineMode) return undefined;
+function normalizeNativeVisible(presentation, visible) {
+  // Embedded mode ignores visible; keep it undefined so native isn't spammed.
+  if (presentation === 'embedded') return undefined;
   return visible ? 'open' : 'closed';
 }
 export function SelectionMenu(props) {
@@ -20,7 +19,7 @@ export function SelectionMenu(props) {
     selected,
     disabled,
     placeholder,
-    inlineMode,
+    presentation = 'modal',
     visible,
     onSelect,
     onRequestClose,
@@ -29,7 +28,7 @@ export function SelectionMenu(props) {
     ...viewProps
   } = props;
   const selectedData = useMemo(() => normalizeSelectedData(selected), [selected]);
-  const nativeVisible = useMemo(() => normalizeNativeVisible(inlineMode, visible), [inlineMode, visible]);
+  const nativeVisible = useMemo(() => normalizeNativeVisible(presentation, visible), [presentation, visible]);
   const handleSelect = useCallback(e => {
     const {
       index,
@@ -49,14 +48,13 @@ export function SelectionMenu(props) {
       material: android.material
     };
   }, [android]);
-  const isAndroidM3Inline = android?.material && inlineMode && android.material === 'm3' && Platform.OS === 'android';
   return /*#__PURE__*/_jsx(NativeSelectionMenu, {
-    style: [style, isAndroidM3Inline && styles.androidInline],
+    style: style,
     options: options,
     selectedData: selectedData,
     interactivity: disabled ? 'disabled' : 'enabled',
     placeholder: placeholder,
-    anchorMode: inlineMode ? 'inline' : 'headless',
+    anchorMode: presentation === 'embedded' ? 'inline' : 'headless',
     visible: nativeVisible,
     onSelect: onSelect ? handleSelect : undefined,
     onRequestClose: onRequestClose ? handleRequestClose : undefined,
@@ -65,9 +63,4 @@ export function SelectionMenu(props) {
     ...viewProps
   });
 }
-const styles = StyleSheet.create({
-  androidInline: {
-    minHeight: 60
-  }
-});
 //# sourceMappingURL=SelectionMenu.js.map

package/lib/module/SelectionMenu.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","Platform","StyleSheet","NativeSelectionMenu","jsx","_jsx","normalizeSelectedData","selected","normalizeNativeVisible","inlineMode","visible","undefined","SelectionMenu","props","style","options","disabled","placeholder","onSelect","onRequestClose","ios","android","viewProps","selectedData","nativeVisible","handleSelect","e","index","label","data","nativeEvent","handleRequestClose","nativeAndroid","material","isAndroidM3Inline","OS","styles","androidInline","interactivity","anchorMode","create","minHeight"],"sourceRoot":"../../src","sources":["SelectionMenu.tsx"],"mappings":";;AAAA;AACA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,QAAQ,EAAEC,UAAU,QAAwB,cAAc;AAEnE,OAAOC,mBAAmB,MAGnB,gCAAgC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAsDxC,SAASC,qBAAqBA,CAACC,QAAuB,EAAU;EAC9D,OAAOA,QAAQ,IAAI,EAAE;AACvB;AAEA,SAASC,sBAAsBA,CAC7BC,UAA+B,EAC/BC,OAA4B,EACG;EAC/B;EACA,IAAID,UAAU,EAAE,OAAOE,SAAS;EAChC,OAAOD,OAAO,GAAG,MAAM,GAAG,QAAQ;AACpC;AAEA,OAAO,SAASE,aAAaA,CAACC,KAAyB,EAAsB;EAC3E,MAAM;IACJC,KAAK;IACLC,OAAO;IACPR,QAAQ;IACRS,QAAQ;IACRC,WAAW;IACXR,UAAU;IACVC,OAAO;IACPQ,QAAQ;IACRC,cAAc;IACdC,GAAG;IACHC,OAAO;IACP,GAAGC;EACL,CAAC,GAAGT,KAAK;EAET,MAAMU,YAAY,GAAGvB,OAAO,CAC1B,MAAMM,qBAAqB,CAACC,QAAQ,CAAC,EACrC,CAACA,QAAQ,CACX,CAAC;EAED,MAAMiB,aAAa,GAAGxB,OAAO,CAC3B,MAAMQ,sBAAsB,CAACC,UAAU,EAAEC,OAAO,CAAC,EACjD,CAACD,UAAU,EAAEC,OAAO,CACtB,CAAC;EAED,MAAMe,YAAY,GAAG1B,WAAW,CAC7B2B,CAA4C,IAAK;IAChD,MAAM;MAAEC,KAAK;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAGH,CAAC,CAACI,WAAW;IAC5CZ,QAAQ,GAAGW,IAAI,EAAED,KAAK,EAAED,KAAK,CAAC;EAChC,CAAC,EACD,CAACT,QAAQ,CACX,CAAC;EAED,MAAMa,kBAAkB,GAAGhC,WAAW,CAAC,MAAM;IAC3CoB,cAAc,GAAG,CAAC;EACpB,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;;EAEpB;EACA,MAAMa,aAAa,GAAGhC,OAAO,CAAC,MAAM;IAClC,IAAI,CAACqB,OAAO,EAAE,OAAOV,SAAS;IAC9B,OAAO;MAAEsB,QAAQ,EAAEZ,OAAO,CAACY;IAAS,CAAC;EACvC,CAAC,EAAE,CAACZ,OAAO,CAAC,CAAC;EAEb,MAAMa,iBAAiB,GACrBb,OAAO,EAAEY,QAAQ,IACjBxB,UAAU,IACVY,OAAO,CAACY,QAAQ,KAAK,IAAI,IACzBhC,QAAQ,CAACkC,EAAE,KAAK,SAAS;EAE3B,oBACE9B,IAAA,CAACF,mBAAmB;IAClBW,KAAK,EAAE,CAACA,KAAK,EAAEoB,iBAAiB,IAAIE,MAAM,CAACC,aAAa,CAAE;IAC1DtB,OAAO,EAAEA,OAAQ;IACjBQ,YAAY,EAAEA,YAAa;IAC3Be,aAAa,EAAEtB,QAAQ,GAAG,UAAU,GAAG,SAAU;IACjDC,WAAW,EAAEA,WAAY;IACzBsB,UAAU,EAAE9B,UAAU,GAAG,QAAQ,GAAG,UAAW;IAC/CC,OAAO,EAAEc,aAAc;IACvBN,QAAQ,EAAEA,QAAQ,GAAGO,YAAY,GAAGd,SAAU;IAC9CQ,cAAc,EAAEA,cAAc,GAAGY,kBAAkB,GAAGpB,SAAU;IAChES,GAAG,EAAEA,GAAI;IACTC,OAAO,EAAEW,aAAc;IAAA,GACnBV;EAAS,CACd,CAAC;AAEN;AAEA,MAAMc,MAAM,GAAGlC,UAAU,CAACsC,MAAM,CAAC;EAC/BH,aAAa,EAAE;IAAEI,SAAS,EAAE;EAAG;AACjC,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useMemo","NativeSelectionMenu","jsx","_jsx","normalizeSelectedData","selected","normalizeNativeVisible","presentation","visible","undefined","SelectionMenu","props","style","options","disabled","placeholder","onSelect","onRequestClose","ios","android","viewProps","selectedData","nativeVisible","handleSelect","e","index","label","data","nativeEvent","handleRequestClose","nativeAndroid","material","interactivity","anchorMode"],"sourceRoot":"../../src","sources":["SelectionMenu.tsx"],"mappings":";;AAAA;AACA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAGnD,OAAOC,mBAAmB,MAGnB,gCAAgC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAuDxC,SAASC,qBAAqBA,CAACC,QAAuB,EAAU;EAC9D,OAAOA,QAAQ,IAAI,EAAE;AACvB;AAEA,SAASC,sBAAsBA,CAC7BC,YAAsC,EACtCC,OAA4B,EACG;EAC/B;EACA,IAAID,YAAY,KAAK,UAAU,EAAE,OAAOE,SAAS;EACjD,OAAOD,OAAO,GAAG,MAAM,GAAG,QAAQ;AACpC;AAEA,OAAO,SAASE,aAAaA,CAACC,KAAyB,EAAsB;EAC3E,MAAM;IACJC,KAAK;IACLC,OAAO;IACPR,QAAQ;IACRS,QAAQ;IACRC,WAAW;IACXR,YAAY,GAAG,OAAO;IACtBC,OAAO;IACPQ,QAAQ;IACRC,cAAc;IACdC,GAAG;IACHC,OAAO;IACP,GAAGC;EACL,CAAC,GAAGT,KAAK;EAET,MAAMU,YAAY,GAAGrB,OAAO,CAC1B,MAAMI,qBAAqB,CAACC,QAAQ,CAAC,EACrC,CAACA,QAAQ,CACX,CAAC;EAED,MAAMiB,aAAa,GAAGtB,OAAO,CAC3B,MAAMM,sBAAsB,CAACC,YAAY,EAAEC,OAAO,CAAC,EACnD,CAACD,YAAY,EAAEC,OAAO,CACxB,CAAC;EAED,MAAMe,YAAY,GAAGxB,WAAW,CAC7ByB,CAA4C,IAAK;IAChD,MAAM;MAAEC,KAAK;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAGH,CAAC,CAACI,WAAW;IAC5CZ,QAAQ,GAAGW,IAAI,EAAED,KAAK,EAAED,KAAK,CAAC;EAChC,CAAC,EACD,CAACT,QAAQ,CACX,CAAC;EAED,MAAMa,kBAAkB,GAAG9B,WAAW,CAAC,MAAM;IAC3CkB,cAAc,GAAG,CAAC;EACpB,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;;EAEpB;EACA,MAAMa,aAAa,GAAG9B,OAAO,CAAC,MAAM;IAClC,IAAI,CAACmB,OAAO,EAAE,OAAOV,SAAS;IAC9B,OAAO;MAAEsB,QAAQ,EAAEZ,OAAO,CAACY;IAAS,CAAC;EACvC,CAAC,EAAE,CAACZ,OAAO,CAAC,CAAC;EAEb,oBACEhB,IAAA,CAACF,mBAAmB;IAClBW,KAAK,EAAEA,KAAM;IACbC,OAAO,EAAEA,OAAQ;IACjBQ,YAAY,EAAEA,YAAa;IAC3BW,aAAa,EAAElB,QAAQ,GAAG,UAAU,GAAG,SAAU;IACjDC,WAAW,EAAEA,WAAY;IACzBkB,UAAU,EAAE1B,YAAY,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAW;IAChEC,OAAO,EAAEc,aAAc;IACvBN,QAAQ,EAAEA,QAAQ,GAAGO,YAAY,GAAGd,SAAU;IAC9CQ,cAAc,EAAEA,cAAc,GAAGY,kBAAkB,GAAGpB,SAAU;IAChES,GAAG,EAAEA,GAAI;IACTC,OAAO,EAAEW,aAAc;IAAA,GACnBV;EAAS,CACd,CAAC;AAEN","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type ViewProps } from 'react-native';
 import { type SelectionMenuOption } from './SelectionMenuNativeComponent';
-import type { AndroidMaterialMode } from './sharedTypes';
+import type { AndroidMaterialMode, Presentation } from './sharedTypes';
 export interface SelectionMenuProps extends ViewProps {
     /** Options are label + data (payload) */
     options: readonly SelectionMenuOption[];
@@ -13,12 +13,13 @@ export interface SelectionMenuProps extends ViewProps {
     disabled?: boolean;
     placeholder?: string;
     /**
-     * If true, native renders its own inline anchor and manages open/close internally.
-     * If false (default), component is headless and controlled by `visible`.
+     * Presentation mode:
+     * - 'modal' (default): Headless mode, controlled by `visible` prop.
+     * - 'embedded': Native renders its own inline anchor and manages open/close internally.
      */
-    inlineMode?: boolean;
+    presentation?: Presentation;
     /**
-     * Headless mode only (inlineMode === false):
+     * Modal mode only (presentation === 'modal'):
      * controls whether the native menu UI is presented.
      */
     visible?: boolean;

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,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"}
+{"version":3,"file":"SelectionMenu.d.ts","sourceRoot":"","sources":["../../../src/SelectionMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAA4B,EAC1B,KAAK,mBAAmB,EAEzB,MAAM,gCAAgC,CAAC;AAExC,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAEvE,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;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B;;;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,CA4D3E"}

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

@@ -1,6 +1,8 @@
 import type { CodegenTypes } from 'react-native';
-/** Shared “open/closed” control state. */
+/** Shared "open/closed" control state. */
 export type Visible = 'open' | 'closed';
+/** Shared presentation mode for pickers/menus. */
+export type Presentation = 'modal' | 'embedded';
 /** Shared Material preference (Android). */
 export type AndroidMaterialMode = 'system' | 'm3';
 /** Common event empty payload type. */

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

@@ -1 +1 @@
-{"version":3,"file":"sharedTypes.d.ts","sourceRoot":"","sources":["../../../src/sharedTypes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,0CAA0C;AAC1C,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExC,4CAA4C;AAC5C,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,IAAI,CAAC;AAElD,uCAAuC;AACvC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAEtC,oCAAoC;AACpC,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,YAAY,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"sharedTypes.d.ts","sourceRoot":"","sources":["../../../src/sharedTypes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,0CAA0C;AAC1C,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExC,kDAAkD;AAClD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,UAAU,CAAC;AAEhD,4CAA4C;AAC5C,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,IAAI,CAAC;AAElD,uCAAuC;AACvC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAEtC,oCAAoC;AACpC,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,YAAY,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-platform-components",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "A cross-platform toolkit of native UI components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -42,7 +42,8 @@
     "release": "release-it",
     "test": "jest",
     "upgrade:check": "yarn dlx npm-check-updates",
-    "upgrade:apply": "yarn dlx npm-check-updates -u && rm -rf node_modules && rm -rf package-lock.json && yarn install"
+    "upgrade:apply": "yarn dlx npm-check-updates -u && rm -rf node_modules && rm -rf package-lock.json && yarn install",
+    "generate:gifs": "./scripts/generate-readme-gifs.sh"
   },
   "keywords": [
     "react-native",

package/react-native.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        componentDescriptors: [
+          'MeasuringPCSelectionMenuComponentDescriptor',
+          'MeasuringPCDatePickerComponentDescriptor',
+        ],
+        cmakeListsPath: 'src/main/jni/CMakeLists.txt',
+      },
+    },
+  },
+};

package/shared/PCDatePickerComponentDescriptors-custom.h

@@ -1,52 +1,23 @@
 #pragma once
 
-#include "PCDatePickerShadowNode-custom.h"
-
 #include <react/renderer/core/ConcreteComponentDescriptor.h>
-#include <react/renderer/mounting/ShadowView.h>
-#include <react/renderer/core/ShadowNode.h>
-#include <react/renderer/core/ShadowNodeTraits.h>
-#include <react/renderer/core/ShadowNodeFragment.h>
-#include <react/renderer/core/ShadowNodeFamily.h>
-#include <react/renderer/components/view/YogaLayoutableShadowNode.h>
-
-namespace facebook::react
-{
 
-    class MeasuringPCDatePickerComponentDescriptor final
-        : public ConcreteComponentDescriptor<MeasuringPCDatePickerShadowNode>
-    {
-    public:
-        using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+// Forward declaration to avoid circular includes
+namespace facebook::react {
+class MeasuringPCDatePickerShadowNode;
+}
 
-        void adopt(ShadowNode &shadowNode) const override
-        {
-            auto &pickerShadowNode =
-                static_cast<MeasuringPCDatePickerShadowNode &>(shadowNode);
-            auto &layoutableShadowNode =
-                static_cast<YogaLayoutableShadowNode &>(pickerShadowNode);
-
-            auto state =
-                std::static_pointer_cast<
-                    const MeasuringPCDatePickerShadowNode::ConcreteState
-                >(shadowNode.getState());
-
-            if (state)
-            {
-                auto stateData = state->getData();
-                auto frameSize = stateData.frameSize;
+// Include the actual shadow node definition
+#include "PCDatePickerShadowNode-custom.h"
 
-                if (frameSize.width >= 0 && frameSize.height >= 0)
-                {
-                    layoutableShadowNode.setSize(Size{
-                        frameSize.width,
-                        frameSize.height,
-                    });
-                }
-            }
+namespace facebook::react {
 
-            ConcreteComponentDescriptor::adopt(shadowNode);
-        }
-    };
+/**
+ * Custom component descriptor that uses our measuring shadow node
+ * instead of the generated one. No custom adopt() needed since
+ * measurement is handled via measureContent().
+ */
+using MeasuringPCDatePickerComponentDescriptor =
+    ConcreteComponentDescriptor<MeasuringPCDatePickerShadowNode>;
 
 } // namespace facebook::react

package/shared/PCDatePickerShadowNode-custom.cpp

@@ -1 +1,36 @@
 #include "PCDatePickerShadowNode-custom.h"
+
+#include <react/renderer/core/LayoutConstraints.h>
+#include <react/renderer/core/ConcreteShadowNode.h>
+#include <algorithm>
+
+namespace facebook::react {
+
+Size MeasuringPCDatePickerShadowNode::measureContent(
+    const LayoutContext& /*layoutContext*/,
+    const LayoutConstraints& layoutConstraints) const {
+
+  // Get frame size from native state - native measures the actual picker
+  const auto& stateData = this->getStateData();
+  Float measuredW = stateData.frameSize.width;
+  Float measuredH = stateData.frameSize.height;
+
+  // If width is 0, use available width from constraints
+  const Float kHuge = static_cast<Float>(1.0e9);
+  if (measuredW <= 0) {
+    const Float maxW = layoutConstraints.maximumSize.width;
+    measuredW = (maxW > 0 && maxW < kHuge) ? maxW : 0;
+  }
+
+  // Respect layout constraints
+  measuredW = std::max<Float>(measuredW, layoutConstraints.minimumSize.width);
+  measuredW = std::min<Float>(measuredW, layoutConstraints.maximumSize.width);
+
+  measuredH = std::max<Float>(measuredH, layoutConstraints.minimumSize.height);
+  measuredH = std::min<Float>(measuredH, layoutConstraints.maximumSize.height);
+
+  Size result{measuredW, measuredH};
+  return layoutConstraints.clamp(result);
+}
+
+} // namespace facebook::react

package/shared/PCDatePickerShadowNode-custom.h

@@ -1,27 +1,49 @@
 #pragma once
 
-#include <react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+
+// Only include what we need for the shadow node definition
+// Do NOT include ComponentDescriptors.h here to avoid circular dependency
 #include <react/renderer/components/PlatformComponentsViewSpec/EventEmitters.h>
 #include <react/renderer/components/PlatformComponentsViewSpec/Props.h>
 
-#include <react/renderer/components/view/ConcreteViewShadowNode.h>
-#include <react/renderer/core/ConcreteState.h>
-#include <react/renderer/core/ShadowNodeTraits.h>
-#include <react/renderer/mounting/ShadowView.h>
-
 #include "PCDatePickerState-custom.h"
 
-namespace facebook::react
-{
-    class MeasuringPCDatePickerShadowNode final
-        : public ConcreteViewShadowNode<
-              PCDatePickerComponentName,
-              PCDatePickerProps,
-              PCDatePickerEventEmitter,
-              PCDatePickerStateFrameSize>
-    {
-    public:
-        using ConcreteViewShadowNode::ConcreteViewShadowNode;
-    };
+namespace facebook::react {
+
+extern const char PCDatePickerComponentName[];
+
+/**
+ * Custom ShadowNode for DatePicker that supports Yoga measurement.
+ *
+ * Key behavior:
+ * - Native side measures the actual picker and updates state with frameSize
+ * - measureContent() returns the size from state for proper Yoga layout
+ * - No hardcoded dimensions - uses actual measured values from native
+ */
+class MeasuringPCDatePickerShadowNode final
+    : public ConcreteViewShadowNode<
+          PCDatePickerComponentName,
+          PCDatePickerProps,
+          PCDatePickerEventEmitter,
+          PCDatePickerStateFrameSize> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+  static ShadowNodeTraits BaseTraits() {
+    auto traits = ConcreteViewShadowNode::BaseTraits();
+    traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
+    traits.set(ShadowNodeTraits::Trait::MeasurableYogaNode);
+    return traits;
+  }
+
+  /**
+   * Called by Yoga when it needs the intrinsic size of the component.
+   * Returns the size provided by native through state - no hardcoding.
+   */
+  Size measureContent(
+      const LayoutContext& layoutContext,
+      const LayoutConstraints& layoutConstraints) const override;
+};
 
 } // namespace facebook::react

package/shared/PCDatePickerState-custom.h

@@ -1,13 +1,65 @@
 #pragma once
 
 #include <react/renderer/core/LayoutPrimitives.h>
+#include <memory>
+
+#ifdef RN_SERIALIZABLE_STATE
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#endif
 
 namespace facebook::react {
 
-struct PCDatePickerStateFrameSize final {
+/**
+ * Custom state for DatePicker that holds the measured frame size from native.
+ * This allows the native side to measure the actual picker and communicate
+ * the size to the shadow node for proper Yoga layout.
+ *
+ * Note: Does NOT inherit from StateData (which is final). Custom state types
+ * are standalone structs that satisfy the ConcreteState template requirements.
+ */
+struct PCDatePickerStateFrameSize {
   using Shared = std::shared_ptr<const PCDatePickerStateFrameSize>;
 
   Size frameSize{}; // {width, height} in points
+
+  PCDatePickerStateFrameSize() = default;
+
+  explicit PCDatePickerStateFrameSize(Size size) : frameSize(size) {}
+
+  bool operator==(const PCDatePickerStateFrameSize& other) const {
+    return frameSize.width == other.frameSize.width &&
+           frameSize.height == other.frameSize.height;
+  }
+
+  bool operator!=(const PCDatePickerStateFrameSize& other) const {
+    return !(*this == other);
+  }
+
+#ifdef RN_SERIALIZABLE_STATE
+  // Required for Android state serialization
+  PCDatePickerStateFrameSize(
+      const PCDatePickerStateFrameSize& previousState,
+      folly::dynamic data)
+      : frameSize(previousState.frameSize) {
+    // Parse frame size from dynamic data if provided
+    if (data.isObject()) {
+      if (data.count("width") && data.count("height")) {
+        frameSize.width = static_cast<Float>(data["width"].asDouble());
+        frameSize.height = static_cast<Float>(data["height"].asDouble());
+      }
+    }
+  }
+
+  folly::dynamic getDynamic() const {
+    return folly::dynamic::object("width", frameSize.width)("height", frameSize.height);
+  }
+
+  MapBuffer getMapBuffer() const {
+    return MapBufferBuilder::EMPTY();
+  }
+#endif
 };
 
 } // namespace facebook::react

package/shared/PCSelectionMenuComponentDescriptors-custom.h

@@ -1,25 +1,22 @@
 #pragma once
 
-#include "PCSelectionMenuShadowNode-custom.h"
-
 #include <react/renderer/core/ConcreteComponentDescriptor.h>
-#include <react/renderer/mounting/ShadowView.h>
-#include <react/renderer/core/ShadowNode.h>
-#include <react/renderer/core/ShadowNodeTraits.h>
-#include <react/renderer/core/ShadowNodeFragment.h>
-#include <react/renderer/core/ShadowNodeFamily.h>
-#include <react/renderer/components/view/YogaLayoutableShadowNode.h>
 
-namespace facebook::react
-{
-using MeasuringPCSelectionMenuComponentDescriptor = ConcreteComponentDescriptor<MeasuringPCSelectionMenuShadowNode>;
+// Forward declaration to avoid circular includes
+namespace facebook::react {
+class MeasuringPCSelectionMenuShadowNode;
+}
+
+// Include the actual shadow node definition
+#include "PCSelectionMenuShadowNode-custom.h"
+
+namespace facebook::react {
 
-/*
-    class MeasuringPCDatePickerComponentDescriptor final
-        : public ConcreteComponentDescriptor<MeasuringPCSelectionMenuShadowNode>
-    {
-    public:
-        using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
-    };*/
+/**
+ * Custom component descriptor that uses our measuring shadow node
+ * instead of the generated one.
+ */
+using MeasuringPCSelectionMenuComponentDescriptor =
+    ConcreteComponentDescriptor<MeasuringPCSelectionMenuShadowNode>;
 
 } // namespace facebook::react

package/shared/PCSelectionMenuShadowNode-custom.cpp

@@ -1,36 +1,57 @@
-#include <react/renderer/core/LayoutConstraints.h>
 #include "PCSelectionMenuShadowNode-custom.h"
 
+#include <react/renderer/core/LayoutConstraints.h>
 #include <algorithm>
 
 namespace facebook::react {
 
-  Size MeasuringPCSelectionMenuShadowNode::measureContent(
-      const LayoutContext&,
-      const LayoutConstraints& layoutConstraints) const {
-
-    const Float kHuge = static_cast<Float>(1.0e9);
+Size MeasuringPCSelectionMenuShadowNode::measureContent(
+    const LayoutContext& /*layoutContext*/,
+    const LayoutConstraints& layoutConstraints) const {
 
-    const Float maxW = layoutConstraints.maximumSize.width;
-    const Float measuredW = (maxW > 0 && maxW < kHuge) ? maxW : 0;
-
-    const auto& props = *std::static_pointer_cast<const PCSelectionMenuProps>(getProps());
-    const bool inlineMode = props.anchorMode == "inline";
+  const auto& props = *std::static_pointer_cast<const PCSelectionMenuProps>(getProps());
+  const bool inlineMode = props.anchorMode == "inline";
 
-    Float measuredH = 0;
+  // Headless mode: zero size
+  if (!inlineMode) {
+    return layoutConstraints.clamp(Size{0, 0});
+  }
 
-    if (inlineMode) {
-      measuredH = static_cast<Float>(kMinRowHeight); // 44
+  // Get frame size from native state - native measures the actual picker
+  const auto& stateData = this->getStateData();
+  Float measuredW = stateData.frameSize.width;
+  Float measuredH = stateData.frameSize.height;
+
+  // If height is 0, use fallback values (state not yet set by native)
+  if (measuredH <= 0) {
+#ifdef __ANDROID__
+    const std::string& material = props.android.material;
+    if (material == "m3") {
+      measuredH = static_cast<Float>(kFallbackHeightAndroidM3);
     } else {
-      measuredH = 0;
+      measuredH = static_cast<Float>(kFallbackHeightAndroid);
     }
+#else
+    measuredH = static_cast<Float>(kFallbackHeightIOS);
+#endif
+  }
 
-    // Respect layout constraints (min/max) coming from JS styles
-    measuredH = std::max<Float>(measuredH, layoutConstraints.minimumSize.height);
-    measuredH = std::min<Float>(measuredH, layoutConstraints.maximumSize.height);
-
-    Size result{measuredW, measuredH};
-    return layoutConstraints.clamp(result);
+  // If width is 0, use available width from constraints
+  const Float kHuge = static_cast<Float>(1.0e9);
+  if (measuredW <= 0) {
+    const Float maxW = layoutConstraints.maximumSize.width;
+    measuredW = (maxW > 0 && maxW < kHuge) ? maxW : 0;
   }
 
+  // Respect layout constraints
+  measuredW = std::max<Float>(measuredW, layoutConstraints.minimumSize.width);
+  measuredW = std::min<Float>(measuredW, layoutConstraints.maximumSize.width);
+
+  measuredH = std::max<Float>(measuredH, layoutConstraints.minimumSize.height);
+  measuredH = std::min<Float>(measuredH, layoutConstraints.maximumSize.height);
+
+  Size result{measuredW, measuredH};
+  return layoutConstraints.clamp(result);
+}
+
 } // namespace facebook::react