react-native-platform-components 1.3.0 → 1.4.0

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>;

package/src/FloatingToolbar.tsx

@@ -0,0 +1,113 @@
+// FloatingToolbar.tsx
+import React, { useMemo } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  type ColorValue,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+
+import NativeFloatingToolbar from './FloatingToolbarNativeComponent';
+
+/** Glass effect style of the toolbar on iOS 26. */
+export type FloatingToolbarIOSEffect = 'regular' | 'clear';
+
+/** Material 3 color variant of the toolbar on Android. */
+export type FloatingToolbarAndroidVariant = 'standard' | 'vibrant';
+
+export interface FloatingToolbarProps extends ViewProps {
+  /**
+   * Layout direction of the children. Default: `'horizontal'`.
+   */
+  orientation?: 'horizontal' | 'vertical';
+
+  /**
+   * Container color. Default: the platform's toolbar material (Material 3
+   * `surfaceContainer` or `primaryContainer` on Android, Liquid Glass or a
+   * blur on iOS). Use this rather than `style.backgroundColor`, which would
+   * replace the native shape.
+   */
+  color?: ColorValue;
+
+  /**
+   * iOS-specific configuration
+   */
+  ios?: {
+    /**
+     * Glass effect style on iOS 26. Older versions use a blur.
+     * Default: `'regular'`.
+     */
+    effect?: FloatingToolbarIOSEffect;
+  };
+
+  /**
+   * Android-specific configuration
+   */
+  android?: {
+    /**
+     * Material 3 color variant: `'standard'` (surface) or `'vibrant'`
+     * (primary container). Default: `'standard'`.
+     */
+    variant?: FloatingToolbarAndroidVariant;
+  };
+
+  /** The toolbar's actions, usually `Button`s. */
+  children?: React.ReactNode;
+
+  /** Test identifier */
+  testID?: string;
+}
+
+export function FloatingToolbar(
+  props: FloatingToolbarProps
+): React.ReactElement {
+  const { style, orientation, color, ios, android, children, ...viewProps } =
+    props;
+
+  const nativeIos = useMemo(() => {
+    if (Platform.OS !== 'ios' || !ios) return undefined;
+    return { effect: ios.effect ?? 'regular' };
+  }, [ios]);
+
+  const nativeAndroid = useMemo(() => {
+    if (Platform.OS !== 'android' || !android) return undefined;
+    return { variant: android.variant ?? 'standard' };
+  }, [android]);
+
+  const mergedStyle = useMemo(
+    (): StyleProp<ViewStyle> => [
+      styles.toolbar,
+      orientation === 'vertical' ? styles.vertical : styles.horizontal,
+      style,
+    ],
+    [orientation, style]
+  );
+
+  return (
+    <NativeFloatingToolbar
+      style={mergedStyle}
+      color={color}
+      ios={nativeIos}
+      android={nativeAndroid}
+      {...viewProps}
+    >
+      {children}
+    </NativeFloatingToolbar>
+  );
+}
+
+// Material 3 floating toolbar: 8dp container padding, 4dp between actions.
+// The capsule shape comes from native.
+const styles = StyleSheet.create({
+  toolbar: {
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 8,
+    gap: 4,
+  },
+  horizontal: { flexDirection: 'row' },
+  vertical: { flexDirection: 'column' },
+});

package/src/FloatingToolbarNativeComponent.ts

@@ -0,0 +1,31 @@
+// FloatingToolbarNativeComponent.ts
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+/**
+ * iOS-specific configuration.
+ */
+export type FloatingToolbarIOSProps = Readonly<{
+  /** Glass effect style on iOS 26: 'regular' | 'clear' */
+  effect?: string;
+}>;
+
+/**
+ * Android-specific configuration.
+ */
+export type FloatingToolbarAndroidProps = Readonly<{
+  /** Material color variant: 'standard' | 'vibrant' */
+  variant?: string;
+}>;
+
+export interface FloatingToolbarNativeProps extends ViewProps {
+  /** Container color. Default: the platform's toolbar material. */
+  color?: ColorValue;
+
+  ios?: FloatingToolbarIOSProps;
+  android?: FloatingToolbarAndroidProps;
+}
+
+export default codegenNativeComponent<FloatingToolbarNativeProps>(
+  'PCFloatingToolbar'
+) as HostComponent<FloatingToolbarNativeProps>;

package/src/SegmentedControl.tsx

@@ -1,14 +1,10 @@
 // SegmentedControl.tsx
 import React, { useCallback, useMemo } from 'react';
 import {
-  Image,
   Platform,
   StyleSheet,
   type ColorValue,
-  type ImageRequireSource,
-  type ImageURISource,
   type StyleProp,
-  type TextStyle,
   type ViewProps,
   type ViewStyle,
 } from 'react-native';
@@ -17,44 +13,27 @@ import NativeSegmentedControl, {
   type SegmentedControlSegment as NativeSegment,
   type SegmentedControlSelectEvent,
 } from './SegmentedControlNativeComponent';
+import {
+  resolveIcon,
+  type PlatformIcon,
+  type PlatformIconSource,
+} from './icons';
+import { normalizeLabelStyle, type LabelStyle } from './labelStyle';
+import type { AndroidMaterialStyle } from './sharedTypes';
 
 // 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;
 
-/**
- * A single icon source.
- *
- * - `string`: shorthand for an SF Symbol name on iOS and a drawable resource
- *   name on Android (the original API).
- * - `{ type: 'sfSymbol' }`: an SF Symbol. iOS only; ignored on Android.
- * - `{ type: 'drawable' }`: a drawable from the app's `res/drawable`.
- *   Android only; ignored on iOS.
- * - `{ type: 'image' }`: an image asset (`require('./icon.png')`) or a
- *   `{ uri }` source. Works on both platforms. Images are drawn as tinted
- *   templates unless `tinted` is `false`.
- */
-export type SegmentedControlIconSource =
-  | string
-  | { type: 'sfSymbol'; name: string }
-  | { type: 'drawable'; name: string }
-  | {
-      type: 'image';
-      source: ImageRequireSource | ImageURISource;
-      tinted?: boolean;
-    };
+/** A single icon source. Alias of {@link PlatformIconSource}. */
+export type SegmentedControlIconSource = PlatformIconSource;
 
 /**
  * An icon for a segment: a single source used on both platforms, or a
- * per-platform pair so callers don't need to branch on `Platform.OS`.
+ * per-platform pair. Alias of {@link PlatformIcon}.
  */
-export type SegmentedControlIcon =
-  | SegmentedControlIconSource
-  | {
-      ios?: SegmentedControlIconSource;
-      android?: SegmentedControlIconSource;
-    };
+export type SegmentedControlIcon = PlatformIcon;
 
 /**
  * How labels and icons combine for segments that have an icon.
@@ -67,15 +46,8 @@ export type SegmentedControlIcon =
  */
 export type SegmentedControlLabelVisibility = 'auto' | 'labeled' | 'unlabeled';
 
-/**
- * Font for segment labels. Each field falls back to the platform default.
- */
-export interface SegmentedControlLabelStyle {
-  fontFamily?: string;
-  fontSize?: number;
-  fontWeight?: TextStyle['fontWeight'];
-  fontStyle?: 'normal' | 'italic';
-}
+/** Font for segment labels. Alias of {@link LabelStyle}. */
+export type SegmentedControlLabelStyle = LabelStyle;
 
 /**
  * Badge colors. Both default to the platform look (red with white text).
@@ -201,77 +173,20 @@ export interface SegmentedControlProps extends ViewProps {
 
     /** Outline color of the segments. */
     strokeColor?: ColorValue;
+
+    /**
+     * Material style: the Material 3 Expressive connected buttons (default),
+     * or the classic Material 3 segmented buttons.
+     */
+    material?: AndroidMaterialStyle;
   };
 
   /** Test identifier */
   testID?: string;
 }
 
-type NativeIconFields = Pick<
-  NativeSegment,
-  'iconType' | 'iconName' | 'iconUri' | 'iconScale' | 'iconTinted'
->;
-
-const NO_ICON: NativeIconFields = {
-  iconType: '',
-  iconName: '',
-  iconUri: '',
-  iconScale: 1,
-  iconTinted: 'true',
-};
-
-function pickIconSource(
-  icon: SegmentedControlIcon | undefined
-): SegmentedControlIconSource | undefined {
-  if (icon === undefined || typeof icon === 'string' || 'type' in icon) {
-    return icon;
-  }
-  return Platform.OS === 'ios' ? icon.ios : icon.android;
-}
-
-/**
- * Flattens the public icon shape into the strings native expects, dropping
- * sources that don't apply to the current platform.
- */
-export function resolveSegmentIcon(
-  icon: SegmentedControlIcon | undefined
-): NativeIconFields {
-  const source = pickIconSource(icon);
-  if (source === undefined) return NO_ICON;
-
-  if (typeof source === 'string') {
-    if (source.length === 0) return NO_ICON;
-    return {
-      ...NO_ICON,
-      iconType: Platform.OS === 'ios' ? 'sfSymbol' : 'drawable',
-      iconName: source,
-    };
-  }
-
-  switch (source.type) {
-    case 'sfSymbol':
-      return Platform.OS === 'ios'
-        ? { ...NO_ICON, iconType: 'sfSymbol', iconName: source.name }
-        : NO_ICON;
-    case 'drawable':
-      return Platform.OS === 'android'
-        ? { ...NO_ICON, iconType: 'drawable', iconName: source.name }
-        : NO_ICON;
-    case 'image': {
-      const resolved = Image.resolveAssetSource(source.source);
-      if (!resolved?.uri) return NO_ICON;
-      return {
-        iconType: 'image',
-        iconName: '',
-        iconUri: resolved.uri,
-        iconScale: resolved.scale > 0 ? resolved.scale : 1,
-        iconTinted: source.tinted === false ? 'false' : 'true',
-      };
-    }
-    default:
-      return NO_ICON;
-  }
-}
+/** Flattens a segment icon for native. Alias of {@link resolveIcon}. */
+export const resolveSegmentIcon = resolveIcon;
 
 function normalizeSelectedValue(selected: string | null): string {
   return selected ?? '';
@@ -346,24 +261,17 @@ export function SegmentedControl(
     (Platform.OS === 'ios' ? ios?.selectedSegmentTintColor : undefined);
 
   // Normalize the label font; empty / 0 means platform default
-  const nativeLabelStyle = useMemo(() => {
-    if (!labelStyle) return undefined;
-    return {
-      fontFamily: labelStyle.fontFamily ?? '',
-      fontSize: labelStyle.fontSize ?? 0,
-      fontWeight:
-        labelStyle.fontWeight === undefined
-          ? ''
-          : String(labelStyle.fontWeight),
-      fontStyle: labelStyle.fontStyle ?? '',
-    };
-  }, [labelStyle]);
+  const nativeLabelStyle = useMemo(
+    () => normalizeLabelStyle(labelStyle),
+    [labelStyle]
+  );
 
   // Normalize Android props
   const nativeAndroid = useMemo(() => {
     if (!android) return undefined;
     return {
       selectionRequired: android.selectionRequired === false ? 'false' : 'true',
+      material: android.material ?? 'expressive',
     };
   }, [android]);
 

package/src/SegmentedControlNativeComponent.ts

@@ -72,6 +72,9 @@ export type IOSProps = Readonly<{
 export type AndroidProps = Readonly<{
   /** Whether one segment must always be selected */
   selectionRequired?: string; // 'true' | 'false'
+
+  /** Material style: 'm3' | 'expressive' */
+  material?: string;
 }>;
 
 export interface SegmentedControlProps extends ViewProps {