ConcentricRectangle#

ConcentricRectangle is a concentric rectangle shape view introduced in iOS 26+. It is designed to create rectangles with progressively inset (concentric) corner geometry, which adapts naturally to modern UI designs.

It is especially suitable for:

• Glass-style buttons
• Card backgrounds
• Interactive clipping regions
• Glass transition masks
• Layered container UI

In Scripting, ConcentricRectangle can be used both as:

• A standalone Shape view

• A specialized shape inside:

  • clipShape
  • background
  • contentShape

1. ConcentricRectangle Core Definition#

1type ConcentricRectangleProps = ShapeProps & ConcentricRectangleShape
2
3/**
4 * A concentric rectangle aligned inside the frame of the view containing it.
5 * @available iOS 26+.
6 */
7declare const ConcentricRectangle: FunctionComponent<ConcentricRectangleProps>

Description#

• ConcentricRectangle is a standard Shape component

• Supports:

  • Fill
  • Stroke
  • Trimmed paths
  • Advanced corner distribution via ConcentricRectangleShape

• Always renders inside the parent view’s frame

• Available on iOS 26 and later only

2. Corner Style System: EdgeCornerStyle#

The core visual behavior of ConcentricRectangle is controlled through EdgeCornerStyle, which defines how each corner behaves.

1type EdgeCornerStyle =
2  | {
3      style: "fixed"
4      radius: number
5    }
6  | {
7      style: "concentric"
8      minimum: number
9    }
10  | "concentric"

2.1 Fixed Corner Style#

1{
2  style: "fixed"
3  radius: number
4}

Used to create traditional fixed-radius rounded corners.

This mode is appropriate for classic static cards and buttons.

2.2 Concentric Corner Style#

1{
2  style: "concentric"
3  minimum: number
4}

Creates a dynamically inset concentric corner effect.

Recommended for:

• Glass-style controls
• Dynamic cards
• Layered UI surfaces
• Animated masking effects

2.3 Shorthand Mode#

1"concentric"

Equivalent to:

1{
2  style: "concentric"
3  minimum: systemDefault
4}

3. ConcentricRectangleShape (Corner Distribution Rules)#

ConcentricRectangleShape defines how corner styles are distributed across all four corners. It supports seven structural configuration patterns.

3.1 Uniform Corners (Most Common)#

1{
2  corners: EdgeCornerStyle
3  isUniform?: boolean
4}

Example:

1<ConcentricRectangle
2  corners={{
3    style: "concentric",
4    minimum: 8
5  }}
6  fill="red"
7/>

3.2 Fully Independent Corners#

1{
2  topLeadingCorner?: EdgeCornerStyle
3  topTrailingCorner?: EdgeCornerStyle
4  bottomLeadingCorner?: EdgeCornerStyle
5  bottomTrailingCorner?: EdgeCornerStyle
6}

Used for:

• Asymmetric cards
• Special edge treatments
• Adaptive container layouts

3.3 Uniform Bottom Corners#

1{
2  uniformBottomCorners?: EdgeCornerStyle
3  topLeadingCorner?: EdgeCornerStyle
4  topTrailingCorner?: EdgeCornerStyle
5}

Typical for bottom sheets and lifted panels.

3.4 Uniform Top Corners#

1{
2  uniformTopCorners?: EdgeCornerStyle
3  bottomLeadingCorner?: EdgeCornerStyle
4  bottomTrailingCorner?: EdgeCornerStyle
5}

Typical for modal headers and floating top panels.

3.5 Uniform Top and Bottom#

1{
2  uniformTopCorners?: EdgeCornerStyle
3  uniformBottomCorners?: EdgeCornerStyle
4}

3.6 Uniform Leading Corners#

1{
2  uniformLeadingCorners?: EdgeCornerStyle
3  topTrailingCorner?: EdgeCornerStyle
4  bottomTrailingCorner?: EdgeCornerStyle
5}

3.7 Uniform Leading and Trailing#

1{
2  uniformLeadingCorners?: EdgeCornerStyle
3  uniformTrailingCorners?: EdgeCornerStyle
4}

4. Shared Shape Properties (ShapeProps)#

1type ShapeProps = {
2  trim?: {
3    from: number
4    to: number
5  }
6
7  fill?: ShapeStyle | DynamicShapeStyle
8
9  stroke?: ShapeStyle | DynamicShapeStyle | {
10    shapeStyle: ShapeStyle | DynamicShapeStyle
11    strokeStyle: StrokeStyle
12  }
13}

4.1 trim (Path Trimming)#

1trim={{
2  from: 0.0,
3  to: 0.5
4}}

Used for:

• Progressive path animations
• Partial rendering effects
• Stroke-only transitions

4.2 fill (Shape Fill)#

1fill="red"
2fill="ultraThinMaterial"

Supports:

• Solid colors
• System materials
• Gradient styles

4.3 stroke (Outline Rendering)#

1stroke="blue"
2
3stroke={{
4  shapeStyle: "blue",
5  strokeStyle: {
6    lineWidth: 2
7  }
8}}

5. Using ConcentricRectangle in View Modifiers#

5.1 As clipShape#

1clipShape?: Shape | "concentricRect" | ({
2  type: "concentricRect"
3} & ConcentricRectangleShape)

Example:

1<VStack
2  clipShape={{
3    type: "concentricRect",
4    corners: {
5      style: "concentric",
6      minimum: 10
7    }
8  }}
9/>

Used for:

• Actual visual clipping
• Glass transition masking
• Blur boundary control

5.2 As background#

1background?: ShapeStyle | DynamicShapeStyle | {
2  style: ShapeStyle | DynamicShapeStyle
3  shape: Shape | "concentricRect" | ({
4    type: "concentricRect"
5  } & ConcentricRectangleShape)
6} | VirtualNode | {
7  content: VirtualNode
8  alignment: Alignment
9}

Example:

1<VStack
2  background={{
3    style: "ultraThinMaterial",
4    shape: {
5      type: "concentricRect",
6      corners: "concentric"
7    }
8  }}
9/>

5.3 As contentShape (Hit Testing Area)#

1contentShape?: Shape | {
2  kind: ContentShapeKinds
3  shape: Shape | "concentricRect" | ({
4    type: "concentricRect"
5  } & ConcentricRectangleShape)
6}

Defines the interactive region for:

• Taps
• Gestures
• Hover detection
• Drag operations

6. Full Example Breakdown#

1<ZStack
2  frame={{
3    width: 300,
4    height: 200
5  }}
6  containerShape={{
7    type: "rect",
8    cornerRadius: 32
9  }}
10>
11  <ConcentricRectangle
12    corners={{
13      style: "concentric",
14      minimum: 8
15    }}
16    fill="red"
17  />
18</ZStack>

This configuration produces:

• A fixed-radius outer container
• A concentric inner rectangle
• A layered depth effect between the two shapes
• A visually emphasized inner hierarchy via red fill

7. Design and Implementation Notes#

1. minimum should never exceed half of the smallest side of the container.

2. Concentric corner styles work best when combined with:

   • Glass material
   • Blur
   • Opacity layering

3. When used as contentShape, it only affects hit-testing, not rendering.

4. When used as clipShape, it physically clips the rendered content.

5. Nested ConcentricRectangle layers create stronger depth cues than uniform rounded rectangles.