Shape#

The Shape type defines a visual clipping or background shape used in view modifiers such as clipShape, background, or border. It mirrors SwiftUI's Shape protocol and supports standard system shapes and custom rounded rectangle configurations.

Overview#

A Shape can be:

• A named shape keyword ('circle', 'rect', etc.)
• A custom shape object that defines corner radius or per-corner rounding.

These shapes are aligned within the frame of the containing view and are commonly used for clipping, masking, or background styling.

Built-in Shapes#

'rect'#

A standard rectangle. Can be customized with corner radius via the object form.

1clipShape="rect"

'circle'#

A perfect circle centered within the view’s frame. Its radius is half the length of the frame's shortest side.

1clipShape="circle"

'capsule'#

An elongated oval shape that spans the full width or height of the frame. Equivalent to a rounded rectangle with a corner radius equal to half of the shorter side.

1clipShape="capsule"

'ellipse'#

An ellipse that fills the frame.

1clipShape="ellipse"

'buttonBorder'#

A system-resolved shape for button borders. It automatically adapts based on platform and system context.

1clipShape="buttonBorder"

'containerRelative'#

A container-adaptive shape. If a container shape is defined in the view hierarchy, this resolves to a version of that shape. Otherwise, it defaults to a rectangle.

1clipShape="containerRelative"

Custom Rectangle Shapes#

To customize corner appearance on a rectangle, use one of the following object forms:

Rounded Rectangle with Uniform Corner Radius#

1{
2  type: 'rect',
3  cornerRadius: number,
4  style?: RoundedCornerStyle
5}

• cornerRadius: Radius applied uniformly to all corners.
• style (optional): Corner style, such as 'circular' or 'continuous'.

Example#

1clipShape={{
2  type: 'rect',
3  cornerRadius: 12,
4  style: 'continuous'
5}}

Rounded Rectangle with Corner Size#

1{
2  type: 'rect',
3  cornerSize: {
4    width: number
5    height: number
6  },
7  style?: RoundedCornerStyle
8}

• Allows specifying an elliptical radius with different width and height.

Example#

1clipShape={{
2  type: 'rect',
3  cornerSize: { width: 10, height: 20 }
4}}

Rounded Rectangle with Per-Corner Radii#

1{
2  type: 'rect',
3  cornerRadii: {
4    topLeading: number,
5    topTrailing: number,
6    bottomLeading: number,
7    bottomTrailing: number
8  },
9  style?: RoundedCornerStyle
10}

• Gives precise control over the rounding of each corner individually.

Example#

1clipShape={{
2  type: 'rect',
3  cornerRadii: {
4    topLeading: 10,
5    topTrailing: 20,
6    bottomLeading: 0,
7    bottomTrailing: 30
8  }
9}}

RoundedCornerStyle#

Optional style that affects the curvature:

• "circular": Traditional iOS-style round corners.
• "continuous" (default): Smooth and adaptive curves, typically used in modern UI designs.

Summary Table#