react-native-platform-components 0.5.3 → 0.5.5

package/shared/PCSelectionMenuShadowNode-custom.h

@@ -2,31 +2,43 @@
 
 #include <react/renderer/components/view/ConcreteViewShadowNode.h>
 
-#import <react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h>
-#import <react/renderer/components/PlatformComponentsViewSpec/EventEmitters.h>
-#import <react/renderer/components/PlatformComponentsViewSpec/Props.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 "PCSelectionMenuState-custom.h"
 
 namespace facebook::react {
 
 extern const char PCSelectionMenuComponentName[];
 
 /**
- * ShadowNode for SelectionMenu.
+ * Custom ShadowNode for SelectionMenu that supports Yoga measurement.
  *
  * Key behavior:
- * - Provides a non-zero default measured height (minRowHeight) so the view
- *   remains tappable when JS does not specify an explicit height.
+ * - Native side measures the actual picker and updates state with frameSize
+ * - measureContent() returns the size from state for proper Yoga layout
+ * - Falls back to platform-specific defaults if state hasn't been set yet
  */
 class MeasuringPCSelectionMenuShadowNode final : public ConcreteViewShadowNode<
                                           PCSelectionMenuComponentName,
                                           PCSelectionMenuProps,
                                           PCSelectionMenuEventEmitter,
-                                          PCSelectionMenuState> {
+                                          PCSelectionMenuStateFrameSize> {
  public:
   using ConcreteViewShadowNode::ConcreteViewShadowNode;
 
-  static constexpr float kMinRowHeight = 44.0f;
-                                            
+  // Fallback heights used when native hasn't reported measurements yet
+  // iOS standard row height
+  static constexpr float kFallbackHeightIOS = 44.0f;
+
+  // Android System Spinner height
+  static constexpr float kFallbackHeightAndroid = 56.0f;
+
+  // Android M3 TextInputLayout with floating label height
+  static constexpr float kFallbackHeightAndroidM3 = 72.0f;
+
   static ShadowNodeTraits BaseTraits() {
     auto traits = ConcreteViewShadowNode::BaseTraits();
     traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
@@ -36,7 +48,8 @@ class MeasuringPCSelectionMenuShadowNode final : public ConcreteViewShadowNode<
 
   /**
    * Called by Yoga when it needs the intrinsic size of the component.
-   * We ensure a sensible minimum height so the view doesn't measure to 0.
+   * Returns the size provided by native through state, with fallback to
+   * platform-specific defaults if state hasn't been set.
    */
   Size measureContent(
       const LayoutContext& layoutContext,

package/shared/PCSelectionMenuState-custom.h

@@ -0,0 +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 {
+
+/**
+ * Custom state for SelectionMenu 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 PCSelectionMenuStateFrameSize {
+  using Shared = std::shared_ptr<const PCSelectionMenuStateFrameSize>;
+
+  Size frameSize{}; // {width, height} in points
+
+  PCSelectionMenuStateFrameSize() = default;
+
+  explicit PCSelectionMenuStateFrameSize(Size size) : frameSize(size) {}
+
+  bool operator==(const PCSelectionMenuStateFrameSize& other) const {
+    return frameSize.width == other.frameSize.width &&
+           frameSize.height == other.frameSize.height;
+  }
+
+  bool operator!=(const PCSelectionMenuStateFrameSize& other) const {
+    return !(*this == other);
+  }
+
+#ifdef RN_SERIALIZABLE_STATE
+  // Required for Android state serialization
+  PCSelectionMenuStateFrameSize(
+      const PCSelectionMenuStateFrameSize& 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/README.md

@@ -0,0 +1,179 @@
+# Shared C++ Code for Yoga Shadow Node Measurement
+
+This directory contains cross-platform C++ code that enables native components to report their measured sizes to React Native's Yoga layout engine. This allows components like `DatePicker` and `SelectionMenu` to have "perfect" sizing based on their actual native content, rather than relying on hardcoded dimensions.
+
+## Architecture Overview
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                         React Native (JS)                               │
+│   <DatePicker />  <SelectionMenu />                                     │
+└─────────────────────────────────────────────────────────────────────────┘
+                                   │
+                                   ▼
+┌─────────────────────────────────────────────────────────────────────────┐
+│                    Yoga Layout Engine (C++)                             │
+│                                                                         │
+│   Calls measureContent() on shadow nodes to determine intrinsic size    │
+└─────────────────────────────────────────────────────────────────────────┘
+                                   │
+                                   ▼
+┌─────────────────────────────────────────────────────────────────────────┐
+│              Custom Shadow Nodes (this directory)                       │
+│                                                                         │
+│   MeasuringPCDatePickerShadowNode                                       │
+│   MeasuringPCSelectionMenuShadowNode                                    │
+│                                                                         │
+│   - Marked as LeafYogaNode + MeasurableYogaNode                         │
+│   - Override measureContent() to return size from state                 │
+└─────────────────────────────────────────────────────────────────────────┘
+                                   │
+                                   ▼
+┌─────────────────────────────────────────────────────────────────────────┐
+│                    Custom State (this directory)                        │
+│                                                                         │
+│   PCDatePickerStateFrameSize { Size frameSize }                         │
+│   PCSelectionMenuStateFrameSize { Size frameSize }                      │
+│                                                                         │
+│   - Holds measured dimensions from native                               │
+│   - Supports serialization for Android (folly::dynamic)                 │
+└─────────────────────────────────────────────────────────────────────────┘
+                                   ▲
+                                   │
+┌─────────────────────────────────────────────────────────────────────────┐
+│                      Native Views (iOS/Android)                         │
+│                                                                         │
+│   iOS: PCDatePickerView, PCSelectionMenuView                            │
+│   Android: PCDatePickerView, PCSelectionMenuView                        │
+│                                                                         │
+│   - Measure actual native content                                       │
+│   - Call state->updateState() with measured frameSize                   │
+│   - Triggers Yoga re-layout with correct dimensions                     │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+## How It Works
+
+### 1. Shadow Node Traits
+
+Shadow nodes are marked with two critical traits:
+
+```cpp
+static ShadowNodeTraits BaseTraits() {
+  auto traits = ConcreteViewShadowNode::BaseTraits();
+  traits.set(ShadowNodeTraits::Trait::LeafYogaNode);      // No Yoga children
+  traits.set(ShadowNodeTraits::Trait::MeasurableYogaNode); // Has measureContent()
+  return traits;
+}
+```
+
+- **LeafYogaNode**: Tells Yoga this node has no children to layout
+- **MeasurableYogaNode**: Tells Yoga to call `measureContent()` for intrinsic sizing
+
+### 2. Measurement Flow
+
+```cpp
+Size measureContent(
+    const LayoutContext& layoutContext,
+    const LayoutConstraints& layoutConstraints) const override {
+
+  // Get the measured size from native (via state)
+  const auto& stateData = this->getStateData();
+  Float measuredW = stateData.frameSize.width;
+  Float measuredH = stateData.frameSize.height;
+
+  // Apply layout constraints and return
+  return layoutConstraints.clamp(Size{measuredW, measuredH});
+}
+```
+
+### 3. Native → Shadow Node Communication (State)
+
+Native views measure their content and update the shadow node's state:
+
+**iOS (Objective-C++):**
+```objc
+- (void)updateMeasurements {
+  CGSize size = [_nativeView sizeForLayoutWithConstrainedTo:...];
+
+  PCDatePickerStateFrameSize next;
+  next.frameSize = {(Float)size.width, (Float)size.height};
+  _state->updateState(std::move(next));
+}
+```
+
+**Android (Kotlin + JNI):**
+```kotlin
+private fun updateMeasurements(width: Float, height: Float) {
+  updateState(width, height)  // JNI call to C++
+}
+```
+
+### 4. State Serialization (Android)
+
+Android requires state to be serializable via `folly::dynamic`:
+
+```cpp
+struct PCDatePickerStateFrameSize {
+#ifdef RN_SERIALIZABLE_STATE
+  // Constructor from dynamic data
+  PCDatePickerStateFrameSize(
+      const PCDatePickerStateFrameSize& previousState,
+      folly::dynamic data) {
+    if (data.isObject() && 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);
+  }
+#endif
+};
+```
+
+## File Structure
+
+| File | Purpose |
+|------|---------|
+| `PC*ShadowNode-custom.h` | Shadow node class declaration with `measureContent()` |
+| `PC*ShadowNode-custom.cpp` | `measureContent()` implementation |
+| `PC*State-custom.h` | State struct holding `frameSize` from native |
+| `PC*ComponentDescriptors-custom.h` | Type alias for component descriptor using custom shadow node |
+
+## Fallback Behavior
+
+When native hasn't yet reported measurements (state is empty), the shadow nodes use platform-specific fallback heights:
+
+```cpp
+// SelectionMenu fallbacks
+static constexpr float kFallbackHeightIOS = 44.0f;        // iOS standard row
+static constexpr float kFallbackHeightAndroid = 56.0f;    // Android Spinner
+static constexpr float kFallbackHeightAndroidM3 = 72.0f;  // Android M3 TextInputLayout
+```
+
+This prevents layout jumps on initial render before native measurement completes.
+
+## Integration Points
+
+### iOS
+
+- `ios/PCDatePicker.mm` - Calls `updateMeasurements` when props change
+- `ios/PCSelectionMenu.mm` - Calls `updateMeasurements` when props change
+
+### Android
+
+- `android/.../PCDatePickerView.kt` - Calls JNI `updateState()` after measure
+- `android/.../PCSelectionMenuView.kt` - Calls JNI `updateState()` after measure
+- `android/src/main/jni/OnLoad.cpp` - JNI bridge for state updates
+
+## Common Pitfalls
+
+1. **Circular includes**: Shadow node headers should NOT include ComponentDescriptors.h. Use forward declarations instead.
+
+2. **State timing**: Native measurement may happen after initial Yoga layout. Always provide sensible fallback values.
+
+3. **Width constraints**: When width isn't measured (0), use `layoutConstraints.maximumSize.width` as the width.
+
+4. **Android serialization**: The `RN_SERIALIZABLE_STATE` macro gates Android-specific serialization code.

package/shared/react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h

@@ -0,0 +1,9 @@
+#pragma once
+
+// Include the codegen-generated component descriptors using include_next
+// This allows us to shadow the header while still including the original
+#include_next <react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h>
+
+// Include our custom component descriptors which use measuring shadow nodes
+#include "PCSelectionMenuComponentDescriptors-custom.h"
+#include "PCDatePickerComponentDescriptors-custom.h"

package/src/SelectionMenu.tsx

@@ -1,13 +1,13 @@
 // SelectionMenu.tsx
 import React, { useCallback, useMemo } from 'react';
-import { Platform, StyleSheet, type ViewProps } from 'react-native';
+import { type ViewProps } from 'react-native';
 
 import NativeSelectionMenu, {
   type SelectionMenuOption,
   type SelectionMenuSelectEvent,
 } from './SelectionMenuNativeComponent';
 
-import type { AndroidMaterialMode } from './sharedTypes';
+import type { AndroidMaterialMode, Presentation } from './sharedTypes';
 
 export interface SelectionMenuProps extends ViewProps {
   /** Options are label + data (payload) */
@@ -23,13 +23,14 @@ export interface SelectionMenuProps extends ViewProps {
   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;
@@ -64,11 +65,11 @@ function normalizeSelectedData(selected: string | null): string {
 }
 
 function normalizeNativeVisible(
-  inlineMode: boolean | undefined,
+  presentation: Presentation | undefined,
   visible: boolean | undefined
 ): 'open' | 'closed' | undefined {
-  // Inline mode ignores visible; keep it undefined so native isn't spammed.
-  if (inlineMode) return undefined;
+  // Embedded mode ignores visible; keep it undefined so native isn't spammed.
+  if (presentation === 'embedded') return undefined;
   return visible ? 'open' : 'closed';
 }
 
@@ -79,7 +80,7 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
     selected,
     disabled,
     placeholder,
-    inlineMode,
+    presentation = 'modal',
     visible,
     onSelect,
     onRequestClose,
@@ -94,8 +95,8 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
   );
 
   const nativeVisible = useMemo(
-    () => normalizeNativeVisible(inlineMode, visible),
-    [inlineMode, visible]
+    () => normalizeNativeVisible(presentation, visible),
+    [presentation, visible]
   );
 
   const handleSelect = useCallback(
@@ -116,20 +117,14 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
     return { material: android.material };
   }, [android]);
 
-  const isAndroidM3Inline =
-    android?.material &&
-    inlineMode &&
-    android.material === 'm3' &&
-    Platform.OS === 'android';
-
   return (
     <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}
@@ -139,7 +134,3 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
     />
   );
 }
-
-const styles = StyleSheet.create({
-  androidInline: { minHeight: 60 },
-});

package/src/sharedTypes.ts

@@ -1,9 +1,12 @@
 // SharedTypes.ts
 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';