Expo アプリを iPhone Duo に対応させる

2026年10月23日に、Apple の折りたたみ iPhone「iPhone Duo」が出ました。2027年4月から、App Store に出すアプリは Duo への備えが必要になります。

Expo で作ったアプリを題材に、何が必須なのかを公式の情報で確かめ、Duo のシミュレーターで開いて崩れた所を直しました（実機では試していません）。直した画面の対応前と対応後の例です。

閉じた形（iOS 27.1 SDK でビルド）。赤い枠は対応前に崩れていた所

開いた形と Split View（iOS 27.1 SDK でビルド）

この記事の要点

iPhone Duo の画面

Duo には画面が2つあります。閉じると外側の画面を、開くと内側の画面を使い、半分開いた形でも内側の画面を使います。

iOS 27.1 SDK でビルドし、この記事のとおりに直したあとの画面。画面の大きさ（インチ）は Apple Newsroom による

開くと内側の画面は横長になり、本体を90度回せば縦長でも使えます。時計と電波を出すステータスバーは、閉じた形と開いて横長のときは画面の右端に縦に出て、縦長のときはふつうの iPhone と同じく上に出ます（図の青い破線）。

iOS 27.1 SDK でビルドすると、右端のステータスバーの下に、タブを切り替えるタブバーや、戻るなどのボタンを並べたツールバーも縦に並びます。このステータスバーと縦のバーが並ぶ列を、Expo のブログにならって「レール」と呼びます。図では赤い破線で囲んでいます。

開いた画面では、2つのアプリを左右に並べる Split View も使えます。左側に置いたアプリでは、レールが左端に来ます。左端のレールにはステータスバーは出ず、縦のタブバーやツールバーだけが並びます。

iOS 27.1 SDK でビルドし、この記事のとおりに直したあとの画面

2027年4月から求められること

iOS 27 SDK でのビルド

Starting April 2027, apps and games uploaded to App Store Connect need to meet the following minimum requirements:

• iOS and iPadOS apps must be built with the iOS 27 & iPadOS 27 SDK or later

出典：Apple Developer のお知らせ（2026年9月9日）

Duo のスクリーンショット

Starting April 2027, any apps or games submitted will need to include screenshots for iPhone Duo.

出典：Apple Developer のお知らせ（2026年10月5日）

スクリーンショットの仕様の寸法は、外側の画面が 1398×2034、内側の画面が開いた横長で 2853×2007（縦長なら 2007×2853）です。

実際にやったこと

1. Duo のシミュレーターを用意する

Duo のシミュレーターは Xcode 27.1 に入っていて、Xcode 27.1 には macOS 26.6 以上が要ります（Xcode の動作条件）。

Xcode 27.1 では、Simulator.app の代わりに DeviceHub がシミュレーターの画面を出します。開く・閉じるは simctl には見当たらず、DeviceHub のウインドウの下のボタンで切り替えます。この記事では図に添えた日本語の名前で呼びます。

2. iOS 26 SDK のビルドのまま開く

まずは何も変えず、Xcode 26.6（iOS 26.5 SDK）で作ったビルドを simctl install で入れて開きました。

閉じた（外側）	開いた（内側）	半分開いた（内側）

どの形でもステータスバーとは重ならず、Apple の説明どおりでした。ただ、半分開いた形ではアプリが真ん中ではなく右に寄りました。準備ガイドには、半分開いた形での見え方は書かれていません。

3. Expo SDK 58 に上げて Xcode 27.1 でビルドする

Expo は、Duo には SDK 58 と Xcode 27.1 が要るとしています。

Duo に向けて直さずに SDK を上げ、Xcode 27.1 でビルドしたのが次の画面です。

閉じた（外側）	開いた（内側）

半分開いた形は、どの画面も開いた形と同じ見え方だったので省きました。

どの形でもアプリが画面いっぱいに広がり、右上の「スキップ」がステータスバーの下に入ってしまいました。iOS 27.1 SDK 以降のビルドは画面全体を使う、という準備ガイドの説明どおりです。

このアプリは app.json の "orientation" で縦向きだけに設定しています。iOS 26.5 SDK のビルドでは、開いても縦長のまま真ん中に出ました。iOS 27.1 SDK のビルドでは、横に広い画面で表示されました。iOS 27 SDK 以降のビルドでは、Duo の内側の画面で縦向きだけの設定が守られません。縦向きだけのアプリでも、横に広い画面で崩れないかを確かめる必要があります。

アプリの画面を一通り見る

主な画面を、閉じた・開いた・半分開いたの3つの形と、開いた画面の Split View で見ました。見つかったのは次の4つです。

閉じた形

開いた形

Split View

1. 最初の案内の「スキップ」や一覧の枚数のチップが、右上のステータスバーの下に入ってしまいました。スキップを押すと、アプリではなく iOS のコントロールセンターが開きます。
2. 一覧ではカードの右端が縦のタブバーの下に、詳細画面では行の右端がツールバーのボタンの下に入ってしまいました。
3. 写真の上の暗い帯（SVG のグラデーション）が、開いて幅が変わっても描き直されませんでした。
4. Split View で左側に置くと、詳細画面で、左端に縦に並んだツールバーのボタンが日付や見出しに重なってしまいました。

4. Duo に合わせて直す

「アプリの画面を一通り見る」で見つけた4つを、次のように直しました。

1と2の直し方：左右の安全領域のぶん余白を足す

iOS は、ステータスバーや画面の下の横棒（ホームインジケーター）など、画面の端に自分の表示を出します。その表示のぶんの幅を、上下左右それぞれ「安全領域」（safe area）としてアプリに教えてくれます。ボタンや文字をこの幅より内側に置けば、システムの表示に隠れません。React Native では useSafeAreaInsets() で読めます。

Duo のシミュレーターで useSafeAreaInsets() を調べると、閉じた形でも開いた形でも右が 84、上は 0 でした。右の 84 は最初の図のレールのぶんです。閉じた形では下が 34 で、これはホームインジケーターのぶんです。

この値のぶん、文字やボタンを並べる View に左右の余白を足し、背景や写真はレールの下まで表示したままにします。Expo のブログが勧めているやり方です。

import { useSafeAreaInsets } from "react-native-safe-area-context";

// 画面のふだんの左右の余白（base）に、安全領域の値を足す。ふつうの iPhone の縦向きでは 0
export function useSidePadding(base = 0) {
  const { left, right } = useSafeAreaInsets();
  return { paddingLeft: base + left, paddingRight: base + right };
}

// 一覧：カードの列にだけ余白を足す。スクロールの範囲と背景は端まで
const side = useSidePadding(space.screenX);
<FlatList contentContainerStyle={[s.content, side]} />

直す前（左）と直したあと（右）です。

一覧（閉じた形）：枚数のチップ（問題1）と保存のボタン（問題2）が見えるようになりました。

詳細画面（閉じた形）：行の右端の「›」が、レールの戻るボタンに隠れなくなりました（問題2）。写真は右端まで表示したままです。

3の直し方：SVG のグラデーションを CSS に置き換える

写真の上に文字を載せるための暗い帯を、react-native-svg のグラデーションで描いていました。閉じた形で画面を出してから本体を開くと、帯が左の半分ほどにしか掛かりません。掛かっている幅は閉じた形の画面の幅とほぼ同じで、幅が変わっても SVG が描き直されていないようです。このアプリは縦向きだけなので、ふつうの iPhone では表示中に幅が変わらず、これまで出なかった崩れです。

ほかの画面ですでに使っていた CSS のグラデーション（experimental_backgroundImage）に置き換えて直りました。

fade: {
  experimental_backgroundImage:
    "linear-gradient(180deg, rgba(22,23,28,0) 0%, rgba(22,23,28,0.66) 100%)",
},

一覧（開いた形）の直す前（左）と直したあと（右）です。暗い帯がカードの幅いっぱいに掛かります。

4の直し方：安全領域を画面ごとに測る

Split View の左側に詳細画面を置くと、1と2の直し方をしたあとも、日付や見出しが左端のレールに重なってしまいました。この画面では useSafeAreaInsets() の左が 0 で、レールのぶんが入っていなかったためです。

react-native-safe-area-context のドキュメントには、react-native-screens を使うときは画面ごとにも SafeAreaProvider を置く必要がある場合がある、と書かれています。Expo Router の Stack は react-native-screens で画面を作っているので、これに当たります。そこで、画面を1つずつ SafeAreaProvider で包んで測り直すようにしました。すると左にレールのぶんの 84 が入ったので、1と2と同じように余白を足して直しました。

最後に

2027年4月より前に、Duo のシミュレーターで次の4つを見ておくと安心です。

• 閉じた形と開いた形で、レールの下にボタンや文字が隠れていないか
• 開いたり閉じたりして幅が変わっても、表示が描き直されるか
• 縦向きだけのアプリでも、横に広い画面で崩れていないか
• Split View の左側に置いたとき、左端のレールの下に隠れていないか

横向きへの対応や、広い画面を活かした並べ方（一覧を2列にするなど）は、レイアウトの作り直しになるので見送りました。

1つのアプリでの実例ですが、どこを見ればよいかの手がかりになればうれしいです。

iPhone Duo の本体の画像は Apple の Design Resources のもので、利用は同ライセンスに従います。

Discussion