How to setup your app for Dynamic Island? - iOS 16.1

Dynamic Island is master stroke from Apple in iOS 16. Tremendous look!

Dynamic Island is almost same as a widget setup. I will describe you the sample code to setup the Dynamic Island

Let’s Create Project

I have created a new project of SwiftUI which create a live activity and this activity is connected with Dynamic Island.

Live Activities display your app’s most current data on the iPhone Lock Screen and in the Dynamic Island.

Note: Following step is must required. Set YES in Supports Live Activities into your app’s info plist.

	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
	<plist version="1.0">
	<dict>
	<key>NSSupportsLiveActivities</key>
	<true/>
	</dict>
	</plist>

view raw Info.plist hosted with ❤ by GitHub

Now I have created a sample attributes file which will help us to display content on the activity and dynamic island.

	import ActivityKit

	struct ActivityAttributesSample: ActivityAttributes {
	public typealias Status = ContentState
	public struct ContentState: Codable, Hashable {
	var value: String
	}
	}

Now I have added a widget for the live activity which will be useful for dynamic island. For that I have added a widget extension.

	//
	// LiveActivitySample.swift
	// LiveActivitySample
	//
	// Created by Ashish Kakkad on 20/09/22.
	//

	import WidgetKit
	import SwiftUI

	struct LiveActivityExpandedViewSample: View {
	var state: ActivityAttributesSample.ContentState
	var body: some View {
	VStack {
	Text ("Hello, CENTER")
	Text(state.value)
	.foregroundColor(.secondary)
	}
	.activityBackgroundTint(.gray)
	}
	}

	@main
	struct LiveActivitySample: Widget {
	let kind: String = "LiveActivitySample"

	var body: some WidgetConfiguration {
	ActivityConfiguration(for: ActivityAttributesSample.self) { context in
	LiveActivityExpandedViewSample(state: context.state)
	} dynamicIsland: { context in
	DynamicIsland {
	DynamicIslandExpandedRegion(.center) {
	LiveActivityExpandedViewSample(state: context.state)
	}
	DynamicIslandExpandedRegion(.leading) {
	Text("LEFT")
	}
	DynamicIslandExpandedRegion(.trailing) {
	Text("RIGHT")
	}
	DynamicIslandExpandedRegion(.bottom) {
	Text("BOTTOM")
	}
	} compactLeading: {
	Image(systemName: "capsule")
	} compactTrailing: {
	EmptyView()
	} minimal: {
	EmptyView()
	}

	}

	}
	}

Here LiveActivityExpandedViewSample will display status when dynamic island is in expanded state and on lock screen of iPhone. ( iPhone 14 Pro 😉 )

Dynamic Island have 4 areas in which I can display my content. i.e. center, leading, trailing and bottom as I have described in sample code above.

Now from main application I have created an activity which will display the dynamic island with live activity on lock screen.

	import SwiftUI
	import ActivityKit

	struct ContentView: View {
	var body: some View {
	VStack {
	Image(systemName: "capsule")
	.imageScale(.large)
	.foregroundColor(.black)
	Text("Hello, Dynamic Island!")
	}.onAppear(perform: {
	startActivity()
	})
	.padding()
	}

	func startActivity() {
	let attributes = ActivityAttributesSample()
	let contentState = ActivityAttributesSample.Status(value: "This is dynamic island!")
	do {
	let _ = try Activity<ActivityAttributesSample>.request(attributes: attributes, contentState: contentState)
	}
	catch (let error) {
	print(error.localizedDescription)
	}
	}
	}

	struct ContentView_Previews: PreviewProvider {
	static var previews: some View {
	ContentView()
	}
	}

view raw ContentView.swift hosted with ❤ by GitHub

Here is the output!

I have added this sample code on my GitHub.

This is only sample code for dynamic island there are lot more stuff to display live data on it.

Let me know if you have any questions, comments, or feedback – via Twitter.

Learn Something New. Share To The World.
Happy Coding 🙂