Modifiers

Sets accessibility hint for the view.

See: Official SwiftUI documentation.

Sets accessibility label for the view.

See: Official SwiftUI documentation.

Sets accessibility value for the view.

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 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.

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 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. Supports both custom font families and system fonts with weight and design options.

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

// Custom font family
<Text modifiers={[font({ family: 'Helvetica', size: 18 })]}>Custom Font Text</Text>

// System font with weight and design
<Text modifiers={[font({ weight: 'bold', design: 'rounded', size: 16 })]}>System Font Text</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.

Allows a view to ignore safe area constraints.

See: Official SwiftUI documentation.

Disables interactive dismissal of a sheet.

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 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.

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.

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.

Adds a long press gesture recognizer.

Adds an action to perform when the user submits a value to this view (e.g. pressing return in a text field).

See: Official SwiftUI documentation.

Adds a tap gesture recognizer.

See: Official SwiftUI documentation.

Sets the opacity of a view.

See: Official SwiftUI documentation.

Overlays another view on top.

See: Official SwiftUI documentation.

Sets padding on a view. Supports individual edges or shorthand properties.

See: Official SwiftUI documentation.

Sets the style for the picker.

See: Official SwiftUI documentation.

Controls interaction with the content behind a sheet.

See: Official SwiftUI documentation.

Sets the available heights for a sheet presentation.

See: Official SwiftUI documentation.

Controls the visibility of the drag indicator on a sheet.

See: Official SwiftUI documentation.

Sets the style for the progress view.

See: Official SwiftUI documentation.

Marks a view as refreshable. Adds pull-to-refresh functionality.

See: Official SwiftUI documentation.

Sets the mode by which SwiftUI resizes an image to fit its space.

See: Official SwiftUI documentation.

Applies a 3D rotation transformation.

See: Official SwiftUI documentation.

Applies rotation transformation.

See: Official SwiftUI documentation.

Adjusts the saturation of a view.

See: Official SwiftUI documentation.

Applies scaling transformation.

See: Official SwiftUI documentation.

Specifies the visibility of the background for scrollable views within this view.

See: Official SwiftUI documentation.

Disables or enables scrolling in scrollable views.

See: Official SwiftUI documentation.

Controls how the keyboard is dismissed when scrolling.

See: Official SwiftUI documentation.

Sets the scroll snapping behavior for scrollable views. Use with scrollTargetLayout on the content container.

See: Official SwiftUI documentation.

Configures a layout container as a scroll target layout for view-aligned snapping. Apply to VStack or HStack inside a ScrollView.

See: Official SwiftUI documentation.

Adds a shadow to a view.

See: Official SwiftUI documentation.

Applies a strikethrough to the text.

See: Official SwiftUI documentation.

Specifies the label to display in the keyboard's return key. For example, 'done'.

<TextField
  modifiers={[
    submitLabel('search'),
  ]}
/>

Sets a tag on a view.

See: Official SwiftUI documentation.