Building for iPhone Duo with SwiftUI

Adaptive Layout

iPhone Duo doesn't add a new device type to design for — it adds more available space. The right mental model is not "does this look right on Duo" but "does this look right at every width my app can be given." The same layout code that handles a resized window on iPad, or Split View on iPhone, is what makes an app work well on Duo.

Size Classes

SwiftUI exposes the current width and height class through the environment. Read them instead of checking device identity:

@Environment(\.horizontalSizeClass)
private var horizontalSizeClass

@Environment(\.verticalSizeClass)
private var verticalSizeClass

var body: some View {
    if horizontalSizeClass == .regular {
        TwoColumnLayout()
    } else {
        SingleColumnLayout()
    }
}

Geometry

For layouts that need finer control than size classes provide, use GeometryReader or the newer containerRelativeFrame to measure the space you're actually given, and lay out proportionally rather than against fixed point values.

GeometryReader { proxy in
    HStack(spacing: 0) {
        SidebarView()
            .frame(width: proxy.size.width * 0.34)
        DetailView()
    }
}

Safe Areas

On Duo, the safe area is asymmetric — the fold consumes space unevenly depending on the pose. Always respect safeAreaInsets rather than assuming symmetric top and bottom padding, and prefer .safeAreaPadding() over manual constants.

ReservedRegion

ReservedRegion is a new API introduced with iOS 27.1 for SwiftUI. It lets custom UI claim the maximum available space while automatically avoiding areas the system reserves for its own chrome — such as controls near the fold. The UIKit equivalent is UIViewReservedRegion.

ContentView()
    .reservedRegion(.systemControls) { region in
        CustomOverlay()
            .padding(region.insets)
    }

Navigation

Use NavigationSplitView instead of a manually built master-detail layout. It collapses to a single column automatically in Compact width and expands into multiple columns in Regular width — exactly the behavior Duo needs as the window resizes.

Split View

Split View on Duo behaves like Split View on iPad: your app can be given any width within a range, and that width can change at any time while the app is running. Test that your layout responds immediately to a live resize, not just to a cold launch at a given width.

Fold Handling

Avoid placing interactive controls or critical content directly across the fold line. Use safe area insets and ReservedRegion to keep tappable elements clear of the hinge, and design your layout so content can flow around it rather than through it.

Multiple Displays

Some experiences benefit from using the outer display as a secondary surface — a preview, now-playing state, or summary — while the inner display shows the primary UI. This is built on multi-scene support; see the Multiple Displays guide for scene lifecycle details.

Testing

Test every pose in the Duo Simulator: closed, half-open, fully open, and both orientations. See the Xcode testing guide for how to drive pose changes from Device Hub, and run through the compatibility checklist before shipping.

Frequently asked questions