Mastering Dynamic Island (SwiftUI)

The DynamicIsland type in a live activity's ActivityConfiguration declares how the activity renders around the iPhone camera cutout. It is not a view: it is a set of slots the system picks from by context.

The Three Presentations

The system chooses the presentation, not you:

• Compact leading plus compact trailing, when yours is the only live activity.
• Minimal, a single detached trailing bubble, when several live activities run at once.
• Expanded, when the user long-presses the island.

Expanded Regions and Priority

The expanded island has four regions: .leading, .trailing, .center, and .bottom. A priority parameter tells the system which region wins space during sizing.

DynamicIsland {
  DynamicIslandExpandedRegion(.leading, priority: 1) {
    LiveActivityView(context: context)
  }
  DynamicIslandExpandedRegion(.trailing) { LiveActivityView(context: context) }
  DynamicIslandExpandedRegion(.center) { LiveActivityView(context: context) }
  DynamicIslandExpandedRegion(.bottom) { LiveActivityView(context: context) }
} compactLeading: {
  Image(systemName: "circle").foregroundColor(.green)
} compactTrailing: {
  Text(verbatim: context.state.progress.formatted(.percent.precision(.fractionLength(0))))
} minimal: {
  Image(systemName: "circle").foregroundColor(.green)
}

Wide Content and Tint

When the leading content is too wide for the space beside the camera, dynamicIsland(verticalPlacement: .belowIfTooWide) drops it below the cutout instead of truncating.

DynamicIslandExpandedRegion(.leading, priority: 1) {
  LiveActivityView(context: context)
    .dynamicIsland(verticalPlacement: .belowIfTooWide)
}

The compact and minimal presentations fill with black by default; keylineTint on the DynamicIsland changes that color.

DynamicIsland {
  // regions
}
.keylineTint(.white)

Requires iOS 16.1 in the widget extension, same as live activities.