react-native-platform-components 1.2.0 → 1.4.0

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}
+    />
+  );
+}

package/src/ButtonGroupNativeComponent.ts

@@ -0,0 +1,121 @@
+// ButtonGroupNativeComponent.ts
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+import type { BubblingEventHandler, Double, Int32 } from './codegenTypes';
+
+/**
+ * A single button in the group. Icons are pre-resolved on the JS side (see
+ * icons.ts) so native only deals with flat strings.
+ */
+export type ButtonGroupButton = Readonly<{
+  label: string; // Empty for an icon-only button
+  value: string;
+  disabled: string; // 'enabled' | 'disabled'
+  iconType: string; // '' | 'sfSymbol' | 'drawable' | 'image'
+  iconName: string; // SF Symbol (iOS) or drawable resource name (Android)
+  iconUri: string; // Resolved image URI when iconType === 'image'
+  iconScale: Double; // Resolved image scale when iconType === 'image'
+  iconTinted: string; // 'true' | 'false' — draw the image as a tinted template
+  accessibilityLabel: string; // Screen-reader label, empty = use label
+}>;
+
+/**
+ * Event emitted when a button is pressed.
+ */
+export type ButtonGroupPressEvent = Readonly<{
+  index: Int32;
+  value: string;
+}>;
+
+/**
+ * Event emitted when the selection changes (single / multiple selection).
+ */
+export type ButtonGroupSelectionEvent = Readonly<{
+  /** Values of the selected buttons, in button order. */
+  // Codegen only understands the `T[]` array form in event payloads.
+  values: string[];
+}>;
+
+/**
+ * Label font. Empty strings / 0 mean "platform default".
+ */
+export type ButtonGroupLabelStyleProps = Readonly<{
+  fontFamily?: string;
+  fontSize?: Double;
+  fontWeight?: string; // 'normal' | 'bold' | '100'..'900'
+  fontStyle?: string; // 'normal' | 'italic'
+}>;
+
+/**
+ * Android-specific configuration.
+ */
+export type ButtonGroupAndroidProps = Readonly<{
+  /** What happens to buttons that don't fit: 'none' | 'menu' | 'wrap' */
+  overflow?: string;
+
+  /** Material style: 'm3' | 'expressive' */
+  material?: string;
+}>;
+
+export interface ButtonGroupNativeProps extends ViewProps {
+  /** Buttons to display. */
+  buttons: ReadonlyArray<ButtonGroupButton>;
+
+  /** 'filled' | 'tonal' | 'outlined' | 'text' | 'elevated' */
+  variant?: string;
+
+  /** 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' */
+  size?: string;
+
+  /** '' (platform default) | 'round' | 'square' */
+  shape?: string;
+
+  /** 'true' | 'false': connected group (shared outline, small inner corners) */
+  connected?: string;
+
+  /** Gap between buttons in points; negative means the platform default. */
+  spacing?: Double;
+
+  /** 'none' | 'single' | 'multiple' */
+  selection?: string;
+
+  /** Values of the selected buttons (single / multiple selection). */
+  selectedValues?: ReadonlyArray<string>;
+
+  /** 'true' | 'false': whether at least one button must stay selected */
+  selectionRequired?: string;
+
+  /** 'enabled' | 'disabled' */
+  interactivity?: string;
+
+  /** Container (background) color of the buttons. */
+  color?: ColorValue;
+
+  /** Label and icon color of the buttons. */
+  foregroundColor?: ColorValue;
+
+  /** Android: ripple color shown while pressing a button. */
+  androidRippleColor?: ColorValue;
+
+  /** Android: outline color (outlined variant). */
+  androidStrokeColor?: ColorValue;
+
+  /** Label font. */
+  labelStyle?: ButtonGroupLabelStyleProps;
+
+  /** Fired when a button is pressed. */
+  onButtonPress?: BubblingEventHandler<ButtonGroupPressEvent>;
+
+  /**
+   * Fired when the selection changes. Not `onSelectionChange`: React Native's
+   * TextInput registers `topSelectionChange` as a direct event, and an event
+   * name can't be both direct and bubbling.
+   */
+  onGroupSelectionChange?: BubblingEventHandler<ButtonGroupSelectionEvent>;
+
+  android?: ButtonGroupAndroidProps;
+}
+
+export default codegenNativeComponent<ButtonGroupNativeProps>(
+  'PCButtonGroup'
+) as HostComponent<ButtonGroupNativeProps>;

package/src/ButtonNativeComponent.ts

@@ -0,0 +1,76 @@
+// ButtonNativeComponent.ts
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+import type { BubblingEventHandler, Double } from './codegenTypes';
+
+/**
+ * Icon fields, pre-resolved on the JS side (see icons.ts).
+ */
+export type ButtonIconProps = Readonly<{
+  iconType: string; // '' | 'sfSymbol' | 'drawable' | 'image'
+  iconName: string; // SF Symbol (iOS) or drawable resource name (Android)
+  iconUri: string; // Resolved image URI when iconType === 'image'
+  iconScale: Double; // Resolved image scale when iconType === 'image'
+  iconTinted: string; // 'true' | 'false' — draw the image as a tinted template
+}>;
+
+/**
+ * Label font. Empty strings / 0 mean "platform default".
+ */
+export type ButtonLabelStyleProps = Readonly<{
+  fontFamily?: string;
+  fontSize?: Double;
+  fontWeight?: string; // 'normal' | 'bold' | '100'..'900'
+  fontStyle?: string; // 'normal' | 'italic'
+}>;
+
+export interface ButtonNativeProps extends ViewProps {
+  /** Button text. Empty for an icon-only button. */
+  label?: string;
+
+  /** Icon shown before the label, or alone when there is no label. */
+  icon?: ButtonIconProps;
+
+  /** 'filled' | 'tonal' | 'outlined' | 'text' | 'elevated' */
+  variant?: string;
+
+  /** 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' */
+  size?: string;
+
+  /** '' (platform default) | 'round' | 'square' */
+  shape?: string;
+
+  /** 'enabled' | 'disabled' */
+  interactivity?: string;
+
+  /** Container (background) color. */
+  color?: ColorValue;
+
+  /** Label and icon color. */
+  foregroundColor?: ColorValue;
+
+  /** Android: ripple color shown while pressing. */
+  androidRippleColor?: ColorValue;
+
+  /** Android: outline color (outlined variant). */
+  androidStrokeColor?: ColorValue;
+
+  /** Android: Material style, 'm3' | 'expressive' */
+  androidMaterial?: string;
+
+  /** Label font. */
+  labelStyle?: ButtonLabelStyleProps;
+
+  /**
+   * Screen-reader label, applied to the native button rather than the host
+   * view. Empty means "use the label".
+   */
+  spokenLabel?: string;
+
+  /** Fired when the button is pressed. */
+  onButtonPress?: BubblingEventHandler<Readonly<{}>>;
+}
+
+export default codegenNativeComponent<ButtonNativeProps>(
+  'PCButton'
+) as HostComponent<ButtonNativeProps>;