react-native-platform-components 1.4.0 → 1.6.0

package/plugin/build/index.d.ts

@@ -4,14 +4,22 @@ type ResourceXML = AndroidConfig.Resources.ResourceXML;
  * Parent theme for the Android `AppTheme` style.
  *
  * - `'material3'`: re-parent `AppTheme` onto `Theme.Material3.DayNight.NoActionBar`.
- *   Required for `SegmentedControl` and for `DatePicker` / `SelectionMenu` in
- *   `android={{ material: 'm3' }}` mode to pick up your app's Material colors.
+ *   Required for `SegmentedControl`, `TabBar`, `Button`, `ButtonGroup`,
+ *   `FloatingToolbar`, and for `DatePicker` / `SelectionMenu` in
+ *   `android={{ material: 'm3' }}` mode, to pick up your app's Material colors.
  * - `'appcompat'` (default): leave Expo's `Theme.AppCompat.DayNight.NoActionBar` as is.
  */
 export type AndroidTheme = 'material3' | 'appcompat';
 export type PlatformComponentsPluginOptions = {
     android?: {
         theme?: AndroidTheme;
+        /**
+         * Vector drawables to copy into `res/drawable` at prebuild, so drawable
+         * icon names (`android: 'home'`) resolve in an Expo app. Each entry is a
+         * `.xml` file or a directory of them, relative to the project root. The
+         * drawable name is the file name without `.xml`.
+         */
+        drawables?: string[];
     };
 };
 export declare const MATERIAL3_THEME_PARENT = "Theme.Material3.DayNight.NoActionBar";
@@ -22,6 +30,19 @@ export declare function resolveMaterial3Parent(currentParent: string | undefined
  * Idempotent: running prebuild again leaves the result unchanged.
  */
 export declare function applyMaterial3Theme(xml: ResourceXML): ResourceXML;
+export type DrawableFile = {
+    /** Resource name: the file name without `.xml`. */
+    name: string;
+    /** Absolute path of the source file. */
+    source: string;
+};
+/**
+ * Expands the `drawables` option into the files to copy, checking each name
+ * is a valid Android resource name and appears once.
+ */
+export declare function resolveDrawables(projectRoot: string, entries: string[]): DrawableFile[];
+/** Copies the drawables into `<resDir>/drawable`, replacing earlier copies. */
+export declare function copyDrawables(files: DrawableFile[], resDir: string): void;
 /**
  * Expo config plugin for react-native-platform-components.
  *
@@ -33,6 +54,10 @@ export declare function applyMaterial3Theme(xml: ResourceXML): ResourceXML;
  * `material: 'system'` modes, but Material 3 widgets look best under a
  * Material 3 app theme. Pass `{ android: { theme: 'material3' } }` to have
  * prebuild re-parent `AppTheme` accordingly.
+ *
+ * It also copies the vector drawables listed in `android.drawables` into the
+ * generated project, since hand-added files there don't survive
+ * `expo prebuild --clean`.
  */
 declare const withPlatformComponents: ConfigPlugin<PlatformComponentsPluginOptions | void>;
 export default withPlatformComponents;

package/plugin/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAE9B,KAAK,WAAW,GAAG,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC;AAEvD;;;;;;;GAOG;AACH,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,WAAW,CAAC;AAErD,MAAM,MAAM,+BAA+B,GAAG;IAC5C,OAAO,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,YAAY,CAAC;KACtB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,sBAAsB,yCAAyC,CAAC;AAW7E,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,GAAG,SAAS,GAChC,MAAM,CASR;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,WAAW,GAAG,WAAW,CAejE;AAED;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,sBAAsB,EAAE,YAAY,CACxC,+BAA+B,GAAG,IAAI,CAWvC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAE9B,KAAK,WAAW,GAAG,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC;AAEvD;;;;;;;;GAQG;AACH,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,WAAW,CAAC;AAErD,MAAM,MAAM,+BAA+B,GAAG;IAC5C,OAAO,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,YAAY,CAAC;QACrB;;;;;WAKG;QACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;KACtB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,sBAAsB,yCAAyC,CAAC;AAW7E,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,GAAG,SAAS,GAChC,MAAM,CASR;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,WAAW,GAAG,WAAW,CAejE;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,mDAAmD;IACnD,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,MAAM,EAAE,GAChB,YAAY,EAAE,CAyChB;AAED,+EAA+E;AAC/E,wBAAgB,aAAa,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAMzE;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,sBAAsB,EAAE,YAAY,CACxC,+BAA+B,GAAG,IAAI,CA2BvC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/plugin/tsconfig.json

@@ -9,7 +9,8 @@
     "declaration": true,
     "declarationMap": true,
     "outDir": "build",
-    "rootDir": "src"
+    "rootDir": "src",
+    "types": ["node"]
   },
   "include": [
     "src/**/*"

package/react-native.config.js

@@ -9,6 +9,9 @@ module.exports = {
           'MeasuringPCButtonComponentDescriptor',
           'MeasuringPCButtonGroupComponentDescriptor',
           'MeasuringPCTextFieldComponentDescriptor',
+          'MeasuringPCTabBarComponentDescriptor',
+          'MeasuringPCNavigationRailComponentDescriptor',
+          'MeasuringPCFloatingActionButtonComponentDescriptor',
         ],
         cmakeListsPath: 'src/main/jni/CMakeLists.txt',
       },

package/shared/PCFloatingActionButtonComponentDescriptors-custom.h

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

package/shared/PCFloatingActionButtonShadowNode-custom.cpp

@@ -0,0 +1,48 @@
+#include "PCFloatingActionButtonShadowNode-custom.h"
+
+#include <react/renderer/core/LayoutConstraints.h>
+#include <algorithm>
+
+namespace facebook::react {
+
+Size MeasuringPCFloatingActionButtonShadowNode::measureContent(
+    const LayoutContext& /*layoutContext*/,
+    const LayoutConstraints& layoutConstraints) const {
+
+  // Native measures the actual button and reports its intrinsic size
+  const auto& stateData = this->getStateData();
+  Float measuredW = stateData.frameSize.width;
+  Float measuredH = stateData.frameSize.height;
+
+  const Float fallbackHeight =
+#ifdef __ANDROID__
+      static_cast<Float>(kFallbackHeightAndroid);
+#else
+      static_cast<Float>(kFallbackHeightIOS);
+#endif
+
+  const bool usingFallback = (measuredH <= 0);
+  if (usingFallback) {
+    measuredH = fallbackHeight;
+  }
+  if (measuredW <= 0) {
+    measuredW = static_cast<Float>(kFallbackWidth);
+  }
+
+  const Float kHuge = static_cast<Float>(1.0e9);
+
+  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/PCFloatingActionButtonShadowNode-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 "PCFloatingActionButtonState-custom.h"
+
+namespace facebook::react {
+
+extern const char PCFloatingActionButtonComponentName[];
+
+/**
+ * Custom ShadowNode for FloatingActionButton that supports Yoga measurement.
+ *
+ * - Native measures the button (the extended button in its current state)
+ *   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 MeasuringPCFloatingActionButtonShadowNode final
+    : public ConcreteViewShadowNode<
+          PCFloatingActionButtonComponentName,
+          PCFloatingActionButtonProps,
+          PCFloatingActionButtonEventEmitter,
+          PCFloatingActionButtonStateFrameSize> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+  // Fallback size used when native hasn't reported measurements yet: the
+  // regular 56pt / 56dp button
+  static constexpr float kFallbackHeightIOS = 56.0f;
+  static constexpr float kFallbackHeightAndroid = 56.0f;
+  static constexpr float kFallbackWidth = 56.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/PCFloatingActionButtonState-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 FloatingActionButton that holds the measured frame size from native.
+ * The native side measures the actual button and communicates the size to
+ * the shadow node for proper Yoga layout.
+ */
+struct PCFloatingActionButtonStateFrameSize {
+  using Shared = std::shared_ptr<const PCFloatingActionButtonStateFrameSize>;
+
+  Size frameSize{}; // {width, height} in points
+
+  PCFloatingActionButtonStateFrameSize() = default;
+
+  explicit PCFloatingActionButtonStateFrameSize(Size size) : frameSize(size) {}
+
+  bool operator==(const PCFloatingActionButtonStateFrameSize& other) const {
+    return frameSize.width == other.frameSize.width &&
+           frameSize.height == other.frameSize.height;
+  }
+
+  bool operator!=(const PCFloatingActionButtonStateFrameSize& other) const {
+    return !(*this == other);
+  }
+
+#if defined(RN_SERIALIZABLE_STATE) || defined(ANDROID)
+  // Required for Android state serialization
+  PCFloatingActionButtonStateFrameSize(
+      const PCFloatingActionButtonStateFrameSize& 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/PCNavigationRailComponentDescriptors-custom.h

@@ -0,0 +1,47 @@
+#pragma once
+
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+// Forward declaration to avoid circular includes
+namespace facebook::react {
+class MeasuringPCNavigationRailShadowNode;
+}
+
+// Include the actual shadow node definition
+#include "PCNavigationRailShadowNode-custom.h"
+
+namespace facebook::react {
+
+/**
+ * Component descriptor for NavigationRail. Gives the node the natural width
+ * native reported, as horizontal padding (the way SafeAreaView applies its
+ * insets): a node with children can't have a measure function, and its only
+ * child, the header, is out of the flow.
+ */
+class MeasuringPCNavigationRailComponentDescriptor final
+    : public ConcreteComponentDescriptor<MeasuringPCNavigationRailShadowNode> {
+ public:
+  using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+  void adopt(ShadowNode& shadowNode) const override {
+    auto& layoutableShadowNode = static_cast<YogaLayoutableShadowNode&>(shadowNode);
+    const auto& stateData =
+        static_cast<const MeasuringPCNavigationRailShadowNode::ConcreteState&>(
+            *shadowNode.getState())
+            .getData();
+
+    Float width = stateData.frameSize.width;
+    if (width <= 0) {
+#ifdef __ANDROID__
+      width = MeasuringPCNavigationRailShadowNode::kFallbackWidthAndroid;
+#else
+      width = MeasuringPCNavigationRailShadowNode::kFallbackWidthIOS;
+#endif
+    }
+    layoutableShadowNode.setPadding({width / 2, 0, width / 2, 0});
+
+    ConcreteComponentDescriptor::adopt(shadowNode);
+  }
+};
+
+} // namespace facebook::react

package/shared/PCNavigationRailShadowNode-custom.h

@@ -0,0 +1,42 @@
+#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 "PCNavigationRailState-custom.h"
+
+namespace facebook::react {
+
+extern const char PCNavigationRailComponentName[];
+
+/**
+ * Custom ShadowNode for NavigationRail.
+ *
+ * The rail hosts React children (its header), so it can't be a measured leaf
+ * node like the other components. Native measures the rail and reports its
+ * natural width through state instead, and the component descriptor turns
+ * that width into horizontal padding (see
+ * PCNavigationRailComponentDescriptors-custom.h). The header is absolutely
+ * positioned, so the padding alone gives the node its width; the height is
+ * left to the app's layout.
+ */
+class MeasuringPCNavigationRailShadowNode final
+    : public ConcreteViewShadowNode<
+          PCNavigationRailComponentName,
+          PCNavigationRailProps,
+          PCNavigationRailEventEmitter,
+          PCNavigationRailStateFrameSize> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+  // Width used until native reports one: the Material 3 Expressive collapsed
+  // rail, and the iOS fallback's column of buttons
+  static constexpr float kFallbackWidthIOS = 80.0f;
+  static constexpr float kFallbackWidthAndroid = 96.0f;
+};
+
+} // namespace facebook::react

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/react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h

@@ -11,3 +11,6 @@
 #include "PCButtonComponentDescriptors-custom.h"
 #include "PCButtonGroupComponentDescriptors-custom.h"
 #include "PCTextFieldComponentDescriptors-custom.h"
+#include "PCTabBarComponentDescriptors-custom.h"
+#include "PCNavigationRailComponentDescriptors-custom.h"
+#include "PCFloatingActionButtonComponentDescriptors-custom.h"