@expo/ui 56.0.16 → 56.0.18

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

@@ -23,7 +23,7 @@ import { onScrollPhaseChange, useScrollGeometryChange } from './scrollObservatio
 import { id, scrollPosition } from './scrollPosition';
 import { symbolEffect } from './symbolEffect';
 import type { Color } from './types';
-import { widgetAccentedRenderingMode, widgetURL } from './widgets';
+import { activityBackgroundTint, widgetAccentedRenderingMode, widgetURL } from './widgets';
 
 const ExpoUI = requireNativeModule('ExpoUI');
 
@@ -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>
@@ -1503,6 +1540,7 @@ export type BuiltInModifier =
   | ReturnType<typeof symbolEffect>
   | ReturnType<typeof widgetAccentedRenderingMode>
   | ReturnType<typeof widgetURL>
+  | ReturnType<typeof activityBackgroundTint>
   | ReturnType<typeof containerBackground>;
 
 /**

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

@@ -1,4 +1,5 @@
 import { createModifier } from './createModifier';
+import type { Color } from './types';
 
 /**
  * Specifies the how to render an Image when using the WidgetKit/WidgetRenderingMode/accented mode.
@@ -16,3 +17,11 @@ export const widgetAccentedRenderingMode = (
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/SwiftUI/View/widgetURL(_:)).
  */
 export const widgetURL = (url: string) => createModifier('widgetURL', { url });
+
+/**
+ * Sets the background tint color for a Live Activity.
+ * @param color - The background tint color, or `null` to use the system default.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/activitybackgroundtint(_:)).
+ */
+export const activityBackgroundTint = (color: Color | null) =>
+  createModifier('activityBackgroundTint', { color });

package/src/universal/Button/index.ios.tsx

@@ -2,6 +2,7 @@ import { Button as SwiftUIButton } from '@expo/ui/swift-ui';
 import { buttonStyle } from '@expo/ui/swift-ui/modifiers';
 import type { ModifierConfig } from '@expo/ui/swift-ui/modifiers';
 
+import { omitUserOverridden } from '../modifierUtils';
 import { transformToModifiers } from '../transformStyle';
 import type { ButtonProps, ButtonVariant } from './types';
 
@@ -24,7 +25,11 @@ export function Button({
   testID,
   modifiers: extraModifiers,
 }: ButtonProps) {
-  const buttonSpecificModifiers: ModifierConfig[] = [buttonStyle(variantButtonStyle[variant])];
+  // A user-supplied buttonStyle modifier replaces the variant's.
+  const buttonSpecificModifiers: ModifierConfig[] = omitUserOverridden(
+    [buttonStyle(variantButtonStyle[variant])],
+    extraModifiers
+  );
 
   const universalModifiers = transformToModifiers(
     style,

package/src/universal/FieldGroup/FieldSectionSlots.tsx

@@ -44,6 +44,9 @@ export function extractFieldSectionSlots(children: ReactNode): ExtractedFieldSec
 
   const walk = (node: ReactNode) => {
     Children.forEach(node, (child) => {
+      if (child == null || typeof child === 'boolean') {
+        return;
+      }
       if (!isValidElement(child)) {
         rows.push(child);
         return;

package/src/universal/FieldGroup/groupChildren.tsx

@@ -21,6 +21,9 @@ export function groupFieldGroupChildren(children: ReactNode): ReactNode[] {
   };
 
   Children.forEach(children, (child) => {
+    if (child == null || typeof child === 'boolean') {
+      return;
+    }
     if (isSectionElement(child)) {
       flush();
       result.push(child);

package/src/universal/Text/index.ios.tsx

@@ -9,6 +9,7 @@ import {
 } from '@expo/ui/swift-ui/modifiers';
 import type { ModifierConfig } from '@expo/ui/swift-ui/modifiers';
 
+import { omitUserOverridden } from '../modifierUtils';
 import { transformToModifiers } from '../transformStyle';
 import type { TextProps, UniversalFontWeight } from './types';
 
@@ -98,7 +99,8 @@ export function Text({
     extraModifiers
   );
 
-  const modifiers = [...textModifiers, ...universalModifiers];
+  // A user-supplied modifier replaces any text-derived modifier of the same type.
+  const modifiers = [...omitUserOverridden(textModifiers, extraModifiers), ...universalModifiers];
 
   return (
     <SwiftUIText modifiers={modifiers} testID={testID}>