@expo/ui 55.0.2 → 55.0.4

package/src/datetime-picker/DateTimePicker.tsx

@@ -0,0 +1,94 @@
+import { buildEvent, buildChangeEvent, type DateTimePickerProps } from './types';
+import { DatePicker, type DatePickerProps } from '../swift-ui/DatePicker';
+import { Host } from '../swift-ui/Host';
+import { disabled as disabledModifier, ModifierConfig, tint } from '../swift-ui/modifiers';
+import { datePickerStyle } from '../swift-ui/modifiers/datePickerStyle';
+import { environment } from '../swift-ui/modifiers/environment';
+
+type DatePickerStyleType = 'automatic' | 'compact' | 'graphical' | 'wheel';
+
+function modeToDisplayedComponents(
+  mode: DateTimePickerProps['mode']
+): DatePickerProps['displayedComponents'] {
+  switch (mode) {
+    case 'time':
+      return ['hourAndMinute'];
+    case 'datetime':
+      return ['date', 'hourAndMinute'];
+    case 'date':
+    default:
+      return ['date'];
+  }
+}
+
+function displayToDatePickerStyle(display: DateTimePickerProps['display']): DatePickerStyleType {
+  switch (display) {
+    case 'spinner':
+      return 'wheel';
+    case 'compact':
+      return 'compact';
+    case 'inline':
+      return 'graphical';
+    default:
+      return 'automatic';
+  }
+}
+
+export function DateTimePicker(props: DateTimePickerProps) {
+  const {
+    value,
+    onChange,
+    onValueChange,
+    mode = 'date',
+    minimumDate,
+    maximumDate,
+    display = 'default',
+    testID,
+    style,
+    accentColor,
+    disabled,
+    locale,
+    themeVariant,
+    timeZoneName,
+  } = props;
+
+  const pickerStyle = displayToDatePickerStyle(display);
+
+  const modifiers: ModifierConfig[] = [datePickerStyle(pickerStyle)];
+  if (accentColor) {
+    modifiers.push(tint(accentColor));
+  }
+  if (disabled != null) {
+    modifiers.push(disabledModifier(disabled));
+  }
+  if (locale) {
+    modifiers.push(environment('locale', locale));
+  }
+  if (themeVariant) {
+    modifiers.push(environment('colorScheme', themeVariant));
+  }
+  if (timeZoneName) {
+    modifiers.push(environment('timeZone', timeZoneName));
+  }
+
+  const iosProps: DatePickerProps = {
+    selection: value,
+    displayedComponents: modeToDisplayedComponents(mode),
+    range: minimumDate || maximumDate ? { start: minimumDate, end: maximumDate } : undefined,
+    onDateChange: (date: Date) => {
+      if (onValueChange) {
+        onValueChange(buildChangeEvent(date), date);
+      } else {
+        onChange?.(buildEvent(date), date);
+      }
+    },
+    modifiers,
+    testID,
+  };
+
+  return (
+    <Host matchContents={{ vertical: true }} style={style}>
+      <DatePicker {...iosProps} />
+    </Host>
+  );
+}

package/src/datetime-picker/DateTimePicker.web.tsx

@@ -0,0 +1,5 @@
+import type { DateTimePickerProps } from './types';
+
+export function DateTimePicker(_props: DateTimePickerProps) {
+  return null;
+}

package/src/datetime-picker/index.tsx

@@ -0,0 +1,11 @@
+import { DateTimePicker } from './DateTimePicker';
+
+export {
+  type DateTimePickerEvent,
+  type DateTimePickerChangeEvent,
+  type DateTimePickerProps,
+} from './types';
+
+export default DateTimePicker;
+// named export needed for docs generator
+export { DateTimePicker };

package/src/datetime-picker/types.tsx

@@ -0,0 +1,147 @@
+import type { ViewProps } from 'react-native';
+
+// -- Public types matching @react-native-community/datetimepicker ----------
+
+/**
+ * @deprecated used with the deprecated `onChange` prop
+ * */
+export type DateTimePickerEvent = {
+  /**
+   * `'set'` when the user selects a date. `'dismissed'` when the user cancels
+   * an Android dialog picker. iOS never fires `'dismissed'`.
+   */
+  type: 'set' | 'dismissed';
+  nativeEvent: {
+    timestamp: number;
+    utcOffset: number;
+  };
+};
+
+export type DateTimePickerChangeEvent = {
+  nativeEvent: {
+    timestamp: number;
+    utcOffset: number;
+  };
+};
+
+export type DateTimePickerProps = {
+  /**
+   * The current date value (controlled).
+   */
+  value: Date;
+  /**
+   * @deprecated Use `onValueChange` and `onDismiss` instead.
+   *
+   * Called when the user changes the date/time or dismisses the picker.
+   * The event type is encoded in `event.type`.
+   * If the new specific listeners are provided, they take precedence.
+   */
+  onChange?: (event: DateTimePickerEvent, date?: Date) => void;
+  /**
+   * Called when the user selects a date or time.
+   */
+  onValueChange?: (event: DateTimePickerChangeEvent, date: Date) => void;
+  /**
+   * Called when the picker is dismissed without selecting a value.
+   * @platform android
+   */
+  onDismiss?: () => void;
+  /**
+   * The picker mode.
+   * @default 'date'
+   */
+  mode?: 'date' | 'time' | 'datetime';
+  /**
+   * The earliest selectable date.
+   */
+  minimumDate?: Date;
+  /**
+   * The latest selectable date.
+   */
+  maximumDate?: Date;
+  /**
+   * A test ID forwarded to the native view.
+   * Note: on Android dialog presentation, the test ID is not forwarded.
+   */
+  testID?: string;
+  /**
+   * Display style. Android supports `'default' | 'spinner'` — `'spinner'` shows a text input
+   * rather than a scroll wheel (Material 3 does not have a wheel-style picker).
+   * iOS supports `'default' | 'spinner' | 'compact' | 'inline'`.
+   * @default 'default'
+   */
+  display?: 'default' | 'spinner' | 'compact' | 'inline' | 'calendar' | 'clock';
+  /**
+   * Use 24-hour format.
+   * @platform android
+   */
+  is24Hour?: boolean;
+  /**
+   * Accent/tint color applied to the picker.
+   * Maps to `color` on Android and `tint` on iOS.
+   */
+  accentColor?: string;
+  /**
+   * Whether the picker is disabled.
+   * @platform ios
+   */
+  disabled?: boolean;
+  /**
+   * Locale identifier (e.g. 'en_US', 'fr_FR') for the picker display.
+   * @platform ios
+   */
+  locale?: string;
+  /**
+   * Force a specific color scheme on the picker.
+   * @platform ios
+   */
+  themeVariant?: 'dark' | 'light';
+  /**
+   * IANA time zone name (e.g. 'America/New_York') for the picker display.
+   * @platform ios
+   */
+  timeZoneName?: string;
+  /**
+   * How the picker is presented.
+   * - `'inline'` renders the picker directly in the view hierarchy.
+   * - `'dialog'` shows a modal dialog that opens on mount. Fires `onValueChange` on confirmation, `onDismiss` on cancel. The caller should
+   *   unmount the component in response.
+   *
+   * On iOS this prop is accepted but ignored (always inline).
+   * On Android the default is `'dialog'`.
+   * @default 'dialog'
+   * @platform android
+   */
+  presentation?: 'inline' | 'dialog';
+  /**
+   * Set the positive (confirm) button label.
+   * @platform android
+   */
+  positiveButton?: { label?: string };
+  /**
+   * Set the negative (cancel) button label.
+   * @platform android
+   */
+  negativeButton?: { label?: string };
+} & Pick<ViewProps, 'style'>;
+
+// -- Helpers ---------------------------------------------------------------
+
+export function buildEvent(date: Date): DateTimePickerEvent {
+  return {
+    type: 'set',
+    nativeEvent: {
+      timestamp: date.getTime(),
+      utcOffset: -date.getTimezoneOffset(),
+    },
+  };
+}
+
+export function buildChangeEvent(date: Date): DateTimePickerChangeEvent {
+  return {
+    nativeEvent: {
+      timestamp: date.getTime(),
+      utcOffset: -date.getTimezoneOffset(),
+    },
+  };
+}

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

@@ -0,0 +1,206 @@
+/**
+ * AnimatedVisibility — a React wrapper around Jetpack Compose's AnimatedVisibility.
+ *
+ * Architecture overview:
+ *
+ * 1. **Public API** — `EnterTransition` / `ExitTransition` factory objects produce
+ *    chainable transition descriptors via `.plus()`, mirroring Compose's `+` operator.
+ *
+ * 2. **Internal records** — Each factory call creates an `EnterTransitionRecord` or
+ *    `ExitTransitionRecord`, a plain JSON object with a `type` discriminator and optional
+ *    parameters. These records are the format passed to the native Android view.
+ *
+ * 3. **Symbol-based encapsulation** — The record arrays are stored behind unique Symbols
+ *    (`ENTER_TRANSITION_SYMBOL` / `EXIT_TRANSITION_SYMBOL`). This prevents consumers from
+ *    accessing or constructing raw records directly, ensuring transitions are only built
+ *    through the factory API.
+ *
+ * 4. **Chaining** — `.plus(other)` concatenates the current record array with `other`'s
+ *    records into a new transition object. The result is a flat list, not a tree.
+ *    e.g. `fadeIn().plus(expandIn())` → `[{ type: 'fadeIn' }, { type: 'expandIn' }]`
+ *
+ * 5. **Component** — `<AnimatedVisibility>` extracts the record arrays from the chainable
+ *    types via their Symbols and passes them as plain JSON arrays to the native view.
+ */
+import { requireNativeView } from 'expo';
+
+import { PrimitiveBaseProps, transformProps } from '../layout-types';
+import { ENTER_TRANSITION_SYMBOL, EXIT_TRANSITION_SYMBOL } from './symbols';
+
+type EnterTransitionRecord = {
+  type:
+    | 'fadeIn'
+    | 'slideInHorizontally'
+    | 'slideInVertically'
+    | 'expandIn'
+    | 'expandHorizontally'
+    | 'expandVertically'
+    | 'scaleIn';
+  initialAlpha?: number;
+  /** Fraction of width: -1.0 = full width left, 1.0 = full width right */
+  initialOffsetX?: number;
+  /** Fraction of height: -1.0 = full height top, 1.0 = full height bottom */
+  initialOffsetY?: number;
+  initialScale?: number;
+};
+
+type ExitTransitionRecord = {
+  type:
+    | 'fadeOut'
+    | 'slideOutHorizontally'
+    | 'slideOutVertically'
+    | 'shrinkOut'
+    | 'shrinkHorizontally'
+    | 'shrinkVertically'
+    | 'scaleOut';
+  targetAlpha?: number;
+  /** Fraction of width: -1.0 = full width left, 1.0 = full width right */
+  targetOffsetX?: number;
+  /** Fraction of height: -1.0 = full height top, 1.0 = full height bottom */
+  targetOffsetY?: number;
+  targetScale?: number;
+};
+
+/**
+ * Represents an enter transition that can be combined with other enter transitions using `.plus()`.
+ */
+export type EnterTransitionType = {
+  /** Combines this transition with another enter transition (mirrors Compose's `+` operator). */
+  plus: (other: EnterTransitionType) => EnterTransitionType;
+  [ENTER_TRANSITION_SYMBOL]: () => EnterTransitionRecord[];
+};
+
+/**
+ * Represents an exit transition that can be combined with other exit transitions using `.plus()`.
+ */
+export type ExitTransitionType = {
+  /** Combines this transition with another exit transition (mirrors Compose's `+` operator). */
+  plus: (other: ExitTransitionType) => ExitTransitionType;
+  [EXIT_TRANSITION_SYMBOL]: () => ExitTransitionRecord[];
+};
+
+function createEnterTransition(records: EnterTransitionRecord[]): EnterTransitionType {
+  return {
+    plus: (other) => createEnterTransition([...records, ...other[ENTER_TRANSITION_SYMBOL]()]),
+    [ENTER_TRANSITION_SYMBOL]: () => records,
+  };
+}
+
+function createExitTransition(records: ExitTransitionRecord[]): ExitTransitionType {
+  return {
+    plus: (other) => createExitTransition([...records, ...other[EXIT_TRANSITION_SYMBOL]()]),
+    [EXIT_TRANSITION_SYMBOL]: () => records,
+  };
+}
+
+/**
+ * Factory for enter transitions used with `AnimatedVisibility`.
+ * Transitions can be combined using `.plus()`.
+ *
+ * @example
+ * ```tsx
+ * // Single transition
+ * EnterTransition.fadeIn()
+ *
+ * // Combined transitions
+ * EnterTransition.fadeIn({ initialAlpha: 0.3 })
+ *   .plus(EnterTransition.slideInHorizontally({ initialOffsetX: 1.0 }))
+ * ```
+ */
+export const EnterTransition = {
+  /** Fades the content in. */
+  fadeIn: (params?: { initialAlpha?: number }) =>
+    createEnterTransition([{ type: 'fadeIn', ...params }]),
+  /** Slides the content in horizontally. */
+  slideInHorizontally: (params?: { initialOffsetX?: number }) =>
+    createEnterTransition([{ type: 'slideInHorizontally', ...params }]),
+  /** Slides the content in vertically. */
+  slideInVertically: (params?: { initialOffsetY?: number }) =>
+    createEnterTransition([{ type: 'slideInVertically', ...params }]),
+  /** Expands the content from the center. */
+  expandIn: () => createEnterTransition([{ type: 'expandIn' }]),
+  /** Expands the content horizontally from the center. */
+  expandHorizontally: () => createEnterTransition([{ type: 'expandHorizontally' }]),
+  /** Expands the content vertically from the center. */
+  expandVertically: () => createEnterTransition([{ type: 'expandVertically' }]),
+  /** Scales the content in from a smaller size. */
+  scaleIn: (params?: { initialScale?: number }) =>
+    createEnterTransition([{ type: 'scaleIn', ...params }]),
+};
+
+/**
+ * Factory for exit transitions used with `AnimatedVisibility`.
+ * Transitions can be combined using `.plus()`.
+ *
+ * @example
+ * ```tsx
+ * // Single transition
+ * ExitTransition.fadeOut()
+ *
+ * // Combined transitions
+ * ExitTransition.fadeOut()
+ *   .plus(ExitTransition.slideOutHorizontally({ targetOffsetX: 1.0 }))
+ * ```
+ */
+export const ExitTransition = {
+  /** Fades the content out. */
+  fadeOut: (params?: { targetAlpha?: number }) =>
+    createExitTransition([{ type: 'fadeOut', ...params }]),
+  /** Slides the content out horizontally. */
+  slideOutHorizontally: (params?: { targetOffsetX?: number }) =>
+    createExitTransition([{ type: 'slideOutHorizontally', ...params }]),
+  /** Slides the content out vertically. */
+  slideOutVertically: (params?: { targetOffsetY?: number }) =>
+    createExitTransition([{ type: 'slideOutVertically', ...params }]),
+  /** Shrinks the content towards the center. */
+  shrinkOut: () => createExitTransition([{ type: 'shrinkOut' }]),
+  /** Shrinks the content horizontally towards the center. */
+  shrinkHorizontally: () => createExitTransition([{ type: 'shrinkHorizontally' }]),
+  /** Shrinks the content vertically towards the center. */
+  shrinkVertically: () => createExitTransition([{ type: 'shrinkVertically' }]),
+  /** Scales the content out to a smaller size. */
+  scaleOut: (params?: { targetScale?: number }) =>
+    createExitTransition([{ type: 'scaleOut', ...params }]),
+};
+
+export type AnimatedVisibilityProps = {
+  children?: React.ReactNode;
+  /**
+   * Whether the content is visible. When changed, the content will animate in or out.
+   */
+  visible: boolean;
+  /**
+   * The enter transition to use when `visible` changes to `true`.
+   * Use `EnterTransition` factory methods and combine with `.plus()`.
+   * Defaults to Compose's `fadeIn + expandIn` when not specified.
+   */
+  enterTransition?: EnterTransitionType;
+  /**
+   * The exit transition to use when `visible` changes to `false`.
+   * Use `ExitTransition` factory methods and combine with `.plus()`.
+   * Defaults to Compose's `fadeOut + shrinkOut` when not specified.
+   */
+  exitTransition?: ExitTransitionType;
+} & PrimitiveBaseProps;
+
+type AnimatedVisibilityNativeProps = Omit<
+  AnimatedVisibilityProps,
+  'enterTransition' | 'exitTransition'
+> & {
+  enterTransition?: EnterTransitionRecord[];
+  exitTransition?: ExitTransitionRecord[];
+};
+
+const AnimatedVisibilityNativeView: React.ComponentType<AnimatedVisibilityNativeProps> =
+  requireNativeView('ExpoUI', 'AnimatedVisibilityView');
+
+export function AnimatedVisibility(props: AnimatedVisibilityProps) {
+  const { enterTransition, exitTransition, ...rest } = props;
+  return (
+    <AnimatedVisibilityNativeView
+      {...transformProps(rest)}
+      enterTransition={enterTransition?.[ENTER_TRANSITION_SYMBOL]()}
+      exitTransition={exitTransition?.[EXIT_TRANSITION_SYMBOL]()}
+    />
+  );
+}

package/src/jetpack-compose/AnimatedVisibility/symbols.ts

@@ -0,0 +1,8 @@
+// Unique Symbols used as private keys on transition objects. They act as a sealed accessor:
+// only this module and the component can read the underlying record arrays from an
+// EnterTransitionType or ExitTransitionType, preventing consumers from bypassing the factory API.
+//
+// Exported from this file for internal use (component + tests), but NOT re-exported from
+// the package's public index.
+export const ENTER_TRANSITION_SYMBOL = Symbol('enterTransition');
+export const EXIT_TRANSITION_SYMBOL = Symbol('exitTransition');

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

@@ -1,139 +1,116 @@
 import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
-import { MaterialIcon } from './types';
-import { ExpoModifier, ViewEvent } from '../../types';
-import { getTextFromChildren } from '../../utils';
-import { parseJSXShape, ShapeJSXElement, ShapeRecordProps } from '../Shape';
+import type { ModifierConfig, ViewEvent } from '../../types';
+import { ShapeJSXElement, ShapeRecordProps, parseJSXShape } from '../Shape';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
 /**
- * The built-in button styles available on Android.
- * - `outlined` - A button with an outline.
- * - `elevated` - A filled button with a shadow.
+ * Colors for button elements.
  */
-export type ButtonVariant = 'default' | 'bordered' | 'borderless' | 'outlined' | 'elevated';
-
-/**
- * Colors for button's core elements.
- */
-export type ButtonElementColors = {
+export type ButtonColors = {
   containerColor?: ColorValue;
   contentColor?: ColorValue;
   disabledContainerColor?: ColorValue;
   disabledContentColor?: ColorValue;
 };
 
+/**
+ * Content padding for the button's inner content.
+ * All values are in density-independent pixels (dp).
+ */
+export type ButtonContentPadding = {
+  start?: number;
+  top?: number;
+  end?: number;
+  bottom?: number;
+};
+
 export type ButtonProps = {
   /**
-   * A callback that is called when the button is pressed.
-   */
-  onPress?: () => void;
-  /**
-   * A string describing the leading icon to display in the button.
-   * Uses Material Icons on Android.
-   */
-  leadingIcon?: MaterialIcon;
-  /**
-   * A string describing the trailing icon to display in the button.
-   * Uses Material Icons on Android.
-   */
-  trailingIcon?: MaterialIcon;
-  /**
-   * A string describing the system image to display in the button.
-   * Uses Material Icons on Android.
-   * @deprecated Use `leadingIcon` instead.
+   * Callback that is called when the button is clicked.
    */
-  systemImage?: MaterialIcon;
+  onClick?: () => void;
   /**
-   * The button variant.
+   * Whether the button is enabled for user interaction.
+   * @default true
    */
-  variant?: ButtonVariant;
+  enabled?: boolean;
   /**
-   * The text to display inside the button.
+   * Colors for button elements.
    */
-  children?: string | string[] | React.JSX.Element;
+  colors?: ButtonColors;
   /**
-   * Colors for button's core elements.
-   * @platform android
+   * The padding between the button container and its content.
+   * Use this to adjust internal spacing, for example when adding a leading icon
    */
-  elementColors?: ButtonElementColors;
+  contentPadding?: ButtonContentPadding;
   /**
-   * Button color.
+   * The shape of the button.
    */
-  color?: ColorValue;
   shape?: ShapeJSXElement;
   /**
-   * Disabled state of the button.
+   * Modifiers for the component.
    */
-  disabled?: boolean;
-
+  modifiers?: ModifierConfig[];
   /**
-   * Modifiers for the component.
+   * Content to display inside the button.
    */
-  modifiers?: ExpoModifier[];
+  children: React.ReactNode;
 };
 
-/**
- * @hidden
- */
-export type NativeButtonProps = Omit<
-  ButtonProps,
-  'role' | 'onPress' | 'leadingIcon' | 'trailingIcon' | 'systemImage' | 'shape'
-> & {
-  text: string;
-  leadingIcon?: string;
-  trailingIcon?: string;
+type NativeButtonProps = Omit<ButtonProps, 'onClick' | 'shape' | 'children'> & {
   shape?: ShapeRecordProps;
+  children?: React.ReactNode;
 } & ViewEvent<'onButtonPressed', void>;
 
-// We have to work around the `role` and `onPress` props being reserved by React Native.
-const ButtonNativeView: React.ComponentType<NativeButtonProps> = requireNativeView(
-  'ExpoUI',
-  'Button'
-);
-
 /**
  * @hidden
  */
-export function transformButtonProps(props: ButtonProps): NativeButtonProps {
-  const {
-    children,
-    onPress,
-    leadingIcon,
-    trailingIcon,
-    systemImage,
-    shape,
-    modifiers,
-    ...restProps
-  } = props;
-
-  // Handle backward compatibility: systemImage maps to leadingIcon
-  const finalLeadingIcon = leadingIcon ?? systemImage;
-
+export function transformButtonProps(props: Omit<ButtonProps, 'children'>): NativeButtonProps {
+  const { onClick, shape, modifiers, ...restProps } = props;
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-    text: getTextFromChildren(children) ?? '',
-    children: getTextFromChildren(children) !== undefined ? undefined : children,
-    leadingIcon: finalLeadingIcon,
+    enabled: props.enabled ?? true,
     shape: parseJSXShape(shape),
-    trailingIcon,
-    onButtonPressed: onPress,
-    elementColors: props.elementColors
-      ? props.elementColors
-      : props.color
-        ? {
-            containerColor: props.color,
-          }
-        : undefined,
+    onButtonPressed: onClick ? () => onClick() : undefined,
   };
 }
 
+function createButtonComponent(name: string) {
+  const NativeView: React.ComponentType<NativeButtonProps> = requireNativeView('ExpoUI', name);
+
+  function Component(props: ButtonProps) {
+    const { children, ...restProps } = props;
+    return <NativeView {...transformButtonProps(restProps)}>{children}</NativeView>;
+  }
+  Component.displayName = name;
+  return Component;
+}
+
 /**
- * Displays a native button component.
+ * A filled button component.
  */
-export function Button(props: ButtonProps) {
-  return <ButtonNativeView {...transformButtonProps(props)} />;
-}
+export const Button = createButtonComponent('Button');
+
+/**
+ * A filled tonal button component.
+ */
+export const FilledTonalButton = createButtonComponent('FilledTonalButton');
+
+/**
+ * An outlined button component.
+ */
+export const OutlinedButton = createButtonComponent('OutlinedButton');
+
+/**
+ * An elevated button component.
+ */
+export const ElevatedButton = createButtonComponent('ElevatedButton');
+
+/**
+ * A text button component.
+ */
+export const TextButton = createButtonComponent('TextButton');