SafeAreaView — 安全域とは何か、React Native での Safe Area レイアウト

SafeAreaView とは何か?

SafeAreaView は、システムインターフェース要素（ステータスバー、Notch、Dynamic Island、システムナビゲーションバー）によってコンテンツが重ならないように、自動的に内部パディングを追加する React Native コンポーネントです。このコンポーネントは React Native 0.50 で iOS 向けに登場し、後に Android に拡張されました。

iOS では、SafeAreaView は iOS 11 (2017) で導入されたネイティブの UIView.safeAreaInsets を使用します。Android では、コンポーネントは WindowInsets — Android 5.0 (API 21) 以降利用可能なシステムインセットを考慮します。Apple (2026) によると、アクティブな iPhone の 92% がノッチまたは Dynamic Island を備えています。

Safe Area が必要な理由

Safe Area の概念は、Apple HIG（Human Interface Guidelines）の推奨の一部です。iPhone X (2017) 以前は、画面のすべての領域が安全でした。Notch の登場により、Apple はコンテンツを配置すべきでない領域を定義しました: カメラの切り込み、時計とバッテリー表示、ホームインジケーターです。Android は 2018 年のノッチ付きディスプレイの登場に伴い、同様の概念を導入しました。

iOS および Android での Safe Area の仕組み

iOS では、SafeAreaView がネイティブのレイアウトガイドから safeAreaInsets を読み取ります。上部のインセットにはステータスバーの高さ（通常、Notch ありの iPhone では 44 または 50 ポイント）が含まれます。下部のインセットは、ホームインジケーターの 34 ポイントです。Android は WindowInsets — ステータスバーの上部インセットとシステムナビゲーションの下部インセットを使用します。

重要: SafeAreaView は自動的にパディングを適用しますが、ルートコンテナにのみ適用されます。ネストされたコンポーネントは保護されません — 各画面に独自の SafeAreaView が必要です。モーダルウィンドウや BottomSheet の場合は、インセットを別途考慮してください。

Notch、Dynamic Island およびシステムバー

Notch は、画面上部にあるカメラとセンサーを含むハードウェアの切り込みです。iPhone X (2017) で登場しました。Dynamic Island は、iPhone 14 Pro 以降のソフトウェアハードウェア領域であり、Notch を可変要素で置き換えます。どちらも 50-56 pt の上部インセットが必要です。

Android では、ノッチにはいくつかの形態があります: 涙形、パンチホール、カメラの下のストリップです。Android の SafeAreaView は、ノッチの形状を考慮した WindowInsets を使用します。ランドスケープ向けアプリでは、コンテンツがシステム要素と重ならないよう、侧部インセットが追加されます。

import React from 'react';
import { SafeAreaView, View, Text } from 'react-native';

const App = () => (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={styles.content}>
      <Text>Content is safe from Notch and system bars</Text>
    </View>
  </SafeAreaView>
);

Edge-to-edge アプローチ (Android 15+) は、システムバーの下にコンテンツを描くことを推奨しますが、可変要素にはインセットを考慮します。SafeAreaView はこのバランスを維持するのに役立ちます: 背景はバーの下に描かれ、ボタンとテキストは安全ゾーンに留まります。

SafeAreaView の使用法と代替案

SafeAreaView は、コンテンツを保護する最も簡単な方法ですが、常に柔軟とは限りません。このコンポーネントは全ての端に同じパディングを適用するため、端によって異なるパディングが必要な場合は不便です。例えば、侧部のパディングが不要な一方、下部のパディングがボタンのためにのみ必要な場合があります。

主な代替案: react-native-safe-area-context の useSafeAreaInsets (最も柔軟な解決策)、Android の StatusBar.currentHeight、デバイスモデルを手動確認する Platform.OS。複雑な場合は、全体のコンテナに SafeAreaView、個々の要素に useSafeAreaInsets を組み合わせて使用してください。

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

const CustomHeader = () => {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ paddingTop: insets.top }}>
      <Header />
    </View>
  );
};

react-native-safe-area-context ライブラリは、React Native で Safe Area を扱うための事実上の標準です。Expo、React Navigation、大多数の UI キットがサポートしています。関数的アプローチとクラスベースのアプローチの両方に対して、hook および Consumer コンポーネントの両方を提供します。

完全制御のための react-native-safe-area-context

react-native-safe-area-context は、ビルトインの SafeAreaView よりも柔軟な API を提供するライブラリです。主な利点は、useSafeAreaInsets フックを介して個々のインセット値 (top、bottom、left、right) にアクセスできることです。これにより、インセットを選択的に適用できます。

また、ライブラリは SafeAreaProvider — アプリケーションの最上位レベルで必須のコンポーネントを提供します。画面を回転シタイムやキーボードを開く際に、システムのインセット変更にサブスクライブします。React Navigation はデフォルトでこのライブラリを使用しています。

react-native-safe-area-context の SafeAreaView はビルトインと異なります: より多くのデバイスで動作し、インセット変更のアニメーションをサポートします。新規プロジェクトでは、このライブラリを依存関係としてインストールし、ビルトインの代わりにこちらの SafeAreaView を使用することをおすすめします。

SafeAreaView 使用時の一般的な誤り

SafeAreaView は、よく間違った使いかたをされます。まず、すべてのコンポーネントを SafeAreaView で囲むことで、重複のパディングが生じます。ルール: 画面のルート View に 1 つの SafeAreaView です。ネストされたコンポーネントは、Flex レイアウトを通じてインセットを継承します。

二つ目は、Android を無視することです。Android では、SafeAreaView は OS バージョンによって異なる可能性のある WindowInsets を使用します。Android 15+ では、システムバーが透明になり、インセットが変わる可能性があります。必ず実機で SafeAreaView をテストし、エミュレータだけでは行わないでください。

三つ目は、ハードコードされたパディングです。Platform.OS === 'ios' ? 44 : 24 を使用しないでください — インセット値はモデルや OS バージョンによって異なります。常にシステム API を使用してください: safeAreaInsets または useSafeAreaInsets です。iPhone 15 Pro の Dynamic Island は、iPhone X の Notch とは異なるインセットを持ちます。