Skip to content

Keep content off the fold with division regions

MajorNeeds iOS 27.1 SDKlayout

What you see

A control, a face in a photo, or a line of text lands directly on the fold when the device is partially open.

Division regions versus occlusion regions on iPhone DuoTwo diagrams. On the left, a division region — the hinge — runs across the display and splits it into two usable areas; it is active only while the device is folded and has zero width when flat. On the right, an occlusion region — the under-display camera — sits on top of one corner, covering content rather than dividing the screen.usableusableHINGEDivision regionsplits the area in twokind: .divisionone usable areaCAMOcclusion regioncovers, does not dividekind: .occlusion
A division region is active only while the device is folded and has zero width when flat, so your layout must handle it appearing and disappearing — not merely moving.

When the device is partially folded — held like a book, or propped on a table — the hinge splits the inner display into two usable areas. Content placed across that split is physically bent away from the viewer.

The API

iOS 27.1 introduces ReservedRegion in SwiftUI and UIViewReservedRegion in UIKit. A division region divides a larger area into smaller ones; the hinge is the example that matters here.

GeometryReader { proxy in
    let regions = proxy.reservedRegions(kind: .division)
    let frames = regions.map(\.frame)
    // Lay out so that nothing important intersects `frames`.
}
// UIKit
let regions = view.reservedRegions(kind: .division)
let frames = regions.map(\.frame)

The critical behavioural detail: a division region is active only while the device is folded, and has zero width when the device is flat. Your layout therefore needs to respond to regions appearing and disappearing, not just to their position.

If you want to plan for a region that is not currently active — to avoid a layout jump when the user starts folding — ask for inactive regions too:

GeometryReader { proxy in
    let regions = proxy.reservedRegions(
        kind: .division,
        options: .includeInactive
    )
    let frames = regions.map(\.frame)
}

Adapt with small moves

Apple’s design guidance favours containers that adapt on their own — the split view in Notes narrows each pane so both stay clearly visible as the device folds. Two habits make custom layouts behave the same way:

Prefer arrangements where you can

For the common main-and-secondary case, ArrangementView already consumes active division regions as an input and places your two views on either side of the fold. Query regions directly when you need finer control than an arrangement gives — a custom canvas, a game board, a photo editor.

How to verify

In Device Hub, fold the simulator partway and confirm nothing interactive or load-bearing sits on the division. Then open it flat and confirm the layout closes up cleanly rather than leaving a gap where the hinge used to be.

Applies to

← All checksFree evaluation