Developer guide

How to make your app iPhone Duo ready

By SwiftSoft · Updated · Based on Apple’s developer documentation

The short answer

Rebuild your app with Xcode 27 so it uses the full screen, replace fixed screen dimensions with size classes and container-relative layout, let system navigation containers handle bars and the fold, adapt custom views to reserved regions, and test every pose: closed, open, partially folded, and rotated.

What changes on iPhone Duo

iPhone Duo is Apple’s first foldable: a compact outer display and a large inner display, each with a front camera. As people open, close, partially fold, and rotate it, your app moves between displays and has to re-layout on the fly. Apple shows six poses worth designing for: closed, folded like a tent, open wide, partially folded, open tall, and folded like a laptop.

Two things catch most apps out. First, there’s a fold running through the inner display that content shouldn’t sit on when the phone is partially folded. Second, in some poses the system moves navigation bars, toolbars, and tab bars to the side of the screen, stacked vertically.

1. Rebuild with Xcode 27

Start here, because it’s the cheapest win. Apps built with Xcode 26 or earlier don’t extend under the status bar and camera on iPhone Duo, so they never use the whole display. Rebuilding with the latest Xcode fixes that. Then run the app in the iPhone Duo simulator or on a device to see what breaks.

2. Make every layout resizable

If your app already resizes well on iPad, on Mac, or in iPhone Mirroring, you’re most of the way there. If not:

  • Prefer system containers: NavigationStack, NavigationSplitView, tab views, and split views. They already account for both displays, the fold, and the camera.
  • Size views relative to their container, never to fixed iPhone dimensions.
  • Base layout math on your scene’s or view’s bounds, not the screen. Code that reads the screen size once and caches it is the most common breakage.
  • In UIKit, use Auto Layout and react to horizontalSizeClass and verticalSizeClass changes with automatic trait tracking.
  • Don’t make layout decisions from userInterfaceIdiom or the interface orientation. Neither tells you how much space you actually have on a foldable.

In SwiftUI, a size-class switch is usually all a screen needs:

struct OrdersScreen: View {
    @Environment(\.horizontalSizeClass) private var width

    var body: some View {
        if width == .regular {
            HStack { OrderList(); OrderDetail() }   // open: show both
        } else {
            OrderList()                              // closed: one column
        }
    }
}

3. Prepare bars for vertical presentation

On the outer display, and for some views on the inner display, iPhone Duo presents bars vertically on the side of the screen. You only get that behavior if you use the system’s bar support:

  • In SwiftUI, attach toolbar items with .toolbar to a NavigationStack or NavigationSplitView. In UIKit, set toolbar items on a view controller inside a navigation controller instead of building a custom bar.
  • Give every toolbar item both an icon and a title. Vertical bars show icons, so an item with only a title (or a custom view) won’t appear there.
  • Keep primary navigation (Back, Close) at the top and prominent actions like Done right after. Use topBarPinnedTrailing placement for Done in SwiftUI, or pinnedTrailingGroup in UIKit.
  • Control what drops into the overflow menu with visibilityPriority, and opt items in or out of vertical layout with axisBehavior.
  • Custom views can check whether bars are vertical with the toolbarVerticalEdge environment value (SwiftUI) or the verticalBarEdge trait (UIKit). Hero images can extend under a vertical bar with backgroundExtensionEffect().

4. Arrange content around the fold

For screens with a main view and a supporting view (a map and its details, a player and its queue), use an arrangement view: ArrangementView in SwiftUI or UIArrangementViewController in UIKit. It places the two views around the fold for you, in one of two styles:

  • Split: side by side when the space is wide, stacked when it’s tall, adjusted around the fold. The natural fit for layouts you’d otherwise build with HStack or VStack.
  • Overlay: the primary view on top of the secondary while the phone is closed or fully open, then split on either side of the fold when it’s partially folded. The fit for ZStack-style layouts.

You can limit a style to one axis, for example only splitting horizontally. Avoid nesting an arrangement view inside a split view, list, or scroll view, where part of it can become unreachable.

5. Adapt custom views to reserved regions

System containers dodge the fold and the inner camera on their own. Custom views need to ask where they are. iOS calls these reserved regions, and there are two kinds: divisions, where the fold splits a view, and occlusions, where a camera covers part of it.

  • SwiftUI: inside a GeometryReader, call reservedRegions(kind:options:layoutDirectionBehavior:) on the geometry proxy.
  • UIKit: call reservedRegions(kind:options:) on the view.
  • Regions can be active or inactive. The fold, for instance, only matters while the phone is partially folded, so re-check when the pose changes.

6. Handle cameras that change direction

If your app captures photos or video, the active camera can end up facing the other way when someone opens, closes, or rotates the phone, because your app moves between displays. Choose cameras by the direction they face rather than assuming front means toward the user, and handle the switch mid-session.

7. Test every pose

Walk through every screen, sheet, and popover in each pose, and rotate the phone in each one. Check that:

  • Views resize cleanly in every supported orientation and pose.
  • Navigation bars, toolbars, and tab bars look right when the system shows them vertically.
  • No sheet or popover lands awkwardly after folding or opening.
  • No control sits in the fold where it’s hard to see or tap.
  • Scroll position and in-progress input survive the transition.

React Native and Expo apps

Cross-platform apps still ship inside a native iOS project, so step 1 applies: rebuild that project with Xcode 27. Then make sure your layouts respond to window-size changes, for example with useWindowDimensions, instead of reading the screen size once at launch. Custom native modules that touch layout, toolbars, or the camera need the same review as a native app.

FAQ

Does my app need an update to run on iPhone Duo?+

No, existing apps run. But apps built with Xcode 26 or earlier don’t extend under the status bar and camera, so they don’t use all of the screen, and layouts built around fixed iPhone dimensions can look stretched or awkward when the phone opens or folds.

What is the fastest way to make an app iPhone Duo ready?+

Rebuild with Xcode 27, replace fixed screen sizes with size classes and container-relative layout, move bars into system navigation containers, then test every pose. Apps already built to resize on iPad or Mac are most of the way there.

How do I keep content out of the fold?+

System containers avoid it automatically. For custom views, read the reserved regions (GeometryProxy.reservedRegions in SwiftUI, UIView.reservedRegions in UIKit) and lay out around active divisions, or use an arrangement view to split content on either side of the fold.

Do React Native and Expo apps need changes for iPhone Duo?+

They run inside a native iOS project, so rebuild that project with Xcode 27, and make sure layouts react to window-size changes (for example with useWindowDimensions) instead of reading the screen size once at startup.

Source: Apple, Preparing your app for iPhone Duo.

Discover if Swiftsoft is Your Perfect Fit

Schedule an informative call with our experts to discuss your unique needs and discover how Swiftsoft can elevate your service.

PlansContactClient loginPortfolioServicesTerms & conditionsPrivacy policy