iPhone Duo App Layout Redesign: What Breaks and How to Fix It in SwiftUI, UIKit, Flutter, React Native and Unity

If your iOS app was built with anything older than the iOS 27 SDK, it will run letterboxed on the iPhone Duo's inner screen on 23 October.

Not broken. Just small, centred, with black bars around it. On a $1,999 phone.

That is the default. Most apps in the App Store will look like that on launch day.

The fix is not one flag. Apple's guidance is five changes, and the order matters. Here is that order, with the SwiftUI, UIKit and cross platform versions of each one.

What the Duo is, from a layout point of view

Two screens. A 5.4 inch outer screen and a 7.6 inch inner screen. Both have the same aspect ratio, so content scales proportionally when you open it. A20 Pro chip. iOS 27.1 at launch.

The number that matters is not the diagonal. It is the size class.

Display	Horizontal size class	Vertical size class	Feels like
Outer, 5.4 inch, portrait	compact	regular	a normal iPhone
Inner, 7.6 inch	regular	regular	an iPad mini

Your app keeps the iPhone idiom on both screens. But on the inner screen it gets iPad sized space. Every layout decision that asks "is this an iPhone?" is now wrong there.

Step 1. Rebuild against the iOS 27.1 SDK

This is the whole difference between letterboxed and edge to edge.

Rebuild with the iOS 27 SDK and your content reaches the edges of the inner display. iOS 27.1 also turns on the vertical toolbar layout the Duo uses when open.

No code change. One build. Ship this first, even if nothing else is ready.

Step 2. Stop asking about orientation. Ask about size class

Apple's own words: the inner display doesn't honor your supported interface orientations.

Any branch on UIDevice.current.orientation or supportedInterfaceOrientations returns an answer the inner screen ignores.

SwiftUI

@Environment(\.horizontalSizeClass) private var hSize

var body: some View {
    if hSize == .regular {
        NavigationSplitView { Sidebar() } detail: { Detail() }   // inner display
    } else {
        NavigationStack { List() }                                // outer display
    }
}

UIKit. Read traitCollection.horizontalSizeClass, never UIScreen.main.bounds. UIScreen.main is deprecated here because there are two screens. Use view.window?.windowScene?.screen instead.

Step 3. Safe areas are no longer symmetric

Left and right insets can differ. Code that reads the left inset and mirrors it to the right will misplace content on one side.

Read each inset separately. In UIKit, use inset(by:) with the real UIEdgeInsets.

The fold and the under display camera are both exposed as reserved regions:

GeometryReader { proxy in
    let fold = proxy.reservedRegions(.division)     // the hinge, when partly folded
    let cam  = proxy.reservedRegions(.occlusion)    // the under display camera
}

Standard containers handle these for you. NavigationStack, TabView, List, system sheets and alerts all avoid them. Custom full screen canvases, games and video players do not. If you draw your own UI, you have to read them yourself.

Step 4. Use the two pane container instead of building one

iOS 27.1 adds ArrangementView in SwiftUI and UIArrangementViewController in UIKit. You give it a primary and a secondary view, and the system splits or stacks them around the fold.

ArrangementView { PlayerView() } secondary: { UpNextView() }
    .arrangementViewStyle(.split.axes(.horizontal))

NavigationSplitView and UISplitViewController already adapt on their own. If you hand rolled a master detail layout with a GeometryReader and a width threshold, replace it now.

Step 5. Hinge angle is for effects, not layout

onHingeChange in SwiftUI and UIHingeInteraction in UIKit report closed, partly open or fully open, plus a continuous angle.

Apple is explicit. Use it for interactions and effects. Do not use it to decide layout. Layout comes from size classes and reserved regions.

A camera app that turns the bottom half into a shutter grip when the phone is half folded is the intended use. A news app that changes its column count based on angle is a bug waiting to happen.

Not native? Flutter, React Native, KMP, Unity, MAUI, web wrappers

The Duo is an iOS device, so every framework inherits the same baseline. Rebuild against the iOS 27.1 SDK in Xcode 27.1 or you ship letterboxed. That part is free.

What differs is how much of steps 2 to 5 each framework can express.

Framework	Resize and size class	Asymmetric safe areas	Fold and hinge	Vendor guidance as of 12 Sep 2026
Flutter	LayoutBuilder and MediaQuery.sizeOf work	MediaQuery.paddingOf(context).left and .right separately, works	displayFeatures is Android only. Empty on the Duo	none. Proposal flutter/flutter #192515 is open
React Native	useWindowDimensions works	useSafeAreaInsets per edge, works	no fold API at all	none
Kotlin Multiplatform / Compose MP	window size classes work on iOS	WindowInsets per side, works	no hinge API on the iOS target	none published
Unity and game engines	do not cache the safe rect at launch	read the safe area every frame	nothing built in. A full screen Metal view draws straight across the fold and the camera	none published
.NET MAUI	TwoPaneView is a responsive split on iOS, not fold aware	per edge insets work	Android only Foldable NuGet	none for the Duo
Capacitor, Cordova, PWA	responsive CSS works	env(safe-area-inset-*) per side, works	web content cannot see the fold	none. A cordova-ios request is open

Three rules follow from that table.

One. Stop caching dimensions. Every framework that breaks on the Duo breaks the same way. A screen size read once at startup and reused. Flutter apps that save MediaQuery.of(context).size in initState. React Native apps calling Dimensions.get('window') outside a hook. Unity scripts reading Screen.safeArea in Awake. The Duo changes size while your app is running, several times a day. Read it where you lay out, every time.

Two. Treat left and right as different numbers. Asymmetric safe areas are new on iPhone. Any helper that works out one horizontal inset and applies it to both sides will be wrong on one side. Search your code for .horizontal shorthands.

Three. For the fold you have two honest options. Write a small platform channel or native module that wraps reservedRegions and onHingeChange and passes the rects to your framework. That is about a day for a competent iOS developer. Or accept a fold unaware layout that is still correct: one column checkout, nothing critical pinned to the exact centre, standard containers wherever you can.

What you cannot do is assume the framework will handle it. Today, none of them do.

Games have it worst. A Unity or SDL view is one full screen surface. Rebuilt on the 27.1 SDK it fills the inner display edge to edge, including the strip under the fold and the camera cut out. Nothing stops you drawing the pause button there. Until an engine ships a reserved region query, treat the horizontal and vertical centre lines as a no go zone for anything tappable. Keep the HUD in the corners.

Test it before 23 October

Xcode 27.1 ships an iPhone Duo simulator with fold, rotate and pose controls. It also has an App Resizability check that flags layouts which cannot adapt.

Run it in all four poses. Closed portrait, closed landscape, open vertical, open horizontal. Then run it while folding. That transition is where state gets lost.

What this actually costs

App	Steps	Typical effort
Standard SwiftUI app using NavigationStack and List	1 and 2	1 to 2 days
UIKit app with custom layouts and UIScreen.main	1, 2 and 3	1 to 2 weeks
Game, video or canvas app drawing full screen	all five	2 to 4 weeks
Flutter, React Native or KMP app with cached screen sizes	1, 2 and 3, plus a native bridge if you need the fold	3 to 7 days
Unity or engine game	1, then hand placed HUD and a safe rect read each frame	1 to 2 weeks

Most of this is not Duo specific. It is the adaptive layout work you should have done for iPad and never did. Now there is a $1,999 device making it visible.

Not a developer and just need to know what to ask? Read the owner's version: I Own an App but I'm Not a Developer.

Need it done before launch day?

We build and repair iOS and Flutter apps for founders who want a fixed price and a date, not a discovery call.

A Duo readiness review takes two working days. We run your build in the Duo simulator across all four poses, list every letterbox, clipped safe area and hinge collision, and price the fix. Paid through Upwork, so the money moves when it passes.

---

Cover photo by @heyitsyogesh on X, used with credit. iPhone Duo is a trademark of Apple Inc. Teamz Lab is not affiliated with Apple.

Sources: Apple Newsroom, "Apple unveils iPhone Duo", 9 September 2026. Apple Developer Tech Talks "Prepare your app for iPhone Duo" and "Strike a pose with adaptive layouts on iPhone Duo". Flutter MediaQuery.displayFeatures documentation and flutter/flutter #192515. React Native useWindowDimensions documentation. .NET MAUI TwoPaneView documentation.