@expo/ui 55.0.2 → 55.0.4

package/src/jetpack-compose/ModalBottomSheet/index.tsx

@@ -1,16 +1,54 @@
 import { requireNativeView } from 'expo';
-import React from 'react';
+import React, { Ref } from 'react';
+import { type ColorValue } from 'react-native';
 
-import { type ExpoModifier, type ViewEvent } from '../../types';
+import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+type SlotNativeViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+const SlotNativeView: React.ComponentType<SlotNativeViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+export type ModalBottomSheetRef = {
+  /**
+   * Programmatically hides the bottom sheet with an animation.
+   * The returned promise resolves after the dismiss animation completes.
+   */
+  hide: () => Promise<void>;
+};
+
+export type ModalBottomSheetProperties = {
+  /**
+   * Whether the bottom sheet can be dismissed by pressing the back button.
+   * @default true
+   */
+  shouldDismissOnBackPress?: boolean;
+  /**
+   * Whether the bottom sheet can be dismissed by clicking outside (on the scrim).
+   * @default true
+   */
+  shouldDismissOnClickOutside?: boolean;
+};
+
 export type ModalBottomSheetProps = {
   /**
    * The children of the `ModalBottomSheet` component.
+   * Can include a `ModalBottomSheet.DragHandle` slot for a custom drag handle.
    */
   children: React.ReactNode;
   /**
-   * Callback function that is called when the bottom sheet is dismissed.
+   * Can be used to imperatively hide the bottom sheet with an animation.
+   */
+  ref?: Ref<ModalBottomSheetRef>;
+  /**
+   * Callback function that is called when the user dismisses the bottom sheet
+   * (via swipe, back press, or tapping outside the scrim).
    */
   onDismissRequest: () => void;
   /**
@@ -18,14 +56,42 @@ export type ModalBottomSheetProps = {
    * @default false
    */
   skipPartiallyExpanded?: boolean;
+  /**
+   * The background color of the bottom sheet.
+   */
+  containerColor?: ColorValue;
+  /**
+   * The preferred color of the content inside the bottom sheet.
+   */
+  contentColor?: ColorValue;
+  /**
+   * The color of the scrim overlay behind the bottom sheet.
+   */
+  scrimColor?: ColorValue;
+  /**
+   * Whether to show the default drag handle at the top of the bottom sheet.
+   * Ignored if a custom `ModalBottomSheet.DragHandle` slot is provided.
+   * @default true
+   */
+  showDragHandle?: boolean;
+  /**
+   * Whether gestures (swipe to dismiss) are enabled on the bottom sheet.
+   * @default true
+   */
+  sheetGesturesEnabled?: boolean;
+  /**
+   * Properties for the modal window behavior.
+   */
+  properties?: ModalBottomSheetProperties;
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
 };
 
-type NativeModalBottomSheetProps = Omit<ModalBottomSheetProps, 'onDismissRequest'> &
-  ViewEvent<'onDismissRequest', void>;
+type NativeModalBottomSheetProps = Omit<ModalBottomSheetProps, 'onDismissRequest'> & {
+  onDismissRequest: () => void;
+};
 
 const ModalBottomSheetNativeView: React.ComponentType<NativeModalBottomSheetProps> =
   requireNativeView('ExpoUI', 'ModalBottomSheetView');
@@ -44,18 +110,22 @@ function transformProps(props: ModalBottomSheetProps): NativeModalBottomSheetPro
 }
 
 /**
- * A Material Design modal bottom sheet.
+ * A custom drag handle slot for `ModalBottomSheet`.
+ * Wrap any content to use as the sheet's drag handle.
+ *
+ * @platform android
  */
-export function ModalBottomSheet(props: ModalBottomSheetProps) {
-  return <ModalBottomSheetNativeView {...transformProps(props)} />;
+function DragHandle(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="dragHandle">{props.children}</SlotNativeView>;
 }
 
 /**
- * @deprecated Use `ModalBottomSheet` instead.
+ * A Material Design modal bottom sheet.
  */
-export const BottomSheet = ModalBottomSheet;
+function ModalBottomSheetComponent(props: ModalBottomSheetProps) {
+  return <ModalBottomSheetNativeView {...transformProps(props)} />;
+}
 
-/**
- * @deprecated Use `ModalBottomSheetProps` instead.
- */
-export type BottomSheetProps = ModalBottomSheetProps;
+ModalBottomSheetComponent.DragHandle = DragHandle;
+
+export const ModalBottomSheet = ModalBottomSheetComponent;

package/src/jetpack-compose/MultiChoiceSegmentedButtonRow/index.tsx

@@ -0,0 +1,34 @@
+import { requireNativeView } from 'expo';
+
+import { type ModifierConfig } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type MultiChoiceSegmentedButtonRowProps = {
+  /**
+   * SegmentedButton children.
+   */
+  children: React.ReactNode;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+};
+
+const MultiChoiceSegmentedButtonRowNativeView: React.ComponentType<MultiChoiceSegmentedButtonRowProps> =
+  requireNativeView('ExpoUI', 'MultiChoiceSegmentedButtonRowView');
+
+/**
+ * A row container for multi-choice `SegmentedButton` children.
+ * Maps to Material 3 `MultiChoiceSegmentedButtonRow`.
+ */
+export function MultiChoiceSegmentedButtonRow(props: MultiChoiceSegmentedButtonRowProps) {
+  const { children, modifiers, ...restProps } = props;
+  return (
+    <MultiChoiceSegmentedButtonRowNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}>
+      {children}
+    </MultiChoiceSegmentedButtonRowNativeView>
+  );
+}

package/src/jetpack-compose/Progress/index.tsx

@@ -1,102 +1,160 @@
 import { requireNativeView } from 'expo';
-import { ColorValue } from 'react-native';
+import { type ColorValue } from 'react-native';
 
-import { ExpoModifier } from '../../types';
+import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type ProgressElementColors = {
-  /**
-   * Track color.
-   *
-   * @platform android
-   */
-  trackColor?: ColorValue;
-};
+/**
+ * Stroke cap style for progress indicators.
+ */
+export type StrokeCap = 'round' | 'butt' | 'square';
 
-export type CircularProgressProps = {
+/**
+ * Common props shared by all progress indicator variants.
+ */
+type BaseProgressProps = {
   /**
-   * The current progress value of the slider. This is a number between `0` and `1`.
+   * The current progress value between `0` and `1`. Omit for indeterminate.
    */
   progress?: number | null;
   /**
-   * Progress color.
+   * Progress indicator color.
    */
   color?: ColorValue;
   /**
-   * Colors for switch's core elements.
-   * @platform android
+   * Track (background) color.
    */
-  elementColors?: ProgressElementColors;
+  trackColor?: ColorValue;
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
 };
 
-export type LinearProgressProps = {
-  /**
-   * The current progress value of the slider. This is a number between `0` and `1`.
-   */
-  progress?: number | null;
+function transformProps<T extends BaseProgressProps>(props: T): T {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  } as T;
+}
+
+function createProgressComponent<P extends BaseProgressProps>(
+  viewName: string
+): React.ComponentType<P> {
+  const NativeView: React.ComponentType<P> = requireNativeView('ExpoUI', viewName);
+  return function ProgressComponent(props: P) {
+    return <NativeView {...transformProps(props)} />;
+  };
+}
+
+// region LinearProgressIndicator
+
+/**
+ * Configuration for the stop indicator dot at the end of the determinate linear progress track.
+ * When provided, draws a stop indicator with the given options. Omit to use the Compose default.
+ */
+export type DrawStopIndicatorConfig = {
   /**
-   * Progress color.
+   * Color of the stop indicator. Defaults to the indicator's color.
    */
   color?: ColorValue;
   /**
-   * Colors for switch's core elements.
-   * @platform android
+   * Stroke cap style for the stop indicator. Defaults to the indicator's strokeCap.
    */
-  elementColors?: ProgressElementColors;
+  strokeCap?: StrokeCap;
   /**
-   * Modifiers for the component.
+   * Size of the stop indicator in dp. Defaults to the Material 3 default.
    */
-  modifiers?: ExpoModifier[];
+  stopSize?: number;
 };
 
-type NativeProgressProps =
-  | CircularProgressProps
-  | (LinearProgressProps & {
-      variant: 'linear' | 'circular' | 'linearWavy' | 'circularWavy';
-    });
+export type LinearProgressIndicatorProps = BaseProgressProps & {
+  /**
+   * Stroke cap style for the indicator ends.
+   * @default 'round'
+   */
+  strokeCap?: StrokeCap;
+  /**
+   * Gap size between the indicator and track in dp.
+   */
+  gapSize?: number;
+  /**
+   * Configuration for the stop indicator dot at the end of the determinate progress track.
+   */
+  drawStopIndicator?: DrawStopIndicatorConfig;
+};
 
-const NativeProgressView: React.ComponentType<NativeProgressProps> = requireNativeView(
-  'ExpoUI',
-  'ProgressView'
+/**
+ * A linear progress indicator that displays progress in a horizontal bar.
+ *
+ * Matches the Jetpack Compose `LinearProgressIndicator`.
+ */
+export const LinearProgressIndicator = createProgressComponent<LinearProgressIndicatorProps>(
+  'LinearProgressIndicatorView'
 );
 
-function transformProps(props: CircularProgressProps | LinearProgressProps): NativeProgressProps {
-  const { modifiers, ...restProps } = props;
-  return {
-    modifiers,
-    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
-    ...restProps,
-  };
-}
+// endregion
 
-/**
- * Renders a `CircularProgress` component.
- */
-export function CircularProgress(props: CircularProgressProps) {
-  return <NativeProgressView {...transformProps(props)} variant="circular" />;
-}
+// region CircularProgressIndicator
+
+export type CircularProgressIndicatorProps = BaseProgressProps & {
+  /**
+   * Width of the circular stroke in dp.
+   */
+  strokeWidth?: number;
+  /**
+   * Stroke cap style for the indicator ends.
+   * @default 'round'
+   */
+  strokeCap?: StrokeCap;
+  /**
+   * Gap size between the indicator and track in dp.
+   */
+  gapSize?: number;
+};
 
 /**
- * Renders a `LinearProgress` component.
+ * A circular progress indicator that displays progress in a circular format.
+ *
+ * Matches the Jetpack Compose `CircularProgressIndicator`.
  */
-export function LinearProgress(props: LinearProgressProps) {
-  return <NativeProgressView {...transformProps(props)} variant="linear" />;
-}
+export const CircularProgressIndicator = createProgressComponent<CircularProgressIndicatorProps>(
+  'CircularProgressIndicatorView'
+);
+
+// endregion
+
+// region LinearWavyProgressIndicator
+
+export type LinearWavyProgressIndicatorProps = BaseProgressProps & {
+  /**
+   * Size of the stop indicator in dp at the end of the determinate progress track.
+   */
+  stopSize?: number;
+};
 
 /**
- * Renders a `CircularWavyProgress` component with wavy animation.
+ * A linear progress indicator with wavy animation style.
+ *
+ * Matches the Jetpack Compose `LinearWavyProgressIndicator`.
  */
-export function CircularWavyProgress(props: CircularProgressProps) {
-  return <NativeProgressView {...transformProps(props)} variant="circularWavy" />;
-}
+export const LinearWavyProgressIndicator =
+  createProgressComponent<LinearWavyProgressIndicatorProps>('LinearWavyProgressIndicatorView');
+
+// endregion
+
+// region CircularWavyProgressIndicator
+
+export type CircularWavyProgressIndicatorProps = BaseProgressProps;
 
 /**
- * Renders a `LinearWavyProgress` component with wavy animation.
+ * A circular progress indicator with wavy animation style.
+ *
+ * Matches the Jetpack Compose `CircularWavyProgressIndicator`.
  */
-export function LinearWavyProgress(props: LinearProgressProps) {
-  return <NativeProgressView {...transformProps(props)} variant="linearWavy" />;
-}
+export const CircularWavyProgressIndicator =
+  createProgressComponent<CircularWavyProgressIndicatorProps>('CircularWavyProgressIndicatorView');
+
+// endregion

package/src/jetpack-compose/RadioButton/index.tsx

@@ -1,6 +1,6 @@
 import { requireNativeView } from 'expo';
 
-import { type ExpoModifier, type ViewEvent } from '../../types';
+import { type ModifierConfig, type ViewEvent } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
 export type RadioButtonProps = {
@@ -15,12 +15,13 @@ export type RadioButtonProps = {
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
 };
 
-type NativeRadioButtonProps = Omit<RadioButtonProps, 'onClick'> & {
-  nativeClickable: boolean;
-} & ViewEvent<'onNativeClick', void>;
+type NativeRadioButtonProps = Omit<RadioButtonProps, 'onClick'> &
+  ViewEvent<'onButtonPressed', void> & {
+    clickable: boolean;
+  };
 
 const RadioButtonNativeView: React.ComponentType<NativeRadioButtonProps> = requireNativeView(
   'ExpoUI',
@@ -33,10 +34,8 @@ function transformProps(props: RadioButtonProps): NativeRadioButtonProps {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-    nativeClickable: onClick != null,
-    onNativeClick: () => {
-      onClick?.();
-    },
+    clickable: onClick != null,
+    onButtonPressed: () => onClick?.(),
   };
 }
 

package/src/jetpack-compose/SegmentedButton/index.tsx

@@ -0,0 +1,109 @@
+import { requireNativeView } from 'expo';
+import { type ColorValue } from 'react-native';
+
+import { type ModifierConfig, type ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+/**
+ * Colors for the segmented button in different states.
+ */
+export type SegmentedButtonColors = {
+  activeBorderColor?: ColorValue;
+  activeContentColor?: ColorValue;
+  inactiveBorderColor?: ColorValue;
+  inactiveContentColor?: ColorValue;
+  disabledActiveBorderColor?: ColorValue;
+  disabledActiveContentColor?: ColorValue;
+  disabledInactiveBorderColor?: ColorValue;
+  disabledInactiveContentColor?: ColorValue;
+  activeContainerColor?: ColorValue;
+  inactiveContainerColor?: ColorValue;
+  disabledActiveContainerColor?: ColorValue;
+  disabledInactiveContainerColor?: ColorValue;
+};
+
+export type SegmentedButtonProps = {
+  /**
+   * Whether the button is currently selected (used inside `SingleChoiceSegmentedButtonRow`).
+   */
+  selected?: boolean;
+  /**
+   * Callback that is called when the button is clicked (used inside `SingleChoiceSegmentedButtonRow`).
+   */
+  onClick?: () => void;
+  /**
+   * Whether the button is currently checked (used inside `MultiChoiceSegmentedButtonRow`).
+   */
+  checked?: boolean;
+  /**
+   * Callback that is called when the checked state changes (used inside `MultiChoiceSegmentedButtonRow`).
+   */
+  onCheckedChange?: (checked: boolean) => void;
+  /**
+   * Whether the button is enabled.
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Colors for the button in different states.
+   */
+  colors?: SegmentedButtonColors;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+  /**
+   * Children containing a `Label` slot.
+   */
+  children?: React.ReactNode;
+};
+
+type NativeSlotViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+type NativeSegmentedButtonProps = Omit<SegmentedButtonProps, 'onClick' | 'onCheckedChange'> &
+  ViewEvent<'onButtonPressed', void> &
+  ViewEvent<'onCheckedChange', { value: boolean }>;
+
+const SegmentedButtonNativeView: React.ComponentType<NativeSegmentedButtonProps> =
+  requireNativeView('ExpoUI', 'SegmentedButtonView');
+
+const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+/**
+ * Label slot for `SegmentedButton`.
+ */
+function SegmentedButtonLabel(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="label">{props.children}</SlotNativeView>;
+}
+
+/**
+ * A Material 3 segmented button. Must be used inside a `SingleChoiceSegmentedButtonRow`
+ * or `MultiChoiceSegmentedButtonRow`.
+ */
+function SegmentedButtonComponent(props: SegmentedButtonProps) {
+  const { children, modifiers, onClick, onCheckedChange, ...restProps } = props;
+  return (
+    <SegmentedButtonNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      onButtonPressed={() => onClick?.()}
+      onCheckedChange={(e) => onCheckedChange?.(e.nativeEvent.value)}>
+      {children}
+    </SegmentedButtonNativeView>
+  );
+}
+
+SegmentedButtonComponent.Label = SegmentedButtonLabel;
+
+export { SegmentedButtonComponent as SegmentedButton };
+export { SingleChoiceSegmentedButtonRow } from '../SingleChoiceSegmentedButtonRow';
+export type { SingleChoiceSegmentedButtonRowProps } from '../SingleChoiceSegmentedButtonRow';
+export { MultiChoiceSegmentedButtonRow } from '../MultiChoiceSegmentedButtonRow';
+export type { MultiChoiceSegmentedButtonRowProps } from '../MultiChoiceSegmentedButtonRow';

package/src/jetpack-compose/SingleChoiceSegmentedButtonRow/index.tsx

@@ -0,0 +1,34 @@
+import { requireNativeView } from 'expo';
+
+import { type ModifierConfig } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type SingleChoiceSegmentedButtonRowProps = {
+  /**
+   * SegmentedButton children.
+   */
+  children: React.ReactNode;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+};
+
+const SingleChoiceSegmentedButtonRowNativeView: React.ComponentType<SingleChoiceSegmentedButtonRowProps> =
+  requireNativeView('ExpoUI', 'SingleChoiceSegmentedButtonRowView');
+
+/**
+ * A row container for single-choice `SegmentedButton` children.
+ * Maps to Material 3 `SingleChoiceSegmentedButtonRow`.
+ */
+export function SingleChoiceSegmentedButtonRow(props: SingleChoiceSegmentedButtonRowProps) {
+  const { children, modifiers, ...restProps } = props;
+  return (
+    <SingleChoiceSegmentedButtonRowNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}>
+      {children}
+    </SingleChoiceSegmentedButtonRowNativeView>
+  );
+}