react-native-platform-components 0.8.10 → 0.9.0

package/src/SegmentedControl.tsx

@@ -1,14 +1,20 @@
 // 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';
 
 import NativeSegmentedControl, {
+  type SegmentedControlSegment as NativeSegment,
   type SegmentedControlSelectEvent,
 } from './SegmentedControlNativeComponent';
 
@@ -17,6 +23,68 @@ import NativeSegmentedControl, {
 // 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;
+    };
+
+/**
+ * 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`.
+ */
+export type SegmentedControlIcon =
+  | SegmentedControlIconSource
+  | {
+      ios?: SegmentedControlIconSource;
+      android?: SegmentedControlIconSource;
+    };
+
+/**
+ * How labels and icons combine for segments that have an icon.
+ *
+ * - `auto` (default): platform behavior. iOS shows the icon in place of the
+ *   label (UISegmentedControl cannot show both); Android shows icon and label.
+ * - `labeled`: always show the label. iOS drops the icon; Android shows both.
+ * - `unlabeled`: show only the icon. Segments without an icon still show
+ *   their label. Screen readers still announce the label on both platforms.
+ */
+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';
+}
+
+/**
+ * Badge colors. Both default to the platform look (red with white text).
+ */
+export interface SegmentedControlBadgeStyle {
+  backgroundColor?: ColorValue;
+  color?: ColorValue;
+}
+
 export interface SegmentedControlSegmentProps {
   /** Display label for the segment */
   label: string;
@@ -27,8 +95,21 @@ export interface SegmentedControlSegmentProps {
   /** Whether this specific segment is disabled */
   disabled?: boolean;
 
-  /** Optional SF Symbol name (iOS) or drawable resource name (Android) */
-  icon?: string;
+  /** Optional icon. See {@link SegmentedControlIcon}. */
+  icon?: SegmentedControlIcon;
+
+  /**
+   * Badge shown at the segment's top-right corner, e.g. an unread count.
+   * Numbers are shown as-is; use `undefined` to hide the badge.
+   */
+  badge?: string | number;
+
+  /**
+   * Screen-reader label. Defaults to `label`.
+   * On iOS this applies to segments rendered as icons; text segments are
+   * announced by their title.
+   */
+  accessibilityLabel?: string;
 }
 
 export interface SegmentedControlProps extends ViewProps {
@@ -48,9 +129,40 @@ export interface SegmentedControlProps extends ViewProps {
    */
   onSelect?: (value: string, index: number) => void;
 
+  /**
+   * Called when the user clears the selection by tapping the selected segment.
+   * Only possible on Android with `android.selectionRequired` set to `false`;
+   * iOS never clears a selection from a tap.
+   */
+  onDeselect?: () => void;
+
   /** Whether the entire control is disabled */
   disabled?: boolean;
 
+  /**
+   * How labels and icons combine. Default: `'auto'`.
+   * See {@link SegmentedControlLabelVisibility}.
+   */
+  labelVisibility?: SegmentedControlLabelVisibility;
+
+  /**
+   * Background color of the selected segment.
+   * iOS: `selectedSegmentTintColor`. Android: checked button background.
+   */
+  selectedSegmentColor?: ColorValue;
+
+  /** Text and icon color of the selected segment. */
+  activeTintColor?: ColorValue;
+
+  /** Text and icon color of unselected segments. */
+  inactiveTintColor?: ColorValue;
+
+  /** Font for segment labels. See {@link SegmentedControlLabelStyle}. */
+  labelStyle?: SegmentedControlLabelStyle;
+
+  /** Colors for segment badges. See {@link SegmentedControlBadgeStyle}. */
+  badgeStyle?: SegmentedControlBadgeStyle;
+
   /**
    * iOS-specific configuration
    */
@@ -68,7 +180,7 @@ export interface SegmentedControlProps extends ViewProps {
     apportionsSegmentWidthsByContent?: boolean;
 
     /**
-     * Selected segment tint color (hex string, e.g., "#007AFF")
+     * @deprecated Use `selectedSegmentColor`, which works on both platforms.
      */
     selectedSegmentTintColor?: string;
   };
@@ -78,16 +190,89 @@ export interface SegmentedControlProps extends ViewProps {
    */
   android?: {
     /**
-     * Whether one segment must always be selected.
-     * Default: false
+     * Whether one segment must always be selected. When `false`, tapping the
+     * selected segment clears the selection and calls `onDeselect`.
+     * Default: true (matches iOS, which cannot clear a selection by tapping)
      */
     selectionRequired?: boolean;
+
+    /** Ripple color shown while pressing a segment. */
+    rippleColor?: ColorValue;
+
+    /** Outline color of the segments. */
+    strokeColor?: ColorValue;
   };
 
   /** 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;
+  }
+}
+
 function normalizeSelectedValue(selected: string | null): string {
   return selected ?? '';
 }
@@ -100,19 +285,29 @@ export function SegmentedControl(
     segments,
     selectedValue,
     disabled,
+    labelVisibility,
+    selectedSegmentColor,
+    activeTintColor,
+    inactiveTintColor,
+    labelStyle,
+    badgeStyle,
     onSelect,
+    onDeselect,
     ios,
     android,
     ...viewProps
   } = props;
 
   // Normalize segments for native
-  const nativeSegments = useMemo(() => {
+  const nativeSegments = useMemo((): NativeSegment[] => {
     return segments.map((seg) => ({
       label: seg.label,
       value: seg.value,
       disabled: seg.disabled ? 'disabled' : 'enabled',
-      icon: seg.icon ?? '',
+      badge:
+        seg.badge === undefined || seg.badge === null ? '' : String(seg.badge),
+      accessibilityLabel: seg.accessibilityLabel ?? '',
+      ...resolveSegmentIcon(seg.icon),
     }));
   }, [segments]);
 
@@ -124,9 +319,14 @@ export function SegmentedControl(
   const handleSelect = useCallback(
     (e: { nativeEvent: SegmentedControlSelectEvent }) => {
       const { index, value } = e.nativeEvent;
+      // Native reports a cleared selection as index -1 with an empty value.
+      if (index < 0) {
+        onDeselect?.();
+        return;
+      }
       onSelect?.(value, index);
     },
-    [onSelect]
+    [onSelect, onDeselect]
   );
 
   // Normalize iOS props to native string format
@@ -137,15 +337,33 @@ export function SegmentedControl(
       apportionsSegmentWidthsByContent: ios.apportionsSegmentWidthsByContent
         ? 'true'
         : 'false',
-      selectedSegmentTintColor: ios.selectedSegmentTintColor ?? '',
     };
   }, [ios]);
 
+  // Deprecated iOS-only tint falls back to the cross-platform prop
+  const nativeSelectedSegmentColor =
+    selectedSegmentColor ??
+    (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]);
+
   // Normalize Android props
   const nativeAndroid = useMemo(() => {
     if (!android) return undefined;
     return {
-      selectionRequired: android.selectionRequired ? 'true' : 'false',
+      selectionRequired: android.selectionRequired === false ? 'false' : 'true',
     };
   }, [android]);
 
@@ -163,7 +381,16 @@ export function SegmentedControl(
       segments={nativeSegments}
       selectedValue={selectedData}
       interactivity={disabled ? 'disabled' : 'enabled'}
-      onSelect={onSelect ? handleSelect : undefined}
+      labelVisibility={labelVisibility ?? 'auto'}
+      selectedSegmentColor={nativeSelectedSegmentColor}
+      activeTintColor={activeTintColor}
+      inactiveTintColor={inactiveTintColor}
+      androidRippleColor={android?.rippleColor}
+      androidStrokeColor={android?.strokeColor}
+      labelStyle={nativeLabelStyle}
+      badgeBackgroundColor={badgeStyle?.backgroundColor}
+      badgeTextColor={badgeStyle?.color}
+      onSelect={onSelect || onDeselect ? handleSelect : undefined}
       ios={nativeIos}
       android={nativeAndroid}
       {...viewProps}

package/src/SegmentedControlNativeComponent.ts

@@ -1,31 +1,59 @@
 // SegmentedControlNativeComponent.ts
-import type { CodegenTypes, ViewProps } from 'react-native';
+import type {
+  CodegenTypes,
+  ColorValue,
+  HostComponent,
+  ViewProps,
+} from 'react-native';
 import { codegenNativeComponent } from 'react-native';
 
 /**
  * A single segment in the control.
+ *
+ * Icons are pre-resolved on the JS side so native only deals with flat
+ * strings: `iconType` selects the source, `iconName` carries an SF Symbol or
+ * drawable name, and `iconUri` / `iconScale` carry a resolved image asset.
  */
 export type SegmentedControlSegment = Readonly<{
   label: string;
   value: string;
   disabled: string; // 'enabled' | 'disabled'
-  icon: string; // SF Symbol (iOS) or drawable name (Android), empty = none
+  iconType: string; // '' | 'sfSymbol' | 'drawable' | 'image'
+  iconName: string; // SF Symbol (iOS) or drawable resource name (Android)
+  iconUri: string; // Resolved image URI when iconType === 'image'
+  iconScale: CodegenTypes.Double; // Resolved image scale when iconType === 'image'
+  iconTinted: string; // 'true' | 'false' — draw the image as a tinted template
+  badge: string; // Badge text, empty = no badge
+  accessibilityLabel: string; // Screen-reader label, empty = use label
 }>;
 
 /**
  * Event emitted when the user selects a segment.
  */
 export type SegmentedControlSelectEvent = Readonly<{
-  /** Selected segment index */
+  /** Selected segment index. -1 means the selection was cleared. */
   index: CodegenTypes.Int32;
 
-  /** Selected segment value */
+  /** Selected segment value. Empty when the selection was cleared. */
   value: string;
 }>;
 
 /** Interactivity state (no booleans). */
 export type SegmentedControlInteractivity = 'enabled' | 'disabled';
 
+/** How labels and icons combine (no booleans). */
+export type SegmentedControlLabelVisibility = 'auto' | 'labeled' | 'unlabeled';
+
+/**
+ * Label font. Empty strings / 0 mean "platform default".
+ */
+export type LabelStyleProps = Readonly<{
+  fontFamily?: string;
+  fontSize?: CodegenTypes.Double;
+  fontWeight?: string; // 'normal' | 'bold' | '100'..'900'
+  fontStyle?: string; // 'normal' | 'italic'
+}>;
+
 /**
  * iOS-specific configuration.
  */
@@ -35,9 +63,6 @@ export type IOSProps = Readonly<{
 
   /** Whether segment widths are proportional to content */
   apportionsSegmentWidthsByContent?: string; // 'true' | 'false'
-
-  /** Selected segment tint color (hex string) */
-  selectedSegmentTintColor?: string;
 }>;
 
 /**
@@ -65,6 +90,35 @@ export interface SegmentedControlProps extends ViewProps {
    */
   interactivity?: string; // SegmentedControlInteractivity
 
+  /**
+   * How segment labels and icons combine.
+   */
+  labelVisibility?: string; // SegmentedControlLabelVisibility
+
+  /** Background of the selected segment. */
+  selectedSegmentColor?: ColorValue;
+
+  /** Text / icon color of the selected segment. */
+  activeTintColor?: ColorValue;
+
+  /** Text / icon color of unselected segments. */
+  inactiveTintColor?: ColorValue;
+
+  /** Android: ripple color when pressing a segment. */
+  androidRippleColor?: ColorValue;
+
+  /** Android: outline color of the segments. */
+  androidStrokeColor?: ColorValue;
+
+  /** Label font. */
+  labelStyle?: LabelStyleProps;
+
+  /** Badge background (default: system red). */
+  badgeBackgroundColor?: ColorValue;
+
+  /** Badge text color (default: white). */
+  badgeTextColor?: ColorValue;
+
   /**
    * Fired when the user selects a segment.
    */
@@ -76,4 +130,4 @@ export interface SegmentedControlProps extends ViewProps {
 
 export default codegenNativeComponent<SegmentedControlProps>(
   'PCSegmentedControl'
-);
+) as HostComponent<SegmentedControlProps>;

package/src/SelectionMenuNativeComponent.ts

@@ -1,5 +1,5 @@
 // SelectionMenuNativeComponent.ts
-import type { CodegenTypes, ViewProps } from 'react-native';
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
 import { codegenNativeComponent } from 'react-native';
 
 /**
@@ -94,4 +94,6 @@ export interface SelectionMenuProps extends ViewProps {
   android?: AndroidProps;
 }
 
-export default codegenNativeComponent<SelectionMenuProps>('PCSelectionMenu');
+export default codegenNativeComponent<SelectionMenuProps>(
+  'PCSelectionMenu'
+) as HostComponent<SelectionMenuProps>;

package/src/index.web.tsx

@@ -111,18 +111,51 @@ export const ContextMenu = ({
 // SegmentedControl
 // ============================================================================
 
+export type SegmentedControlIconSource =
+  | string
+  | { type: 'sfSymbol'; name: string }
+  | { type: 'drawable'; name: string }
+  | { type: 'image'; source: unknown; tinted?: boolean };
+
+export type SegmentedControlIcon =
+  | SegmentedControlIconSource
+  | { ios?: SegmentedControlIconSource; android?: SegmentedControlIconSource };
+
+export type SegmentedControlLabelVisibility = 'auto' | 'labeled' | 'unlabeled';
+
 export interface SegmentedControlSegmentProps {
   label: string;
   value: string;
   disabled?: boolean;
-  icon?: string;
+  icon?: SegmentedControlIcon;
+  badge?: string | number;
+  accessibilityLabel?: string;
+}
+
+export interface SegmentedControlBadgeStyle {
+  backgroundColor?: string;
+  color?: string;
+}
+
+export interface SegmentedControlLabelStyle {
+  fontFamily?: string;
+  fontSize?: number;
+  fontWeight?: string | number;
+  fontStyle?: 'normal' | 'italic';
 }
 
 export interface SegmentedControlProps extends ViewProps {
   segments: readonly SegmentedControlSegmentProps[];
   selectedValue: string | null;
   disabled?: boolean;
+  labelVisibility?: SegmentedControlLabelVisibility;
+  selectedSegmentColor?: string;
+  activeTintColor?: string;
+  inactiveTintColor?: string;
+  labelStyle?: SegmentedControlLabelStyle;
+  badgeStyle?: SegmentedControlBadgeStyle;
   onSelect?: (value: string, index: number) => void;
+  onDeselect?: () => void;
   ios?: Record<string, unknown>;
   android?: Record<string, unknown>;
 }