react-native-platform-components 1.3.0 → 1.4.0

package/shared/PCButtonState-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 Button 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 PCButtonStateFrameSize {
+  using Shared = std::shared_ptr<const PCButtonStateFrameSize>;
+
+  Size frameSize{}; // {width, height} in points
+
+  PCButtonStateFrameSize() = default;
+
+  explicit PCButtonStateFrameSize(Size size) : frameSize(size) {}
+
+  bool operator==(const PCButtonStateFrameSize& other) const {
+    return frameSize.width == other.frameSize.width &&
+           frameSize.height == other.frameSize.height;
+  }
+
+  bool operator!=(const PCButtonStateFrameSize& other) const {
+    return !(*this == other);
+  }
+
+#if defined(RN_SERIALIZABLE_STATE) || defined(ANDROID)
+  // Required for Android state serialization
+  PCButtonStateFrameSize(
+      const PCButtonStateFrameSize& 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/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,6 @@
 #include "PCSelectionMenuComponentDescriptors-custom.h"
 #include "PCDatePickerComponentDescriptors-custom.h"
 #include "PCSegmentedControlComponentDescriptors-custom.h"
+#include "PCButtonComponentDescriptors-custom.h"
+#include "PCButtonGroupComponentDescriptors-custom.h"
+#include "PCTextFieldComponentDescriptors-custom.h"

package/src/Button.tsx

@@ -0,0 +1,144 @@
+// Button.tsx
+import React, { useCallback, useMemo } from 'react';
+import type { ColorValue, ViewProps } from 'react-native';
+
+import NativeButton from './ButtonNativeComponent';
+import { resolveIcon, type PlatformIcon } from './icons';
+import { normalizeLabelStyle, type LabelStyle } from './labelStyle';
+import type { AndroidMaterialStyle } from './sharedTypes';
+
+/**
+ * Emphasis of the button, from highest to lowest.
+ *
+ * | Variant    | Android (Material 3 Expressive) | iOS (`UIButton.Configuration`) |
+ * | ---------- | ------------------------------- | ------------------------------ |
+ * | `filled`   | Filled button                   | `.filled()`                    |
+ * | `tonal`    | Filled tonal button             | `.tinted()`                    |
+ * | `outlined` | Outlined button                 | `.bordered()`                  |
+ * | `text`     | Text button                     | `.plain()`                     |
+ * | `elevated` | Elevated button                 | `.gray()`                      |
+ */
+export type ButtonVariant =
+  'filled' | 'tonal' | 'outlined' | 'text' | 'elevated';
+
+/**
+ * Button size. Material 3 Expressive defines five sizes; iOS maps them onto
+ * `UIButton.Configuration.Size` (`xsmall` → mini, `xlarge` → large).
+ */
+export type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+
+/**
+ * Corner shape. `round` is a pill; `square` keeps rounded corners. Unset
+ * means the platform default (round on Android, dynamic on iOS).
+ */
+export type ButtonShape = 'round' | 'square';
+
+export interface ButtonProps extends ViewProps {
+  /** Button text. Omit for an icon-only button. */
+  label?: string;
+
+  /** Icon shown before the label, or alone when there is no label. */
+  icon?: PlatformIcon;
+
+  /** Emphasis. Default: `'filled'`. See {@link ButtonVariant}. */
+  variant?: ButtonVariant;
+
+  /** Size. Default: `'small'`, the Material 3 default. */
+  size?: ButtonSize;
+
+  /** Corner shape. Default: platform default. */
+  shape?: ButtonShape;
+
+  /** Whether the button is disabled. */
+  disabled?: boolean;
+
+  /**
+   * Container (background) color.
+   * Android: `backgroundTint`. iOS: `baseBackgroundColor`.
+   */
+  color?: ColorValue;
+
+  /**
+   * Label and icon color.
+   * Android: text color and `iconTint`. iOS: `baseForegroundColor`.
+   */
+  tintColor?: ColorValue;
+
+  /** Label font. */
+  labelStyle?: LabelStyle;
+
+  /** Screen-reader label. Defaults to `label`. */
+  accessibilityLabel?: string;
+
+  /** Called when the button is pressed. */
+  onPress?: () => void;
+
+  /**
+   * Android-specific configuration
+   */
+  android?: {
+    /** Ripple color shown while pressing. */
+    rippleColor?: ColorValue;
+
+    /** Outline color (outlined variant). */
+    strokeColor?: ColorValue;
+
+    /**
+     * Material style: Material 3 Expressive (default), or the classic
+     * Material 3 button, which has one size and shape (`size` and `shape`
+     * are ignored).
+     */
+    material?: AndroidMaterialStyle;
+  };
+
+  /** Test identifier */
+  testID?: string;
+}
+
+export function Button(props: ButtonProps): React.ReactElement {
+  const {
+    label,
+    icon,
+    variant,
+    size,
+    shape,
+    disabled,
+    color,
+    tintColor,
+    labelStyle,
+    accessibilityLabel,
+    onPress,
+    android,
+    ...viewProps
+  } = props;
+
+  const nativeIcon = useMemo(() => resolveIcon(icon), [icon]);
+  const nativeLabelStyle = useMemo(
+    () => normalizeLabelStyle(labelStyle),
+    [labelStyle]
+  );
+
+  const handlePress = useCallback(() => {
+    onPress?.();
+  }, [onPress]);
+
+  return (
+    <NativeButton
+      label={label ?? ''}
+      icon={nativeIcon}
+      variant={variant ?? 'filled'}
+      size={size ?? 'small'}
+      shape={shape ?? ''}
+      interactivity={disabled ? 'disabled' : 'enabled'}
+      color={color}
+      foregroundColor={tintColor}
+      androidRippleColor={android?.rippleColor}
+      androidStrokeColor={android?.strokeColor}
+      androidMaterial={android?.material ?? 'expressive'}
+      labelStyle={nativeLabelStyle}
+      spokenLabel={accessibilityLabel ?? ''}
+      onButtonPress={onPress ? handlePress : undefined}
+      {...viewProps}
+    />
+  );
+}

package/src/ButtonGroup.tsx

@@ -0,0 +1,233 @@
+// ButtonGroup.tsx
+import React, { useCallback, useMemo } from 'react';
+import type { ColorValue, ViewProps } from 'react-native';
+
+import type { ButtonShape, ButtonSize, ButtonVariant } from './Button';
+import NativeButtonGroup, {
+  type ButtonGroupButton as NativeButton,
+  type ButtonGroupPressEvent,
+  type ButtonGroupSelectionEvent,
+} from './ButtonGroupNativeComponent';
+import { resolveIcon, type PlatformIcon } from './icons';
+import { normalizeLabelStyle, type LabelStyle } from './labelStyle';
+import type { AndroidMaterialStyle } from './sharedTypes';
+
+/**
+ * Selection behavior of the group.
+ *
+ * - `none` (default): the buttons are plain actions.
+ * - `single`: at most one button is selected at a time.
+ * - `multiple`: any number of buttons can be selected.
+ */
+export type ButtonGroupSelection = 'none' | 'single' | 'multiple';
+
+/** What happens to buttons that don't fit the group's width (Android). */
+export type ButtonGroupOverflow = 'none' | 'menu' | 'wrap';
+
+export interface ButtonGroupButtonProps {
+  /** Button text. Omit for an icon-only button. */
+  label?: string;
+
+  /** Unique value identifier for the button */
+  value: string;
+
+  /** Whether this specific button is disabled */
+  disabled?: boolean;
+
+  /** Optional icon. See {@link PlatformIcon}. */
+  icon?: PlatformIcon;
+
+  /** Screen-reader label. Defaults to `label`. */
+  accessibilityLabel?: string;
+}
+
+export interface ButtonGroupProps extends ViewProps {
+  /** Buttons to display */
+  buttons: readonly ButtonGroupButtonProps[];
+
+  /** Emphasis of every button. Default: `'outlined'`. */
+  variant?: ButtonVariant;
+
+  /** Size of every button. Default: `'small'`. */
+  size?: ButtonSize;
+
+  /** Corner shape of every button. Default: platform default. */
+  shape?: ButtonShape;
+
+  /**
+   * Connected group: the buttons share one outline with small inner corners
+   * (Material 3 "connected button group"). Default: `true` when `selection`
+   * is `'single'` or `'multiple'`, `false` otherwise.
+   */
+  connected?: boolean;
+
+  /** Gap between buttons in points. Default: the platform's group spacing. */
+  spacing?: number;
+
+  /** Selection behavior. Default: `'none'`. See {@link ButtonGroupSelection}. */
+  selection?: ButtonGroupSelection;
+
+  /**
+   * Values of the selected buttons (controlled). Only the first value is
+   * used with `selection: 'single'`.
+   */
+  selectedValues?: readonly string[];
+
+  /**
+   * Whether at least one button must stay selected. Default: `true` for
+   * `single`, `false` for `multiple`.
+   */
+  selectionRequired?: boolean;
+
+  /** Whether the entire group is disabled */
+  disabled?: boolean;
+
+  /** Container (background) color of the buttons. */
+  color?: ColorValue;
+
+  /** Label and icon color of the buttons. */
+  tintColor?: ColorValue;
+
+  /** Label font. */
+  labelStyle?: LabelStyle;
+
+  /**
+   * Called when a button is pressed, in every selection mode.
+   * @param value - The button's value
+   * @param index - The button's index
+   */
+  onPress?: (value: string, index: number) => void;
+
+  /**
+   * Called when the selection changes (`single` / `multiple` selection).
+   * @param values - Values of the selected buttons, in button order
+   */
+  onSelectionChange?: (values: string[]) => void;
+
+  /**
+   * Android-specific configuration
+   */
+  android?: {
+    /**
+     * What happens to buttons that don't fit: `'none'` (clipped), `'menu'`
+     * (moved into an overflow menu) or `'wrap'` (wrapped onto more rows).
+     * Default: `'none'`.
+     */
+    overflow?: ButtonGroupOverflow;
+
+    /** Ripple color shown while pressing a button. */
+    rippleColor?: ColorValue;
+
+    /** Outline color (outlined variant). */
+    strokeColor?: ColorValue;
+
+    /**
+     * Material style: Material 3 Expressive (default), or the classic
+     * Material 3 group, which has one size and shape (`size` and `shape`
+     * are ignored).
+     */
+    material?: AndroidMaterialStyle;
+  };
+
+  /** Test identifier */
+  testID?: string;
+}
+
+export function ButtonGroup(props: ButtonGroupProps): React.ReactElement {
+  const {
+    buttons,
+    variant,
+    size,
+    shape,
+    connected,
+    spacing,
+    selection,
+    selectedValues,
+    selectionRequired,
+    disabled,
+    color,
+    tintColor,
+    labelStyle,
+    onPress,
+    onSelectionChange,
+    android,
+    ...viewProps
+  } = props;
+
+  const selectionMode = selection ?? 'none';
+
+  const nativeButtons = useMemo((): NativeButton[] => {
+    return buttons.map((button) => ({
+      label: button.label ?? '',
+      value: button.value,
+      disabled: button.disabled ? 'disabled' : 'enabled',
+      accessibilityLabel: button.accessibilityLabel ?? '',
+      ...resolveIcon(button.icon),
+    }));
+  }, [buttons]);
+
+  const nativeSelectedValues = useMemo((): string[] => {
+    if (selectionMode === 'none' || !selectedValues) return [];
+    return selectionMode === 'single'
+      ? selectedValues.slice(0, 1)
+      : [...selectedValues];
+  }, [selectionMode, selectedValues]);
+
+  const nativeLabelStyle = useMemo(
+    () => normalizeLabelStyle(labelStyle),
+    [labelStyle]
+  );
+
+  const handlePress = useCallback(
+    (e: { nativeEvent: ButtonGroupPressEvent }) => {
+      const { index, value } = e.nativeEvent;
+      onPress?.(value, index);
+    },
+    [onPress]
+  );
+
+  const handleSelectionChange = useCallback(
+    (e: { nativeEvent: ButtonGroupSelectionEvent }) => {
+      onSelectionChange?.([...e.nativeEvent.values]);
+    },
+    [onSelectionChange]
+  );
+
+  const nativeAndroid = useMemo(
+    () => ({
+      overflow: android?.overflow ?? 'none',
+      material: android?.material ?? 'expressive',
+    }),
+    [android]
+  );
+
+  const isConnected = connected ?? selectionMode !== 'none';
+  const isSelectionRequired =
+    selectionRequired ?? (selectionMode === 'single' ? true : false);
+
+  return (
+    <NativeButtonGroup
+      buttons={nativeButtons}
+      variant={variant ?? 'outlined'}
+      size={size ?? 'small'}
+      shape={shape ?? ''}
+      connected={isConnected ? 'true' : 'false'}
+      spacing={spacing ?? -1}
+      selection={selectionMode}
+      selectedValues={nativeSelectedValues}
+      selectionRequired={isSelectionRequired ? 'true' : 'false'}
+      interactivity={disabled ? 'disabled' : 'enabled'}
+      color={color}
+      foregroundColor={tintColor}
+      androidRippleColor={android?.rippleColor}
+      androidStrokeColor={android?.strokeColor}
+      labelStyle={nativeLabelStyle}
+      onButtonPress={onPress ? handlePress : undefined}
+      onGroupSelectionChange={
+        onSelectionChange ? handleSelectionChange : undefined
+      }
+      android={nativeAndroid}
+      {...viewProps}
+    />
+  );
+}