Modifiers

Fires when the scroll geometry changes — i.e., on every scroll update and on container/content size changes. Use to drive continuous progress UI such as page indicators, parallax, or fractional offsets.

If the callback is marked with the 'worklet' directive, it runs synchronously on the UI thread (no JS-thread round-trip); otherwise it is delivered asynchronously as a regular JS event. Both paths share the same native modifier — the worklet variant is automatically wrapped in a WorkletCallback shared object whose lifetime is managed by the hook.

This is a hook because the worklet path requires a stable shared-object reference across renders. Call it at the top of your component, then include the returned modifier in your modifiers array.

Apply to a SwiftUI ScrollView (and other scrollable views). On iOS below 18.0 the modifier is a no-op.

See: Official SwiftUI documentation.

const geometryModifier = useScrollGeometryChange((g) => {
  'worklet';
  progress.value = g.contentOffsetX / g.containerWidth;
});

<ScrollView modifiers={[geometryModifier]} />

Adds the given accessibility traits to the view.

See: Official SwiftUI documentation.

Controls how a view's child accessibility elements are exposed, mirroring SwiftUI's accessibilityElement(children:). It creates a new accessibility element (or modifies the existing one) and applies the chosen behavior to the subtree.

Complements accessibilityHidden, which hides a single leaf, by acting on the whole subtree.

See: Official SwiftUI documentation.

Marks the view as decoratively-named so VoiceOver and other assistive technologies skip it during element traversal. Useful for hero icons or presentational imagery that's already described by adjacent text.

See: Official SwiftUI documentation.

Sets accessibility hint for the view.

See: Official SwiftUI documentation.

Sets an accessibility identifier for the view.

Unlike accessibilityLabel, this value is for UI testing and is not visible to the user. UI testing tools such as XCUITest read it to locate the view, so prefer a stable, machine-readable identifier here.

See: Official SwiftUI documentation.

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.

See: Official SwiftUI documentation.

Sets accessibility label for the view.

See: Official SwiftUI documentation.

Removes the given accessibility traits from the view.

See: Official SwiftUI documentation.

Sets accessibility value for the view.

See: Official SwiftUI documentation.

Sets the background tint color for a Live Activity.

See: Official SwiftUI documentation.

Sets whether text in this view can compress the space between characters when necessary to fit text in a line

See: Official SwiftUI documentation.

Sets aspect ratio constraint.

See: Official SwiftUI documentation.

Disables autocorrection for text input views.

See: Official SwiftUI documentation.

Sets the background of a view.

See: Official SwiftUI documentation.

Adds a background behind the view.

Generates a badge for the view from a localized string key.

See: Official SwiftUI documentation.

The prominence to apply to badges associated with this environment.

See: Official SwiftUI documentation.

Applies blur to a view.

See: Official SwiftUI documentation.

Makes text bold. When applied to Text, it works on all iOS/tvOS versions. When used on regular views, it requires iOS 16.0+/tvOS 16.0+.

See: Official SwiftUI documentation.

Adds a border to a view.

See: Official SwiftUI documentation.

Adjusts the brightness of a view.

See: Official SwiftUI documentation.

Sets the border shape used by buttons within this view.

See: Official SwiftUI documentation.

Sets the button style for button views.

See: Official SwiftUI documentation.

Clips content to bounds.

See: Official SwiftUI documentation.

Clips the view to a specific shape.

See: Official SwiftUI documentation.

Inverts the colors of a view.

See: Official SwiftUI documentation.

Sets the container background of the enclosing container using a view.

See: Official SwiftUI documentation.

Positions this view within an invisible frame with a size relative to the nearest container.

See: Official SwiftUI documentation.

Sets the container shape for the view.

See: Official SwiftUI documentation.

Defines the content shape for hit-testing purposes.

This modifier is essential for making entire view areas (including Spacer or empty space) interactive. Without it, only visible elements like Text or Image respond to tap gestures.

See: Official SwiftUI documentation.

import { HStack, List, Section, Spacer, Text } from "@expo/ui/swift-ui";
import { contentShape, onTapGesture } from "@expo/ui/swift-ui/modifiers";
import { shapes } from "@expo/ui/swift-ui/modifiers";

function InteractiveRow() {
  return (
    <List>
      <Section title="Settings">
        <HStack
          modifiers={[
            contentShape(shapes.rectangle()),
            onTapGesture(() => console.log("Row tapped!"))
          ]}
        >
          <Text>Label</Text>
          <Spacer />
          <Text>Value</Text>
        </HStack>
      </Section>
    </List>
  );
}

Sets the content transition type for a view. Useful for animating changes in text content, especially numeric text. Use with the animation modifier to animate the transition when the content changes.

See: Official SwiftUI documentation.

<Text modifiers={[contentTransition('numericText'), animation(Animation.default, count)]}>
  {count.toString()}
</Text>

Adjusts the contrast of a view.

See: Official SwiftUI documentation.

Sets the size of controls within this view.

See: Official SwiftUI documentation.

Applies corner radius to a view.

See: Official SwiftUI documentation.

Factory function to create modifier configuration objects. This is used by all built-in modifier functions and can be used by 3rd party libraries to create custom modifiers.

// In a 3rd party package
import { createModifier } from '@expo/ui/swift-ui/modifiers';

export const blurEffect = (params: { radius: number; style?: string }) =>
  createModifier('blurEffect', params);

Sets the style for the date picker.

See: Official SwiftUI documentation.

Sets the default anchor point for a scroll view's content.

See: Official SwiftUI documentation.

Sets the default anchor point for a scroll view for a specific role. Pass null to opt out of a specific role while keeping anchors for other roles.

See: Official SwiftUI documentation.

Disables the delete action for a view in a list. Apply to items within a ForEach to prevent them from being deleted.

See: Official SwiftUI documentation.

Disables or enables a view.

See: Official SwiftUI documentation.

Sets or constrains the Dynamic Type size within the view, overriding the value inherited from the system.

Four variants matching SwiftUI's dynamicTypeSize(_:):

• dynamicTypeSize('large') — fixes the Dynamic Type size to a single value
• dynamicTypeSize({ max: 'accessibility3' }) — caps growth at a ceiling (...accessibility3)
• dynamicTypeSize({ min: 'large' }) — sets a floor (large...)
• dynamicTypeSize({ min: 'large', max: 'accessibility3' }) — clamps to a range (large...accessibility3)

min and max are independent: pass either or both. Set it on a <Host> to cascade the constraint to every descendant through the SwiftUI environment. Keep min at or below max, or the range traps natively, like SwiftUI. Per Apple's guidance, prefer capping at an accessibility size over disabling Dynamic Type entirely.

See: Official SwiftUI documentation.

// Cap how large text in a tight layout can grow
<Host modifiers={[dynamicTypeSize({ max: 'accessibility3' })]}>...</Host>

Sets or constrains the Dynamic Type size within the view, overriding the value inherited from the system.

Four variants matching SwiftUI's dynamicTypeSize(_:):

• dynamicTypeSize('large') — fixes the Dynamic Type size to a single value
• dynamicTypeSize({ max: 'accessibility3' }) — caps growth at a ceiling (...accessibility3)
• dynamicTypeSize({ min: 'large' }) — sets a floor (large...)
• dynamicTypeSize({ min: 'large', max: 'accessibility3' }) — clamps to a range (large...accessibility3)

min and max are independent: pass either or both. Set it on a <Host> to cascade the constraint to every descendant through the SwiftUI environment. Keep min at or below max, or the range traps natively, like SwiftUI. Per Apple's guidance, prefer capping at an accessibility size over disabling Dynamic Type entirely.

See: Official SwiftUI documentation.

// Cap how large text in a tight layout can grow
<Host modifiers={[dynamicTypeSize({ max: 'accessibility3' })]}>...</Host>

Sets a SwiftUI environment value.

See: Official SwiftUI documentation.

Sets a SwiftUI environment value.

See: Official SwiftUI documentation.

Controls fixed size behavior.

See: Official SwiftUI documentation.

Sets the font properties of a view.

Pass textStyle to scale with the user's Dynamic Type setting. Combine it with family to scale a custom font.

See: Official SwiftUI documentation for system(_:design:weight:), and custom(_:size:relativeTo:).

// Scales with Dynamic Type
<Text modifiers={[font({ textStyle: 'largeTitle', weight: 'bold' })]}>Hello</Text>

// Custom font that scales relative to the body text style
<Text modifiers={[font({ textStyle: 'body', family: 'Helvetica', size: 18 })]}>Hi</Text>

// Fixed-size system font (no Dynamic Type scaling)
<Text modifiers={[font({ weight: 'bold', design: 'rounded', size: 16 })]}>Static</Text>

Sets the foreground color/tint of a view.

See: Official SwiftUI documentation.

Sets the foreground style of a view with comprehensive styling options.

Replaces the deprecated foregroundColor modifier with enhanced capabilities including colors, gradients, and semantic hierarchical styles that adapt to system appearance.

See: Official SwiftUI documentation.

// Simple usage
<Text modifiers={[foregroundStyle('#FF0000')]}>Red Text</Text>

// Adaptive hierarchical styling
<Text modifiers={[foregroundStyle({ type: 'hierarchical', style: 'secondary' })]}>
  Supporting Text
</Text>

// Linear gradient
<Text modifiers={[foregroundStyle({
  type: 'linearGradient',
  colors: ['#FF6B35', '#F7931E', '#FFD23F'],
  startPoint: { x: 0, y: 0 },
  endPoint: { x: 1, y: 0 }
})]}>
  Gradient Text
</Text>

Sets the frame properties of a view.

See: Official SwiftUI documentation.

Sets the style for the gauge.

See: Official SwiftUI documentation.

Applies a glass effect to a view.

See: Official SwiftUI documentation.

Associates an identity value to Liquid Glass effects defined within a GlassEffectContainer.

See: Official SwiftUI documentation.

Makes a view grayscale.

See: Official SwiftUI documentation.

Specifies a custom alignment anchor for a view that acts as a grid cell.

// Using a preset anchor
<Rectangle
  modifiers={[
    gridCellAnchor({ type: 'preset', anchor: 'center' }),
  ]}
/>

// Using a custom anchor point
<Rectangle
  modifiers={[
    gridCellAnchor({ type: 'custom', points: { x: 0.3, y: 0.8 } }),
  ]}
/>

Tells a view that acts as a cell in a grid to span the specified number of columns.

Asks grid layouts not to offer the view extra size in the specified axes.

Overrides the default horizontal alignment of the grid column that the view appears in.

Sets the header prominence for this view.

Hides or shows a view.

See: Official SwiftUI documentation.

Applies a hue rotation to a view.

See: Official SwiftUI documentation.

Attaches a stable identifier to a view so it can be referenced by scroll target bindings. Use with scrollTargetLayout() on the containing stack and the scrollPosition modifier on a scrollable container.

See: Official SwiftUI documentation.

Allows a view to ignore safe area constraints.

See: Official SwiftUI documentation.

Scales SF Symbols within this view relative to the surrounding text, using one of the standard sizes.

See: Official SwiftUI documentation.

Sets the style for the page index view inside a TabView. SwiftUI only ships a .page index view style, so no style selector is exposed.

See: Official SwiftUI documentation.

Disables interactive dismissal of a sheet.

See: Official SwiftUI documentation.

Marks the view's content as invalidatable. It is restyled with the "pending update" appearance only when the invalidated redaction reason is applied to an ancestor (for example redacted('invalidated')). Maps to SwiftUI's invalidatableContent(_:).

See: Official SwiftUI documentation.

Makes text italic. When applied to Text, it works on all iOS/tvOS versions. When used on regular views, it requires iOS 16.0+/tvOS 16.0+.

See: Official SwiftUI documentation.

Sets the spacing, or kerning, between characters for the text in this view.

See: Official SwiftUI documentation.

Sets the keyboard type for text input views.

See: Official SwiftUI documentation.

Hides the labels of any controls contained within this view.

See: Official SwiftUI documentation.

Sets the style for labels within this view.

See: Official SwiftUI documentation.

Sets layout priority for the view.

See: Official SwiftUI documentation.

Sets the total line height for text in this view.

See: Official SwiftUI documentation.

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.

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.

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.

The distance in points between the bottom of one line fragment and the top of the next.

See: Official SwiftUI documentation.

Sets the background of a row.

See: Official SwiftUI documentation.

Applies an inset to the rows in a list.

See: Official SwiftUI documentation.

Controls the visibility of the separator for a list row.

See: Official SwiftUI documentation.

Sets the vertical spacing between adjacent rows in a list.

See: Official SwiftUI documentation.

Allows a view to ignore safe area constraints.

See: Official SwiftUI documentation.

Sets the spacing between adjacent sections.

Sets the style for a List view.

See: Official SwiftUI documentation.

Adds a luminance to alpha effect to this view.

See: Official SwiftUI documentation.

Applies a mask to the view.

See: Official SwiftUI documentation.

Adds a matched geometry effect to a view.

See: Official SwiftUI documentation.

Controls the dismissal behavior of menu actions.

See: Official SwiftUI documentation.

Sets the preferred order of items for menus presented from this view. With the default automatic order, a menu that opens upward displays its items in reverse. Pass fixed to always keep the order the items were provided in.

See: Official SwiftUI documentation.

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.

See: Official SwiftUI documentation.

Modifies the fonts of all child views to use fixed-width digits, if possible, while leaving other characters proportionally spaced. When applied to Text, modifies the text view's font to use fixed-width digits, while leaving other characters proportionally spaced.

See: Official SwiftUI documentation.

Disables the move action for a view in a list. Apply to items within a ForEach to prevent them from being moved.

See: Official SwiftUI documentation.

An alignment position for text along the horizontal axis.

See: Official SwiftUI documentation.

Applies an offset (translation) to a view.

See: Official SwiftUI documentation.

Adds an onAppear modifier that calls a function when the view appears.

See: Official SwiftUI documentation.

Adds an onDisappear modifier that calls a function when the view disappears.

See: Official SwiftUI documentation.

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.

See: Official SwiftUI documentation.

Adds a long press gesture recognizer.

Fires when SwiftUI's scroll phase changes (e.g., the user begins dragging, the scroll view starts decelerating, or scrolling settles to idle). The second argument is the scroll geometry sampled at the phase transition, useful for reading the final offset on settle without subscribing to per-frame onScrollGeometryChange.

Apply to a SwiftUI ScrollView (and other scrollable views). On iOS below 18.0 the modifier is a no-op.