@expo/ui 55.0.9 → 55.0.11

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.md5

@@ -1 +1 @@
-512c30401c335ddaa5c8a143422f5f3f
+673a16d18408687f0dc012731a1c3ae0

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha1

@@ -1 +1 @@
-bffac0e03358cb495aff9195a3bf93ad3d004c4b
+2743de4bd2449b97b2797ec00d23338e4716d8a8

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha256

@@ -1 +1 @@
-7ce3b849501b2897111d27627b715a85b21f39a0a9c3f3005d4429af92279f60
+bd5001b4d32986f25d3bd0d3a733d0d14d4e57b979a31557f9bafd0bc24f645b

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha512

@@ -1 +1 @@
-3e96702666bb6d88dfbed286974dd194a9ea50aa55de5f9a2ec267383b0c3ef556e5984ac83c5d83ca951f35f07ecc19382fdd0eefe110f8d94a64b5a62f7264
+900435ec3391079a90e9d457986cc48ca094a86b0681c36c1d25e14e83364087eaee9d702352dbbb662888ecaaf5c820f3f713588702319ad6f20cae75057933

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "55.0.9",
+  "version": "55.0.11",
   "description": "A collection of UI components",
   "sideEffects": [
     "*.fx.js"
@@ -67,5 +67,5 @@
     "react": "*",
     "react-native": "*"
   },
-  "gitHead": "9cfae0185951ef0eb335e1c1270c7682ff761f69"
+  "gitHead": "b0ada30fd6a819c5f98a23d99b1b89a2ed68743d"
 }

package/src/jetpack-compose/SlotView.tsx

@@ -0,0 +1,15 @@
+import { requireNativeView } from 'expo';
+
+type SlotNativeViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+const SlotNativeView: React.ComponentType<SlotNativeViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+export function Slot({ slotName, children }: SlotNativeViewProps) {
+  return <SlotNativeView slotName={slotName}>{children}</SlotNativeView>;
+}

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

@@ -0,0 +1,276 @@
+import { requireNativeView } from 'expo';
+import { Ref } from 'react';
+import { ColorValue } from 'react-native';
+
+import { ModifierConfig, ViewEvent } from '../../types';
+import { Slot } from '../SlotView';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+// region Types
+
+/**
+ * Can be used for imperatively setting text and focus on the `TextField` component.
+ */
+export type TextFieldRef = {
+  setText: (newText: string) => Promise<void>;
+  focus: () => Promise<void>;
+  blur: () => Promise<void>;
+};
+
+export type TextFieldCapitalization = 'none' | 'characters' | 'words' | 'sentences';
+
+export type TextFieldKeyboardType =
+  | 'text'
+  | 'number'
+  | 'email'
+  | 'phone'
+  | 'decimal'
+  | 'password'
+  | 'ascii'
+  | 'uri'
+  | 'numberPassword';
+
+export type TextFieldImeAction =
+  | 'default'
+  | 'none'
+  | 'go'
+  | 'search'
+  | 'send'
+  | 'previous'
+  | 'next'
+  | 'done';
+
+/**
+ * Keyboard options matching Compose `KeyboardOptions`.
+ */
+export type TextFieldKeyboardOptions = {
+  /** @default 'none' */
+  capitalization?: TextFieldCapitalization;
+  /** @default true */
+  autoCorrectEnabled?: boolean;
+  /** @default 'text' */
+  keyboardType?: TextFieldKeyboardType;
+  /** @default 'default' */
+  imeAction?: TextFieldImeAction;
+};
+
+/**
+ * Keyboard actions matching Compose `KeyboardActions`.
+ * The triggered callback depends on the `imeAction` in `keyboardOptions`.
+ */
+export type TextFieldKeyboardActions = {
+  onDone?: (value: string) => void;
+  onGo?: (value: string) => void;
+  onNext?: (value: string) => void;
+  onPrevious?: (value: string) => void;
+  onSearch?: (value: string) => void;
+  onSend?: (value: string) => void;
+};
+
+/**
+ * Colors for `TextField` and `OutlinedTextField`.
+ * Maps to `TextFieldColors` in Compose, shared by both variants.
+ */
+export type TextFieldColors = {
+  focusedTextColor?: ColorValue;
+  unfocusedTextColor?: ColorValue;
+  disabledTextColor?: ColorValue;
+  errorTextColor?: ColorValue;
+  focusedContainerColor?: ColorValue;
+  unfocusedContainerColor?: ColorValue;
+  disabledContainerColor?: ColorValue;
+  errorContainerColor?: ColorValue;
+  cursorColor?: ColorValue;
+  errorCursorColor?: ColorValue;
+  focusedIndicatorColor?: ColorValue;
+  unfocusedIndicatorColor?: ColorValue;
+  disabledIndicatorColor?: ColorValue;
+  errorIndicatorColor?: ColorValue;
+  focusedLeadingIconColor?: ColorValue;
+  unfocusedLeadingIconColor?: ColorValue;
+  disabledLeadingIconColor?: ColorValue;
+  errorLeadingIconColor?: ColorValue;
+  focusedTrailingIconColor?: ColorValue;
+  unfocusedTrailingIconColor?: ColorValue;
+  disabledTrailingIconColor?: ColorValue;
+  errorTrailingIconColor?: ColorValue;
+  focusedLabelColor?: ColorValue;
+  unfocusedLabelColor?: ColorValue;
+  disabledLabelColor?: ColorValue;
+  errorLabelColor?: ColorValue;
+  focusedPlaceholderColor?: ColorValue;
+  unfocusedPlaceholderColor?: ColorValue;
+  disabledPlaceholderColor?: ColorValue;
+  errorPlaceholderColor?: ColorValue;
+  focusedSupportingTextColor?: ColorValue;
+  unfocusedSupportingTextColor?: ColorValue;
+  disabledSupportingTextColor?: ColorValue;
+  errorSupportingTextColor?: ColorValue;
+  focusedPrefixColor?: ColorValue;
+  unfocusedPrefixColor?: ColorValue;
+  disabledPrefixColor?: ColorValue;
+  errorPrefixColor?: ColorValue;
+  focusedSuffixColor?: ColorValue;
+  unfocusedSuffixColor?: ColorValue;
+  disabledSuffixColor?: ColorValue;
+  errorSuffixColor?: ColorValue;
+};
+
+/** Shared props between `TextField` and `OutlinedTextField`. */
+type BaseTextFieldProps = {
+  ref?: Ref<TextFieldRef>;
+  /** Initial value displayed when mounted. Uncontrolled — change `key` to reset. */
+  defaultValue?: string;
+  /** If true, the text field will be focused automatically when mounted. @default false */
+  autoFocus?: boolean;
+  /** @default true */
+  enabled?: boolean;
+  /** @default false */
+  readOnly?: boolean;
+  /** @default false */
+  isError?: boolean;
+  /** @default false */
+  singleLine?: boolean;
+  maxLines?: number;
+  minLines?: number;
+  keyboardOptions?: TextFieldKeyboardOptions;
+  keyboardActions?: TextFieldKeyboardActions;
+  /** A callback triggered when user types text. */
+  onValueChange?: (value: string) => void;
+  /** A callback triggered when the field gains or loses focus. */
+  onFocusChanged?: (focused: boolean) => void;
+  shape?: object;
+  modifiers?: ModifierConfig[];
+  /** Slot children (e.g. `TextField.Label`, `TextField.Placeholder`). */
+  children?: React.ReactNode;
+};
+
+export type TextFieldProps = BaseTextFieldProps & {
+  colors?: TextFieldColors;
+};
+
+export type OutlinedTextFieldProps = BaseTextFieldProps & {
+  colors?: TextFieldColors;
+};
+
+// endregion Types
+
+// region Native
+
+type NativeTextFieldProps = Omit<
+  BaseTextFieldProps,
+  'onValueChange' | 'onFocusChanged' | 'keyboardActions' | 'children' | 'shape'
+> & {
+  variant: 'filled' | 'outlined';
+  colors?: TextFieldColors;
+  shape?: object;
+  children?: React.ReactNode;
+} & ViewEvent<'onValueChange', { value: string }> &
+  ViewEvent<'onFocusChanged', { value: boolean }> &
+  ViewEvent<'onKeyboardAction', { action: string; value: string }>;
+
+const TextFieldNativeView: React.ComponentType<NativeTextFieldProps> = requireNativeView(
+  'ExpoUI',
+  'TextFieldView'
+);
+
+function transformProps(
+  props: TextFieldProps | OutlinedTextFieldProps,
+  variant: 'filled' | 'outlined'
+): NativeTextFieldProps {
+  const { modifiers, children, keyboardActions, onValueChange, onFocusChanged, ...restProps } =
+    props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    variant,
+    children,
+    onValueChange: onValueChange ? (event) => onValueChange(event.nativeEvent.value) : undefined,
+    onFocusChanged: onFocusChanged ? (event) => onFocusChanged(event.nativeEvent.value) : undefined,
+    onKeyboardAction: keyboardActions
+      ? (event) => {
+          const { action, value } = event.nativeEvent;
+          const actionMap: Record<string, ((v: string) => void) | undefined> = {
+            done: keyboardActions.onDone,
+            go: keyboardActions.onGo,
+            next: keyboardActions.onNext,
+            previous: keyboardActions.onPrevious,
+            search: keyboardActions.onSearch,
+            send: keyboardActions.onSend,
+          };
+          actionMap[action]?.(value);
+        }
+      : undefined,
+  };
+}
+
+// endregion Native
+
+// region Slot components
+
+function Label(props: { children: React.ReactNode }) {
+  return <Slot slotName="label">{props.children}</Slot>;
+}
+
+function Placeholder(props: { children: React.ReactNode }) {
+  return <Slot slotName="placeholder">{props.children}</Slot>;
+}
+
+function LeadingIcon(props: { children: React.ReactNode }) {
+  return <Slot slotName="leadingIcon">{props.children}</Slot>;
+}
+
+function TrailingIcon(props: { children: React.ReactNode }) {
+  return <Slot slotName="trailingIcon">{props.children}</Slot>;
+}
+
+function Prefix(props: { children: React.ReactNode }) {
+  return <Slot slotName="prefix">{props.children}</Slot>;
+}
+
+function Suffix(props: { children: React.ReactNode }) {
+  return <Slot slotName="suffix">{props.children}</Slot>;
+}
+
+function SupportingText(props: { children: React.ReactNode }) {
+  return <Slot slotName="supportingText">{props.children}</Slot>;
+}
+
+// endregion Slot components
+
+// region Components
+
+/**
+ * A Material3 `TextField`.
+ */
+function TextFieldComponent(props: TextFieldProps) {
+  return <TextFieldNativeView {...transformProps(props, 'filled')} />;
+}
+
+TextFieldComponent.Label = Label;
+TextFieldComponent.Placeholder = Placeholder;
+TextFieldComponent.LeadingIcon = LeadingIcon;
+TextFieldComponent.TrailingIcon = TrailingIcon;
+TextFieldComponent.Prefix = Prefix;
+TextFieldComponent.Suffix = Suffix;
+TextFieldComponent.SupportingText = SupportingText;
+
+/**
+ * A Material3 `OutlinedTextField` with a transparent background and border outline.
+ */
+function OutlinedTextFieldComponent(props: OutlinedTextFieldProps) {
+  return <TextFieldNativeView {...transformProps(props, 'outlined')} />;
+}
+
+OutlinedTextFieldComponent.Label = Label;
+OutlinedTextFieldComponent.Placeholder = Placeholder;
+OutlinedTextFieldComponent.LeadingIcon = LeadingIcon;
+OutlinedTextFieldComponent.TrailingIcon = TrailingIcon;
+OutlinedTextFieldComponent.Prefix = Prefix;
+OutlinedTextFieldComponent.Suffix = Suffix;
+OutlinedTextFieldComponent.SupportingText = SupportingText;
+
+// endregion Components
+
+export { TextFieldComponent as TextField, OutlinedTextFieldComponent as OutlinedTextField };

package/src/jetpack-compose/index.ts

@@ -22,7 +22,7 @@ export * from './Progress';
 export * from './Slider';
 export * from './Spacer';
 export * from './Switch';
-export * from './TextInput';
+export * from './TextField';
 export * from './ToggleButton';
 export * from './Shape';
 export * from './ModalBottomSheet';

package/src/swift-ui/SecureField/index.tsx

@@ -2,12 +2,11 @@ import { requireNativeView } from 'expo';
 import { Ref } from 'react';
 
 import { type ViewEvent } from '../../types';
-import { TextFieldKeyboardType } from '../TextField';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 
 /**
- * Can be used for imperatively setting text on the SecureField component.
+ * Can be used for imperatively setting text and focus on the `SecureField` component.
  */
 export type SecureFieldRef = {
   setText: (newText: string) => Promise<void>;
@@ -17,42 +16,28 @@ export type SecureFieldRef = {
 
 export type SecureFieldProps = {
   ref?: Ref<SecureFieldRef>;
-  /**
-   * Initial value that the SecureField displays when being mounted. As the SecureField is an uncontrolled component, change the key prop if you need to change the text value.
-   */
+  /** Initial value displayed when mounted. Uncontrolled — change `key` to reset. */
   defaultValue?: string;
+  /** If true, the field will be focused automatically when mounted. @default false */
+  autoFocus?: boolean;
   /**
    * A text that is displayed when the field is empty.
    */
   placeholder?: string;
   /**
-   * A callback triggered when user types in text into the SecureField.
-   */
-  onChangeText?: (value: string) => void;
-  /**
-   * A callback triggered when user submits the TextField by pressing the return key.
-   */
-  onSubmit?: (value: string) => void;
-  /**
-   * A callback triggered when user focuses or blurs the SecureField.
+   * A callback triggered when the text value changes.
    */
-  onChangeFocus?: (focused: boolean) => void;
-  keyboardType?: TextFieldKeyboardType;
+  onValueChange?: (value: string) => void;
   /**
-   * If true, the text input will be focused automatically when the component is mounted.
-   * @default false
+   * A callback triggered when the field gains or loses focus.
    */
-  autoFocus?: boolean;
+  onFocusChange?: (focused: boolean) => void;
 } & CommonViewModifierProps;
 
-type NativeSecureFieldProps = Omit<SecureFieldProps, 'onChangeText' | 'onSubmit'> & {} & ViewEvent<
-    'onValueChanged',
-    { value: string }
-  > &
-  ViewEvent<'onFocusChanged', { value: boolean }> &
-  ViewEvent<'onSubmit', { value: string }>;
+type NativeSecureFieldProps = Omit<SecureFieldProps, 'onValueChange' | 'onFocusChange'> &
+  ViewEvent<'onValueChange', { value: string }> &
+  ViewEvent<'onFocusChange', { value: boolean }>;
 
-// We have to work around the `role` and `onPress` props being reserved by React Native.
 const SecureFieldNativeView: React.ComponentType<NativeSecureFieldProps> = requireNativeView(
   'ExpoUI',
   'SecureFieldView'
@@ -64,20 +49,17 @@ function transformSecureFieldProps(props: SecureFieldProps): NativeSecureFieldPr
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-    onValueChanged: (event) => {
-      props.onChangeText?.(event.nativeEvent.value);
-    },
-    onFocusChanged: (event) => {
-      props.onChangeFocus?.(event.nativeEvent.value);
-    },
-    onSubmit: (event) => {
-      props.onSubmit?.(event.nativeEvent.value);
-    },
+    onValueChange: props.onValueChange
+      ? (event) => props.onValueChange?.(event.nativeEvent.value)
+      : undefined,
+    onFocusChange: props.onFocusChange
+      ? (event) => props.onFocusChange?.(event.nativeEvent.value)
+      : undefined,
   };
 }
 
 /**
- * Renders a `SecureField` component. Should mostly be used for embedding text inputs inside of SwiftUI lists and sections. Is an uncontrolled component.
+ * Renders a SwiftUI `SecureField` for password input.
  */
 export function SecureField(props: SecureFieldProps) {
   return <SecureFieldNativeView {...transformSecureFieldProps(props)} />;

package/src/swift-ui/TextField/index.tsx

@@ -5,39 +5,6 @@ import { type ViewEvent } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 
-/**
- * Determines which keyboard to open. For example, `'numeric'`.
- *
- * Available options:
- * - default
- * - numeric
- * - email-address
- * - phone-pad
- * - decimal-pad
- * - ascii-capable
- * - url
- * - numbers-and-punctuation
- * - name-phone-pad
- * - twitter
- * - web-search
- * - ascii-capable-number-pad
- *
- * @default default
- */
-export type TextFieldKeyboardType =
-  | 'default'
-  | 'email-address'
-  | 'numeric'
-  | 'phone-pad'
-  | 'ascii-capable'
-  | 'numbers-and-punctuation'
-  | 'url'
-  | 'name-phone-pad'
-  | 'decimal-pad'
-  | 'twitter'
-  | 'web-search'
-  | 'ascii-capable-number-pad';
-
 /**
  * Can be used for imperatively setting text and focus on the `TextField` component.
  */
@@ -54,70 +21,44 @@ export type TextFieldRef = {
 
 export type TextFieldProps = {
   ref?: Ref<TextFieldRef>;
-  /**
-   * Initial value that the `TextField` displays when being mounted. As the `TextField` is an uncontrolled component, change the key prop if you need to change the text value.
-   */
+  /** Initial value displayed when mounted. Uncontrolled — change `key` to reset. */
   defaultValue?: string;
+  /** If true, the text field will be focused automatically when mounted. @default false */
+  autoFocus?: boolean;
   /**
    * A text that is displayed when the field is empty.
    */
   placeholder?: string;
   /**
-   * A callback triggered when user types in text into the `TextField`.
-   */
-  onChangeText?: (value: string) => void;
-  /**
-   * A callback triggered when user focuses or blurs the `TextField`.
+   * A callback triggered when the text value changes.
    */
-  onChangeFocus?: (focused: boolean) => void;
+  onValueChange?: (value: string) => void;
   /**
-   * A callback triggered when user submits the `TextField` by pressing the return key.
+   * A callback triggered when the field gains or loses focus.
    */
-  onSubmit?: (value: string) => void;
+  onFocusChange?: (focused: boolean) => void;
   /**
    * A callback triggered when user selects text in the TextField.
    * @platform ios 18.0+ tvos 18.0+
    */
-  onChangeSelection?: ({ start, end }: { start: number; end: number }) => void;
-  /**
-   * If true, the text input can be multiple lines.
-   * While the content will wrap, there's no keyboard button to insert a new line.
-   */
-  multiline?: boolean;
+  onSelectionChange?: ({ start, end }: { start: number; end: number }) => void;
   /**
-   * If true, the text input will add new lines when the user presses the return key.
-   * @default true
+   * The axis along which the text field grows when content exceeds a single line.
+   * - `'horizontal'` — single line (default).
+   * - `'vertical'` — expands vertically for multiline content. Use `lineLimit` modifier to cap visible lines.
+   * @default 'horizontal'
    */
-  allowNewlines?: boolean;
-  /**
-   * The number of lines to display when `multiline` is set to true.
-   * If the number of lines in the view is above this number, the view scrolls.
-   * @default undefined, which means unlimited lines.
-   */
-  numberOfLines?: number;
-
-  keyboardType?: TextFieldKeyboardType;
-  /**
-   * If true, autocorrection is enabled.
-   * @default true
-   */
-  autocorrection?: boolean;
-
-  /**
-   * If true, the text input will be focused automatically when the component is mounted.
-   * @default false
-   */
-  autoFocus?: boolean;
+  axis?: 'horizontal' | 'vertical';
 } & CommonViewModifierProps;
 
 export type NativeTextFieldProps = Omit<
   TextFieldProps,
-  'onChangeText' | 'onSubmit'
-> & {} & ViewEvent<'onValueChanged', { value: string }> &
-  ViewEvent<'onFocusChanged', { value: boolean }> &
-  ViewEvent<'onSelectionChanged', { start: number; end: number }> &
-  ViewEvent<'onSubmit', { value: string }>;
-// We have to work around the `role` and `onPress` props being reserved by React Native.
+  'onValueChange' | 'onFocusChange' | 'onSelectionChange'
+> &
+  ViewEvent<'onValueChange', { value: string }> &
+  ViewEvent<'onFocusChange', { value: boolean }> &
+  ViewEvent<'onSelectionChange', { start: number; end: number }>;
+
 const TextFieldNativeView: React.ComponentType<NativeTextFieldProps> = requireNativeView(
   'ExpoUI',
   'TextFieldView'
@@ -129,23 +70,21 @@ function transformTextFieldProps(props: TextFieldProps): NativeTextFieldProps {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-    onValueChanged: (event) => {
-      props.onChangeText?.(event.nativeEvent.value);
-    },
-    onFocusChanged: (event) => {
-      props.onChangeFocus?.(event.nativeEvent.value);
-    },
-    onSelectionChanged: (event) => {
-      props.onChangeSelection?.({ start: event.nativeEvent.start, end: event.nativeEvent.end });
-    },
-    onSubmit: (event) => {
-      props.onSubmit?.(event.nativeEvent.value);
-    },
+    onValueChange: props.onValueChange
+      ? (event) => props.onValueChange?.(event.nativeEvent.value)
+      : undefined,
+    onFocusChange: props.onFocusChange
+      ? (event) => props.onFocusChange?.(event.nativeEvent.value)
+      : undefined,
+    onSelectionChange: props.onSelectionChange
+      ? (event) =>
+          props.onSelectionChange?.({ start: event.nativeEvent.start, end: event.nativeEvent.end })
+      : undefined,
   };
 }
 
 /**
- * Renders a `TextField` component. Should mostly be used for embedding text inputs inside of SwiftUI lists and sections. Is an uncontrolled component.
+ * Renders a SwiftUI `TextField`.
  */
 export function TextField(props: TextFieldProps) {
   return <TextFieldNativeView {...transformTextFieldProps(props)} />;