react-native-platform-components 1.3.0 → 1.5.0

package/shared/PCNavigationRailState-custom.h

@@ -0,0 +1,62 @@
+#pragma once
+
+#include <react/renderer/core/LayoutPrimitives.h>
+#include <memory>
+
+#if defined(RN_SERIALIZABLE_STATE) || defined(ANDROID)
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#endif
+
+namespace facebook::react {
+
+/**
+ * Custom state for NavigationRail that holds the measured frame size from native.
+ * This allows the native side to measure the rail and communicate
+ * the size to the shadow node for proper Yoga layout.
+ */
+struct PCNavigationRailStateFrameSize {
+  using Shared = std::shared_ptr<const PCNavigationRailStateFrameSize>;
+
+  Size frameSize{}; // {width, height} in points
+
+  PCNavigationRailStateFrameSize() = default;
+
+  explicit PCNavigationRailStateFrameSize(Size size) : frameSize(size) {}
+
+  bool operator==(const PCNavigationRailStateFrameSize& other) const {
+    return frameSize.width == other.frameSize.width &&
+           frameSize.height == other.frameSize.height;
+  }
+
+  bool operator!=(const PCNavigationRailStateFrameSize& other) const {
+    return !(*this == other);
+  }
+
+#if defined(RN_SERIALIZABLE_STATE) || defined(ANDROID)
+  // Required for Android state serialization
+  PCNavigationRailStateFrameSize(
+      const PCNavigationRailStateFrameSize& 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/PCTabBarComponentDescriptors-custom.h

@@ -0,0 +1,22 @@
+#pragma once
+
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+// Forward declaration to avoid circular includes
+namespace facebook::react {
+class MeasuringPCTabBarShadowNode;
+}
+
+// Include the actual shadow node definition
+#include "PCTabBarShadowNode-custom.h"
+
+namespace facebook::react {
+
+/**
+ * Custom component descriptor that uses our measuring shadow node
+ * instead of the generated one.
+ */
+using MeasuringPCTabBarComponentDescriptor =
+    ConcreteComponentDescriptor<MeasuringPCTabBarShadowNode>;
+
+} // namespace facebook::react

package/shared/PCTabBarShadowNode-custom.cpp

@@ -0,0 +1,54 @@
+#include "PCTabBarShadowNode-custom.h"
+
+#include <react/renderer/core/LayoutConstraints.h>
+#include <algorithm>
+
+namespace facebook::react {
+
+Size MeasuringPCTabBarShadowNode::measureContent(
+    const LayoutContext& /*layoutContext*/,
+    const LayoutConstraints& layoutConstraints) const {
+
+  // Get frame size from native state - native measures the actual control
+  const auto& stateData = this->getStateData();
+  Float measuredW = stateData.frameSize.width;
+  Float measuredH = stateData.frameSize.height;
+
+  // Platform-specific fallback heights
+  const Float fallbackHeight =
+#ifdef __ANDROID__
+      static_cast<Float>(kFallbackHeightAndroid);
+#else
+      static_cast<Float>(kFallbackHeightIOS);
+#endif
+
+  // If height is 0, use fallback (state not yet set by native)
+  const bool usingFallback = (measuredH <= 0);
+  if (usingFallback) {
+    measuredH = fallbackHeight;
+  }
+
+  // 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 : 300;
+  }
+
+  // Respect layout constraints, but if using fallback height,
+  // don't let maximum constraint override our fallback
+  measuredW = std::max<Float>(measuredW, layoutConstraints.minimumSize.width);
+  if (layoutConstraints.maximumSize.width > 0 && layoutConstraints.maximumSize.width < kHuge) {
+    measuredW = std::min<Float>(measuredW, layoutConstraints.maximumSize.width);
+  }
+
+  measuredH = std::max<Float>(measuredH, layoutConstraints.minimumSize.height);
+  // Only clamp to max height if we have real measured data (not fallback)
+  if (!usingFallback && layoutConstraints.maximumSize.height > 0 && layoutConstraints.maximumSize.height < kHuge) {
+    measuredH = std::min<Float>(measuredH, layoutConstraints.maximumSize.height);
+  }
+
+  return Size{measuredW, measuredH};
+}
+
+} // namespace facebook::react

package/shared/PCTabBarShadowNode-custom.h

@@ -0,0 +1,54 @@
+#pragma once
+
+#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 "PCTabBarState-custom.h"
+
+namespace facebook::react {
+
+extern const char PCTabBarComponentName[];
+
+/**
+ * Custom ShadowNode for TabBar that supports Yoga measurement.
+ *
+ * Key behavior:
+ * - Native side measures the actual tab bar 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 MeasuringPCTabBarShadowNode final : public ConcreteViewShadowNode<
+                                          PCTabBarComponentName,
+                                          PCTabBarProps,
+                                          PCTabBarEventEmitter,
+                                          PCTabBarStateFrameSize> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+  // Fallback heights used when native hasn't reported measurements yet:
+  // the iOS tab bar and the Android Material 3 navigation bar
+  static constexpr float kFallbackHeightIOS = 49.0f;
+  static constexpr float kFallbackHeightAndroid = 80.0f;
+
+  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, with fallback to
+   * platform-specific defaults if state hasn't been set.
+   */
+  Size measureContent(
+      const LayoutContext& layoutContext,
+      const LayoutConstraints& layoutConstraints) const override;
+};
+
+} // namespace facebook::react

package/shared/PCTabBarState-custom.h

@@ -0,0 +1,62 @@
+#pragma once
+
+#include <react/renderer/core/LayoutPrimitives.h>
+#include <memory>
+
+#if defined(RN_SERIALIZABLE_STATE) || defined(ANDROID)
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#endif
+
+namespace facebook::react {
+
+/**
+ * Custom state for TabBar that holds the measured frame size from native.
+ * This allows the native side to measure the actual tab bar and communicate
+ * the size to the shadow node for proper Yoga layout.
+ */
+struct PCTabBarStateFrameSize {
+  using Shared = std::shared_ptr<const PCTabBarStateFrameSize>;
+
+  Size frameSize{}; // {width, height} in points
+
+  PCTabBarStateFrameSize() = default;
+
+  explicit PCTabBarStateFrameSize(Size size) : frameSize(size) {}
+
+  bool operator==(const PCTabBarStateFrameSize& other) const {
+    return frameSize.width == other.frameSize.width &&
+           frameSize.height == other.frameSize.height;
+  }
+
+  bool operator!=(const PCTabBarStateFrameSize& other) const {
+    return !(*this == other);
+  }
+
+#if defined(RN_SERIALIZABLE_STATE) || defined(ANDROID)
+  // Required for Android state serialization
+  PCTabBarStateFrameSize(
+      const PCTabBarStateFrameSize& 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/PCTextFieldComponentDescriptors-custom.h

@@ -0,0 +1,22 @@
+#pragma once
+
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+// Forward declaration to avoid circular includes
+namespace facebook::react {
+class MeasuringPCTextFieldShadowNode;
+}
+
+// Include the actual shadow node definition
+#include "PCTextFieldShadowNode-custom.h"
+
+namespace facebook::react {
+
+/**
+ * Custom component descriptor that uses our measuring shadow node
+ * instead of the generated one.
+ */
+using MeasuringPCTextFieldComponentDescriptor =
+    ConcreteComponentDescriptor<MeasuringPCTextFieldShadowNode>;
+
+} // namespace facebook::react

package/shared/PCTextFieldShadowNode-custom.cpp

@@ -0,0 +1,47 @@
+#include "PCTextFieldShadowNode-custom.h"
+
+#include <react/renderer/core/LayoutConstraints.h>
+#include <algorithm>
+
+namespace facebook::react {
+
+Size MeasuringPCTextFieldShadowNode::measureContent(
+    const LayoutContext& /*layoutContext*/,
+    const LayoutConstraints& layoutConstraints) const {
+
+  const auto& stateData = this->getStateData();
+  Float measuredW = stateData.frameSize.width;
+  Float measuredH = stateData.frameSize.height;
+
+  const Float kHuge = static_cast<Float>(1.0e9);
+
+  // A text field fills the width it is offered; only an unbounded row (no
+  // width at all) gets a fixed fallback.
+  if (measuredW <= 0) {
+    const Float maxW = layoutConstraints.maximumSize.width;
+    measuredW = (maxW > 0 && maxW < kHuge) ? maxW : static_cast<Float>(kFallbackWidth);
+  }
+
+  const bool usingFallback = (measuredH <= 0);
+  if (usingFallback) {
+#ifdef __ANDROID__
+    measuredH = static_cast<Float>(kFallbackHeightAndroid);
+#else
+    measuredH = static_cast<Float>(kFallbackHeightIOS);
+#endif
+  }
+
+  measuredW = std::max<Float>(measuredW, layoutConstraints.minimumSize.width);
+  measuredW = std::min<Float>(measuredW, layoutConstraints.maximumSize.width);
+
+  measuredH = std::max<Float>(measuredH, layoutConstraints.minimumSize.height);
+  // Only clamp to max height if we have real measured data (not fallback)
+  if (!usingFallback && layoutConstraints.maximumSize.height > 0 &&
+      layoutConstraints.maximumSize.height < kHuge) {
+    measuredH = std::min<Float>(measuredH, layoutConstraints.maximumSize.height);
+  }
+
+  return Size{measuredW, measuredH};
+}
+
+} // namespace facebook::react

package/shared/PCTextFieldShadowNode-custom.h

@@ -0,0 +1,55 @@
+#pragma once
+
+#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 "PCTextFieldState-custom.h"
+
+namespace facebook::react {
+
+extern const char PCTextFieldComponentName[];
+
+/**
+ * Custom ShadowNode for TextField that supports Yoga measurement.
+ *
+ * - The field takes the width Yoga offers (a text field fills its row)
+ * - Native measures the height at that width and updates state with it
+ * - Falls back to platform-specific heights until native has reported
+ */
+class MeasuringPCTextFieldShadowNode final : public ConcreteViewShadowNode<
+                                          PCTextFieldComponentName,
+                                          PCTextFieldProps,
+                                          PCTextFieldEventEmitter,
+                                          PCTextFieldStateFrameSize> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+  // Fallback heights used when native hasn't reported measurements yet
+  // iOS: a rounded-rect UITextField
+  static constexpr float kFallbackHeightIOS = 34.0f;
+
+  // Android: a Material 3 outlined text field
+  static constexpr float kFallbackHeightAndroid = 56.0f;
+
+  static constexpr float kFallbackWidth = 200.0f;
+
+  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.
+   */
+  Size measureContent(
+      const LayoutContext& layoutContext,
+      const LayoutConstraints& layoutConstraints) const override;
+};
+
+} // namespace facebook::react

package/shared/PCTextFieldState-custom.h

@@ -0,0 +1,61 @@
+#pragma once
+
+#include <react/renderer/core/LayoutPrimitives.h>
+#include <memory>
+
+#if defined(RN_SERIALIZABLE_STATE) || defined(ANDROID)
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#endif
+
+namespace facebook::react {
+
+/**
+ * Custom state for TextField that holds the measured frame size from native.
+ * The field fills the width it is given; native measures the height the
+ * label, text and supporting text need at that width and reports it here.
+ */
+struct PCTextFieldStateFrameSize {
+  using Shared = std::shared_ptr<const PCTextFieldStateFrameSize>;
+
+  Size frameSize{}; // {width, height} in points; width 0 = fill the available width
+
+  PCTextFieldStateFrameSize() = default;
+
+  explicit PCTextFieldStateFrameSize(Size size) : frameSize(size) {}
+
+  bool operator==(const PCTextFieldStateFrameSize& other) const {
+    return frameSize.width == other.frameSize.width &&
+           frameSize.height == other.frameSize.height;
+  }
+
+  bool operator!=(const PCTextFieldStateFrameSize& other) const {
+    return !(*this == other);
+  }
+
+#if defined(RN_SERIALIZABLE_STATE) || defined(ANDROID)
+  // Required for Android state serialization
+  PCTextFieldStateFrameSize(
+      const PCTextFieldStateFrameSize& previousState,
+      folly::dynamic data)
+      : frameSize(previousState.frameSize) {
+    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/react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h

@@ -8,3 +8,9 @@
 #include "PCSelectionMenuComponentDescriptors-custom.h"
 #include "PCDatePickerComponentDescriptors-custom.h"
 #include "PCSegmentedControlComponentDescriptors-custom.h"
+#include "PCButtonComponentDescriptors-custom.h"
+#include "PCButtonGroupComponentDescriptors-custom.h"
+#include "PCTextFieldComponentDescriptors-custom.h"
+#include "PCTabBarComponentDescriptors-custom.h"
+#include "PCNavigationRailComponentDescriptors-custom.h"
+#include "PCFloatingActionButtonComponentDescriptors-custom.h"