iPhone Duo hinge, poses and adaptive layouts

When iPhone Duo is partly folded, the hinge splits the inner display in two. Anything that sits across the fold is as hard to read as a photo across a book’s spine. The outer display has its camera in a fixed spot, and the under-display FaceTime camera on the inner display can block part of the screen while it’s on.

Standard containers already handle all of this: NavigationStack, NavigationSplitView, TabView, List and ScrollView adapt to the fold, alerts and popovers move out of the way, and split views go to an even 50/50 split.1 2 You only need the APIs below for layouts you draw yourself. They are new in iOS 27.1, so gate them with #available(iOS 27.1, *) and keep a size-class fallback.1

There is no “pose” API

Apple’s engineers are explicit: there’s no single API that says “book” or “table”.3 Pose changes reach you as size class and trait changes. For layout, use reserved regions and arrangements. For interactions and effects, use the hinge.

Reserved regions

A reserved region is a frame the system already keeps its own UI out of. There are two kinds:

Division: the fold. Active only while the device is folded; when it’s flat, the region is inactive and zero-width.
Occlusion: a smaller area inside your view, such as the inner FaceTime camera while it’s active.

// SwiftUI: from GeometryReader or onGeometryChange
GeometryReader { proxy in
    let regions = proxy.reservedRegions(kind: .division)
    let frames = regions.map(\.frame)
    // ...
}

// UIKit
let regions = view.reservedRegions(kind: .division)
let frames = regions.map(\.frame)

By default you only get active regions. Pass .includeInactive when you want to plan ahead; for example, a grid can prefer an even number of columns whenever a division exists, folded or not, so no cell ever straddles the fold:

let regions = proxy.reservedRegions(kind: .division, options: .includeInactive)

Use reserved regions for custom bars, custom bottom sheets and edge-to-edge controls. Apple’s engineers note that safeAreaInsets alone isn’t enough for those.3

Moving content out of the way

Apple’s design guidance calls this displacement: shifting the frames of existing elements so they stay visible and reachable when the device folds.4

Move an element on its own if it can stand alone; move a group together if its parts belong together.
Don’t move things far from where they came from.
Don’t displace scrolling content. Articles, feeds, documents and lists already adapt by scrolling, and moving them breaks continuity.
Let purpose pick the region. In book pose, alerts go to the trailing side, near where they’ll appear when the phone closes. In table pose (propped up), the top half suits content viewed from a distance, and the bottom half suits controls, because it’s a steadier surface to touch.4
You can change size as well as position. A search field can follow the view it searches and resize as the device folds.

ArrangementView: two views that rearrange themselves

For a primary view and a secondary view, like a player and its up-next queue, iOS 27.1 adds an arrangement container. It takes size classes, aspect ratio and the active fold as input, and decides whether each view is shown and where.1

// SwiftUI
NavigationStack {
    ArrangementView {
        PlayerView()
    } secondary: {
        UpNextView()
    }
}

// UIKit
let arrangementVC = UIArrangementViewController()
arrangementVC.setViewController(PlayerViewController(), for: .primary)
arrangementVC.setViewController(UpNextViewController(), for: .secondary)
let nav = UINavigationController(rootViewController: arrangementVC)

There are two styles:

Split (default) divides the space: side by side when wider than tall, stacked when taller than wide. Restrict it with .arrangementViewStyle(.split.axes(.horizontal)). If it can’t split on the allowed axis, it shows only the primary view.
Overlay stacks one view over the other and goes side by side when the device folds. Read @Environment(\.overlayArrangementZIndex) (or state(for:) in UIKit) to switch a view between collapsed and expanded.

How to choose: if the screen is an HStack/VStack today, use split. If it’s a ZStack, use overlay. Without a pattern to follow, use overlay for a foreground and background, and split for main and detail when neither should be hidden.1

Two rules: ArrangementView provides no navigation, so put it inside a navigation container, never the other way round; and never put one inside a List or ScrollView.1

The hinge API: for effects, not layout

onHingeChange in SwiftUI and UIHingeInteraction in UIKit report a status (closed, partiallyOpen, fullyOpen) and a continuous angle. A nil hinge means the device doesn’t have one, so always check.1

struct InstrumentView: View {
    @State private var pitchBend: Double = 0

    var body: some View {
        GuitarView(pitchBend: pitchBend)
            .onHingeChange { _, context in
                // A nil hinge means the device doesn't have one.
                if let hinge = context.hinge, hinge.status == .partiallyOpen {
                    pitchBend = calculatePitchBend(angle: hinge.angle)
                } else {
                    pitchBend = 0
                }
            }
    }
}

Use the angle for effects and gameplay, like the system’s wallpaper zoom or the pitch bend above. Don’t make layout depend on it: Apple says the update rate and precision are system policy and may change, and there’s no API for detecting exactly 90°.1 3

Checklist

Audit centered layouts: could they be two columns, or displace around the fold?
Use system containers and presentations wherever you can.
Use ArrangementView for custom split or overlay layouts. It works on every device, not just iPhone Duo.
Adopt reserved regions only for high-priority controls you lay out by hand.

Hinge, poses and adaptive layouts