How to: Create Dynamic Island Widgets on iOS 16.1 or above

It can do more things than your thought…

Dynamic Island Demo running on iOS16.1 Simulator

Previously, we learned how to create a beautiful Live Activities Widget. As Apple announced iOS 16.1 beta release, developers can now implement Live Activities Widgets with the iPhone 14 Pro series’ Dynamic Island. Let’s have a go-through with it.

What is Dynamic Island?

On iPhone 14 Pro and iPhone 14 Pro Max, you can check alerts and current activity in progress — such as music playing, your timer, an AirDrop connection, and directions from Maps — in Dynamic Island on the Home Screen or in any app. The Dynamic Island appears whenever your iPhone is unlocked. — Apple Support

Modes

Explanation of the Dynamic Island — Apple Developer Website

Expanded view in the Dynamic Island. — Apple Developer Website

Leading and trailing expanded view below TrueDepth camera. — Apple Developer Website

Steps

1. We need to create a project with Widget Extension. You may refer to the previous tutorial.
2. The minimum OS version is 16.1, you may:
   - Set target to iOS 16.1 for the whole project
   - Use if #available to include code with 16.1 or above
3. In ActivityConfiguration, we use the live activities view (banner) to support devices that don’t support Dynamic Island.
4. Refer to the modes mentioned above, you can create different looks inside dynamicIsland base on user behaviors, e.g., when the users tap the island, the info will popup:
   DynamicIslandExpandedRegion(.leading), DynamicIslandExpandedRegion(.trailing),
   DynamicIslandExpandedRegion(.center), and
   DynamicIslandExpandedRegion(.bottom)
5. Also, compact mode and minimal will work when users just need to view the live data on top without interacting:
   compactLeading,
   compactTrailing,
   minimal

Sample Widget Code Snippet