react-native-platform-components 0.6.1 → 0.8.0

package/shared/PCSegmentedControlState-custom.h

@@ -0,0 +1,62 @@
+#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 SegmentedControl that holds the measured frame size from native.
+ * This allows the native side to measure the actual segmented control and communicate
+ * the size to the shadow node for proper Yoga layout.
+ */
+struct PCSegmentedControlStateFrameSize {
+  using Shared = std::shared_ptr<const PCSegmentedControlStateFrameSize>;
+
+  Size frameSize{}; // {width, height} in points
+
+  PCSegmentedControlStateFrameSize() = default;
+
+  explicit PCSegmentedControlStateFrameSize(Size size) : frameSize(size) {}
+
+  bool operator==(const PCSegmentedControlStateFrameSize& other) const {
+    return frameSize.width == other.frameSize.width &&
+           frameSize.height == other.frameSize.height;
+  }
+
+  bool operator!=(const PCSegmentedControlStateFrameSize& other) const {
+    return !(*this == other);
+  }
+
+#ifdef RN_SERIALIZABLE_STATE
+  // Required for Android state serialization
+  PCSegmentedControlStateFrameSize(
+      const PCSegmentedControlStateFrameSize& 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

@@ -7,3 +7,4 @@
 // Include our custom component descriptors which use measuring shadow nodes
 #include "PCSelectionMenuComponentDescriptors-custom.h"
 #include "PCDatePickerComponentDescriptors-custom.h"
+#include "PCSegmentedControlComponentDescriptors-custom.h"

package/src/LiquidGlass.tsx

@@ -0,0 +1,169 @@
+// LiquidGlass.tsx
+import React, { useCallback, useMemo } from 'react';
+import { Platform, type ViewProps } from 'react-native';
+
+import NativeLiquidGlass, {
+  type LiquidGlassColorScheme,
+  type LiquidGlassEffect,
+  type LiquidGlassPressEvent,
+} from './LiquidGlassNativeComponent';
+
+export type {
+  LiquidGlassEffect,
+  LiquidGlassColorScheme,
+  LiquidGlassPressEvent,
+};
+
+/**
+ * Whether the LiquidGlass effect is supported on the current device.
+ * Returns true on iOS 26+ (with Liquid Glass support), false otherwise.
+ *
+ * Use this to conditionally render fallback UI on unsupported devices.
+ */
+export const isLiquidGlassSupported: boolean =
+  Platform.OS === 'ios' && Number(Platform.Version) >= 26;
+
+export interface LiquidGlassProps extends ViewProps {
+  /**
+   * Corner radius for the glass effect.
+   * Applied uniformly to all corners.
+   * @default 0
+   */
+  cornerRadius?: number;
+
+  /**
+   * iOS-specific props for the glass effect.
+   */
+  ios?: {
+    /**
+     * Glass effect style.
+     * - 'clear': More transparent, subtle glass effect
+     * - 'regular': Standard blur intensity (default)
+     * - 'none': No glass effect (useful for animating materialization)
+     * @default 'regular'
+     */
+    effect?: LiquidGlassEffect;
+
+    /**
+     * Enables native touch interaction effects when pressing the view.
+     * When enabled, the glass effect responds to touch location with
+     * position-aware visual feedback (iOS 26+ UIGlassEffect.isInteractive).
+     *
+     * Note: Only applies on component mount; cannot be changed dynamically.
+     * @default false
+     */
+    interactive?: boolean;
+
+    /**
+     * Overlay tint color applied to the glass effect.
+     * Accepts any valid color value (hex, rgba, named colors).
+     *
+     * Example: '#FF0000', 'rgba(255, 0, 0, 0.5)', 'red'
+     */
+    tintColor?: string;
+
+    /**
+     * Appearance adaptation mode.
+     * - 'light': Force light appearance
+     * - 'dark': Force dark appearance
+     * - 'system': Follow system appearance (default)
+     * @default 'system'
+     */
+    colorScheme?: LiquidGlassColorScheme;
+
+    /**
+     * Shadow radius for the glass effect glow.
+     * Higher values create a more diffuse shadow.
+     * @default 20
+     */
+    shadowRadius?: number;
+
+    /**
+     * @deprecated Use `interactive` instead for native touch-based highlighting.
+     * This prop is a no-op on iOS 26+ where UIGlassEffect handles touch feedback.
+     * @default false
+     */
+    isHighlighted?: boolean;
+  };
+
+  /**
+   * Android-specific props.
+   * Note: LiquidGlass is an iOS-only effect. On Android, the component
+   * renders as a regular View with optional fallback styling.
+   */
+  android?: {
+    /**
+     * Fallback background color for Android since glass effect is not supported.
+     * If not provided, the view renders transparently.
+     */
+    fallbackBackgroundColor?: string;
+  };
+
+  /**
+   * Content to render inside the glass effect container.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Called when the glass view is pressed.
+   * Includes touch coordinates relative to the view bounds.
+   */
+  onPress?: (event: { x: number; y: number }) => void;
+
+  /** Test identifier */
+  testID?: string;
+}
+
+export function LiquidGlass(props: LiquidGlassProps): React.ReactElement {
+  const {
+    style,
+    cornerRadius = 0,
+    ios,
+    android,
+    children,
+    onPress,
+    ...viewProps
+  } = props;
+
+  // Normalize iOS props for native layer (strings for codegen)
+  const nativeIos = useMemo(() => {
+    if (Platform.OS !== 'ios' || !ios) return undefined;
+    return {
+      effect: ios.effect,
+      interactive: ios.interactive ? 'true' : 'false',
+      tintColor: ios.tintColor,
+      colorScheme: ios.colorScheme,
+      shadowRadius: ios.shadowRadius,
+      isHighlighted: ios.isHighlighted ? 'true' : 'false',
+    };
+  }, [ios]);
+
+  // Normalize Android props
+  const nativeAndroid = useMemo(() => {
+    if (Platform.OS !== 'android' || !android) return undefined;
+    return {
+      fallbackBackgroundColor: android.fallbackBackgroundColor,
+    };
+  }, [android]);
+
+  // Handle native press event
+  const handlePress = useCallback(
+    (event: { nativeEvent: { x: number; y: number } }) => {
+      onPress?.({ x: event.nativeEvent.x, y: event.nativeEvent.y });
+    },
+    [onPress]
+  );
+
+  return (
+    <NativeLiquidGlass
+      style={style}
+      cornerRadius={cornerRadius}
+      ios={nativeIos}
+      android={nativeAndroid}
+      onGlassPress={onPress ? handlePress : undefined}
+      {...viewProps}
+    >
+      {children}
+    </NativeLiquidGlass>
+  );
+}

package/src/LiquidGlassNativeComponent.ts

@@ -0,0 +1,110 @@
+// LiquidGlassNativeComponent.ts
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+/**
+ * Glass effect intensity/style.
+ * - 'clear': More transparent, subtle glass effect
+ * - 'regular': Standard blur intensity (default)
+ * - 'none': No glass effect (useful for animating materialization)
+ */
+export type LiquidGlassEffect = 'clear' | 'regular' | 'none';
+
+/**
+ * Color scheme for the glass effect.
+ * - 'light': Force light appearance
+ * - 'dark': Force dark appearance
+ * - 'system': Follow system appearance (default)
+ */
+export type LiquidGlassColorScheme = 'light' | 'dark' | 'system';
+
+/**
+ * iOS-specific configuration.
+ */
+export type LiquidGlassIOSProps = Readonly<{
+  /**
+   * Glass effect style.
+   * @default 'regular'
+   */
+  effect?: string; // LiquidGlassEffect
+
+  /**
+   * Enables touch interaction effects when pressing the view.
+   * Note: Only applies on component mount; cannot be changed dynamically.
+   * @default false
+   */
+  interactive?: string; // 'true' | 'false'
+
+  /**
+   * Overlay tint color applied to the glass effect.
+   * Accepts hex color strings (e.g., '#FF0000', '#FF000080').
+   */
+  tintColor?: string;
+
+  /**
+   * Appearance adaptation mode.
+   * @default 'system'
+   */
+  colorScheme?: string; // LiquidGlassColorScheme
+
+  /**
+   * Shadow radius for the glass effect.
+   * @default 20
+   */
+  shadowRadius?: CodegenTypes.Float;
+
+  /**
+   * Whether the view is highlighted (pressed state).
+   */
+  isHighlighted?: string; // 'true' | 'false'
+}>;
+
+/**
+ * Android-specific configuration (stub - LiquidGlass is iOS only).
+ */
+export type LiquidGlassAndroidProps = Readonly<{
+  /**
+   * Fallback background color for Android (since glass effect is not supported).
+   * If not provided, renders as transparent.
+   */
+  fallbackBackgroundColor?: string;
+}>;
+
+/**
+ * Event emitted when the glass view is pressed.
+ */
+export type LiquidGlassPressEvent = Readonly<{
+  /** X coordinate of touch relative to view bounds */
+  x: CodegenTypes.Float;
+  /** Y coordinate of touch relative to view bounds */
+  y: CodegenTypes.Float;
+}>;
+
+export interface LiquidGlassNativeProps extends ViewProps {
+  /**
+   * Corner radius for the glass effect.
+   * Applied uniformly to all corners.
+   * @default 0
+   */
+  cornerRadius?: CodegenTypes.WithDefault<CodegenTypes.Float, 0>;
+
+  /**
+   * iOS-specific props.
+   */
+  ios?: LiquidGlassIOSProps;
+
+  /**
+   * Android-specific props.
+   */
+  android?: LiquidGlassAndroidProps;
+
+  /**
+   * Fired when the glass view is pressed.
+   * Includes touch coordinates relative to view bounds.
+   */
+  onGlassPress?: CodegenTypes.DirectEventHandler<LiquidGlassPressEvent>;
+}
+
+export default codegenNativeComponent<LiquidGlassNativeProps>(
+  'PCLiquidGlass'
+) as HostComponent<LiquidGlassNativeProps>;

package/src/SegmentedControl.tsx

@@ -0,0 +1,178 @@
+// SegmentedControl.tsx
+import React, { useCallback, useMemo } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+
+import NativeSegmentedControl, {
+  type SegmentedControlSelectEvent,
+} from './SegmentedControlNativeComponent';
+
+// Android: Minimum height to ensure visibility.
+// Fabric's shadow node measurement isn't being called on initial render,
+// so we apply a minHeight that matches Material design touch target guidelines.
+const ANDROID_MIN_HEIGHT = 48;
+
+export interface SegmentedControlSegmentProps {
+  /** Display label for the segment */
+  label: string;
+
+  /** Unique value identifier for the segment */
+  value: string;
+
+  /** Whether this specific segment is disabled */
+  disabled?: boolean;
+
+  /** Optional SF Symbol name (iOS) or drawable resource name (Android) */
+  icon?: string;
+}
+
+export interface SegmentedControlProps extends ViewProps {
+  /** Array of segments to display */
+  segments: readonly SegmentedControlSegmentProps[];
+
+  /**
+   * Currently selected segment value.
+   * Use `null` for no selection.
+   */
+  selectedValue: string | null;
+
+  /**
+   * Called when the user selects a segment.
+   * @param value - The selected segment's value
+   * @param index - The selected segment's index
+   */
+  onSelect?: (value: string, index: number) => void;
+
+  /** Whether the entire control is disabled */
+  disabled?: boolean;
+
+  /**
+   * iOS-specific configuration
+   */
+  ios?: {
+    /**
+     * Momentary mode: segment springs back after touch (no persistent selection)
+     * Default: false
+     */
+    momentary?: boolean;
+
+    /**
+     * Whether segment widths are proportional to content
+     * Default: false (equal widths)
+     */
+    apportionsSegmentWidthsByContent?: boolean;
+
+    /**
+     * Selected segment tint color (hex string, e.g., "#007AFF")
+     */
+    selectedSegmentTintColor?: string;
+  };
+
+  /**
+   * Android-specific configuration
+   */
+  android?: {
+    /**
+     * Whether one segment must always be selected.
+     * Default: false
+     */
+    selectionRequired?: boolean;
+  };
+
+  /** Test identifier */
+  testID?: string;
+}
+
+function normalizeSelectedValue(selected: string | null): string {
+  return selected ?? '';
+}
+
+export function SegmentedControl(
+  props: SegmentedControlProps
+): React.ReactElement {
+  const {
+    style,
+    segments,
+    selectedValue,
+    disabled,
+    onSelect,
+    ios,
+    android,
+    ...viewProps
+  } = props;
+
+  // Normalize segments for native
+  const nativeSegments = useMemo(() => {
+    return segments.map((seg) => ({
+      label: seg.label,
+      value: seg.value,
+      disabled: seg.disabled ? 'disabled' : 'enabled',
+      icon: seg.icon ?? '',
+    }));
+  }, [segments]);
+
+  const selectedData = useMemo(
+    () => normalizeSelectedValue(selectedValue),
+    [selectedValue]
+  );
+
+  const handleSelect = useCallback(
+    (e: { nativeEvent: SegmentedControlSelectEvent }) => {
+      const { index, value } = e.nativeEvent;
+      onSelect?.(value, index);
+    },
+    [onSelect]
+  );
+
+  // Normalize iOS props to native string format
+  const nativeIos = useMemo(() => {
+    if (!ios) return undefined;
+    return {
+      momentary: ios.momentary ? 'true' : 'false',
+      apportionsSegmentWidthsByContent: ios.apportionsSegmentWidthsByContent
+        ? 'true'
+        : 'false',
+      selectedSegmentTintColor: ios.selectedSegmentTintColor ?? '',
+    };
+  }, [ios]);
+
+  // Normalize Android props
+  const nativeAndroid = useMemo(() => {
+    if (!android) return undefined;
+    return {
+      selectionRequired: android.selectionRequired ? 'true' : 'false',
+    };
+  }, [android]);
+
+  // Merge user style with Android minHeight default
+  const mergedStyle = useMemo((): StyleProp<ViewStyle> => {
+    if (Platform.OS === 'android') {
+      return [styles.androidDefault, style];
+    }
+    return style;
+  }, [style]);
+
+  return (
+    <NativeSegmentedControl
+      style={mergedStyle}
+      segments={nativeSegments}
+      selectedValue={selectedData}
+      interactivity={disabled ? 'disabled' : 'enabled'}
+      onSelect={onSelect ? handleSelect : undefined}
+      ios={nativeIos}
+      android={nativeAndroid}
+      {...viewProps}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  androidDefault: {
+    minHeight: ANDROID_MIN_HEIGHT,
+  },
+});

package/src/SegmentedControlNativeComponent.ts

@@ -0,0 +1,79 @@
+// SegmentedControlNativeComponent.ts
+import type { CodegenTypes, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+/**
+ * A single segment in the control.
+ */
+export type SegmentedControlSegment = Readonly<{
+  label: string;
+  value: string;
+  disabled: string; // 'enabled' | 'disabled'
+  icon: string; // SF Symbol (iOS) or drawable name (Android), empty = none
+}>;
+
+/**
+ * Event emitted when the user selects a segment.
+ */
+export type SegmentedControlSelectEvent = Readonly<{
+  /** Selected segment index */
+  index: CodegenTypes.Int32;
+
+  /** Selected segment value */
+  value: string;
+}>;
+
+/** Interactivity state (no booleans). */
+export type SegmentedControlInteractivity = 'enabled' | 'disabled';
+
+/**
+ * iOS-specific configuration.
+ */
+export type IOSProps = Readonly<{
+  /** Momentary mode: segment springs back after touch */
+  momentary?: string; // 'true' | 'false'
+
+  /** Whether segment widths are proportional to content */
+  apportionsSegmentWidthsByContent?: string; // 'true' | 'false'
+
+  /** Selected segment tint color (hex string) */
+  selectedSegmentTintColor?: string;
+}>;
+
+/**
+ * Android-specific configuration.
+ */
+export type AndroidProps = Readonly<{
+  /** Whether one segment must always be selected */
+  selectionRequired?: string; // 'true' | 'false'
+}>;
+
+export interface SegmentedControlProps extends ViewProps {
+  /**
+   * Segments to display.
+   */
+  segments: ReadonlyArray<SegmentedControlSegment>;
+
+  /**
+   * Controlled selection by `value`.
+   * Empty string means "no selection".
+   */
+  selectedValue?: CodegenTypes.WithDefault<string, ''>;
+
+  /**
+   * Enabled / disabled state.
+   */
+  interactivity?: string; // SegmentedControlInteractivity
+
+  /**
+   * Fired when the user selects a segment.
+   */
+  onSelect?: CodegenTypes.BubblingEventHandler<SegmentedControlSelectEvent>;
+
+  ios?: IOSProps;
+  android?: AndroidProps;
+}
+
+export default codegenNativeComponent<SegmentedControlProps>(
+  'PCSegmentedControl'
+);

package/src/index.tsx

@@ -1,4 +1,6 @@
 export * from './DatePicker';
 export * from './SelectionMenu';
 export * from './ContextMenu';
+export * from './SegmentedControl';
+export * from './LiquidGlass';
 export * from './sharedTypes';