@expo/ui 55.0.0-preview.6 → 55.0.0

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

@@ -0,0 +1,90 @@
+import { requireNativeView } from 'expo';
+
+import { ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type HorizontalFloatingToolbarProps = {
+  /**
+   * The variant of the horizontal floating toolbar.
+   * @default 'standard'
+   */
+  variant?: 'standard' | 'vibrant';
+
+  /**
+   * The children of the component.
+   */
+  children: React.ReactNode;
+
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+};
+
+export type FloatingActionButtonProps = {
+  /**
+   * A callback that is called when the button is pressed.
+   */
+  onPress?: () => void;
+
+  /**
+   * The children of the component.
+   */
+  children: React.ReactNode;
+};
+
+type NativeHorizontalFloatingToolbarProps = HorizontalFloatingToolbarProps & {};
+
+type NativeSlotViewProps = {
+  slotName: string;
+  onSlotEvent?: () => void;
+  children: React.ReactNode;
+};
+
+const HorizontalFloatingToolbarNativeView: React.ComponentType<NativeHorizontalFloatingToolbarProps> =
+  requireNativeView('ExpoUI', 'HorizontalFloatingToolbarView');
+
+// Internal slot marker component - not exported
+const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+/**
+ * FloatingActionButton component for HorizontalFloatingToolbar.
+ * This component marks its children to be rendered in the FAB slot.
+ */
+export function HorizontalFloatingToolbarFloatingActionButton(props: FloatingActionButtonProps) {
+  return (
+    <SlotNativeView slotName="floatingActionButton" onSlotEvent={props.onPress}>
+      {props.children}
+    </SlotNativeView>
+  );
+}
+
+function transformHorizontalFloatingToolbarProps(
+  props: HorizontalFloatingToolbarProps
+): NativeHorizontalFloatingToolbarProps {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}
+
+/**
+ * Renders a `HorizontalFloatingToolbar` component.
+ * A horizontal toolbar that floats above content, typically used for action buttons.
+ */
+function HorizontalFloatingToolbar(props: HorizontalFloatingToolbarProps) {
+  return (
+    <HorizontalFloatingToolbarNativeView {...transformHorizontalFloatingToolbarProps(props)}>
+      {props.children}
+    </HorizontalFloatingToolbarNativeView>
+  );
+}
+
+HorizontalFloatingToolbar.FloatingActionButton = HorizontalFloatingToolbarFloatingActionButton;
+
+export { HorizontalFloatingToolbar };

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

@@ -0,0 +1,144 @@
+import { requireNativeView } from 'expo';
+import {
+  type ColorValue,
+  type ImageSourcePropType,
+  type ImageResolvedAssetSource,
+  Image,
+} from 'react-native';
+
+import { ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type IconProps = {
+  /**
+   * The source of the icon. Can be a URI string or the result of `require()`.
+   * On Android, supports XML vector drawables loaded via Metro bundler.
+   *
+   * @example
+   * ```tsx
+   * <Icon source={require('./assets/home.xml')} />
+   * <Icon source={{ uri: 'file:///path/to/icon.xml' }} />
+   * ```
+   */
+  source: ImageSourcePropType;
+
+  /**
+   * The tint color to apply to the icon.
+   * Accepts hex strings, named colors, or RGB arrays.
+   *
+   * @example
+   * ```tsx
+   * <Icon source={require('./assets/star.xml')} tintColor="#007AFF" />
+   * <Icon source={require('./assets/star.xml')} tintColor="blue" />
+   * ```
+   */
+  tintColor?: ColorValue;
+
+  /**
+   * The size of the icon in density-independent pixels (dp).
+   * If not specified, the icon will use its intrinsic size.
+   *
+   * @example
+   * ```tsx
+   * <Icon source={require('./assets/settings.xml')} size={24} />
+   * ```
+   */
+  size?: number;
+
+  /**
+   * Accessibility label for the icon.
+   * Used by screen readers to describe the icon to users.
+   *
+   * @example
+   * ```tsx
+   * <Icon
+   *   source={require('./assets/settings.xml')}
+   *   contentDescription="Settings icon"
+   * />
+   * ```
+   */
+  contentDescription?: string;
+
+  /**
+   * Modifiers for the component.
+   * Allows you to apply layout and styling modifiers to the icon.
+   *
+   * @example
+   * ```tsx
+   * <Icon
+   *   source={require('./assets/icon.xml')}
+   *   modifiers={[
+   *     padding(8),
+   *     background('lightgray')
+   *   ]}
+   * />
+   * ```
+   */
+  modifiers?: ExpoModifier[];
+};
+
+/**
+ * @hidden
+ */
+export type NativeIconProps = Omit<IconProps, 'source'> & {
+  source: ImageResolvedAssetSource;
+};
+
+const IconNativeView: React.ComponentType<NativeIconProps> = requireNativeView(
+  'ExpoUI',
+  'IconView'
+);
+
+function transformIconProps(props: IconProps): NativeIconProps {
+  const { source, modifiers, ...restProps } = props;
+
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    source: Image.resolveAssetSource(source),
+  };
+}
+
+/**
+ * Displays an icon from an XML vector drawable or other image source.
+ *
+ * The Icon component renders vector graphics and images with support for
+ * tinting, sizing, and accessibility features. On Android, it natively
+ * supports XML vector drawables loaded via Metro bundler using `require()`.
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * import { Icon } from 'expo-ui';
+ *
+ * <Icon source={require('./assets/home.xml')} />
+ * ```
+ *
+ * @example
+ * With styling:
+ * ```tsx
+ * <Icon
+ *   source={require('./assets/settings.xml')}
+ *   size={24}
+ *   tintColor="#007AFF"
+ *   contentDescription="Settings icon"
+ * />
+ * ```
+ *
+ * @example
+ * With modifiers:
+ * ```tsx
+ * <Icon
+ *   source={require('./assets/star.xml')}
+ *   size={32}
+ *   modifiers={[
+ *     padding(8),
+ *     background('lightgray')
+ *   ]}
+ * />
+ * ```
+ */
+export function Icon(props: IconProps) {
+  return <IconNativeView {...transformIconProps(props)} />;
+}

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

@@ -4,6 +4,7 @@ import { type ColorValue } from 'react-native';
 import { ExpoModifier, ViewEvent } from '../../types';
 import { ButtonElementColors } from '../Button';
 import { parseJSXShape, ShapeJSXElement, ShapeRecordProps } from '../Shape';
+import { createViewModifierEventListener } from '../modifiers/utils';
 
 /**
  * The built-in button styles available on Android.
@@ -59,13 +60,12 @@ const IconButtonNativeView: React.ComponentType<NativeIconButtonProps> = require
   'IconButton'
 );
 
-/**
- * @hidden
- */
-export function transformIconButtonProps(props: IconButtonProps): NativeIconButtonProps {
-  const { children, onPress, shape, ...restProps } = props;
+function transformIconButtonProps(props: IconButtonProps): NativeIconButtonProps {
+  const { children, onPress, shape, modifiers, ...restProps } = props;
 
   return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
     children,
     shape: parseJSXShape(shape),

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

@@ -0,0 +1,82 @@
+import { requireNativeView } from 'expo';
+
+import { ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+/**
+ * Content padding values for LazyColumn.
+ */
+export type ContentPadding = {
+  /**
+   * Start padding in dp.
+   */
+  start?: number;
+  /**
+   * Top padding in dp.
+   */
+  top?: number;
+  /**
+   * End padding in dp.
+   */
+  end?: number;
+  /**
+   * Bottom padding in dp.
+   */
+  bottom?: number;
+};
+
+export type LazyColumnProps = {
+  /**
+   * The content to display inside the lazy column.
+   */
+  children?: React.ReactNode;
+  /**
+   * The vertical arrangement of items.
+   * Can be a preset string or an object with `spacedBy` to specify spacing in dp.
+   * @example
+   * verticalArrangement="center"
+   * verticalArrangement={{ spacedBy: 8 }}
+   */
+  verticalArrangement?:
+    | 'top'
+    | 'bottom'
+    | 'center'
+    | 'spaceBetween'
+    | 'spaceAround'
+    | 'spaceEvenly'
+    | { spacedBy: number };
+  /**
+   * The horizontal alignment of items.
+   */
+  horizontalAlignment?: 'start' | 'end' | 'center';
+  /**
+   * Content padding in dp.
+   */
+  contentPadding?: ContentPadding;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+};
+
+type NativeLazyColumnProps = LazyColumnProps;
+const LazyColumnNativeView: React.ComponentType<NativeLazyColumnProps> = requireNativeView(
+  'ExpoUI',
+  'LazyColumnView'
+);
+
+function transformProps(props: LazyColumnProps): NativeLazyColumnProps {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}
+
+/**
+ * A lazy column component that efficiently displays a vertically scrolling list.
+ */
+export function LazyColumn(props: LazyColumnProps) {
+  return <LazyColumnNativeView {...transformProps(props)} />;
+}

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

@@ -0,0 +1,129 @@
+import { requireNativeView } from 'expo';
+import { type ColorValue } from 'react-native';
+
+import { ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+/**
+ * Colors for list item's core elements.
+ */
+export type ListItemColors = {
+  containerColor?: ColorValue;
+  headlineColor?: ColorValue;
+  leadingIconColor?: ColorValue;
+  trailingIconColor?: ColorValue;
+  supportingColor?: ColorValue;
+  overlineColor?: ColorValue;
+};
+
+export type ListItemProps = {
+  /**
+   * The main text content of the list item.
+   */
+  headline: string;
+  /**
+   * Optional supporting text displayed below the headline.
+   */
+  supportingText?: string;
+  /**
+   * Optional overline text displayed above the headline.
+   */
+  overlineText?: string;
+  /**
+   * The background color of the list item.
+   */
+  color?: ColorValue;
+  /**
+   * Colors for list item's core elements.
+   */
+  colors?: ListItemColors;
+  /**
+   * Callback that is called when the list item is pressed.
+   */
+  onPress?: () => void;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+  /**
+   * Children containing Leading and Trailing slots.
+   */
+  children?: React.ReactNode;
+};
+
+type LeadingProps = {
+  children: React.ReactNode;
+};
+
+type TrailingProps = {
+  children: React.ReactNode;
+};
+
+type SupportingContentProps = {
+  children: React.ReactNode;
+};
+
+type NativeListItemProps = Omit<ListItemProps, 'onPress'> & {
+  onPress?: () => void;
+};
+
+type NativeSlotViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+const ListItemNativeView: React.ComponentType<NativeListItemProps> = requireNativeView(
+  'ExpoUI',
+  'ListItemView'
+);
+
+const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+/**
+ * Leading content slot for ListItem.
+ */
+export function ListItemLeading(props: LeadingProps) {
+  return <SlotNativeView slotName="leading">{props.children}</SlotNativeView>;
+}
+
+/**
+ * Trailing content slot for ListItem.
+ */
+export function ListItemTrailing(props: TrailingProps) {
+  return <SlotNativeView slotName="trailing">{props.children}</SlotNativeView>;
+}
+
+/**
+ * Custom supporting content slot for ListItem.
+ * When provided, this takes precedence over the `supportingText` prop.
+ * @platform android
+ */
+export function ListItemSupportingContent(props: SupportingContentProps) {
+  return <SlotNativeView slotName="supportingContent">{props.children}</SlotNativeView>;
+}
+
+/**
+ * A list item component following Material 3 design guidelines.
+ */
+function ListItemComponent(props: ListItemProps) {
+  const { children, modifiers, onPress, ...restProps } = props;
+
+  return (
+    <ListItemNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      onPress={onPress}>
+      {children}
+    </ListItemNativeView>
+  );
+}
+
+ListItemComponent.Leading = ListItemLeading;
+ListItemComponent.Trailing = ListItemTrailing;
+ListItemComponent.SupportingContent = ListItemSupportingContent;
+
+export { ListItemComponent as ListItem };

package/src/jetpack-compose/MaterialSymbolsAssetsTransformer.fx.ts

@@ -0,0 +1,22 @@
+import { Image } from 'react-native';
+import type AssetSourceResolver from 'react-native/Libraries/Image/AssetSourceResolver';
+
+// @ts-expect-error: addCustomSourceTransformer type is not exported
+if (typeof Image.resolveAssetSource.addCustomSourceTransformer === 'function') {
+  // @ts-expect-error: addCustomSourceTransformer type is not exported
+  Image.resolveAssetSource.addCustomSourceTransformer((resolver: AssetSourceResolver) => {
+    if (
+      process.env.EXPO_OS === 'android' &&
+      resolver.asset.type === 'xml' &&
+      resolver.serverUrl != null &&
+      resolver.serverUrl !== ''
+    ) {
+      // react-native's resolveAssetSource doesn't allow xml assets to be resolved from the server.
+      // We support material symbols using compose PathParser because material symbols are mainly paths.
+      // We have to patch the resolver to allow xml assets to be resolved from the server.
+      // https://github.com/facebook/react-native/blob/758a3db449d770214883ba8d15da4856ca997bff/packages/react-native/Libraries/Image/AssetSourceResolver.js#L69-L85
+      return resolver.assetServerURL();
+    }
+    return resolver.defaultAsset();
+  });
+}

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

@@ -0,0 +1,61 @@
+import { requireNativeView } from 'expo';
+import React from 'react';
+
+import { type ExpoModifier, type ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type ModalBottomSheetProps = {
+  /**
+   * The children of the `ModalBottomSheet` component.
+   */
+  children: React.ReactNode;
+  /**
+   * Callback function that is called when the bottom sheet is dismissed.
+   */
+  onDismissRequest: () => void;
+  /**
+   * Immediately opens the bottom sheet in full screen.
+   * @default false
+   */
+  skipPartiallyExpanded?: boolean;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+};
+
+type NativeModalBottomSheetProps = Omit<ModalBottomSheetProps, 'onDismissRequest'> &
+  ViewEvent<'onDismissRequest', void>;
+
+const ModalBottomSheetNativeView: React.ComponentType<NativeModalBottomSheetProps> =
+  requireNativeView('ExpoUI', 'ModalBottomSheetView');
+
+function transformProps(props: ModalBottomSheetProps): NativeModalBottomSheetProps {
+  const { modifiers, onDismissRequest, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    skipPartiallyExpanded: props.skipPartiallyExpanded ?? false,
+    onDismissRequest: () => {
+      onDismissRequest?.();
+    },
+  };
+}
+
+/**
+ * A Material Design modal bottom sheet.
+ */
+export function ModalBottomSheet(props: ModalBottomSheetProps) {
+  return <ModalBottomSheetNativeView {...transformProps(props)} />;
+}
+
+/**
+ * @deprecated Use `ModalBottomSheet` instead.
+ */
+export const BottomSheet = ModalBottomSheet;
+
+/**
+ * @deprecated Use `ModalBottomSheetProps` instead.
+ */
+export type BottomSheetProps = ModalBottomSheetProps;

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

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
 import { ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
 
 /**
  * Colors for picker's core elements.
@@ -63,12 +64,12 @@ const PickerNativeView: React.ComponentType<PickerProps> = requireNativeView(
 
 type NativePickerProps = PickerProps;
 
-/**
- * @hidden
- */
-export function transformPickerProps(props: PickerProps): NativePickerProps {
+function transformPickerProps(props: PickerProps): NativePickerProps {
+  const { modifiers, ...restProps } = props;
   return {
-    ...props,
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
     variant: props.variant ?? 'segmented',
     elementColors: props.elementColors
       ? props.elementColors

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

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import { ColorValue } from 'react-native';
 
 import { ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
 
 export type ProgressElementColors = {
   /**
@@ -63,30 +64,39 @@ const NativeProgressView: React.ComponentType<NativeProgressProps> = requireNati
   'ProgressView'
 );
 
+function transformProps(props: CircularProgressProps | LinearProgressProps): NativeProgressProps {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}
+
 /**
  * Renders a `CircularProgress` component.
  */
 export function CircularProgress(props: CircularProgressProps) {
-  return <NativeProgressView {...props} variant="circular" />;
+  return <NativeProgressView {...transformProps(props)} variant="circular" />;
 }
 
 /**
  * Renders a `LinearProgress` component.
  */
 export function LinearProgress(props: LinearProgressProps) {
-  return <NativeProgressView {...props} variant="linear" />;
+  return <NativeProgressView {...transformProps(props)} variant="linear" />;
 }
 
 /**
  * Renders a `CircularWavyProgress` component with wavy animation.
  */
 export function CircularWavyProgress(props: CircularProgressProps) {
-  return <NativeProgressView {...props} variant="circularWavy" />;
+  return <NativeProgressView {...transformProps(props)} variant="circularWavy" />;
 }
 
 /**
  * Renders a `LinearWavyProgress` component with wavy animation.
  */
 export function LinearWavyProgress(props: LinearProgressProps) {
-  return <NativeProgressView {...props} variant="linearWavy" />;
+  return <NativeProgressView {...transformProps(props)} variant="linearWavy" />;
 }

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

@@ -0,0 +1,66 @@
+import { requireNativeView } from 'expo';
+
+import { type ViewEvent, type ExpoModifier } from '../../types';
+import { align } from '../modifiers';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type PullToRefreshBoxProps = {
+  /**
+   * Whether the content is refreshing.
+   * @default false
+   */
+  isRefreshing?: boolean;
+  /**
+   * Callback to call when the content is refreshed.
+   */
+  onRefresh?: () => void;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+
+  /**
+   * Modifiers for the loading indicator.
+   * @default [align('topCenter'), padding(0, 10, 0, 0)]
+   */
+  loadingIndicatorModifiers?: ExpoModifier[];
+
+  /**
+   * The content to refresh.
+   */
+  children: React.ReactNode;
+};
+
+type NativePullToRefreshBoxProps = Omit<PullToRefreshBoxProps, 'onRefresh'> &
+  ViewEvent<'onRefresh', void>;
+
+const NativePullToRefreshBoxView: React.ComponentType<NativePullToRefreshBoxProps> =
+  requireNativeView('ExpoUI', 'PullToRefreshBoxView');
+
+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),
+    ...restProps,
+    isRefreshing: isRefreshing ?? false,
+    onRefresh: () => {
+      onRefresh?.();
+    },
+    loadingIndicatorModifiers,
+  };
+}
+
+/**
+ * Renders a `PullToRefreshBox` component.
+ * A box that allows the user to pull down to refresh the content.
+ */
+export function PullToRefreshBox(props: PullToRefreshBoxProps) {
+  return <NativePullToRefreshBoxView {...transformProps(props)} />;
+}