Seeing Double with the iPhone Duo

Ignore the Vertical Bar

Although not recommended for everything when using the Duo, there may be times where you want to disable a bar from moving to the vertical side bar.

ContentView()
  .toolbarVerticalBehavior(.disabled)

This may come into play when you have a tab bar that needs to always stay visible, or where you want a set of widgets to stay close to the content in the app.

Reading the Hinge

Yes, there’s an API on the hinge! The iPhone Duo can act like a book, and change what’s displayed on the screen based on how open or closed the hinge is. In SwiftUI there is a new modifier to track this value:

.onHingeChange { _, context in
  // Null hinge means not a Duo!
  if let hinge = context.hinge, hinge.status == .partiallyOpen {
	// can use hinge.angle here 
    }
}

Reserved and Occluded Regions

The frame of the fold created by the hinge can be retrieved by the using a GeometryReader:

// SwiftUI
GeometryReader { proxy in
  let regions = proxy.reservedRegions(kind: .division)
}

This uses the .division kind of reserved region to get that fold region, since it is dividing one frame into two frames.

The front facing FaceTime camera is a different kind of reserved region, an occlusion:

// SwiftUI
GeometryReader { proxy in
  let regions = proxy.reservedRegions(kind: .occlusion)
}

This region is active when the FaceTime camera is active, and inactive when the camera is not active. By monitoring for these regions, and their active state, you can adjust your app layout accordingly.

ArrangementView

A new type of container that sits between navigation containers, like NavigationStack, and content containers like List, called ArrangementView is new in iOS 27. Based on inputs like the size class, the aspect ratio, and any reserved regions, you can determine the appropriate frames and their visibility. This set of data makes up the ArrangementView. Luckily there are built in ArrangementViews that you can use in the system. If you had a primary and secondary view, and you wanted to split it across the screen, you could use the following:

NavigationStack {
  ArrangementView {
    PrimaryView()
  } secondary: {
    SecondaryView()
  }
  .arrangementViewStyle(.split)
}

You can even constrain the views to only split in certain orientations.

However, if you had something like a set of playback controls as your secondary frame, you could use an overlay, so the secondary frame floats on top of the primary:

NavigationStack {
  ArrangementView {
    PrimaryView()
  } secondary: {
    SecondaryView()
  }
  .arrangementViewStyle(.overlay)
}

There’s even more in the tech talks that weren’t discussed here, like when dealing with the camera systems. Speaking of the tech talks, where can you find other information?

Where Can I Go From Here?

Without an Xcode version that has support for the Duo, the most you can do is dive into the Tech talks that Apple released alongside the launch.

The iPhone Duo Resources Page. This page contains pointers to the videos below, as well as links to human interface guidelines, and links to upcoming labs and workshops, as well as Q&As.

Design for iPhone Duo

Prepare your app for iPhone Duo

Raise the bar with iPhone Duo

Strike a pose with adaptive layouts on iPhone Duo

Leverage multiple displays and scenes on iPhone Duo

Build a great camera experience for iPhone Duo

Conclusion

We’re still about a month away from getting our hands on an actual iPhone Duo, but there’s plenty we can do between now and then to get our apps ready for this new, long awaited, device.

• First, get your app built against the iOS 27 SDK, and as soon as it comes out, get it built against iOS 27.1. At this point, the Device Hub will have the ability to run your app in an iPhone Duo Simulator.
• Be sure to exercise all the different ways your app can run on the Duo. Gone are the days of just landscape and portrait orientations.
• If you have custom elements, be sure to use the new API available in iOS 27.1 to avoid the hinge area, and any reserved regions like the under screen camera. Also take advantage of the new layout techniques like Displacements and ArrangementView.

It may sound like a lot, but there is still time to get your app ready for Apple’s new foldable. Check back soon for a more in-depth module on how to develop for the iPhone Duo!