Modifiers

The accessibility hint.

The accessibility label.

The accessibility value.

Width/height aspect ratio and content mode.

The background color (hex string). For example, #FF0000.

Optional shape to clip the background. If not provided, the background will fill the entire view.

Background color and alignment.

Text view to display as a badge. Set the value to nil to hide the badge.

Select the type of badge

The blur radius.

The border parameters. Color and width.

Brightness adjustment (-1 to 1).

The button style.

Whether to clip content.

The clipping shape.

Corner radius for rounded rectangle (default: 8)

Whether to invert colors.

A shape configuration from the shapes API

Contrast multiplier (0 to infinity, 1 = normal).

The corner radius value.

Whether the view should be disabled.

Whether the view should use its ideal width or height.

The font configuration. When family is provided, it uses Font.custom(). When family is not provided, it uses Font.system() with the specified weight and design.

The foreground color (hex string).

The foreground style configuration. Can be:

Simple Color (string):

• Hex colors: '#FF0000', '#RGB', '#RRGGBB', '#AARRGGBB'
• Named colors: 'red', 'blue', 'green', and so on.

Explicit Color Object:

{ type: 'color', color: '#FF0000' }

Hierarchical Styles (Semantic): Auto-adapting semantic styles that respond to light/dark mode and accessibility settings:

{ type: 'hierarchical', style: 'primary' }    // Most prominent (main content, headlines)
{ type: 'hierarchical', style: 'secondary' }  // Supporting text, subheadlines
{ type: 'hierarchical', style: 'tertiary' }   // Less important text, captions
{ type: 'hierarchical', style: 'quaternary' } // Subtle text, disabled states
{ type: 'hierarchical', style: 'quinary' }    // Most subtle (iOS 16+, fallback to quaternary)

Linear Gradient:

{
  type: 'linearGradient',
  colors: ['#FF0000', '#0000FF', '#00FF00'],
  startPoint: { x: 0, y: 0 },    // Top-left
  endPoint: { x: 1, y: 1 }       // Bottom-right
}

Radial Gradient:

{
  type: 'radialGradient',
  colors: ['#FF0000', '#0000FF'],
  center: { x: 0.5, y: 0.5 },    // Center of view
  startRadius: 0,                // Inner radius
  endRadius: 100                 // Outer radius
}

Angular Gradient (Conic):

{
  type: 'angularGradient',
  colors: ['#FF0000', '#00FF00', '#0000FF'],
  center: { x: 0.5, y: 0.5 }     // Rotation center
}

The frame parameters. Width, height, minWidth, maxWidth, minHeight, maxHeight, idealWidth, idealHeight and alignment.

The glass effect parameters. Variant, interactive, tint and shape.

The id of the glass effect.

The namespace id of the glass effect. Use Namespace component to create a namespace.

Grayscale amount (0 to 1).

The unit point that defines how to align the view within the bounds of its grid cell.

The number of columns that the view should consume when placed in a grid row.

The dimensions in which the grid shouldn’t offer the view a share of any available space. This prevents a flexible view like a Spacer, Divider, or Color from defining the size of a row or column.

The HorizontalAlignment guide to use for the grid column that the view appears in.

The prominence to apply.

Whether the view should be hidden.

Hue rotation angle in degrees.

The safe area regions to ignore and the edges to expand into.

Layout priority value.

The amount of space between the bottom of one line and the top of the next line in points. This value is always nonnegative. Otherwise, the default value will be used.

The row color (hex string). For example, #FF0000.

The inset to apply to the rows in a list.

The visibility to apply.

The edges where the separator visibility applies.

The margins to apply to the section in a list.

The spacing to apply.

The masking shape.

Corner radius for rounded rectangle (default: 8).

The id of the view.

The namespace id of the view. Use Namespace component to create a namespace.

The menu action dismiss behavior.

A value that you use to align multiple lines of text within a view.

The offset parameters: x and y.

Function to call when the view appears.

Function to call when the view disappears.

Function to call when long pressed.

Minimum duration for long press (default: 0.5s)

Function to call when tapped.

Opacity value between 0 and 1.

Overlay color and alignment.

The padding parameters: top, bottom, leading, trailing, horizontal, vertical and all.

The style for the picker.

Async function to call when refresh is triggered.

Rotation angle in degrees.

Saturation multiplier (0 to infinity, 1 = normal).

Scale factor (1.0 = normal size).

The visibility of the background.

The keyboard dismiss mode.

The shadow parameters: radius, offset (x, y) and color.

Controls whether the strikethrough is visible (true to show, false to hide).

The label to display in the keyboard's return key.

The tag to set on the view.

The text field style.

Enable selection

The tint color (hex string). For example, #FF0000.

The truncation mode that specifies where to truncate the text within the text view, if needed. You can truncate at the beginning, middle, or end of the text view.

Controls whether the underline is visible (true to show, false to hide).

The z-index value.