iPhone Duo has a narrow outer display and a wide inner one. Unlike other iPhones, it can show the status bar on the side of the display, next to the front camera, even in portrait orientation.

To ensure your flows look good on the Duo, take the following steps:

• Keep Safe area on, so text and buttons stay clear of the status bar.
• If an individual element appears behind the status bar, uncheck Ignore safe area for that element.
• Preview both displays, each in both orientations, before publishing, and adjust the layout where needed.
• If a flow went live before Adapty added iPhone Duo support, publish it again to apply the latest layout improvements.
• If the Duo flow needs its own design, show Duo users a separate flow.

Keep text and buttons clear of the status bar and camera

Turn Safe area on to keep these parts of a screen clear of the status bar:

• The main content
• The content of the footer and sliding sheet
• The progress indicator
• Fixed and Absolute elements

The backgrounds of the screen, footer, and sliding sheet still span the whole display, including the area behind the status bar.

Intentionally ignore the iPhone Duo’s safe area

An individual element can override the Safe area setting to appear behind the status bar. This is only recommended for an intentional effect on images and videos.

Give the element a Fixed or Absolute position. Then select the Ignore safe area checkbox.

To make an image or video scroll with the rest of the screen, place it at the top of the screen instead.

Design one layout to fit both displays

Each screen only has one layout. When you design a screen in the Flow & Paywall Builder, follow the tips in this section to make sure it fits both displays of the iPhone Duo.

Select iPhone Duo in the device list. Then preview each display:

• Closed: The status bar takes up a lot of space. Look for:

  • Text that wraps or is cut off
  • A footer that takes up much of the screen
  • A close, restore, or purchase button out of view

  Turn on Vertical scroll or split the content across more screens. To keep the purchase button in view, put it in a sticky footer.

• Open: If you designed your app for portrait orientation only, iOS can still show it in landscape orientation on the inner display.

  Look for content that stretches too wide to read comfortably in both orientations. Put it in a container with a Fixed width. Then center the container by changing the Alignment setting of its parent. The container keeps its width on every device.

  If the container is too wide for the narrowest phones, a warning icon appears next to Width. Reduce the width until the icon disappears.

If you design a layout that suits the Duo, but looks off on other phones, show Duo users a separate flow.

Add iPhone Duo support to live flows

To apply the latest layout improvements to a flow that went live before Adapty added iPhone Duo support, publish it again.

Open the flow in the Flow & Paywall Builder. Make a minor change to enable the Publish to Live button, and click it.

Your app receives the latest published version the next time it requests a placement that serves the flow. To see the result, open the flow in your app on an iPhone Duo or the phone’s simulator in Xcode.

Show iPhone Duo users a separate flow

You may prefer to design a separate flow, tailored for the Duo’s displays, instead of one layout that fits all phones:

1. Copy an existing flow to create the Duo flow.
2. Adjust the copy for both displays. Then publish it.
3. Create a segment with the Device attribute set to iPhone Duo.
4. In the placement that serves the main flow, add an audience with the Duo segment and the Duo flow.
5. If another audience in the placement can also match Duo users, raise the priority of the Duo audience above it.

To see the result, open your app on a real iPhone Duo.