@expo/ui 56.0.16 → 56.0.17

package/src/jetpack-compose/TextField/{index.tsx → shared.ts}

@@ -1,17 +1,13 @@
-import { requireNativeView } from 'expo';
-import type { Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import type { ColorValue } from 'react-native';
 
 import { getStateId, type ObservableState, useWorkletProp, worklets } from '../../State';
 import type { ModifierConfig, ViewEvent } from '../../types';
-import { parseJSXShape, type ShapeJSXElement, type ShapeRecordProps } from '../Shape';
-import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-// region Types
-
 /**
- * Can be used for imperatively focusing and setting text/selection on the `TextField` component.
+ * Can be used for imperatively focusing and setting text/selection on the
+ * `TextField`, `OutlinedTextField`, and `BasicTextField` components.
  */
 export type TextFieldRef = {
   setText: (newText: string) => Promise<void>;
@@ -76,56 +72,37 @@ export type TextFieldKeyboardActions = {
 };
 
 /**
- * Colors for `TextField` and `OutlinedTextField`.
- * Maps to `TextFieldColors` in Compose, shared by both variants.
+ * Text styling for a text field's content. Maps to Compose's `TextStyle`.
+ * Shared by `TextField`, `OutlinedTextField`, and `BasicTextField`.
  */
-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;
+export type TextFieldTextStyle = {
+  textAlign?: 'left' | 'right' | 'center' | 'justify';
+  color?: ColorValue;
+  fontSize?: number;
+  fontFamily?: string;
+  fontWeight?:
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | 'normal'
+    | 'bold';
+  lineHeight?: number;
+  letterSpacing?: number;
 };
 
-/** Shared props between `TextField` and `OutlinedTextField`. */
-type BaseTextFieldProps = {
+/**
+ * Props shared by every Compose text field variant — `TextField`,
+ * `OutlinedTextField`, and `BasicTextField`. The Material variants add their
+ * own decoration props (`isError`, `shape`, `colors`, slot children);
+ * `BasicTextField` adds `cursorColor`.
+ */
+export type CommonTextFieldProperties = {
   ref?: Ref<TextFieldRef>;
   /**
    * An observable state that holds the current text value. Create one with
@@ -140,8 +117,6 @@ type BaseTextFieldProps = {
   /** @default false */
   readOnly?: boolean;
   /** @default false */
-  isError?: boolean;
-  /** @default false */
   singleLine?: boolean;
   maxLines?: number;
   minLines?: number;
@@ -151,17 +126,6 @@ type BaseTextFieldProps = {
    */
   visualTransformation?: 'password' | 'none';
 
-  /**
-   * Selection-related colors. Maps to Compose's `TextSelectionColors` via
-   * `LocalTextSelectionColors`. `handleColor` controls the drag handles;
-   * `backgroundColor` is the highlighted-text background (typically the same
-   * tint at lower alpha so the underlying text stays readable).
-   */
-  textSelectionColors?: {
-    handleColor?: ColorValue;
-    backgroundColor?: ColorValue;
-  };
-
   /**
    * Observable state holding the current selection range. Create with
    * `useNativeState({ start: 0, end: 0 })`. The field writes user-driven
@@ -178,28 +142,21 @@ type BaseTextFieldProps = {
   onSelectionChange?: (selection: { start: number; end: number }) => void;
 
   /**
-   * Text styling for the field's content. Maps to Compose's `TextStyle`.
+   * Selection-related colors. Maps to Compose's `TextSelectionColors` via
+   * `LocalTextSelectionColors`. `handleColor` controls the drag handles (and
+   * the caret's drag handle); `backgroundColor` is the highlighted-text
+   * background (typically the same tint at lower alpha so the underlying text
+   * stays readable). Independent of `cursorColor`, which tints the caret line.
    */
-  textStyle?: {
-    textAlign?: 'left' | 'right' | 'center' | 'justify';
-    color?: ColorValue;
-    fontSize?: number;
-    fontFamily?: string;
-    fontWeight?:
-      | '100'
-      | '200'
-      | '300'
-      | '400'
-      | '500'
-      | '600'
-      | '700'
-      | '800'
-      | '900'
-      | 'normal'
-      | 'bold';
-    lineHeight?: number;
-    letterSpacing?: number;
+  textSelectionColors?: {
+    handleColor?: ColorValue;
+    backgroundColor?: ColorValue;
   };
+
+  /**
+   * Text styling for the field's content. Maps to Compose's `TextStyle`.
+   */
+  textStyle?: TextFieldTextStyle;
   keyboardOptions?: TextFieldKeyboardOptions;
   keyboardActions?: TextFieldKeyboardActions;
   /**
@@ -211,44 +168,35 @@ type BaseTextFieldProps = {
   onValueChange?: (value: string) => void;
   /** A callback triggered when the field gains or loses focus. */
   onFocusChanged?: (focused: boolean) => void;
-  /**
-   * Shape used for the field's container outline/fill. Use the helpers from
-   * `Shape` (for example, `<Shape.Pill />` or `<Shape.RoundedCorner cornerRadii={...} />`).
-   * Defaults to the Material `OutlinedTextFieldDefaults.shape`/`TextFieldDefaults.shape`.
-   */
-  shape?: ShapeJSXElement;
   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;
+  /** Slot children that configure the field's decoration. */
+  children?: ReactNode;
 };
 
-// endregion Types
+// region Native transform
 
-// region Native
-
-type NativeTextFieldProps = Omit<
-  BaseTextFieldProps,
+/**
+ * Keys consumed (and reshaped) by {@link useCommonTextFieldProps}. Everything
+ * else on the props passes through untouched.
+ */
+type TransformedKeys =
   | 'value'
   | 'selection'
+  | 'modifiers'
+  | 'children'
+  | 'keyboardActions'
   | 'onValueChange'
   | 'onFocusChanged'
-  | 'onSelectionChange'
-  | 'keyboardActions'
-  | 'children'
-  | 'shape'
-> & {
-  variant: 'filled' | 'outlined';
-  colors?: TextFieldColors;
-  shape?: ShapeRecordProps;
-  children?: React.ReactNode;
+  | 'onSelectionChange';
+
+/**
+ * Native-facing prop shape shared by every Compose text field variant. The
+ * observable-backed props collapse to shared-object ids, and the public
+ * callbacks become `nativeEvent`-wrapped listeners.
+ */
+export type CommonNativeTextFieldProps = {
+  modifiers?: ModifierConfig[];
+  children?: ReactNode;
   value?: number | null;
   selection?: number | null;
   onValueChangeSync?: number | null;
@@ -257,15 +205,9 @@ type NativeTextFieldProps = Omit<
   ViewEvent<'onSelectionChange', { start: number; end: number }> &
   ViewEvent<'onKeyboardAction', { action: string; value: string }>;
 
-const TextFieldNativeView: React.ComponentType<NativeTextFieldProps> = requireNativeView(
-  'ExpoUI',
-  'TextFieldView'
-);
-
-function useTransformedProps(
-  props: TextFieldProps | OutlinedTextFieldProps,
-  variant: 'filled' | 'outlined'
-): NativeTextFieldProps {
+export function useCommonTextFieldProps<T extends CommonTextFieldProperties>(
+  props: T
+): CommonNativeTextFieldProps & Omit<T, TransformedKeys> {
   const {
     value,
     selection,
@@ -275,19 +217,16 @@ function useTransformedProps(
     onValueChange,
     onFocusChanged,
     onSelectionChange,
-    shape,
-    ...restProps
+    ...rest
   } = props;
 
   const isWorklet = !!onValueChange && !!worklets?.isWorkletFunction?.(onValueChange);
   const workletCallback = useWorkletProp(isWorklet ? onValueChange : undefined, 'onValueChange');
 
   return {
+    ...rest,
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
-    ...restProps,
-    variant,
-    shape: parseJSXShape(shape),
     children,
     value: getStateId(value),
     selection: getStateId(selection),
@@ -315,75 +254,4 @@ function useTransformedProps(
   };
 }
 
-// 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 {...useTransformedProps(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 {...useTransformedProps(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 };
-
-// Exported for docs api data
-export { type ObservableState };
+// endregion Native transform

package/src/jetpack-compose/index.ts

@@ -29,7 +29,11 @@ export * from './SyncSwitch';
 export {
   TextField,
   OutlinedTextField,
+  BasicTextField,
   type TextFieldProps,
+  type OutlinedTextFieldProps,
+  type BasicTextFieldProps,
+  type BasicTextFieldRef,
   type TextFieldRef,
   type TextFieldCapitalization,
   type TextFieldImeAction,
@@ -37,6 +41,8 @@ export {
   type TextFieldKeyboardType,
   type TextFieldKeyboardActions,
   type TextFieldColors,
+  type TextFieldTextStyle,
+  type CommonTextFieldProperties,
 } from './TextField';
 export * from './ToggleButton';
 export * from './Shape';

package/src/jetpack-compose/modifiers/index.ts

@@ -420,6 +420,19 @@ export const onSizeChanged = (handler: (size: { width: number; height: number })
     handler(size)
   );
 
+/**
+ * Calls the handler whenever the composable is positioned, with its position and size.
+ * `x` and `y` are relative to the window. All values are in dp.
+ * @param handler - Function called with the new layout.
+ */
+export const onGloballyPositioned = (
+  handler: (layout: { x: number; y: number; width: number; height: number }) => void
+) =>
+  createModifierWithEventListener(
+    'onGloballyPositioned',
+    (layout: { x: number; y: number; width: number; height: number }) => handler(layout)
+  );
+
 // =============================================================================
 // Utility Modifiers
 // =============================================================================

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

@@ -1,6 +1,6 @@
 import { requireNativeView } from 'expo';
 import { useState, type ComponentType } from 'react';
-import type { NativeSyntheticEvent } from 'react-native';
+import { type NativeSyntheticEvent } from 'react-native';
 
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';

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

@@ -3,6 +3,7 @@ import type { ColorValue } from 'react-native';
 import type { SFSymbol } from 'sf-symbols-typescript';
 
 import type { ViewEvent } from '../../types';
+import { font, foregroundStyle } from '../modifiers';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import type { CommonViewModifierProps } from '../types';
 
@@ -23,7 +24,9 @@ export interface ImageProps extends CommonViewModifierProps {
    */
   uiImage?: string;
   /**
-   * The size of the system image.
+   * The fixed size of the system image in points. Does not scale with Dynamic
+   * Type. Use the `font` modifier with `textStyle` for that. Ignored when a
+   * `font` modifier is supplied.
    */
   size?: number;
   /**
@@ -53,9 +56,15 @@ type TapEvent = ViewEvent<'onTap', object> & {
 type NativeImageProps = Omit<ImageProps, 'onPress'> | TapEvent;
 
 function transformNativeProps(props: ImageProps): NativeImageProps {
-  const { onPress, modifiers, ...restProps } = props;
+  const { onPress, modifiers, size, color, ...restProps } = props;
+  const hasFontModifier = modifiers?.some((modifier) => modifier.$type === 'font');
+  const allModifiers = [
+    ...(modifiers ?? []),
+    ...(hasFontModifier ? [] : [font({ size: size ?? 24 })]),
+    ...(color != null ? [foregroundStyle(color)] : []),
+  ];
   return {
-    modifiers,
+    modifiers: allModifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
     ...(onPress ? { useTapGesture: true, onTap: () => onPress() } : null),

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

@@ -190,13 +190,17 @@ export const onDisappear = (handler: () => void) =>
   createModifierWithEventListener('onDisappear', handler);
 
 /**
- * Calls the handler whenever the view's geometry changes. Sizes are in points.
- * @param handler - Function called with the new size.
+ * Calls the handler whenever the view's geometry changes, with its position and size.
+ * `x` and `y` are in the global coordinate space (relative to the window); all values are in points.
+ * @param handler - Function called with the new frame.
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/ongeometrychange(for:of:action:)).
  */
-export const onGeometryChange = (handler: (size: { width: number; height: number }) => void) =>
-  createModifierWithEventListener('onGeometryChange', (size: { width: number; height: number }) =>
-    handler(size)
+export const onGeometryChange = (
+  handler: (frame: { x: number; y: number; width: number; height: number }) => void
+) =>
+  createModifierWithEventListener(
+    'onGeometryChange',
+    (frame: { x: number; y: number; width: number; height: number }) => handler(frame)
   );
 
 /**
@@ -561,6 +565,14 @@ export const toggleStyle = (style: 'automatic' | 'switch' | 'button') =>
 export const controlSize = (size: 'mini' | 'small' | 'regular' | 'large' | 'extraLarge') =>
   createModifier('controlSize', { size });
 
+/**
+ * Scales SF Symbols within this view relative to the surrounding text, using one of the standard sizes.
+ * @param scale - The relative image scale.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/imagescale(_:)).
+ */
+export const imageScale = (scale: 'small' | 'medium' | 'large') =>
+  createModifier('imageScale', { scale });
+
 /**
  * Sets the style for labels within this view.
  * @param style - The label style.
@@ -731,6 +743,16 @@ export const accessibilityHint = (hint: string) => createModifier('accessibility
 export const accessibilityValue = (value: string) =>
   createModifier('accessibilityValue', { value });
 
+/**
+ * Sets alternative spoken phrases that Voice Control uses to refer to the view.
+ * Each label is read as a `Text` element on iOS. For example, an "End" button
+ * might offer "Hang up" so users can trigger it by saying that phrase.
+ * @param inputLabels - The spoken phrases that select the view.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/accessibilityinputlabels(_:)).
+ */
+export const accessibilityInputLabels = (inputLabels: string[]) =>
+  createModifier('accessibilityInputLabels', { inputLabels });
+
 /**
  * Sets an accessibility identifier for the view.
  *
@@ -893,6 +915,19 @@ export const truncationMode = (mode: 'head' | 'middle' | 'tail') =>
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/allowstightening(_:)).
  */
 export const allowsTightening = (value: boolean) => createModifier('allowsTightening', { value });
+/**
+ * Sets the minimum amount that text in this view scales down to fit in the available space.
+ *
+ * Use this modifier if the text you place in a view doesn't fit and it's okay if the text shrinks
+ * to accommodate. For example, a label with a minimum scale factor of `0.5` draws its text in a
+ * font size as small as half of the actual font if needed.
+ * @param factor - A fraction between `0` and `1` (including `0` and `1`) that specifies the amount
+ * of text to draw. For example, a value of `0.5` draws the text in a font size as small as half the
+ * actual font if needed.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/minimumscalefactor(_:)).
+ */
+export const minimumScaleFactor = (factor: number) =>
+  createModifier('minimumScaleFactor', { factor });
 /**
  * Sets the spacing, or kerning, between characters for the text in this view.
  * @default 0
@@ -1428,6 +1463,7 @@ export type BuiltInModifier =
   | ReturnType<typeof buttonBorderShape>
   | ReturnType<typeof toggleStyle>
   | ReturnType<typeof controlSize>
+  | ReturnType<typeof imageScale>
   | ReturnType<typeof labelStyle>
   | ReturnType<typeof labelsHidden>
   | ReturnType<typeof textFieldStyle>
@@ -1435,6 +1471,7 @@ export type BuiltInModifier =
   | ReturnType<typeof accessibilityLabel>
   | ReturnType<typeof accessibilityHint>
   | ReturnType<typeof accessibilityValue>
+  | ReturnType<typeof accessibilityInputLabels>
   | ReturnType<typeof accessibilityIdentifier>
   | ReturnType<typeof accessibilityHidden>
   | ReturnType<typeof layoutPriority>

package/src/universal/TextInput/index.android.tsx

@@ -1,5 +1,6 @@
 import {
-  TextField as ComposeTextField,
+  BasicTextField,
+  Box,
   Text,
   type TextFieldImeAction,
   type TextFieldKeyboardType,
@@ -97,8 +98,6 @@ export function TextInput({
   const numberOfLines = numberOfLinesProp ?? rows;
   const keyboardType = keyboardTypeProp ?? inputModeToKeyboardType(inputMode);
   const returnKeyType = returnKeyTypeProp ?? enterKeyHintToReturnKeyType(enterKeyHint);
-  const { backgroundColor: styleBackgroundColor, ...boxStyle } = style ?? {};
-  const hideIndicator = boxStyle.borderWidth === 0 && underlineColorAndroid == null;
 
   const initialFallbackRef = useRef(defaultValue ?? '');
   const fallback = useNativeState<string>(initialFallbackRef.current);
@@ -156,11 +155,11 @@ export function TextInput({
     : undefined;
 
   return (
-    <ComposeTextField
+    <BasicTextField
       ref={innerRef}
       modifiers={[
         ...(userModifiers ?? []),
-        ...transformToModifiers(boxStyle, {}),
+        ...transformToModifiers(style, {}),
         ...(testID ? [testIDModifier(testID)] : []),
         ...(autoComplete ? [semantics({ contentType: autoComplete })] : []),
         ...(onContentSizeChange ? [onSizeChanged(onContentSizeChange)] : []),
@@ -171,50 +170,7 @@ export function TextInput({
       singleLine={!multiline}
       maxLines={multiline && numberOfLines && numberOfLines > 0 ? numberOfLines : undefined}
       minLines={multiline && numberOfLines && numberOfLines > 0 ? numberOfLines : undefined}
-      colors={
-        caretHidden ||
-        cursorColor ||
-        underlineColorAndroid ||
-        placeholderTextColor ||
-        styleBackgroundColor ||
-        hideIndicator
-          ? {
-              ...(caretHidden
-                ? { cursorColor: 'transparent' }
-                : cursorColor
-                  ? { cursorColor }
-                  : null),
-              ...(styleBackgroundColor
-                ? {
-                    focusedContainerColor: styleBackgroundColor,
-                    unfocusedContainerColor: styleBackgroundColor,
-                    disabledContainerColor: styleBackgroundColor,
-                    errorContainerColor: styleBackgroundColor,
-                  }
-                : null),
-              ...(underlineColorAndroid
-                ? {
-                    unfocusedIndicatorColor: underlineColorAndroid,
-                    focusedIndicatorColor: underlineColorAndroid,
-                  }
-                : hideIndicator
-                  ? {
-                      focusedIndicatorColor: 'transparent',
-                      unfocusedIndicatorColor: 'transparent',
-                      disabledIndicatorColor: 'transparent',
-                      errorIndicatorColor: 'transparent',
-                    }
-                  : null),
-              ...(placeholderTextColor
-                ? {
-                    unfocusedPlaceholderColor: placeholderTextColor,
-                    focusedPlaceholderColor: placeholderTextColor,
-                    disabledPlaceholderColor: placeholderTextColor,
-                  }
-                : null),
-            }
-          : undefined
-      }
+      cursorColor={caretHidden ? 'transparent' : (cursorColor ?? selectionColor)}
       textStyle={
         textStyle || (textAlign && textAlign !== 'auto')
           ? {
@@ -237,18 +193,28 @@ export function TextInput({
       onValueChange={onChangeText}
       maxLength={maxLength}
       onFocusChanged={handleFocusChanged}
-      selection={selection as Parameters<typeof ComposeTextField>[0]['selection']}
+      selection={selection as Parameters<typeof BasicTextField>[0]['selection']}
       onSelectionChange={onSelectionChange}>
-      {placeholder ? (
-        <ComposeTextField.Placeholder>
-          <Text
-            modifiers={[fillMaxWidth()]}
-            style={textAlign && textAlign !== 'auto' ? { textAlign } : undefined}>
-            {placeholder}
-          </Text>
-        </ComposeTextField.Placeholder>
-      ) : null}
-    </ComposeTextField>
+      <BasicTextField.DecorationBox>
+        <Box
+          modifiers={[fillMaxWidth()]}
+          contentAlignment={
+            textAlign === 'center' ? 'topCenter' : textAlign === 'right' ? 'topEnd' : undefined
+          }>
+          {placeholder != null ? (
+            <BasicTextField.Placeholder>
+              <Text
+                color={placeholderTextColor as string | undefined}
+                modifiers={[fillMaxWidth()]}
+                style={textAlign && textAlign !== 'auto' ? { textAlign } : undefined}>
+                {placeholder}
+              </Text>
+            </BasicTextField.Placeholder>
+          ) : null}
+          <BasicTextField.InnerTextField />
+        </Box>
+      </BasicTextField.DecorationBox>
+    </BasicTextField>
   );
 }
 

package/src/universal/TextInput/types.ts

@@ -194,7 +194,11 @@ export interface TextInputProps {
   rows?: number;
 
   /**
-   * Color of the underline indicator on Android. iOS / web ignore this.
+   * Color of the underline indicator on Android.
+   *
+   * @deprecated The Android `TextInput` renders an unstyled `BasicTextField` that
+   * has no underline indicator, so this has no effect. To draw your own border,
+   * pass it through `style` or `modifiers`.
    * @platform android
    */
   underlineColorAndroid?: ColorValue;