@expo/ui 55.0.4 → 55.0.6

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

@@ -1,8 +1,11 @@
 import { requireNativeView } from 'expo';
 
-import { ExpoModifier } from '../../types';
+import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+/**
+ * Per-side padding values in dp for carousel content.
+ */
 export type PaddingValuesRecord = {
   start?: number;
   top?: number;
@@ -10,50 +13,135 @@ export type PaddingValuesRecord = {
   bottom?: number;
 };
 
-export type CarouselVariant = 'multiBrowse' | 'unconstrained';
+/**
+ * Fling behavior type for controlling carousel snapping.
+ */
 export type FlingBehaviorType = 'singleAdvance' | 'noSnap';
 
-export type CarouselProps = {
+/**
+ * Shared props across all carousel components.
+ */
+export type CarouselCommonConfig = {
   /**
-   * Modifiers for the component.
+   * Spacing between items in dp.
+   * @default 0
    */
-  modifiers?: ExpoModifier[];
-  /** Carousel variant */
-  variant?: CarouselVariant;
-  /** Spacing between items (dp) */
   itemSpacing?: number;
-  /** Padding for carousel content (dp or object) */
+  /**
+   * Padding for carousel content (dp or object).
+   */
   contentPadding?: number | PaddingValuesRecord;
-  /** Minimum small item width (dp) */
-  minSmallItemWidth?: number;
-  /** Maximum small item width (dp) */
-  maxSmallItemWidth?: number;
-  /** Fling behavior type */
+  /**
+   * Controls snapping behavior when the user flings the carousel.
+   * `'singleAdvance'` snaps to the next item, `'noSnap'` allows free scrolling.
+   */
   flingBehavior?: FlingBehaviorType;
-  /** Preferred item width (dp) for multiBrowse variant */
-  preferredItemWidth?: number;
-  /** Item width (dp) for unconstrained variant */
-  itemWidth?: number;
-  /** Children to render */
+  /**
+   * Whether the user can scroll the carousel.
+   * @default true
+   */
+  userScrollEnabled?: boolean;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+  /**
+   * Children to render as carousel items.
+   */
   children: React.ReactNode;
 };
 
-type NativeCarouselProps = CarouselProps;
-
-const CarouselNativeView: React.ComponentType<NativeCarouselProps> = requireNativeView(
-  'ExpoUI',
-  'CarouselView'
-);
-
-export function transformCarouselProps(props: CarouselProps): NativeCarouselProps {
+function transformProps<T extends { modifiers?: ModifierConfig[] }>(props: T): T {
   const { modifiers, ...restProps } = props;
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-  };
+  } as T;
 }
 
-export function Carousel(props: CarouselProps) {
-  return <CarouselNativeView {...transformCarouselProps(props)} />;
+function createCarouselComponent<P extends { modifiers?: ModifierConfig[] }>(
+  viewName: string
+): React.ComponentType<P> {
+  const NativeView: React.ComponentType<P> = requireNativeView('ExpoUI', viewName);
+  return function CarouselComponent(props: P) {
+    return <NativeView {...transformProps(props)} />;
+  };
 }
+
+// region HorizontalCenteredHeroCarousel
+
+export type HorizontalCenteredHeroCarouselProps = CarouselCommonConfig & {
+  /**
+   * Maximum width of the hero item in dp.
+   * When unspecified, the hero item will be as wide as possible.
+   */
+  maxItemWidth?: number;
+  /**
+   * Minimum width of small peek items in dp.
+   * @default CarouselDefaults.MinSmallItemSize
+   */
+  minSmallItemWidth?: number;
+  /**
+   * Maximum width of small peek items in dp.
+   * @default CarouselDefaults.MaxSmallItemSize
+   */
+  maxSmallItemWidth?: number;
+};
+
+/**
+ * A hero carousel that centers one large item between two small peek items,
+ * matching Compose's `HorizontalCenteredHeroCarousel`.
+ */
+export const HorizontalCenteredHeroCarousel =
+  createCarouselComponent<HorizontalCenteredHeroCarouselProps>(
+    'HorizontalCenteredHeroCarouselView'
+  );
+
+// endregion
+
+// region HorizontalMultiBrowseCarousel
+
+export type HorizontalMultiBrowseCarouselProps = CarouselCommonConfig & {
+  /**
+   * The preferred width of the large item in dp.
+   */
+  preferredItemWidth: number;
+  /**
+   * Minimum width of small peek items in dp.
+   * @default CarouselDefaults.MinSmallItemSize
+   */
+  minSmallItemWidth?: number;
+  /**
+   * Maximum width of small peek items in dp.
+   * @default CarouselDefaults.MaxSmallItemSize
+   */
+  maxSmallItemWidth?: number;
+};
+
+/**
+ * A carousel that shows a large item alongside smaller peek items,
+ * matching Compose's `HorizontalMultiBrowseCarousel`.
+ */
+export const HorizontalMultiBrowseCarousel =
+  createCarouselComponent<HorizontalMultiBrowseCarouselProps>('HorizontalMultiBrowseCarouselView');
+
+// endregion
+
+// region HorizontalUncontainedCarousel
+
+export type HorizontalUncontainedCarouselProps = CarouselCommonConfig & {
+  /**
+   * The width of each item in dp.
+   */
+  itemWidth: number;
+};
+
+/**
+ * A carousel where each item has a fixed width with free-form scrolling,
+ * matching Compose's `HorizontalUncontainedCarousel`.
+ */
+export const HorizontalUncontainedCarousel =
+  createCarouselComponent<HorizontalUncontainedCarouselProps>('HorizontalUncontainedCarouselView');
+
+// endregion

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

@@ -1,22 +1,25 @@
 import { requireNativeView } from 'expo';
+import { type ColorValue } from 'react-native';
 
-import { ExpoModifier } from '../../types';
+import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type DividerProps = {
+export type DividerCommonConfig = {
+  /**
+   * Thickness of the divider line. Accepts dp values; use `StyleSheet.hairlineWidth` for a single-pixel line.
+   */
+  thickness?: number;
+  /**
+   * Color of the divider line.
+   */
+  color?: ColorValue;
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
 };
 
-type NativeDividerProps = DividerProps;
-const DividerNativeView: React.ComponentType<NativeDividerProps> = requireNativeView(
-  'ExpoUI',
-  'DividerView'
-);
-
-function transformProps(props: DividerProps): NativeDividerProps {
+function transformProps(props: DividerCommonConfig): DividerCommonConfig {
   const { modifiers, ...restProps } = props;
   return {
     modifiers,
@@ -25,9 +28,26 @@ function transformProps(props: DividerProps): NativeDividerProps {
   };
 }
 
+function createDividerComponent(viewName: string): React.ComponentType<DividerCommonConfig> {
+  const NativeView: React.ComponentType<DividerCommonConfig> = requireNativeView(
+    'ExpoUI',
+    viewName
+  );
+  function Component(props: DividerCommonConfig) {
+    return <NativeView {...transformProps(props)} />;
+  }
+  Component.displayName = viewName;
+  return Component;
+}
+
 /**
- * A visual element that can be used to separate other content.
+ * A horizontal divider line that groups content in lists and layouts,
+ * matching Compose's `HorizontalDivider`.
  */
-export function Divider(props: DividerProps) {
-  return <DividerNativeView {...transformProps(props)} />;
-}
+export const HorizontalDivider = createDividerComponent('HorizontalDividerView');
+
+/**
+ * A vertical divider line that groups content in layouts,
+ * matching Compose's `VerticalDivider`.
+ */
+export const VerticalDivider = createDividerComponent('VerticalDividerView');

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

@@ -12,7 +12,7 @@ export type StrokeCap = 'round' | 'butt' | 'square';
 /**
  * Common props shared by all progress indicator variants.
  */
-type BaseProgressProps = {
+export type ProgressCommonConfig = {
   /**
    * The current progress value between `0` and `1`. Omit for indeterminate.
    */
@@ -31,7 +31,7 @@ type BaseProgressProps = {
   modifiers?: ModifierConfig[];
 };
 
-function transformProps<T extends BaseProgressProps>(props: T): T {
+function transformProps<T extends ProgressCommonConfig>(props: T): T {
   const { modifiers, ...restProps } = props;
   return {
     modifiers,
@@ -40,13 +40,15 @@ function transformProps<T extends BaseProgressProps>(props: T): T {
   } as T;
 }
 
-function createProgressComponent<P extends BaseProgressProps>(
+function createProgressComponent<P extends ProgressCommonConfig>(
   viewName: string
 ): React.ComponentType<P> {
   const NativeView: React.ComponentType<P> = requireNativeView('ExpoUI', viewName);
-  return function ProgressComponent(props: P) {
+  function Component(props: P) {
     return <NativeView {...transformProps(props)} />;
-  };
+  }
+  Component.displayName = viewName;
+  return Component;
 }
 
 // region LinearProgressIndicator
@@ -70,7 +72,7 @@ export type DrawStopIndicatorConfig = {
   stopSize?: number;
 };
 
-export type LinearProgressIndicatorProps = BaseProgressProps & {
+export type LinearProgressIndicatorProps = ProgressCommonConfig & {
   /**
    * Stroke cap style for the indicator ends.
    * @default 'round'
@@ -99,7 +101,7 @@ export const LinearProgressIndicator = createProgressComponent<LinearProgressInd
 
 // region CircularProgressIndicator
 
-export type CircularProgressIndicatorProps = BaseProgressProps & {
+export type CircularProgressIndicatorProps = ProgressCommonConfig & {
   /**
    * Width of the circular stroke in dp.
    */
@@ -128,7 +130,7 @@ export const CircularProgressIndicator = createProgressComponent<CircularProgres
 
 // region LinearWavyProgressIndicator
 
-export type LinearWavyProgressIndicatorProps = BaseProgressProps & {
+export type LinearWavyProgressIndicatorProps = ProgressCommonConfig & {
   /**
    * Size of the stop indicator in dp at the end of the determinate progress track.
    */
@@ -147,7 +149,7 @@ export const LinearWavyProgressIndicator =
 
 // region CircularWavyProgressIndicator
 
-export type CircularWavyProgressIndicatorProps = BaseProgressProps;
+export type CircularWavyProgressIndicatorProps = ProgressCommonConfig;
 
 /**
  * A circular progress indicator with wavy animation style.

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

@@ -1,9 +1,30 @@
 import { requireNativeView } from 'expo';
+import { type ColorValue } from 'react-native';
 
-import { type ViewEvent, type ExpoModifier } from '../../types';
-import { align } from '../modifiers';
+import { type ViewEvent, type ModifierConfig } from '../../types';
+import { type ContentAlignment } from '../layout-types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+/**
+ * Configuration for the loading indicator shown during pull-to-refresh.
+ */
+export type PullToRefreshIndicatorProps = {
+  /**
+   * Color of the loading indicator spinner.
+   * @default MaterialTheme.colorScheme.primary
+   */
+  color?: ColorValue;
+  /**
+   * Background color of the loading indicator container.
+   * @default MaterialTheme.colorScheme.surfaceContainerHigh
+   */
+  containerColor?: ColorValue;
+  /**
+   * Modifiers for the loading indicator.
+   */
+  modifiers?: ModifierConfig[];
+};
+
 export type PullToRefreshBoxProps = {
   /**
    * Whether the content is refreshing.
@@ -11,20 +32,22 @@ export type PullToRefreshBoxProps = {
    */
   isRefreshing?: boolean;
   /**
-   * Callback to call when the content is refreshed.
+   * Callback that is called when the user pulls to refresh.
    */
   onRefresh?: () => void;
   /**
-   * Modifiers for the component.
+   * Alignment of children within the box.
+   * @default 'topStart'
    */
-  modifiers?: ExpoModifier[];
-
+  contentAlignment?: ContentAlignment;
   /**
-   * Modifiers for the loading indicator.
-   * @default [align('topCenter'), padding(0, 10, 0, 0)]
+   * Configuration for the loading indicator shown during pull-to-refresh.
    */
-  loadingIndicatorModifiers?: ExpoModifier[];
-
+  indicator?: PullToRefreshIndicatorProps;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
   /**
    * The content to refresh.
    */
@@ -40,11 +63,6 @@ const NativePullToRefreshBoxView: React.ComponentType<NativePullToRefreshBoxProp
 function transformProps(props: PullToRefreshBoxProps): NativePullToRefreshBoxProps {
   const { isRefreshing, modifiers, onRefresh, ...restProps } = props;
 
-  const loadingIndicatorModifiers = props.loadingIndicatorModifiers ?? [
-    align('topCenter'),
-    // padding(0, 10, 0, 0),
-  ];
-
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
@@ -53,13 +71,12 @@ function transformProps(props: PullToRefreshBoxProps): NativePullToRefreshBoxPro
     onRefresh: () => {
       onRefresh?.();
     },
-    loadingIndicatorModifiers,
   };
 }
 
 /**
- * Renders a `PullToRefreshBox` component.
- * A box that allows the user to pull down to refresh the content.
+ * A pull-to-refresh container that wraps scrollable content and shows a refresh indicator when pulled,
+ * matching Compose's `PullToRefreshBox`.
  */
 export function PullToRefreshBox(props: PullToRefreshBoxProps) {
   return <NativePullToRefreshBoxView {...transformProps(props)} />;

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

@@ -2,9 +2,26 @@ import { requireNativeView } from 'expo';
 import React from 'react';
 import { type ColorValue } from 'react-native';
 
-import { type ExpoModifier } from '../../types';
+import { type ViewEvent, type ModifierConfig } from '../../types';
+import { parseJSXShape, ShapeJSXElement, type ShapeRecordProps } from '../Shape';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+/**
+ * Border stroke configuration.
+ */
+export type SurfaceBorder = {
+  /**
+   * Border width in dp.
+   * @default 1
+   */
+  width?: number;
+  /**
+   * Border color.
+   * @default MaterialTheme.colorScheme.outline
+   */
+  color?: ColorValue;
+};
+
 export type SurfaceProps = {
   /**
    * The content to display inside the surface.
@@ -33,13 +50,58 @@ export type SurfaceProps = {
    * @default 0
    */
   shadowElevation?: number;
+  /**
+   * Shape configuration for clipping the surface.
+   */
+  shape?: ShapeJSXElement;
+  /**
+   * Border stroke drawn around the surface.
+   */
+  border?: SurfaceBorder;
+
+  /**
+   * Whether the surface is enabled and responds to user interaction.
+   *
+   * @default true
+   */
+  enabled?: boolean;
+
+  /**
+   * Whether the surface is in a selected state. When provided together with `onClick`,
+   * the surface becomes a selectable surface that visually reflects its selection state.
+   */
+  selected?: boolean;
+
+  /**
+   * Whether the surface is in a checked (toggled on) state. When provided together with
+   * `onCheckedChange`, the surface becomes a toggleable surface.
+   */
+  checked?: boolean;
+
+  /**
+   * Called when the surface is clicked. Providing this callback makes the surface clickable.
+   * When combined with `selected`, the surface becomes a selectable variant.
+   */
+  onClick?: () => void;
+
+  /**
+   * Called when the checked state of a toggleable surface changes.
+   * Providing this callback together with `checked` enables the toggleable variant.
+   */
+  onCheckedChange?: (checked: boolean) => void;
+
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
 };
 
-type NativeSurfaceProps = SurfaceProps;
+type NativeSurfaceProps = Omit<SurfaceProps, 'onClick' | 'onCheckedChange' | 'shape'> &
+  ViewEvent<'onSurfaceClick', void> &
+  ViewEvent<'onCheckedChange', { value: boolean }> & {
+    clickable?: boolean;
+    shape?: ShapeRecordProps;
+  };
 
 const SurfaceNativeView: React.ComponentType<NativeSurfaceProps> = requireNativeView(
   'ExpoUI',
@@ -47,11 +109,20 @@ const SurfaceNativeView: React.ComponentType<NativeSurfaceProps> = requireNative
 );
 
 function transformProps(props: SurfaceProps): NativeSurfaceProps {
-  const { modifiers, ...restProps } = props;
+  const { modifiers, onClick, onCheckedChange, shape, ...restProps } = props;
+
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
+    clickable: !!onClick,
+    shape: parseJSXShape(shape),
+    onSurfaceClick: onClick ? () => onClick() : undefined,
+    onCheckedChange: onCheckedChange
+      ? (e: { nativeEvent: { value: boolean } }) => {
+          onCheckedChange(e.nativeEvent.value);
+        }
+      : undefined,
   };
 }