---
title: "Prepare flows for iPhone Duo"
description: "Best practices to follow for flows that support iPhone Duo"
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

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**](#keep-text-and-buttons-clear-of-the-status-bar-and-camera) on, so text and buttons stay clear of the status bar.
- If an individual element appears behind the status bar, uncheck [**Ignore safe area**](#intentionally-ignore-the-iphone-duos-safe-area) for that element.
- [Preview both displays](#design-one-layout-to-fit-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](#add-iphone-duo-support-to-live-flows) to apply the latest layout improvements.
- If the Duo flow needs its own design, [show Duo users a separate flow](#show-iphone-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](builder-containers#footer) and [sliding sheet](builder-containers#sliding-sheet)
- The [progress indicator](builder-loaders-and-progress-bars)
- **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**](manage-paywall-ui-elements#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](manage-paywall-ui-elements#ignore-safe-area) 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](builder-ui#view-controls-bottom-toolbar). Then preview each display:

- Closed **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**](paywall-layout-and-products#scroll) or split the content across more screens. To keep the purchase button in view, put it in a sticky [footer](builder-containers#footer).

- Open **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](manage-paywall-ui-elements#alignment) 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](#show-iphone-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**](builder-save-publish#publish-a-flow) button, and click it.

Your app receives the latest published version the next time it requests a [placement](placements) 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](copy-flows) to create the Duo flow.
2. Adjust the copy for [both displays](#design-one-layout-to-fit-both-displays). Then [publish it](builder-save-publish#publish-a-flow).
3. [Create a segment](segments#creation) with the **Device** attribute set to **iPhone Duo**.
4. In the placement that serves the main flow, [add an audience](add-audience-paywall-ab-test) with the Duo segment and the Duo flow.
5. If another audience in the placement can also match Duo users, [raise the priority](change-audience-priority) of the Duo audience above it.

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