
Cryptocurrency Development
We deliver customized solutions that ensure reliability, scalability, and seamless integration with existing blockchain ecosystems.
In this Article
What is a dynamic island?
Dynamic Island is one of Apple’s most innovative features. Apple introduced it with the iPhone 14 Pro series. It replaces the notch and adapts to your activities. This design offers a smooth user experience. It shows system alerts, background tasks, and interactive notifications. The Dynamic Island feature is a new UI element on iOS platforms that helps show notifications and pop-up components. It adds dynamics and interactiveness.
This feature enhances user engagement by allowing real-time updates for apps such as:
As iPhone Dynamic Island becomes more popular, developers want to add it to their apps. This guide shows you how to integrate Dynamic Island with SwiftUI. It includes technical steps, code snippets, and best practices.
It's common practice in iOS applications development to use Live Activities and WidgetKit to create real-time updates. These updates will show up on Dynamic Island.
Before you start using the iPhone Dynamic Island, ensure you have:
After this
Configure Info.plist
Enable Push Notifications to Your App:
To use Dynamic Island, we define Activity Attributes that describe the live event.
import ActivityKit
import Foundation
struct WidgetAttributes: ActivityAttributes, Identifiable, Equatable {
public typealias Content = ContentState
// MARK: - ContentState
public struct ContentState: Codable, Hashable {
var tokenName: String
}
// MARK: - Properties
var id = UUID()
var price: Double
var percentage: Double
var name: String
var isSignalUp: Bool
static func == (lhs: Self, rhs: Self) -> Bool {
lhs.id == rhs.id
}
}
This step defines how Live Activities will appear on the iPhone Dynamic Island.
Create a Widget Extension
import SwiftUI
import WidgetKit
// MARK: - AppWidget (Main Widget)
struct AppWidget: Widget {
var body: some WidgetConfiguration {
ActivityConfiguration(for: WidgetAttributes.self) { context in
LiveActivityView(context: context.attributes)
} dynamicIsland: { context in
let viewModel = WidgetViewModel(attributes: context.attributes)
return DynamicIsland {
DynamicIslandExpandedRegion(.leading) {
imageWithTextPair(imageName: "apple.logo", text: "Signal Up", fontSize: 12)
}
DynamicIslandExpandedRegion(.trailing) {
expandedTrailingView()
}
DynamicIslandExpandedRegion(.center) {
expandedCenterView(viewModel: viewModel)
}
DynamicIslandExpandedRegion(.bottom) {
expandedBottomView(viewModel: viewModel)
}
} compactLeading: {
compactLeadingView(viewModel: viewModel)
} compactTrailing: {
compactTrailingView()
} minimal: {
AnyView(EmptyView())
}
.keylineTint(.cyan)
}
}
}
// MARK: - Views
func expandedBottomView(viewModel: WidgetViewModel) -> some View {
HStack {
expandedButtonView(viewModel: viewModel, title: "Signal Up", color: .customGreen,
isSignalUp: viewModel.attributes.isSignalUp)
expandedButtonView(viewModel: viewModel, title: "Signal Down", color: .customRed,
isSignalUp: !viewModel.attributes.isSignalUp)
}
}
func expandedButtonView(viewModel: WidgetViewModel, title: String, color: Color, isSignalUp: Bool) -> some View {
if let generatedURL = viewModel.generateURL() {
return AnyView(
Link(destination: generatedURL) {
Text(title)
.font(.system(size: 14, weight: .semibold))
.padding(7)
.frame(maxWidth: .infinity)
.background(isSignalUp ? color : .gray.opacity(0.2))
.clipShape(Capsule())
.foregroundColor(isSignalUp ? .black.opacity(0.8) : color)
}
)
} else {
return AnyView(Text("Invalid URL").foregroundColor(.white))
}
}
func expandedCenterView(viewModel: WidgetViewModel) -> some View {
VStack(spacing: 6) {
HStack(spacing: 0) {
Image("solana-logo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 20, height: 20)
Text(viewModel.attributes.name)
.font(.system(size: 12, weight: .semibold))
.foregroundColor(.white)
}
.padding(.horizontal)
HStack(spacing: 0) {
Text(viewModel.formattedPrice())
.font(.system(size: 26, weight: .semibold))
.foregroundColor(.white)
Text(viewModel.formattedPercentage())
.font(.system(size: 10, weight: .semibold))
.padding(4)
.background(viewModel.signalColor())
.clipShape(Capsule())
.foregroundColor(.black)
}
}
}
func compactLeadingView(viewModel: WidgetViewModel) -> some View {
HStack(spacing: 4) {
Image("solana-logo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 24, height: 24)
Text(viewModel.formattedPercentage())
.font(.system(size: 12, weight: .semibold))
.foregroundColor(viewModel.signalColor())
}
.padding(.leading, 6)
}
func compactTrailingView() -> some View {
Image("chart")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 45, height: 20)
}
func expandedTrailingView() -> some View {
HStack(spacing: 6) {
Text("Open App")
.font(.system(size: 12, weight: .semibold))
.foregroundColor(.white)
Image(systemName: "chevron.right")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 8, height: 8)
.foregroundColor(.white)
}
.frame(width: 80)
}
func imageWithTextPair(imageName: String, text: String, fontSize: CGFloat) -> some View {
HStack(spacing: 6) {
Image(systemName: imageName)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 14, height: 14)
.foregroundColor(.white)
Text(text)
.font(.system(size: fontSize, weight: .semibold))
.foregroundColor(.white)
}
.frame(width: 80)
}
// MARK: - Create Activity
func createActivity() {
let signal = generateRandomSignal()
let attributes = WidgetAttributes(
price: signal.price,
percentage: signal.percentage,
name: signal.name,
isSignalUp: signal.isSignalUp
)
let content = WidgetAttributes.Content(tokenName: signal.name)
do {
// Request a new activity
let activity = try Activity<WidgetAttributes>.request(
attributes: attributes,
content: ActivityContent(state: content, staleDate: nil),
pushType: .token
)
// Update state after activity creation
DispatchQueue.main.async {
self.currentActivity = activity
self.activityID = UUID()
}
} catch {
// Handle any errors that may occur
print("Error requesting activity: \(error.localizedDescription)")
}
}
// MARK: - End Activity
func endActivity() {
guard let activity = currentActivity else { return }
let endContent = ActivityContent(state: WidgetAttributes.Content(tokenName: "Ended"), staleDate: Date())
// MARK: - End activity asynchronously
Task {
await activity.end(endContent, dismissalPolicy: .immediate)
DispatchQueue.main.async {
withAnimation(.easeInOut(duration: 0.5)) {
self.currentActivity = nil
self.activityID = UUID()
}
}
}
}
You can show real-time updates on the iPhone 14 Pro and newer models. Integrate Dynamic Island with SwiftUI and Apple Live Activities. By following this guide, you have:
You can use SwiftUI and WidgetKit to create interactive experiences. This keeps users informed without having to open the app. Dynamic Island boosts user engagement by showing important updates. These include order tracking, sports scores, ride-sharing progress, and more.
Test your setup on a real iPhone 14 Pro or newer. Check for smooth transitions and updates.
Okay, let's remember this
If you are experienced in custom mobile app development: android apps development services, or iOS app development, or you provide native app development services, you should always step in parallel with technology to produce what today's user wants.
Dynamic Island is Apple's way of turning the iPhone's notch into something useful. Instead of a static black cutout, it's an interactive area that changes shape to show important updates (incoming calls, music playing, timers, or directions). The coolest thing - without interrupting what you're doing.
What is a dynamic island?
Dynamic Island is one of Apple’s mo...
Encryption is not just a digital trend but a critical necessity in ...
Mobile banking apps have transformed consumer contacts with banks. ...
Designed as a distributed peer-to-peer digital currency, Bitcoin's ...
Application Programming Interfaces (APIs) are powerful tools for co...
We deliver customized solutions that ensure reliability, scalability, and seamless integration with existing blockchain ecosystems.
We create secure, scalable applications for lending, staking, and trading, aligned with blockchain standards.
User-focused mobile app development solutions ensure intuitive design, performance, and the latest technologies.
We build tailored AI-driven products that enhance automation, decision-making, and efficiency.
Our team builds personalized solutions that meet your unique needs, helping you improve efficiency.
Through Smart Contract Development we create automated blockchain-based agreements, ensuring transparency, and accuracy.