@expo/ui 55.0.10 → 55.0.11

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)} />;

package/src/swift-ui/modifiers/index.ts

@@ -851,11 +851,31 @@ export const textSelection = (value: boolean) => createModifier('textSelection',
  */
 export const lineSpacing = (value: number) => createModifier('lineSpacing', { value });
 /**
- * Sets the maximum number of lines that text can occupy in the view.
- * @param limit - The maximum number of lines.
+ * Sets the line limit for text in the view.
+ *
+ * Four variants matching SwiftUI:
+ * - `lineLimit()` — no line limit (unlimited lines)
+ * - `lineLimit(5)` — max 5 lines
+ * - `lineLimit(5, { reservesSpace: true })` — max 5 lines, reserves height even when empty (iOS 16+, tvOS 16+)
+ * - `lineLimit({ min: 3, max: 8 })` — range of 3 to 8 lines (iOS 16+, tvOS 16+)
+ *
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/linelimit(_:)).
  */
-export const lineLimit = (limit?: number) => createModifier('lineLimit', { limit });
+export function lineLimit(): ModifierConfig;
+export function lineLimit(limit: number, options?: { reservesSpace?: boolean }): ModifierConfig;
+export function lineLimit(range: { min: number; max: number }): ModifierConfig;
+export function lineLimit(
+  limitOrRange?: number | { min: number; max: number },
+  options?: { reservesSpace?: boolean }
+): ModifierConfig {
+  if (typeof limitOrRange === 'object' && limitOrRange !== null) {
+    return createModifier('lineLimit', { min: limitOrRange.min, max: limitOrRange.max });
+  }
+  return createModifier('lineLimit', {
+    limit: limitOrRange,
+    reservesSpace: options?.reservesSpace,
+  });
+}
 /**
  * Sets the header prominence for this view.
  * @param prominence - The prominence to apply.
@@ -1017,6 +1037,43 @@ export const submitLabel = (
   submitLabel: 'continue' | 'done' | 'go' | 'join' | 'next' | 'return' | 'route' | 'search' | 'send'
 ) => createModifier('submitLabel', { submitLabel });
 
+/**
+ * Sets the keyboard type for text input views.
+ * @param keyboardType - The type of keyboard to display.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/keyboardtype(_:)).
+ */
+export const keyboardType = (
+  keyboardType:
+    | 'default'
+    | 'email-address'
+    | 'numeric'
+    | 'phone-pad'
+    | 'ascii-capable'
+    | 'numbers-and-punctuation'
+    | 'url'
+    | 'name-phone-pad'
+    | 'decimal-pad'
+    | 'twitter'
+    | 'web-search'
+    | 'ascii-capable-number-pad'
+) => createModifier('keyboardType', { keyboardType });
+
+/**
+ * Disables autocorrection for text input views.
+ * @param disabled - Whether autocorrection is disabled. Defaults to `true`.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/autocorrectiondisabled(_:)).
+ */
+export const autocorrectionDisabled = (disabled: boolean = true) =>
+  createModifier('autocorrectionDisabled', { disabled });
+
+/**
+ * Adds an action to perform when the user submits a value to this view (e.g. pressing return in a text field).
+ * @param handler - Function to call on submit.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/onsubmit(of:_:)).
+ */
+export const onSubmit = (handler: () => void) =>
+  createModifierWithEventListener('onSubmit', handler);
+
 /**
  * Sets how often the shift key in the keyboard is automatically enabled.
  * @param autocapitalization - The autocapitalization behavior.
@@ -1242,6 +1299,9 @@ export type BuiltInModifier =
   | ReturnType<typeof gridColumnAlignment>
   | ReturnType<typeof gridCellAnchor>
   | ReturnType<typeof submitLabel>
+  | ReturnType<typeof keyboardType>
+  | ReturnType<typeof autocorrectionDisabled>
+  | ReturnType<typeof onSubmit>
   | ReturnType<typeof textInputAutocapitalization>
   | ReturnType<typeof textContentType>
   | ReturnType<typeof datePickerStyle>