React NativeのSafeAreaViewとは？重要性と使い方を具体例で解説

SafeAreaViewとは？

React NativeのSafeAreaViewは、デバイスの「セーフエリア」と呼ばれる安全な表示領域内にコンテンツを表示するためのコンポーネントです。

iPhoneなどのiOSデバイスには、ステータスバーやノッチ（画面上部の切り欠き）、ホームインジケーターといったシステムUIが存在します。通常のViewコンポーネントだけでは、コンテンツがこれらのUI要素と重なって表示され、見栄えや操作性が損なわれることがあります。SafeAreaViewを使えば、必要なパディングが自動的に追加され、ナビゲーションバー・ツールバー・タブバーなどにコンテンツが隠れる心配もありません。

なお、このコンポーネントはiOSデバイス向けに提供されており、Android環境では通常のViewとして動作します。

ここからは、具体的なコード例をもとに、SafeAreaViewを使用するメリットを見ていきましょう。

例1：通常のViewコンポーネントを使用した場合

まずは、「Welcome To Tutorialspoint!」というテキストを、通常のViewコンポーネントで表示する例です。

以下のコードでは、Viewコンポーネントにflex: 1のスタイルを適用し、その中にTextコンポーネントを配置しています。

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

const App = () => {
    return (
        <View style={styles.container}>
            <Text style={{ color:'red', fontSize:'30'}}>Welcome To Tutorialspoint!</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
});

export default App;

出力結果

実行してみると、テキストが画面の最上部、つまりステータスバーと重なって表示されてしまうことが確認できます。これは実用的なアプリとしては好ましくない状態です。

例2：SafeAreaViewを使用した場合

次に、同じコードのView部分をSafeAreaViewに置き換えてみます。

SafeAreaViewを使用するには、react-nativeから次のようにインポートします。

import { SafeAreaView } from 'react-native';

コード全体は以下の通りです。

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

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={{ color:'red', fontSize:'30'}}>Welcome To Tutorialspoint!</Text>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
});

export default App;

出力結果

実行すると、Textコンポーネントの周囲に適切な余白（パディング）が自動的に追加され、テキストがステータスバーと重ならなくなっていることがわかります。たった一行コンポーネントを変えるだけで、レイアウトの問題を解消できるのがSafeAreaViewの強みです。

まとめ

SafeAreaViewを利用することで、ノッチ付きデバイスでもコンテンツがシステムUIと重なることなく、美しく安全に表示できます。特にiOSアプリ開発においては、画面レイアウトの崩れを防ぐ基本的な手法として、ぜひ積極的に活用してください。